CSS Wrapped
Ringkasan Episode
Bantu KoreksiEpisode ini membahas CSS Wrapped 2025, yaitu rekapitulasi fitur-fitur CSS dan UI baru yang hadir di Google Chrome sepanjang tahun 2025. Ivan dan Eka membahas satu per satu fitur yang dikategorikan menjadi tiga bagian: Customizable Components, Next Gen Interaction, dan Optimized Ergonomics. Diskusi dimulai dengan cerita tentang event offline Ngobrolin WEB di Jogja bersama DomaiNesia, sebelum masuk ke pembahasan teknis tentang invoker commands, dialog light dismiss, popover API, dan berbagai fitur CSS baru lainnya. Tema CSS Wrapped tahun ini adalah "Sculpt a Dynamic Web" dengan visual Play-Doh yang menggambarkan CSS sebagai building blocks yang bisa dibentuk sesuai kebutuhan. Episode ini cocok untuk developer yang ingin mengetahui fitur-fitur CSS terbaru yang sudah bisa digunakan di browser modern, serta memahami perbedaan antara dialog dan popover.
Poin-poin Utama
- •CSS Wrapped 2025 dibagi menjadi 3 kategori: Customizable Components, Next Gen Interaction, dan Optimized Ergonomics
- •Invoker Commands memungkinkan membuka modal/dialog tanpa JavaScript, cukup dengan atribut HTML command dan commandfor
- •Dialog dan Popover memiliki behavior berbeda: Dialog bersifat blocking dan butuh user decision, Popover bisa di-dismiss dengan klik di luar
- •Light Dismiss feature memungkinkan dialog ditutup dengan tombol Escape atau back button di mobile
- •Fitur-fitur baru ini meningkatkan Developer Experience (DX) dengan mengurangi kebutuhan JavaScript untuk interaksi UI dasar
- •Beberapa fitur sudah di-support Firefox tapi Safari masih tertinggal (belum Baseline)
- •Google Chrome DevRel membuat CSS Wrapped sebagai program tahunan untuk highlight fitur CSS/UI baru
[musik]
Dapatkan hanya di Domenecia
[musik]
Halo, halo, halo, selamat malam
Halo, halo, halo
Gimana kabarnya semuanya?
Kita masih kurang satu nih ya panelisnya
Mana kemana Ivan?
Portrait, landscape, dua-duanya
Landscape, yang portraitnya dihapus
Sudah cukup ya kita eksperimen ya
Mudah-mudahan teman-teman yang diportrait
Sekarang sudah berpindah ke landscape aja
Supaya layarnya kelihatan lebih besar ya
Halo Gilbert
Gimana kabarnya Surabaya?
Apakah sudah hujatan di link ini sudah selesai belum?
Ya ampun, enggak lah sudah sukses kan
Sudah selesai semua acara
Sudah selesai ya
Deves, gimana Deves?
Seru nggak Deves?
Jogja, eh Jogja
Surabaya ya, Surabaya
Kemarin kita ke Jogja
Deves Jogja seru dong
Deves Jogja seru
Deves, Surabaya harus seru
Bisa dengan Ivan
Kali ini di Jogja saya jadi penonton
Lihat transkrip lengkap (2608 segmen lagi)
Enak juga
Enak ya, aman ya Surabaya
Oh boleh, dengan tenang hati kita kembali ke Surabaya
Boleh-boleh, asal waktunya pas saja
Wah Ivan kemana Ivan, nggak ada kabarnya Ivan
Jangan-jangan sih di Jogja belum balik Jakarta
Enggak ya, kalian balik bareng nggak sih?
Bareng lah, satu pesawat
Ya keren kayak gue kemarin pas di Bali nyangkut sampai ke Miss
Oh extent ya
Jalan-jalan dulu
Sambil menunggu mungkin
Buat teman-teman yang mau nyobain layanan hosting
Bisa cobain dominasi ya
Bisa pake promo ngobrolin WebDN
Terus juga bisa dapat diskon 10% untuk pake web hosting
Berlaku untuk siklus 1 atau 2 tahun
Nah buat yang mau cobain VPS, virtual private server
Ada diskon 50%, lebih gede lagi ya
Diskon 50% pakai promo code nya ngobrolin VPSDN
Kayak di bawah
Kodo promo ini bisa dipake lebih dari satu kali
Di akun yang sama, jadi nggak perlu ganti-ganti bikin akun baru ya
Langsung pake aja, cek ke domenisia.com pake kodoko cernya
Sekali lagi terima kasih buat Domensia yang sudah berkolaborasi dengan kita
Dan sudah membuatkan event yang keren banget ya, Sabtu kemarin
Ada yang hadir nggak disini ya, siapa yang hadir ya
Kemarin sih waktu kita tanya, ada satu orang ya
Ada satu orang yang sering menonton kita
Yang nonton
Nah satu orang itu nggak nonton sekarang mungkin
Oh iya, mungkin nggak nonton
Nah ini dia yang dicari hari ini
Kirain masih ketinggalan di Jogja
Kirain jalan-jalan dulu
Ayah, lagi nge-push, commit, terus lupa
Waduh
Kehidupan sehari-hari ya
Kalau nge-push udah kan, tinggal biarin si ICD aja sambil nontonin
Ada masalah
Maksudnya tadi ada
Oh tadi ada darurat
Darurat
Jadi ada fitur, sudah kerjakan
Besok mau dipake fiturnya
Terus udah gue bikin bagus-bagus
Habis kena quote review, dapat feedback
Ya gue nge-push dulu
Pas gue nge-push, terus lupa deh
Ada ngobrolin gue
Untung di ping
Di ping ya
Kalau nggak di ping udah bablas
Bablas ya, langsung tidur ya, langsung istirahat
Langsung lagim
Iya, jadi sabtu kemarin kita ngadain acara di kantornya Dominesia di Jogja
Apa namanya? Hub apa?
Deneva Hub
Ivana
Deneva
Deneva
Dominesia
Deneva Cloud
Deneva Cloud
Dominesia dan Deneva Cloud
Iya, makanya Deneva Cloud
Deneva Hub, maaf
Deneva Hub
Seru sih acaranya, walaupun
Fotonya mana dong, tunjukin dong fotonya
Foto?
Sudah dikasih foto-fotonya
Oh iya iya
Ada ya
Google fotonya kenapa?
Ada, bentar bentar
Ini ya
Di-hide dulu foto keluarga
Wih, ya TTA tuh
Kosong loh, kosong
Kenapa di album ya TTA ada foto keluarga?
Foto keluarga
Kan di Google fotonya Mas Riza ceritanya
Wih siapa tuh celana pendekan, kurang ajar
Nah ini nih orangnya nih
Ini foto kita bertiga ya
Iya
Ada Mas Zain juga
Ada Mas El
Tuh akhirnya saya bisa ketemu sama Mas El
Padahal sebelumnya udah podcast juga tapi online
Jadi ini sesi pertama khusus ngobrolin web ya
Ini hari Sabtu, jadi hari Minggu nya DevFest
Sabtu nya kita bela-belain
Datang ke Dominesia
Buat menyapa temen-temen di Dominesia apa
Komunitas di Jogja ya terutama ya
Dari Python, dari WordPress, dari mana lagi itu
Ada DevOps juga
Seru lah pokoknya, seru ya
Diskusinya mengalir ya
Diskusinya hangat Dom, mengalir
Sampai gak berasa tuh sejam kita yeping ya
Tahunya waktunya udah habis ya
Sampai di belakang udah begini-gini
Udah stop loh
Iya
Oke, cukup ya
Mudah-mudahan di kota-kota lain
Iya, di kota-kota lain misalkan kayak Surabaya ya
Bisa kita bikin pindarat
Makasar
Kita masih ada unfinished business ini di Makasar
Iya, Makasar ya
Makasar
Dalam kurung makan jodoh Makasar
Gue sama Eka udah makan pisang epe di Pantai Lo
Udah, gue juga udah
Teru
Tapi kan belum bertiga sekali Gus
Iya, belum bertiga
Kita foto di Pantai Lo itu, Pantai Lo
Pantai Lo, sorry
Oke, nah malam ini kita akan
Apa ya, review ya
Lebih ke review
Recapitulasi fitur-fitur CSS baru yang hadir di Google Chrome di tahun 2025
Ya namanya CSS Red
Ini kita gak ada?
Gak ada
Kenapa habis?
Udah, gini aja lah
Udah cukup karena terlalu ribet ya
Biar enak dilihat
Biar enak dilihat
Malah gak enak di dua-duanya
Iya
Ini agak agak sensitive ya kalau rap-rap ini
Biasa akhir tahun tuh ada Spotify Rap
Terus ada apa lagi ya
Tadi itu Spotify, abis itu YouTube Rap
Gitu
Google Photos
Sofa Score ada rap-nya
Itu paling gak masuk akal
Sofa Score?
Apa itu? Google Photos
Live Score
Oh Live Score
Live Score ada rap-nya
Itu paling aneh
Ya hati-hati ya tahun ini
Semua ada
Hati-hati tahun ini kalau mau rap ya
Karena nanti bisa-bisa down internet ya
Outflare Rap
Kena CSS Rap
Outflare Rap posting-nya Anda tuh
Anda down juga tapi di tahun ini
Mudah-mudahan ada yang bikin gak sih?
Outflare Rap gitu gak ada ya?
Berapa kali
Ada yang bikin ini kali ya?
Internet Down Rap
Kasusnya outflare pertama kan
Gara-gara rap kan
Jadi dia gak mau bikin rap
Trauma dia
Maksudnya ada yang bikin Outage Rap gak sih?
Si ini down, si ini down
Oh iya tahun ini kayaknya hampir semua ya
Kebagian ya
AWS ada, GTP ada ya
Bikin ah, bikin ah
Seru-seruan aja ntar gua bikin
Ya ya
Total berapa menit kamu down
Terus apa ada kasih grouping
Kamu tipe yang apain kalau internet
Kalau apa infrastructure-nya lagi down
Gue general pake nano banana aja
Gue list kan, gue pake nano banana
Bisa kali ya
Bisa
Hati-hati boncos ya
Ini degenerate pake nano banana gak?
Gambarnya
Pasti lah
Kayaknya enggak
Kayaknya enggak sih
Karena ada konsep
Kalo liat konsepnya ya
Gak, ini juga sini gak
Maksudnya ada hidden kayak
Kayak di bawah itu kan
Tutup kurung, buka kurung, tutup kurung tuh
Hmm, gini ya
Ya kan bisa di custom
Gitu ya
Tinggal promnya aja loh
Kita kurang pintar kayaknya
Kurang pintar ngepromnya ya
Ada hidden-hidden ini gak sih hidden
Ada hidden mark naik gak sih ini?
Gak ada ya?
Gak sih, kayaknya ini buatan manusia
Kalo tebakan saya sih
Tebakan saya sih manusia yang bikin
Tebakan saya, gak tau ya bener apa enggak
Ini kan kayak serial ya
Aset dan style-nya
Dibikin, kayak dikasih contoh
Kan sekarang bisa tuh
Oh iya, satu tema ya
Secara ini Google ya yang bikin
Jadi maksudnya, mereka kan ngerti banget manfaatinya
Jadi mereka kasih contoh-contoh
Ini kan sprinkles kan, ini kue ya temanya
Ya dikasih aja
Palet warnanya
Pake skema warna yang begini-gini
Temanya makanan
Ini contohnya kayak gini, ya dikasih contoh 1 atau 2
Dia suruh generate sisanya
Bukannya ada watermark ya
Kalo nanda-banana ya
Ya kan ini Google yang bikin
Di remove juga bisa
Emang boleh gitu
Tau sih, ini asal
Jadi
Jadi
Kalo nanti misalkan
I/O Extended atau
Event-event GDG lainnya
Melihat banyak slide
Yang menggunakan
Gemini nano banana
Terus
Seragam semua tuh
Tipenya kan mirip-mirip ya
Temanya ya
Ya kayak kartun-kartun gitu
Kecuali beneran mirip
Prompting banget
Bisa sih dikasih contohnya ya gitu
Itu generic ya
Anyway
Ini CSS Rap 2025
Setelah tahun lalu kita juga
Udah bahas yang 2004
CSS Rap itu
Adalah recap titulasi
Iya recap titulasi
Sama tadi kayak YouTube Rap
Spotify Rap, Sofa Score Rap
Ya ini
Setelah tahun fitur menarik apa
Yang bisa di highlight
Di bidang CSS dan UI
Sepanjang tahun ini
Ini tahunan ya
Ini kayak apa
Program
Tahunan dari
Chrome DevRel
Jadi ini emang punya
Google Chrome Cuma ya karena
CSS UI kan universal web
Ya bisa berlaku buat browser
Terlainya sebetulnya
Ini kalau sama 2022 ya
Kurang tahu sih iya kayaknya
Tapi kan ini sebenarnya
CSS yang
Fitur CSS baru yang
Muncul di 2025 untuk Chrome kan
Sebenarnya kan
Iya Chrome tapi kan ada juga
Yang udah jadi
Baseline di
Semua browser
Cuma ini spesifik untuk
Chrome karena ya yang bikin juga Google
Timnya Google Chrome kan
Iya inget gak
Gua bilang minggu lalu
Gua sedikit kecewa dengan 2025
Kenapa
Ntar dulu
Disimpen dulu
Disimpen dulu
Kita
Bahas mungkin bahas sedikit-sedikit ya
Satu persatu ya
Jadi tema tahun ini
Berarti lebih ke
Apa ya
Sculpt a dynamic web
Nggak tahu nih
Sesuai sama gambarnya
Atau nggak ya
Kalau tahun lalu kan
Ingat gak 2024
Kayak game petualangan ya
Ya petualangan betul
Jadi kayak apa sih bisa lewat udara
Bisa lewat apa laut
Bisa lewat apa jadi kayak journey gitu
Betul jadi perjalanan
Gitu ya
Nah kalau ini
Oh baru sadar
Tahun ini temanya
Jadi yang di atas itu orang-orang
Anya tau gak sih clay apa
Liling malam itu loh
Hah
Itu play doh play doh play doh
Nah brand-brandnya
Play doh
Ini temanya apa
Membentuk jadi apa CSS
Atau UI fitur-fitur CSS
Atau UI ini sebagai building block
Yang bisa kita tahu kan kalau apa
Liling malam itu play doh bisa kita
Bentuk-bentuk sendiri kita gabung
Kita combine sendiri
Kirain kue
Ya lanjut
Oh iya iya
Halo Wika
Jadi
Ada tiga ya
Seperti kemarin juga
Kemarin banyak ya
Ini ada tiga ya
Tiga kategori ya
Ada
Customizable
Komponen
Next Gen
Interaction dan Optimized
Ergonomics
Give you the clay
Functional styleable
Komponen oke
Jadi komponen-komponen yang
Tadinya mungkin agak susah
Diubah
Style nya
Harus menggunakan library
Atau JavaScript sekarang
Udah bisa contohnya
Dropdown
Popover, select
Popover
Modal ya
Kalau Next Gen Interaction
Ini berarti
Ini mungkin semakin view transition
Ya
Apa yang scrollable
Animation ya
Scrollable animation
Jadi ngasih mirip sama tahun lalu
Tapi ya mungkin fiturnya nambah
Sama apa ya ada improvement nya
Pasti
Terus yang Optimized Ergonomics
Ini lebih ke DX ya
Developer Experience
Lebih memudahkan kita
Menulis CSS
Kayaknya ada beberapa hal yang tadinya
Harus dengan JavaScript
Sekarang udah bisa CSS aja
Oke kita lihat satu-satu ya
Oh iya ini
Play Doh semua ya
Play Doh itu merek ya
Apa sih? Lillin
Lillin Lunak
Lillin Malam
Kok namanya Lillin Malam ya?
Gak pake
Lillin Malam sih
Malam aja namanya
Kok malam?
Iya
Bukan malam
Jadi kayak ada
Namanya kayak komonim ya
Iya arti berbeda
Oke
Ada 1, 2, 3, 4, ada 8
Ada 8 komponen
8 item
Yang pertama adalah invoker
Comment, invoker comment ini
Yang tadinya kita harus
Pakai JavaScript
Untuk membuka
Mbuka moda
Iya
Sekarang gak perlu, tinggal pakai comment for
Sama comment aja
Jadi dari sini
Gantinya ini
Dan yang amazing
Firefox support
Yang belum malah safari, Firefox kan
Kayak suka gak niat kan
Masih belum
Baseline, masih belum baseline
Ini udah jadi
Di luar chromium minimal udah ada
Satu yang adopt, itu kan kayak
Peer pressure bentar lagi ya safari
Mungkin bisa
Adopt juga
Jadi kalau gini
Ini kita bisa langsung
Dari HTML nya, pakai comment for
Sama comment
Javascript
Kalau label ini
Mirip sama patternnya
Kayak label for
Input di dalam label ya
Tapi ini harus ke ID ya
Terus ke ID nya itu
Harus disiapkan ID nya ya
ID elemennya
MyDialog nih ya
Harus sama
Comment nya showmodal
Berarti ini udah
Specifik ya, showmodal itu tujuannya adalah
Untuk ini ya
Ada fungsinya di Javascript nya juga ya
Tapi untuk close nya gimana?
Yang belum nya itu before dan after
Iya
Tapi maksudnya showmodal ini
Tulisan showmodal nya
Ini kan?
Javascript
API Javascript kan
Iya
Jadi ini fungsi yang
Sekarang diadopti jadi atribut
Element HTML
Jadi sekarang button jadi menerima
Atribut comment for
Sama comment
Kalau close nya
Hide model gitu aja
Hide popover
Coba liat ya
Close nya dimana nih
Itu yang di
Button nya punya
Atribut comment, value nya
Close comment sama dengan
Omen hide popover
Itu yang button kedua
Close ya
Nah
Satu dialog
Satu dialog, satu lagi popover
Itu beda elemen dong
Oh iya iya iya
Ini ya, button close ya
Iya
Comment close, berarti close aja
Comment for my dialog
Comment nya close
Ini kan? Diklik, dia akan hide
Apa beda dialog sama
Popover ya
Beda di, apa sih, kayak
Ada satu blocking, kayaknya dialog dia
Yang blocking, punya salah satu
Blocking, kayak butuh user
Decision, kalau satu
Kayak optional aja, dicuekin juga
Bisa
Oh iya itu ada
Ada runcing nya tuh
Ada runcing nya sedikit kalau popover
Ya, popover, udah gitu kalau popover
By default, kalau diklik
Diluar, dia akan hide
Kalau modal, diklik diluar dia
Tidak akan hide, by default ya
Ini bisa diatur sih sebenarnya
Dan ini, pengaruhnya ke accessibility
Juga ya, kalau misalnya orang pakai
Apalah, pakai keyboard
Tab navigation atau dan lain-lain
Itu kayak behavior nya, udah ada aturan
Aturannya sendiri kan
Misalnya dialog, apa behavior nya gimana
Popover gimana
Nah, ini udah di, ya
Udah di handle semua dari browser
Kalau kita pake
Window unlock, terus
Munculin dialog apa ya
Ketutup ga?
Kalau jaman dulu kan
Ada window unlock, terus ada alert
Tuh, ga jadi, apakah
Anda bener-bener ingin keluar dari halaman
Ini?
Enggak lah, alert
Yang apa
Yang ngeblock kan
Alert, kalau ini kan dia ga ngeblock
Apakah harga ram
Akan naik karena saya scribe
Enggak dong
Gara-gara AI, gara-gara AI yang dibutuhin
Buat bikin CSS
Terbaru
Bisa disambung-sambungin nih
Apa, LLM nya kan training data nya
Belum nyampe CSS yang baru ini nih
Jadi harus nge-search lulu
Harus nge-parsing ini dulu
Baru bisa nulis CSS yang baru, yang bagus
Oh, ini komen nya ya
Nah, ini tadi penjelasan nya
Yang kita bingungin nge-close gimana
Jadi ini apa, equivalent nya
Atau sama kayak JavaScript
Web API
Support offer, high pop offer
Sama total pop offer
Itu sudah jadi prototipe
Ini loh, prototipe function buat dia
Maksudnya sudah dibawa
Di dalam JS nya si element itu
Tapi cuma ada di browser ya
Hal ini ya, ga ada di node JS
Ya, ini kan di node JS
Gak bisa nge-close pop offer
Ada custom comment juga
Pake minus-minus
Bisa begitu
Tapi harus dibikin
Di handle
Event nya harus di handle
Kok bisa
Apakah bisa di web view
Ya, kalau web view nya sudah
Chrome sekian
Atau iOS sekian
Maksudnya Safari sekian
iOS belum bisa
Safari belum bisa
Jadi kalau di iOS
Biasanya web view itu telat
Tapi kalau di iOS, bukan web view pun
Tetep web, gitu
Masih ya
Oke, lanjut
Dialog light dismiss
Bringing a nice pop offer
API feature to dialog
Ini sama ya
Safari juga belum
Tapi ada itu loh, sekarang ada
Thumbs up tuh, kalau yang 2024
Gak ada thumbs up tuh
Ini ya
Kayak voting
Ada voting kalau suka, gitu
Oh, diambil dari sini
Masuk ke github
Github, iya
If you want this feature
Jadi kayak social engineering
Kalau kamu ingin
Loh, masih 2-3
Di-repress coba
Kita harus
Github issue nya
Masih telat
Udah, udah 2-5
Real time
Harus dibuild lagi
Bisa juga ya
Kalau kamu ingin feature ini tersedia di semua browser
Berilah issue ini
Thumbs up reaction
Close by attribute
Ini dialogue nya bisa pakai escape
Gak bisa
Oh ini ya
Nah
Close by ini ya, ada itunya
Kalau ini gak bisa
Light dismiss itu apa sih?
Ya itu pakai escape atau
Semacamnya
Kalau keyboard, escape
Kalau HP, touch screen
Back button
Apa nih, snacks
Enak ya
Enak pop up itu pakai apa
Bagusnya, pop up
Pop up bagusnya
Pop up bagusnya pakai
Native browser
Kan udah ada
Gak usah pakai
Library yang lain lagi
Udah pakai ini aja tuh
Di-repress coba
Karena ini CSS biasa ya
Bisa di styling
Maksudnya gak usah takut
Tampilannya gila
Suruh aja AI nya
Di styling pakai
Hellwind, Shad, CN dan lain-lain
Oh iya, terus ngomong
Scroll ke atas dikit deh
Atas lagi yang tadi
Notification, maksudnya sneak notification itu apa ya?
Yang kayak gimana ya?
Gak tau
Toast ya, bukan toast ya
Atas lagi dikit
Atas lagi
Nah
Paragraf atas tuh
Ada sudo element
Titik 2 2 kali, titik 2 titik 2
Backdrop
Nah ini tuh hal yang simple
Tapi underrated banget
Kalau menurut gue, kayak dulu sebelum
Ada ini, kan kalau
Popupnya lagi kebuka
Biar belakangnya ketutupan
Tapi dikit kan, biasanya
Body titik 2 after, terus
Content titik 2 string
Kosong, terus position
Absolute, tau kan yang buat
Nutup seluruh layar, tapi opasitifnya
Separo, harus
Menutupi content
Layarnya, nah ini Z indexnya
Kayak harus dimainin
Tapi harus di bawahnya dialog, ya gak boleh
Menutupin dialognya juga kan, bayangin itu
Itu kan dulu semua harus manual ya
Harus bikin sendiri, nah
Kalau sekarang, ada backdrop
Ya tetap harus di styling sih
Cuma lebih gampang soal si indexnya udah
Di range dari browser
Kita tinggal ngestyling
Opacity backgroundnya
Nah, ya kalau
Ada yang belum tau, nah ini
Ada sudo element backdrop, dan dia otomatis
Muncul dan ilang, kalau dialognya
Ditutup, dia ilang sendiri
Yaitu, nah termasuk ini
Apa, dia nerima interaksi kan
By clicking outside of the popover
On the backdrop, ya kalau
Bisa di setting, biar kalau user ngeklik disitu
Dia nutup sendiri, jadi
Kalau dulu kan, udah harus bikin
Harus bikin sudo
Element sendiri, harus nerima
Apa, click event sendiri
Nah, sekarang tuh udah di handle
Semua dari browser
Ya, lanjut
Layar-layarnya harus manual, betul?
Kalau sekarang udah
Tapi gampang, gak perlu library juga ya
Popover hin
Ephemeral popover
That don't close readers
Ephemeral itu hidupnya singkat
Jadi cepet
Biasanya kalau button A ada popovernya
Button B juga, kalau B dibuka
A nutup otomatis
Kalau dulu kan harus di handle manual
Ini-ini-ini
Di bawah ada
Gua udah liat ini, di bawah ada
Oh iya
Popover hin
Yang di atas bukan hin
Itu popover biasa
Yang di bawah itu hin
Oh yang ini ya
Yang kayak, gue main ini ya
Jadi kalau kita keluar dari area-nya
Dia akan hilang ya
Kayak ini ya
Kayak ini ya
Kalau di
Tooltip, kayak tooltip
Nah
Kayak tooltip ya, tapi ini popover
Elemen, jadi bisa di styling
Bisa, ya itu elemen
Ephemeral elemen ya, jadi bisa
Di siapa saja, kalau tooltip kan cuma text kan
Ini ya, popover comments
Itu, ya
Betul
Popover comments
Tapi mana popover tooltipnya mana ya
Comment-nya dimana
Oh ini
Isinya ya
Bukan
Ini bukan
Isinya paling bawah
Di tempelnya pakai ID
Nah itu, kan pakai ID sama itu
Ada ID yang popover
Popover
Popover equal hin
Ininya
Itu yang membuat dia
Membuat dia jadi, kalau itu dihapus
Cuma dihapus, pasti nggak bisa
Muncul langsung ya
Gak bisa dihapus
Oh harus open di edit
Di toolcode pane
Yah, hilang deh
Ah, hilang apanya
Oh nggak, kebuka newtop
Ya bener
Ya bener maksudnya
Coba dihapus
Bawa-bawa
Ya itu, popover hin
Oh ini dia di bawah nih
Ya jadi deep biasa
Ini nggak
Oh bisa
Pakai, pakai
Gak pakai S, nggak pakai S
Ini bisa
Enak ya
Ya forgiving
Web technology itu forgiving
Salah-salah dikit bisa jalan
Popover
Whatever
Bisa nggak ya
Bisa
Oh
Editing truthy
Apapun yang truthy, dianggap sebagai popover
Bisa, tapi kalau hin kayaknya ada
Behavior khususnya deh
Kayaknya
Apa bedanya
Nggak tahu
MDN, CSS, popover
Attribute
Kayaknya
Ada CSS-nya deh
Itu yang mengatur
Itu yang popover itu
Opacity
Muz, sekarang jadi nggak ngerti loh
CSS yang baru ini kayak gimana, apalah
Artinya itu
Oke, lanjut
Ini
Kalau nggak salah topiknya
Pak Sandika Gali ya
Jadi select itu sekarang udah bisa di
Di bikin seperti ini
Tanpa harus menggunakan
Akal-akalan, montir, pakai
Diff, gitu ya
Sekarang udah bisa di-
Apa
Gua present di
IOX Jogja, pas sebelumnya
Pak Dika, jadi enak nyambung
Bahas ini, tapi sedikit
Tapi nggak sampai apa
Masing-masing kodenya
Nah, cuma apa
Detailnya di-present sama Pak Dika
Paling enak deh, kalau
Dapat piring yang kayak gitu
Nah, ini
Kalau dulu kita harus pakai Diff
Terus harus pakai JavaScript, mungkin ya
Pakai
Sementinya di-hide dulu
Iya
Sekarang, ini
HTML, CSS aja, option
Terus bisa ditaro image
Ada
Diff, bisa terima Diff juga dalamnya
Ini adalah select kan
Select
Tapi jangan seneng dulu
Jangan seneng dulu, baru Chromium
Jadi, apa, kalau teman-teman pengen
Ini ada di
Routerline juga, itu
Jangan lupa di-Thumbs up
Dijempolin
Safari belum
Firefox belum
Firefox belum, baru bisa di Chromium base ya
Chromium only, sayang sekali
Tapi, ini berguna banget loh
Sebetulnya, kan, misalnya aplikasi web
Apa sih yang nggak ada select-nya
Maksudnya, ini use case yang
Umum banget kan
React select, nggak bisa ya
Gini ya
Oh, nggak tahu
Ini bisa
React select, atau apa
Library JavaScript
Ya, bisa, kalau library JavaScript bisa aja
Kita bisa
Ya, kita bisa
Library, mengurangi
Risiko kena supply chain attack
Atau masalah-masalah
Security, aneh-aneh lainnya
Mengurang-urangi dependensi lah
Terhadap package yang lain
Itu juga cukup penting ya
Next
Carousel scroll affordance
With native CSS
Shadow element
Creating carousel and other
Scrolling experience in CSS
Become much easier with the introduction
Of two new shadow elements
Scroll button and scroll marker
This feature let you create native
Accessible and performant carousel
With just few lines of CSS
No JavaScript required
Mana satu
Ini bagus banget
Berguna banget kan, Del
Jadi, kita selama ini kan manual kan
Nge-check, misalnya carouselnya
10 item, yang muncul 3
Berarti kudu ada button-nya
Kalau udah di scroll kanan
Sampai abis, yang kiri diumpetin
Ya gitu lah, pokoknya kita harus
Bikin logic-nya semua sendiri
Ini ada 2
Ada 2 feature ini
Kalau scroll ke atas sedikit, yang tadi
Yang scroll
Scroll marker itu baru
Ini doang
Coba ya
Wait, ini bahkan
Di Chrome aja belum
Turun sedikit
Ya, ini belum ada semua
Ini masih scroll button
Ya
Yang satu lagi
Ya, scroll marker
Ada di Edge
Ini baru scroll button kan
Ada scroll marker
Edge sih, udah duluan
Kalau button belum ada sama sekali tadi
Berarti ini
Dorongannya si Edge ini
Bikin ini
Dari tahun lalu
Edge ini memisahkan diri
Dari Chromium base ya
Jadi dia nge-fork ya
Dia nge-fork Chromium
Tapi kalau dia ubah, dia push lagi
Upstream nggak ya
Tergantung si Chromium-nya mau nggak
Kalau
Kalau si
Edge-nya
Kalau si Chromium-nya update, dia ngambil
Oh gitu
Kayanya sih
Oh, kirain dia mau
Memisahkan diri bener-bener
Jadi lebih badiri
Dia tetap ambil forking juga
Makanya cepet juga kan dia
Update-nya
Kalau si Chromium udah bisa, dia ambil
Cuma yang ini kan
Kayanya si Chrom belum ini deh
Masih on the way kayaknya
Masih on the way ya
Nah, ngomong-ngomong Carousel
Coba buka demo Carousel deh
Overall
Ya, ini gabungan, kan sebenarnya Carousel
Gabungan dari banyak fitur ya
Cuma, kalau pengen liat
In practice bentuknya kayak gimana
Bisa tuh, liat di
Chrom.dev/carousel
Itu si mas Ninja
Sudah buka
Mana?
Mas Adam
Iya, makanya beliau yang bikin
Nah, ya
Coba horizontal cards
Itu bisa di scroll banyak
Banyak contoh-contohnya kan
Itu tadi scroll button, scroll marker
Di atas ada itu
Jadi yang ini tetap di tengah ya
Posisinya ya
Posisi yang mau kita
Pokoknya ada satu card
Yang ada di tengah
Itu ada
Cross scroll button
Coba
Di atas kan ada list
Di judul
Nggak, itu gak clickable sih
Cuma contoh
Cuma bilang ini pakai scroll button
Teknologi apa aja yang didemoin
Soalnya ya itu satu Carousel kan
Tertiri dari banyak fitur
Sebetulnya
Ini dia pakai
Scroll button, scroll marker
Scroll state queries
Tapi disini juga ada yang bagus nih dibawah sini
Yang keren
Nah, ini
Keren banget nih
Oh, ini yang gue lihat
Mas Dika ini
Kayak pernah lihat
Di presentasinya Pak Dika
Cakep ya
Itu yang panah-pana itu
Scroll different animation itu
Ini
Iya
No, JavaScript
Only CSS
Wow, JavaScriptnya kosong
JavaScriptnya kosong
CSS bro
Kalo kata Pak Dika kan
CSS bro
Oke, lanjut
Tiga lagi ya, scroll target group
Turn a list of anchor links
Into connected scroll markers
Apa ini
Tak mengerti saya
Ya, jadi kayak navigasinya
Dibisa
Designates an element
As a container for a group
Of navigation items
Jadi kayak ada navigation items
Tapi kalo dikasih
Scroll target group ini
Jadi bisa dipakai untuk
Mentarget si carousel itu
Gak harus di dalamnya, jadi keliatannya ya
The following example create a scroll spy highlighting
Where you are on the page in an overview
Or table of contents
Ini ada table of contents kan
Terus sectionnya ini
Ditujukan ke ID
Section 123
Terus
The following CSS create the scroll target group
Then starts the table of contents
Pasti kita semua pernah bikin deh
Nah, jadi kalo kita scroll dia
Merah sendiri
Kalo dulu kan harus pake
Intersection observer
Kita ngecek masing-masing section di web
Sudah bisa
Itu masing-masing dikasih intersection observer
Kalo muncul, nah terus si
Table of contents itu
Coba liat ini dong
Coba liat
Apa namanya
Coba liat sudah sampai mana ini
Gak ada ini
Gak ada baseline-nya
Belum ada baseline-nya
Di jempolin aja
Gak bisa dong
Gak ada, belum ada
Baseline-nya
Belum ada kan experimental kan
Di MDN-nya ada tulisannya tuh
This is experimental technology
Silahamah dong
Tapi suit-nya aja gak ada
Eh tapi di chrome udah bisa
Mungkin ada polyfill-nya
Ini kan chrome
Udah bisa
Dan ini HTML CSS doang
Ya kan
Coba edit one more time
Ya gue juga bisa sih ini
Ini, ini
Chrome 140
Chrome 140
Oh, ya ya ya
Oh iya, chrome sama
8 140
Udah bisa
Karena gue pernah bikin, gue lagi cari
Sontonya ya
Dan itu buatnya susah setengah mati bentar ya
Lanjut dulu deh, gue cari dulu
Aku juga pernah bikin
Yaitu tadi masing-masing dipasangin
Observer
Terus add/remove di
Class yang di kanan itu
Ya lanjut
Container queries aja kita belum bahas ya
Ini udah ada anchor-nya lagi
Iya
Ini cuma masih
Kayaknya bukan
Container query yang size tapi
Ada type khusus
Container type, titik 2, anchor
Jadi kelihatannya apa kalau kita pindah-pindah
Jadi itu
Ke anchor, ke parent-nya
Jadi gak perlu posisinya
Iya betul, yang tadi kayak Observer yang ini ya
Jadi dia yang nge-check
Itu susah
Susah banget
Kalau Observer manual
Iya saya pakai Observer
Udah gak nampak
Gimana tadi, potong
Anchor container query
Container type-nya anchor
Kalau ada
Fallback begini
Jadi itu kayak misalnya
Tool-tip
Tool-tip atau drop-down atau pop-over
Kan kadang kita gak tahu tuh
Harus ngebukanya ke bawah
Atau ke atas, kalau misalnya button
Trigger-nya pas lagi di bagian bawah
Nah user gue gak scroll ke bawah
Kan kalau nge-click
Harus ngebukanya ke atas
Kan biar gak ketutupan
Kalau dulu kan harus calculate pake Javastrip
Sekarang bisa pake itu
Menarik, ini ya
Ada, bisa pake ini juga ya
Tanda panah ke atas ke bawah gitu ya
Contohnya ini
Oh, otomatis dia turun
Ya makanya
Kalau dulu kan harus calculate
Harus ya apalah
Pasang Observer
Ini kalau kita scroll ke atas
Dia akan turun ke bawah
Karena nanti bisa gak kelihatan
Kalau di bawah juga sama
Tidak ada Javastrip
CSS Bro
Interest Invoker
Deklarative Interest Trigger UI
With Interest For
Ini masih limited
Berarti yang non-chromium
Belum bisa
Apa ini Interest Observer?
Interest Invoker
Ini tuh kayak
Kalau kita mau mouse over
Atau semacamnya
Itu dia udah ngebuka dulu
Oh
Jadi sebelum di-click
Iya
Tapi dia meneteksi sebelum di-click
Tapi kursor kita
Mendekati kayak 1%
Ada calculasinya sendiri
Menekati point-point itu
Dia udah ngebuka
Mirip Popover juga ya
Berarti ya
Jangan-jangan itu Popover
Callout
Iya itu Popover
Itu Popover
Tapi Interest For itu
Kayak memperkaya
Kayak fitur tambahan dari Popover
Iya kayak
Button Class
Button Class Info Point
Mana sih?
Terus dia manggil
Callout
1
Kita gak
Pasang Event Listener
Button On Mouse Over
Oh iya
Iya benar
Jadi gak perlu
Tapi hanya bisa buat
Mouse
Gak
Gak bisa buat
Ada itunya deh
Touchscreen bisa
Kalau udah kayak gini
Tapi belum up
Itu udah dianggap
Ngebuka juga
Gak ada yang bisa detect mata ya
Kalau mata sudah liat button itu
Tiba-tiba udah ngebuka
Oke selesai
Itu tadi bagian pertama
Custom Component
Sekarang masuk bagian kedua, ini ada 8 juga
Interaksi
Interaksi
Next Generation
Berikutnya
Pake Next dong
Yang pertama
Gak, pake Astro
Hahaha
Next Gen
Astro Gen
Interaction
Hahaha
Detergen kali
Hahaha
Scroll State Queries
Style Descendant Based On
Whatever Something Is Scrollable
Stack Or Snag
Container
Scroll State Queries
Ini juga
Masih Chromium Base
Yang pengen, oh 9
Sudah ada dari 1.33 ya
Oh
Dia otomatis ke tengah gitu
Iya
Coba ada contohnya gak dibawah tuh
Ada
Jadi kalau kita
Eh kok gak bisa
Pake ini, pake
Pake scrollnya ini mas
Ada gak, di mouse-nya ada scrollnya gak
Ada
Ini
Coba itu di quals
Wait
Itu ada centangnya tuh
Request topic at each
Nah
Coba di
Nah kan kalau gini kan
Kita gak bisa kan, di tengah-tengah sini gak bisa dia
Nempel di sini
Iya
Kalau kita mau di sini gak bisa
Mau di sini juga gak bisa nih
Oh
Oke
TML CSS
Gimana caranya
Dianandain ya
Ya
Tree counting
Function
Segregate animation
Segregate animation, apa tuh
Sibling index
Kita mencerna semua gitu
Iya
Terlalu banyak, ini coba bisa di shuffle
Apa sih maksudnya
Saya bingung
Ini animasinya satu-satu
Cuma dia apa
Nge-stagger 1234
Dulu kan harus manual
Misalnya yang pertama
Di delay-nya 0,2
Yang pertama item pertama 0
Item kedua 0,25
Delay-nya
Dulu kita yang tentuin sendiri ya
Dulu kan
Kita harus kasih index 1
Atau nth child
Dalam kurung 1, nth child
Dalam kurung 2
Terus sekarang gak
Lama-lama
CSS bisa
Bisa cyclic redundancy
Ini nanobanan nih
Iya
Ada tangganya
Jaman naik
Oke
Lanjut, scroll into view
Container
Sometimes scrolling only
The nearest ancestor scroll
Is all you want
Bukannya sudah ada scroll into view
Itu kan java script
Itu dia bisa gerak
Kalau ini dia gak geser ya
Snap ya berarti
Bukan, bukan
Up and down-nya gak gerak-gerak
Biar kalo pake mouse
Atau semacam yang enak ya
Gak sengaja
Kita nyampingnya gak perfect
Gak diagonal, gak sengaja turun ke bawah
Bukan, maksudnya kalo
Ini kan dia karena gak pake itu
Karena ada
Ada scroll into view-nya
Ada
Ada TLS
Angkor
Layout sieve ya
Bukan, ada angkor
Kan dia ada div-nya, kita klik itu kan
Si browser kan otomatis
Kita arahkan ke angkor link itu
Overflow-nya
Di dalam kotak div itu
Kalau ini
Kalo kita nyalain
Maka dia gak gerak
Pada saat kita klik ya
Iya
Nah, coba liat HTML-nya dulu
HTML
Coba liat
Ada div-nya pasti itu
Div class, carousel
Carousel, scroller
Slide
Image, slide
Itu class-class slide semua
Dibawahnya yang bulat-bulat ya
Ini
Omar, carousel
Tapi
Ya, sudah gak mengerti lagi
JSC ada gak sih?
Kayaknya ada
JSC itu buat
Iya
Iya, karena
Scroll into view itu
Akan membuat
Scroll into view itu akan
Membuat si
Apa namanya?
Browser itu akan menuju ke elemen itu kan
Kalo kita
Contohnya
Back to top, kan biasanya back to top itu
Scroll into view ke atas kan
Pake, gue sering pake
Scroll into view gitu soalnya
Nah, kalo kita pake
Scroll into view di marker itu
Ya, jadi dia gerak-gerak begitu
Lompat-lompat jadinya
Tapi, gue jarang pake
Jadi ini begini
Bukan buat carousel
Iya, ada aja yang mikirin
Okay, lanjut
Scroll to the specific slide
Lanjut
Ini buat nesting ya
Di grouping ya
Ini ahlinya
Gimana Eka, coba
Belum coba sih
Cuma intinya kayak
Kartnya tuh grouping itu kan
Biar kart ada animasinya sendiri
Image ada animasinya sendiri
Nah, cuma ini perubahnya apa gak tau
Oh, biar gambarnya gak
Gambarnya bisa di animate
Separately itu
Coba itu use nestednya itu dihapus
Nah, kalo gak nested
Gambarnya sempet ikut mular kali ya
Oh
Gak juga, apa bedanya
Gak
Kartnya, nah
Kartnya kayak
Kalau ini
Kartnya gede ya
Gede sebelah
Oh, maksudnya
Start sama finishnya tuh kayak
Apa
Ya bener gitu loh
Mulainya sampe abisnya tuh kayak
Apa gimana jelasinnya
Pokoknya lebih natural
At obnoxious 3D
Coba intinya di
Nestingnya dihilangin sama slowdownnya
Dihilangin
Kalo slowdown dihilangin mah gak kerasa
Saya bener bener bingung
"Without nested few transition group
The avatar and name
Do not rotate along
With the card
But when the option
Is checked, the 3D effect
Can be restored"
"Kalo gak pake nested
Avatar sama name tidak
Rotate bersama dengan card"
Oh, mungkin ini
Oh, di slowdown ya
Ini gak rotate
Gak rotate, iya kan
Gak rotate kan
Oh, jadi aneh ya
Kalau nested, gambarnya ikut
Rotate tuh
Oh
Ada bedanya
Oh, jadi
Walaupun card punya
Animasi sendiri
Foto punya animasi sendiri
Tapi dua-duanya bisa
Grouping sama-sama dirotate
Biar natural, maksudnya biar
Kayak disaapkan-akan itu
Satu animasi
Padahal gak
Good
"Dome state per serving move
Move iframe and video
Across the dome without
Reloading them"
Ya, ini
Gue udah pernah baca ini
Untuk Youtube nih kayaknya
Buat iklan sih
Ya, mau saya apapun sih
Mau iklan atau nonton
Video
Ini
Jadi coba di play
Terus di insert
Before
Di insert
Nah
Kalau insert before kan dia
Ke atas dia, ke atas
Reset kan
Ya, coba
Di play
Terus move
Move before yang sebelahnya
Masih play ya
Ya, iframe-nya tidak
Digenerate ulang
Oh
Gak dirender ulang, sorry
Dia cuma dipindahkan
Padahal downloadnya dipindahkan
Kalau dipindahkan biasanya kan itu
Sebenernya kayak bikin instance baru kan
Kayak bikin interwewe baru
Sekarang gak
Bisa inget ya
Tapi
Gunanya apa ya
Ya itu
Kalau lagi play video
Use scroll bisa pindah ke mana-mana
Sama kayak
Transition group
Kayak mau pindah page
Mungkin videonya masih ke bawah kali ya
Bisa jadi ya SPA
Mungkin
Ya
Sekarang Youtube juga gitu kan
Kalau misalnya kita lagi play video
Terus kita scroll
Ke bawah kan
Ada video rekomendasi
Kalau kita buka dari situ
Kalau kita balik ke feed
Kalau kita balik ke home
Video yang lagi di play itu
Masih kayak persisted gitu
Persistence masih ada di kanan bawah
Mempel dan masih main
Masih playing
Itu bukannya picture in picture ya
Beda ya
Emang itu picture in picture
Udah ganti halaman loh, ganti route
Gak tau
Iya, ngerti, ngerti
Dia ada di bawah, cuma
Dan itu custom UI
Ada misalnya kayak apa
Yang nempel di kanan bawah itu
Apa sih kayak ada
3.menunya Youtube yang bisa
Save to favorite atau apalah
Save to watch later
Jadi itu custom UI
Bukan picture in picture
Bawaan browser
Oke, lanjut
Kita lanjut
Ke bagian ketiga
Optimized Agronomics
Ada lebih banyak ya
Ada 9
Ini gue tau, ini banyakan mengenai
CSS function
Cuma gak tau apa gunanya saat ini
Ada attribute function
Beyond simple string
Ini kita pernah bahas kan nih
Pas lagi bahas unit
Ini untuk
Type safety
Mengenforce
Ini
Jadi maksudnya
Kalau si data color-nya
Value-nya gak valid sebagai color
Itu di ignore
Yang dibaca
Fullback-nya red
Oke
Kayak ada type systemnya ya
Jadi type-nya color gitu ya
What's that?
Custom Eden
None
Custom Identity
Finally, this demo
Show how to use attribute function
In multiple ways
Pursues data rating
To determine
A percent fill to visually
Fill the star mask
And representing the rating
Then use the same data attribute
In content property
To insert the value in shadow element
Jadi background
Linear, to right
Warnanya gold
Variable-nya percent fill
Transparent, far, percent fill
Disini
Oh bukan itu, ini ya percent fill
Itu adalah calculate
Attribute, data rating
Jadi ini nilainya 20%
20%
Ya
Nggak sih, 20% yang terakhir
Iya maksudnya
Total kan 100
Terus data rating-nya
Itu sebagai
Content, jadi ada 2 cara ya
Yang ini untuk mengitung
4,5
3, 3,5 ya
Bukan-bukan
Masukin di dalam gradient-nya
Sebagai argument
Ya disini kan
Iya, kalau buka
Coba liat buka HTML ya, kayaknya saya mengerti deh
Itu data
Data rating-nya
Attribute 4,5
Itu yang
Content 4,5 itu tinggal ditampilin
Terus tapi kalau bintangnya
Itu pakai
Itu tadi, yang percent fill itu
Ini ya
Iya
Coba aja ganti 10%
Oh nggak bisa disini ya
Iya
Ganti aja rating
Kalau rating-nya 5, 5x20%
Sama dengan 100% keisi
Kuning semua
Kalau 10% jadi separuhnya semua
Setengahnya
Menarik
Jadi bisa ini ya
Pake CSS
Apalagi pakai JS
Beginian, dulu kan pakai SVG ya
SVG, terus dikasih
Di
Apa namanya, dipake CSS juga sih
Temen SVG-nya yang di iniin
Dikalkulasi
Untuk nampilinnya
Oh, menarik deh
Kalau misalnya
Data rating-nya
Diganti pakai yang bukan angka
Tulis aja ABC gitu
Ya, dia nggak ngerender
Apa-apa
Ayo
Karena
Ada
Data type-nya ya
Data type-nya ya
Rumber to data to data
Data rating, type, number
Ya
Sama
Sebelumnya nggak bisa kayak gini
Karena kan kalau data atribut
Atribut apa
Dari elemen HTML apapun
Kan jadinya string kan
Data rating sama dengan
3.5 ya kan
Selama ini diterit sebagai string
3.5
Nah, kalau sekarang bisa di
Enforce
Slip itu kan number
Number prototype dan number class
Ya
Oke, lanjut
Sorry
Atribut ini sudah ada di mana aja tadi
Saya lupa
Di thumbs up dong
Thumbs up
Thumbs up aja semua nih
Sebenernya pengen
Semua kok
Hebat ya
Wait, wait
Ininya bagus lho
Back-forward cache-nya
Ya
Kalau yang ini nggak
Yang GitHub nggak
Tapi yang ini ya
Dia implement back-forward cache ini
Makanya begitu kita balik
Posisinya sama
Ya kalau dari awal posisinya udah betul
Dan tidak re-render
Di cache ya
Hebat memang
Mas Adam
Mas Adam atau
Mbak Una yang bikin
Kayaknya sih
Buatan mereka lah
Toggle event source
Find which element was
Responsible for toggling the target
Ini kecuali safari udah bisa
Padahal
Thumbs up-nya cuma 4
But
When a pop-up detail element
Get toggled it can be interesting
To know which element was responsible
For toggling it
Knowing accept cookie
Or reject cookie button to dismiss
A cookie banner is very important detail
Source attribute of toggle event
Let you know exactly that
As it contains
The element which trigger the event
To be fired if applicable
Sebelumnya bisa
Tapi pake event target
Source ya sama
Harus kayak manual
Source nya itu
Dikasih ID biar bisa dicek
Kalau ini otomatis ngebaca note elementnya
Ini cuma disini ya nih
Di command for cookie banner
Terus
Apa namanya
Di JS nya kita tinggal cari
Event
Source ya
Gimana sih bingung sendiri jadinya
Ya itu event dot source
Sama dengan button yes
Sama button no
Sebelumnya gak bisa ya
Sebelumnya kayak
DX nya panjang
Event dot target dot source
Gak bisa langsung
Ngecompare sama note elementnya
Jadi kayak harus ngecek ID nya
Jadi misalnya kalau dulu
Yes sama no itu masing-masing
Harus dikasih class atau ID
Masing-masing button
Ada event listener nya ya
Masing-masing button ya
Sebelumnya ya
Misalnya data attribute aja
Data action type
Sama dengan yes data action type
Sama dengan no
Di event listener nya
Ada event dot target dot source
Atau semacamnya
Bisa tapi ribet dulu
Intinya ini mempersingkat aja
Textbox features
Flawlessly center text
Vertically
Oh bisa di tengah-tengah gitu
Ya nih kalau kali ini
Baseline nya si firefox
Yang belum implement
Apa mani
Ya itu
Typography stuff
Dia di tengah-tengah ya
Ada ini sama yang dibawah
Maksudnya gimana sih
Ini yang ngerti orang yang
Ahli typography sih
Punya biar balance aja
Kan huruf ada yang
Kayak naik ke atas
Dan naik ke bawah
Coba G tambahin G
E kecil
Terus kalau
I, huruf I
Oke
Huruf apa lagi yang aneh
Nggak ada
Ya ini buat nge custom aja
Kayak naik turunnya
Ah ya tak terlalu ngerti
Oh buat si JK kali ya
Kalo
Kalo si JK kan mungkin
Bisa berlebih gitu kali ya
Bisa di adjust
Platin juga kok
Ya kan tergantung font nya
Masih ngasih font lain-lain
Jadi ini kayaknya biar bisa di custom aja
Ini kan
Text
Box kan
Ini text box kan
Kalo misalkan kita pilih text
Dia akan ke bawah
Ikutin text yang kita pakai ya
Terus edge nya diganti itu
Yang kiri deh, edge kan ada trim banget
Non, coba dari non dulu
Non
Kalo nggak diseti
Line height nya kan
Line spacing nya segitu
Nah terus coba aja ganti
Satu per satu star
Dia ke atas
Kalo n dia nipel ke bawah
Kalo bold di atas-bawah
Kalo bold ke tengah
Itu aja sih
Terus trim over nya juga
Bisa diatur
Ya ini typography stuff sih
X ini apa?
X itu huruf X
Nggak, literally huruf X
Kan kita bahaskan
Pas di CSS unit kemarin
Ke X itu
Karena huruf X itu
Patokan space ya
Patokan tengah-tengahnya huruf
Patokannya ya
Ini tengah-tengah ya
Huruf yang paling simetris
Bukannya
H, simetris
H besar
Ini, di atas dia
Iya kan, makanya H kan
Jadi contoh, H besar kan
Simetris juga
Ya, ini biasa sih
Yang ini, yang ini
Bisa, bisa, bisa
Bisa juga
Cuman kurang ke tengah
Kita nggak ada titik tengahnya nih
Kecuali X ya
Garis tengahnya, garis tengah
Oke
Lanjut, lanjut, lanjut
Shape function
Nah, ini udah nyobrol juga nih
Shape, shape, shape
Firefox belum
Yang nge-thumb up juga sedikit lagi
Jadi intinya
Tahu nggak sih, kalau majalah cetak
Majalah print, kalau CSS kan
Kalau float, bisa ngikutin
Misalnya ini, ada gambar kotak
Float, teksnya ngikut, tapi nggak nabrak
Image-nya ngikut di sekitarnya
Nah, sekarang ini bisa buat
Bentuk custom apapun
Pake polygon, Pak
Apa sih nih masanya?
Saya bingung
Yaitu jelasinnya susah punya
Behaviour-nya float, tahu nggak
Kalau ada image, image kan inline
Nah, terus di sekitarnya
Ada paragraf teks
Banyak teks blok
Bisa, bisa
Dia menggir
Teksnya otomatis menggir
Ngasi space untuk gambar itu sendiri
Yang misalnya gambarnya cuma 200 pixel
Tapi kan semua di CSS
Semua di browser adalah kotak
Jadi kan kalau pakai float, dia cuma bisa menggit
Ikutin, nyesuaikan bentuk
Untuk bentuk kotak, kan
Kalau ini, behavior yang kayak gitu
Seperti itu, cuma untuk
Bentuk custom apapun
Nah, bentuk custom-nya apa, ya itu
Terus shape-nya mana?
Shape
Function-nya, dipanggil di mana?
Oh, itu di atas, paling atas tadi
Itu kuebra, kuebra 2, shape
Shape, function
Kalau nggak pakai, jadi-nya gimana?
Coba edit
Ganti aja kelasnya, jadi
Jangan usah, play-nya biarin aja
Tapi kelasnya aja ganti
Oh, masking ya
Masking
Oh, jadi masking yang gue bilang itu
Shape outside, sorry
Ini sepasang soalnya, ada shape
Ada shape outside, yang dibahas di sini
Shape
Oh
Iya, iya
Jadi, dia bisa di
Shape-nya bisa
Bisa digambarlah ya
Image-nya mengikuti bentuk
Ini ya
Belokan-belokannya ya
Wah, kalau pakai hitung-hitungan
Ini susah ini, harusnya nanti
Ada tools ini, kayak kita
Ada generator, tadi ada link-nya
Ada, another example
Here uses a blob generator
Kalau tadi shape kan masking ke dalam
Kalau shape outside, keluar
Yang tadi gue bilang itu
Scroll aja ke bawah, sampai ada contohnya
Nah, itu-itu-itu, ya gitulah intinya
Dia bisa mengikuti bentuk topi
Sama bentuk orangnya
Wih
Keren
Tapi harus punya ini ya
Iya, sama kayak tadi
Ada polygon-nya
Cuma shape outside ya, sesuai namanya
Keluar, mempengaruhi elemen di luar
Kalau tadi yang shape doang, function shape
Apa? Kedalam masking
Oke
Ada nih blob generator-nya
Cek aja tuh
Nah, another example here uses blob generator
Oh, blob generator
Mereka main-mainin aja
Gitu
Bisa pakai CSS ya, ini CSS ya
CSS
Bungu
CSS, bro
CSS, kak
Oh, panggil eka
Iya
Hahaha
CSS
Ya, kalau sudah di CSS
Sudah, ini udah nggak usah dilihatin lagi
Ampe sama kayak
SPG ya
Tapi kayaknya lebih aman
Dari ini, daripada SPG
Gak bisa di CCP
SPG kan
Tidak begitu aman
Ada program-an
CSS adalah bahasa program-an
Ini ada blog-nya
Udah toren complete belum?
Kayaknya belum ada ini juga ya
While, atau looping-nya
Belum ada soalnya
Oh, iya belum
If
Semakin rumit ya
If kondisi 1, value 1
Kondisi 2, value 2
Else, callback
CSS, semakin rumit
Ternary operator ya
Flex Direction
If Medial Orientation, let's get
Pakai jadi row, else-nya column
Pertanyaannya, ini kalau
Detail Win
Detail Win Nice, itu gimana caranya ya?
Oh, dia ada mas Thanos
Kabur-kabur-kabur
Bye-bye
Terima kasih
Ini buat yang gak pake tailwind
Ya, suatu saatnya
Bakal ada yang
Detail Win Nice gitu, saya gak tahu ya
Bisa lah, tailwind kan ekosistem plugin-nya
Bagus kok, jadi kayak
Ada ifrifan-nya juga dia
Ada
Container query pun
Sebelum diintegrate ke
Tailwind core-nya kan, dibikin plugin
External dulu
Udah baseline, pas begitu
Newly baseline, ya diintegrate ke core-nya
Kan ada plugin ekosistemnya
Eh, sorry, ini ada
Pertanyaan kelewat nih
Mau tanya, apa perbedaan
Setiap posisi yang mana ya?
Tadi, yang mana ya?
Yang ini, atau yang mana?
Kelewat, gak kebaca
Posisi
Posisi popover
Atau apa nih? Mungkin dia
Nontonnya replay gitu
Boleh
Siapa nih, 32
Panky
Briana
Tolong dielaborasi lebih lanjut ya
Pertanyaannya posisi apa nih?
Kita lagi ngomongin CSS
Atribut apa?
Laman Vibe Coding
Terima kasih, Tailwind jadi lupa CSS
Ayo
Jangan lupa diaseh ya, otaknya ya
Minimal tahu ada fitur ini
Jadi pas Vibe Coding
Kita ngerti
Pas kita mecut AI
Kita merintahnya apa
Vibe Coding belum tahu dia beginian
Belum nyampe dia
Bisa disuruh belajar
Buka dulu CSS surep
Full calling
Di kasih linknya
Bisa itu sendiri
Ati-ati boncos
Tapi
Ya ditanggung sendiri
Plugin apa?
Ini CSS bro
Gak ada plug-in, ini vanilla CSS
Jadi gak pakai plug-in
Maksudnya tadi kali Tailwind ya
Kita kan bahas gimana kalau
Tadi konteksnya kan ifa nanya
Gimana kalau orang yang pakai Tailwind
Kalau mau pakai Tailwind
Terus pakai sinteks if gini
Kan sinteks baru ya ada fungsinya
If dalam kurung
Kita masukin argumen-argumennya
Itu mah di belakang layar
Maksudnya konteksnya
Itu usannya gimana
If apa kan jadi panjang banget
Klasnya Mila
Nah ya kalau panjang
Cuma tadi maksudnya jawabannya
Jawaban gue adalah
Bisa di handle pakai plug-in
Dicustomize aja
Masukin argumen-argumennya
Tapi iya pasti jelek banget klas namenya
Ini gak akan ke
Kayaknya gak akan ke
Expo sampai ke
Tailwindnya deh
Tailwind itu kan udah ada if-ifan
Secara tidak langsung udah ada if-ifan kan
Sebenarnya kan kayak misalkan
Landscape, MD, titik 2
Row gitu kan
Tapi itu bukan
If itu
Content and query
Media query itu
Bukan content and query
Media queries
Ya mungkin kalau content and query
Beda lagi ini ya kan
I don't know CQ
Cuma ecosystem tailwind itu
Kalau
Orang yang udah tenanjur
Apa fanatik tailwind banget
Kan apapun harus di tailwindin
Kayak gue bilang
Bakal ada deh yang bikin plug-innya
Ya plug-in eksternal, plug-in community
Cuma kalau ada atau nggak dan bisa
Atau nggak, yakin pasti ada yang
Bikin itu
Ya walaupun gak practical ya
Maksudnya bukan berarti
Harus dipake juga
Isinya 1 MDN
Iya, tokennya berapa itu?
Buka ini nya Mbak Una
Ini deh, yang if itu
Dimana ya
Ini nih if article
Gue ngebookmark ini buat
Davis kemarin
Cuma malah nggak present soalnya
Iya
Karena itu yang bagus dari Mbak Una
Ini kan teorinya
Ada contoh-contohnya
Di Mbak Una
Apa?
Paling practical itu tuh yang
Kan ban board yang dibawah
Oh ini dia
Mana if nya
Itu tadi atas
Scroll atas
If border color titik 2
If statusnya pending
Royal blue
If statusnya complete si green
Nah dia dapat data status dari mana
Dari atribut HTML
Apa markupnya
Itu di paling atas
Canggih kan
Harusnya work pressure nya, Mas Riza pakai kayak ginian
Kemarin
Kalau sentiment analysis
Beda fokus
Kan skill issue
Nggak bisa saya kayak gitu
Berarti bisa dikembangin lagi nih kalian
Bisa pakai if
Berarti bisa kita cek kalau dark mode
Oh bisa tame
Bisa rock gitu
Pakainya HSL
Pro
Pakainya HSL
Kalau untuk colornya
Sekarang
Hue, Saturation, Heart
Ya unik aja
Kan jarang lihat
Hue, Saturation, Lightness
Kita kan biasanya masih pakai RGB
RGB
Pakai TMY kah
TMY kah buat di print
Ya gitu pokoknya detail banget sih artikel ini
Waduh
Semakin skill issue ini
Kalau yang saya suka yang dari Mbak Una
Ada juga 5 useful CSS function
Nah ini bukan if doang berarti
Macam-macam
Iya
Oke lanjut ya
Lanjut dulu
Ini gimana
Oh
Kalau ini ya
Kalau
Eh mana dia
Hilang
Oh ini tuh
Kabur dia
Iya
Ini gak nge adjust
Oh bukan di sini
Itu pakai satu
Kan ada 1 kali, 2 kali itu tadi ada zoomnya mas
Di bawah mas
Oh iya, nah ini bisa nih
Eh salah
Kapet gede nya
Ini dia gede nya
Ini bukan yang sudah bisa pakai itu ya
Pakai
Media query aja
Bisa
Ini lebih singkat dari media query
Dia kan ngejelasin
Is more concise
Oh orientation
Orientation itu dari orientation ini ya
Orientation si device ya
Kalau kita lagi
Pake DevTools itu apa
Comment, Shift, M
Buat emulate
Yang ada orientationnya
Comment, Shift, M
Iya
Oke
Itu ada yang paling kanan
Iya
Orientation
Cuma ini iframe sih
Jadi dia gak ngikut ya gitu lah
Kalau bikin
Kalau bikin beneran
Ada apa aja
Function negation
Iya
Ini contoh, ini kayak recipe aja
Oke
Ini bisa dibikin kan
Function ini kan
Iya custom function
Sekarang kayak javascript aja kita bisa bikin function
By the way
Nanti ada custom function sih
Di paling bawah
Kita bahas terakhir aja ini
Oh terakhir
Oke
Lanjut ya, custom function
Di bawah ya ini
Cuma tadi
Apa, scroll ke atas dikit deh
Sebelum
Masuk ke stream
Baru chromium ya
Scroll atas lagi dikit
Atas lagi
Atas lagi
Atas lagi dikit
Dia ngebahas kok
Kan sebenernya udah bisa pake media query
Tapi kan kita harus kopas nama
Class name-nya kan
Gak dry lah
Bahkan pro misalnya
Target 3 misalnya
Mobile, tablet
Sama desktop kan
Biasanya 3 itu kan ada
Ada 3 block CSS kan
Kalau ini bisa di satu baris
Tunggu
Terus media query-nya kan seringnya biasanya
Di paling bawah tuh, nah terus kalau temen kita
Update ini
Nggak teliti, ngebahas class name-nya atau apa
Nanti lupa lagi, ngebahas class name yang di bawah
Nanti bikin lagi style baru
Nah itu kan
Kalau udah vibe coding, nggak bakalan lupa gitu
Vibe coding AI-nya juga halu
Nggak inget ya, apanya mempermudah lah
Custom function, lanjut
Custom function
Negate yang tadi ya
Iya, apalagi artinya negate
Negative value
Negative value
Conditional radius
Kondisinya pas apa nih?
Claim
Apply radius until you are
Coba di atas dikit
Wait, salah
Di bawah, ada kan codenya
Kecepetan
Nah itu di
Until you are
Default
But pixel
Or specify
Second argument from
The edge of your
Screen
Maksudnya
Oh jadi ilang ininya
Jadi ilang rounded corner-nya
Yes
Ya ampun
Dulu kayak gini-gini, style-nya harus
Banyak manual ketik
Ini tuh, mempermudah buat
Orang males sih
Ya
Ini kayak
Ini hari ini ilmunya kayak
Oh bisa begitu ya terus nggak pake
Habis itu, setahun kemudian
Kayaknya
Ada deh, coba-coba buka dulu
Ngobrolin web atau CSS web yang lalu
Baru bisa pake
Jadi ingatnya nanti
Ya ingatnya nanti tahun depan
Oh tahun depan udah baseline
Jadi bisa pake
Iya makanya sekarang dimasukin aja dulu
Oh bisa begitu, oh bisa begitu
Makanya nanti tahun depan
Ini gue tadinya, Deves pengen bawain ini
Cuma kayak, apa ya
Kayak kurang practical aja kalau belum baseline
Jadi akhirnya milih function lain
Yang udah baseline
Tadi sih custom function
Oh, mumpung masih ngomongin
Function, ini nih
Ada library, maksudnya ada
Buat ide, buat ide bagus juga sih nih
Buka di private chat deh
Dari mas yang produktif
Banget ini, mas husky
Sinder
Sinder source
Dan karena namanya susah
Nggak pernah inget namanya, cuma profitnya
Husky, jadi dalam hati kok
Menurutnya ini mas husky
Ya pokoknya ini cukup ngompo
Itu bukan husky
Malamut
Malamut kayaknya
Ya putih
Oh iya, ya itulah
Hancing kutub
Opacity
Negate, lerp, ini apa nih
Jadi inget sus nggak sih
Fluid type
Ya pokoknya, jadi
Kita nggak install pun nggak apa-apa
Tapi kalau misalnya kita butuh inspirasi
Function itu buat apa sih, ini helpful banget
Ini ya
Funksinya ada di sini nggak
Oh iya bener
Itu kopas
Kopas aja
Range
Ratio
Ini dia bikin satu-satu ya
Ya mungkin fivefolding
Ya nggak tahu, cuma ya buat
Inspirasi aja
Yang di sini untuk
Ya itu comparison tuh
Berapa, sampai berapa, sampai berapa
Oh
Oh bisa begitu
Ya jangan seneng dulu
Chromium only
Ya tapi bisa
Chromium only
Ini cocok buat ini ya
Ya cocok buat
Ini juga dong
Yang kayak bintang-bintang tadi bisa juga dong
Iya ya
Kalau tadi kan gradient ya, kalau ini
Custom, jadi misalnya kalau ratingnya
4-5
Itu kita nggak harus menarget satu-satu
Kita misalnya
Border nya ijo
Ya kayak aplikasinya
Workpreso mas Risa itu misalnya
Kalau ratingnya 3 abu-abu
Kalau di bawah 3
Itu merah misalnya
Merah, burung
Atau bisa juga kayak trending
Article, bisa tahu nggak ya
Trending artikel bisa di sidebar
Yang top 3 nya itu bisa warnanya
Gold, silver, bronze
Sisanya
Warna lain
Bisa juga kali ya digituin ya
Bisa
Besarkan data attribute
Sama ini buat
Kalau yang antar nya besar
Maksudnya kalau cuma top 3
1, 2, 3 gampang targetnya
Kalau ini kan rain-nya misalnya
Kalau hujan
Jadi biru atau jadi atas
Kalau chance of rain greater than
45%
Kalau menarget 46%,
47, 48
Apapun yang lebih besar dari 45%
Warnanya biru
Interesting
Wow
Once again tinggal tunggu detail win kan
Semua akan detail win
Next
Stretch sizing keyword
Make an element feel its containing block
Regardless of box sizing
Containing block
Hate, stretch
Hate, auto
Oh, di full 100
Benar-benar 100% ya
Iya
Coba kalau ini, kalau yang 100%
Tadi
Oh, 100%
Kena
VH
Oh, ini lebih
Terus ke bawah ya
Iya
Benar-benar full
Scroll bar nya di dalam
Oh, iya
Cocok bikin ini
Berarti ya, kayak SPA gitu
Yang benar-benar hanya aplikasi yang
Yang kita mau satu full screen kali ya
Kayak web app
Yang satu full screen kita nggak mau ada
Mereka scrolling-scrolling semuanya
Jadi screen nya benar-benar kayak aplikasi beneran
Kayak aplikasi native
Aplikasi native lah contohnya
Lanjut
Ini
Chromium ya, masih Chromium
Ini juga masih Chromium
Corner shape beyond rounded edges
This year CSS give us
More power, more control
Over the shape of our elements
Ada round, bevel, notch
Scoop, squirkel
Squirkel
Squirkel
Square, circle
Squirkel
Scoop apa? Scoop
Bevel
Oke
Notch
Square
Square nggak ngaruh ya
Iya
Ini border radius kan
Iya
Squirkel
Square by circle
Squirkel
Coba ditambah ini nya
Tambah radius nya
Nah disitu aja dia
Kalau dulu kan harus pakai sudo elemental
Buat di kiri kanan, tapi kan cuma before after
Harus ada 1 div 0
Buat atas bawah
Cape bener
Oke
Tuh bisa bikin kayak gitu tuh
Hahaha
Iya
Oke CSS
CSS bro
CSS bro
Ini apa?
Itu pakai itu
Marquee, Marquee
Marquee
Hahaha
Marquee
Marquee nih
Iya, kelasnya ya
Bukan elemennya
Hahaha
Loh elemen Marquee juga
Masih jalan kok sebetulnya
Masih
Oh udah habis oke
Habis
Gak ada mas Adamnya disitu ya
Boleh
Gak ada lah
Ya
Padahal
Layout ini semuanya masih kayak
Ceplakan dari 2024
Ininya
Komponennya
Semuanya sama
Ya emang
Itu kan kopas copy dari
2024 kali cuma di custom
Lagi
Ganti contents sama ganti
Design
Tapi nambah kan, ya kemarin gak ada ini 3 orang kan
Coba
Memang suka
Ini web
Sering kan dia
Gak tahu ya
Beliau itu
In charge ya web.dev
Cuma kelihatannya kan
Beliau lebih spesialis apa
Writing cara menyampaikannya
Ya mungkin
Dia kayak copy editor
Buat biar
Ini kan konsep-konsepnya aneh-aneh
Banyak gimana biar ringkas tapi jelas
Gak, jadi gimana temen-temen
CSS editor
CSS apa yang
Favoritnya temen-temen
Untuk 2025
Voting yang mana kalian suka
Ya usah voting itu
Mending voting topic
Banyak
Voting topic
Tapi ini baru bahas ini ada yang nanya
Ada yang nanya gak sih
Ada, ada
Ini pertanyaan apa pernyataan
Itu komentar
Tapi itu menarik juga sih
Kalau yang tertarik soal warna bisa tolong buka
Linknya di private chat
High definition CSS
Color, ya intinya
Color space itu
Mempengaruhi
Dimana warna ditampilkan
Terutama yang di monitornya janggih
Kalau monitornya
Kamu mending-mending
Ya mungkin gak kerasa
Jujur termasuk gue sendiri juga gak ngerasa
Bidanya sih, tapi sebetulnya
Emang itu kayak
Dengan color space yang beda
Kayak RGB, HSL, hex
Dan lain-lain
Itu kayak bisa ngehasilin
Warna yang beda, terutama kalau
Gradient, jadi itu kerasa banget
Sebetulnya
Tapi sebenarnya kalau awam
Kayak kita, kalau harus
Bedain
Yang itu banget gak terlalu kerasa sih
Tapi ya tetap ada bedanya tuh
Terutama kalau
Udah masuk kokong
Gak, gak ini ya
CSS ya
Skelisuh ya
Biar gantiin dong
Biar ini
Kalau warna, baca-baca sendiri aja
Kita pernah bahas
Warna secara mendetail
Kalah satu topik kita
Tahun lalu kayaknya
Iya
Oke
Kita
Kita, apa namanya, spotting
Minggu depan
Tanggal 23
Libur atau tetap
Tetap live
Kita rekaman aja
Rekaman atau libur
Libur aja, libur
Kita aturlah nanti
Kita
Diumumkan di waktu
Kayaknya
2-3 libur
Kayaknya 2-3
Lebur, mendingan libur ya
Libur dulu lah, 2 kali lah
2-3 sama 30, ketemu lagi tahun depan
Tahun depan bahasnya
Itu kaleidoskop biasa
Kaleidoskop
Preview dan review ya
Boleh, boleh
Preview dan review
Jadi satu aja gak usah dipisah
Kayak dulu, maksahin dipisah
Biar ada episode buat pre-recording ya
Iya
Sekarang jadi satu aja udah
Yes, oke
Untuk malam ini mungkin cukup ya
Cukup, cukup
Nanti mungkin tahun depan ya
Tahun depan
Kalau back end kayak Laravel
Back end apa sih, boleh tau gak
Mas Lukman Harun
Ada ide gak, back endnya apa
Atau isi ke
Github discussion aja
Discussion ya
Kalau ada yang mau
Apa namanya, topik
Silakan
Ke github.com/orgs/
Discussion
Nah, back endnya tuh
Maksudnya apa
Apakah bahasanya
Apakah frameworknya
Apakah database-nya
Back end kan namanya
Specifiknya apa
Apa back end secara umum
Bikin server, bikin web server
Bikin server, bikin API
Boleh dong banyakin back end
Bisa back end dulu
Ya, jadi langsung aja ke
Github.com/orgs/
Ngobrolin/discussions
Oke
Mungkin untuk malam ini sekian dulu
Terima kasih banyak buat semuanya yang sudah
Meramaikan, iya ada Mas Yudi, halo-halo
Kita ketemu lagi
Tahun depan
Specifik database
Oke, database ya berarti ya
Superbase kali ya, kayak superbase
Atau DirectBase itu kali ya
Menarik, buat dibahas
Back end as a service ya
Bikin HTTP from scratch
Wow, ini hardcore
Http
Bikin web server maksudnya ya
Iya, HTTP server
Bikin lihau pernah deh
Lihau
Pernah bahas ya
Siap-siap, kita tampung dulu ya
Topik-topiknya jangan lupa
Ditulis aja di discussion
Nanti kita diskusi secara
Asingkronus
Ya, pada pokoknya HTTP
Oke, untuk malam ini
Kita udahan dulu, terima kasih
Selamat malam, selamat istirahat, bye-bye
[musik]
[musik]
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini kita akan membahas CSS Wrapped, sebuah rekapitulasi perkembangan CSS dan Web UI sepanjang tahun di browser Chrome. Masih setia ditemani Ivan dan Eka di sesi kali ini. Seperti biasa, kita mulai mengudara pukul 20:00WIB. Episode kali ini merupakan hasil kolaborasi dengan @DomaiNesia_ Gunakan kode promo: NGOBROLINWEBDN buat diskon 10% langganan hosting. Atau kode promo NGOBROLINVPSDN buat diskon 50% langganan Cloud VPS Turbo dan dapat digun Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
2 Agu 2023
Ngobrolin Privacy Sandbox
Privacy Sandbox dibahas bukan sebagai wacana melainkan sesuatu yang harus disiapkan dari sekarang, karena dampaknya bisa...
22 Apr 2026
Scam dan Penipuan
Episode ini membahas scam dan penipuan digital yang makin marak, dengan penekanan bahwa celah utamanya hampir selalu soc...
19 Apr 2023
Ngobrolin CMS
Content management system dibahas sebagai kelanjutan alami dari episode-episode sebelumnya soal cara halaman dirender. C...
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 .