Ngobrolin CSS Wrapped 2024
Ringkasan Episode
Bantu KoreksiEpisode ini membahas CSS Wrapped 2024, sebuah showcase interaktif yang menampilkan 17 fitur CSS baru yang dirilis sepanjang tahun 2024. Ivan dan Eka mengeksplorasi berbagai fitur baru yang dibagi dalam tiga kategori: Components, Interactions, dan Developer Experience. Website CSS Wrapped 2024 sendiri dibangun dengan Astro dan menampilkan tema retro game yang kreatif. Para pembahas juga membicarakan tentang browser support, di mana beberapa fitur sudah mencapai baseline (didukung semua browser utama) sementara yang lain masih terbatas pada browser berbasis Chromium.
Poin-poin Utama
- •Field Sizing: Form elements yang otomatis menyesuaikan ukuran berdasarkan konten (limited availability)
- •Animate to Auto: Fitur interpolate-size yang memungkinkan animasi ke intrinsic size seperti auto, max-content, min-content (limited availability)
- •Exclusive Details: Akordion tanpa JavaScript hanya dengan menambahkan atribut name yang sama pada elemen details (sudah baseline)
- •Anchor Positioning: Posisi elemen relatif terhadap elemen lain secara deklaratif untuk tooltips, menus, dan dialogs (limited availability)
- •Custom Scrollbar: scrollbar-width sudah baseline, scrollbar-color masih terbatas (Safari belum mendukung color)
- •Cross-Document View Transitions: Animasi transisi halaman untuk MPA tanpa perlu mengubah ke SPA (limited availability)
- •Scroll-Driven Animations: Animasi parallax dan efek scroll murni dengan CSS, tidak perlu JavaScript (limited availability)
I don't know if it works.
Halo.
Halo lagi, selamat malam.
Halo.
Ya, ya enggak lho nih.
Gimana sabarnya semuanya?
Kita lagi coba ini, software baru ya.
Jadi masih roaming ya.
Lagi nyoba-nyoba, ternyata kirain nggak ada countdown, ternyata ada countdown ya.
Jadi kita se-high-nya dua kali.
Dan saya request malam ini buat direkamkan dulu.
Karena besok saya mau...
Ada yang merayakan Tahun Baru.
Malam Tahun Baruan, Cee.
Malam Tahun Baru ya.
Tahun Barunya hari Rabu kan ya.
Iya kan, jadi malam Tahun Baru kan.
Oh iya kan.
Kalau hari Raya misalnya.
Kalau hari Raya Lebaran.
Malam Lebaran ya.
Malam Lebaran atau Malam Tahun Baru.
Jadi malam hari ini.
Juga sama lah ceritanya.
Jadi malam hari ini masih hari Senin sebenarnya.
Cuman kita rekaman buat besok.
Akan dipublish besok.
Hari Senin tanggal 27 Januari 2025.
Bertepatan dengan tanggal Merah juga ya, Isra Miraj.
Hari ini kan, Isra Miraj ya.
Lihat transkrip lengkap (1177 segmen lagi)
Iya hari ini.
Besok...
Long weekend, super long weekend.
Tapi pada ngasih ibu, ya ibu.
Practeknya nggak long weekend.
Karena kebetulan kerjanya ada yang harus preview di kultur yang nggak merayakan Isra Miraj.
Jadi merayakan Chinese New Year.
Jadi on paper ligur, tapi ya ada yang harus diselesain juga.
Di atas kertas ligur, di bawah kertas.
Ya ada yang jawab yang kudu diselesain dulu sebelumnya.
Nasi remote worker ya.
Iya betul.
Remote worker yang kerjanya di perusahaan luar ya.
Bukan perusahaan Indonesia.
Saya hari ini full meeting.
Aduh. Full meeting ya.
Banyak banget.
Sampai lelah.
Makanya lebih enak ngobrolin web aja.
Lebih seru meetingnya.
Ini juga meeting, tapi meetingnya.
Turtul, turtul, turtul, turtul.
Okay, okay.
Ya, berasa sih capainya meeting itu.
Berbeda dengan kita coding ya.
Coba teman-teman yang sini remote worker.
Salam satu online.
Salam satu online.
Iya.
Menurut orang lain enak ya kerjanya duduk-duduk, ngetik-ngetik doang.
Kalau remote worker yang perusahaan Indonesia mungkin masih merayakan.
Maksudnya masih libur kali ya, kali.
Tapi kalau yang perusahaan luar, atau mungkin perusahaannya perusahaan Indonesia.
Tapi kliennya klien luar.
Biasanya tuh pasti ada yang standby.
Kalau gue timnya emang Indonesia sih, sebenarnya tim Indonesia sebetulnya di atas kertas ikut hari liburi Indonesia.
Tapi ya, kadang ada.
Nggak selalu sih, ini kebetulan lagi ada tanggung jawab yang harus diselesaikan dulu.
Karena urusannya, proyeknya, urusannya sama pihak-pihak yang nggak di Indonesia.
Yang tidak di Indonesia, iya.
Dulu tuh saya pernah kerja sama di perusahaan Korea, Korsel.
Mereka sampai komplain, kan urusannya orang sana langsung.
"Indonesia tuh banyak sekali, liburan ya."
Iya, kita ada 6 agama, 6 kali.
Kalau bisa ditambah satu lagi, mabuk-mabuk.
Eh, tahun baru? Udah juga kan.
Hari Raya, tahun baru.
Ya, apa, holidays, holidays, public holidays, dan berbagai kultur kita akomodasi.
Emang di Korea liburnya kapan?
Nggak, kita liburnya cuma Natal tahun baru doang.
Akhir tahun.
Kampanye tempat saya bekerja nggak ada libur, Mas.
Oh, nggak ada juga ya?
Tapi bisa cuti kan, kapan aja?
Iya.
Jadi secara aturan kampanye,
karena orangnya diverse banget, jadi dari kampanye sendiri nggak ada hari libur.
Tapi total hari yang boleh diambil buat libur, ya banyak.
Termasuk banyak, ya.
Ya, jadi atur sendiri lah mau libur kapan.
Tapi justru enak buat orang-orang yang pengen liburan, anti mainstream.
Tidak di hari libur umum.
Ya, kalau lajang.
Kalau anak udah sekolah nggak bisa juga, Mas.
Betul, betul.
Merasakan kok, merasakan.
Boleh izin acara keluarga lah. Betul, liburan sama keluarga itu acara keluarga kan.
Iya.
Oke, sebelum kita ngelantur kemana-mana.
Oke, sebelum kita ngobrolin, ngobrolin liburan, kita ngobrolin web.
Ya, kita bahas CSS Wrap. Jadi CSS Wrap itu dipublikasi itu mungkin tahun lalu ya, akhir tahun lalu ya, kalau nggak salah ya.
Sebelum 2004 berakhir ya.
Ya, kita pernah bahas.
2022, sejak 2022.
Ya, gitu. Jadi intinya ini kayak recap lah, karena belakangan ini kan sekitar 2-3 tahun terakhir tuh web UI CSS, eh utamanya CSS.
Ada tambahan misalnya HTML, atribut, dan lain-lain. Pokoknya terkait CSS itu sangat cepat ya, banyak fitur-fitur baru, nggak kayak dulu.
Kalo dulu banget ya, Flex, Flexbox launching, tapi baru 2 tahun, baru diadaptasi browser lain.
Iya, adaptasinya panjang ya, waktunya ya.
Lama, surem. Nah, kalau sekarang tuh, ya kalau lebih baik antar browser juga sudah banyak inisiatif saling bekerja sama.
Dampaknya apa? Jadi banyak fitur yang rilis dalam 1 tahun, itu ada banyak. Jadi kayak setiap akhir tahun, awal tahun ya ini.
Setiap awal tahun tuh kayak ada semacam showcase apa aja sih yang baru, fitur-fitur CSS. Nah, ini kayak dikemas.
Dikemas dengan sajian yang menarik sih. Sebenernya kalau cuma pengen tahu ada fitur CSS baru apa aja kan bisa lihat di bloknya Chrome, atau bloknya Firefox, atau Safari kan.
Cuma kan, ya mungkin kurang menarik lah. Jadi ini kayak direka, dikumpulin jadi satu, masukin satu website yang tampilannya menarik.
Biar kita bisa lihat sepanjang tahun 2004. 2024 ini ada major features apa aja sih yang baru di CSS, safe-nya begitu.
Ya, jadi ini bukan kayak state of CSS atau state of JS yang adalah survey ya. Ini bukan survey kan, ini adalah showcase kan ya.
Betul, showcase. Jadi di 2024 ini, ada, saya diklik, tidak usah lah, saya kliknya video. Nah ini, ada 3 kategori.
Jadi fiturnya di component, interactions, dan developer experience.
Kita mulai, iya website-nya lucu banget. Di website-nya ada di GitHub ya, kalau temen-temen mau lihat langsung aja ke sini, ada di GitHub.
Dan dia menggunakan, coba kita lihat ya, package gipsen, astro.config.mgs.
Iya, ah iya ya, di kanan bawah aja udah ada gitu ya, astro ya.
Dia jadi bahasa, oh iya ya komponennya, komponennya astro ya.
Oh, mereka nggak pakai web component ya.
Nggak pakai framework, ya bisa aja kalau pakai web component yang javascript di dalam file astronya, bisa diskon.
Nah, bahkan yang tahun lalu, CSS sudah 2023, ya website-nya bagus. Cuma maksudnya, kayak ini lebih, yang 2024, ini kayak lebih bagus, lebih bagus lagi aja, lebih tematis.
Lebih tematis ya, ada temanya gitu ya.
Karena yang fiturnya juga banyak.
Iya, color flow juga sih, kayak fitur color, tau nggak? Karena ada color juga muncul di 2023, apa 2022 ya.
Kita bandingkan, ini bukan, ini kan, iya bagus, keren, oh jadi temanya ini ada fiturnya ya.
Kalau ini, kalau melihat di sini, temanya retro ya, ada, apa ini?
Retro game, pixel art, retro game, terus hamburger menu-nya, icon hamburger menu yang di kanan atas, beneran hamburger dong.
Kan bisa tiga garis itu disebutnya hamburger menu, nah ini hamburger menu.
Tugunya hamburger ya, ada shadow-shadow-nya, ini kalau nggak salah ada satu fitur yang di bagian font, itu yang bisa, nggak kayak gini sih, nanti ada contohnya, nanti bisa kita lihat lah.
Mungkin itu juga jadi fitur yang dibahas, dipakai di sekalian itu, jadi tema dari website ini.
- Showcase. - Iya showcase, jadi misalkan ini kan, tema utamanya apa sih, color kan, banyak warna yang unik-unik kan, jadi ini dibuat lebih colorful gitu, mungkin ya.
- Siapa tahu? - Nanti kita tanya, nanti kita tanya.
Nanti kalau kita ketemu sama yang bikin kita tanya nanti ya, itu jadi pertanyaan yang bagus juga.
- Oke, kita langsung. - Kali atas.
- Mana? - Ini, play ini.
- Di bawah dikit. - Di bawah, ini ya?
- Kayak RPG gitu loh, kayak game RPG pembukaannya. - Oh iya, lucu-lucu.
- Apa? Scroll ke bawah lagi. - Oh ini.
Kreatif banget ya, kreatif ya, bisa mikirin kayak gini ya.
Jadi ini ada 17 fitur highlight-nya, dibagi ke 3 kategori, yaitu Komponen, Interaction, dan Developer Experience.
Ini Komponen, pakai artwork segala ya.
"We travel over the mountain to bring exciting overlay UX with anchor, the power to animate to hide auto, easily turn details into accordion, and detail styling, and intrinsically sized form elements."
- Apa itu? Kita lihat. - Nggak ngerti tuh.
- Field sizing, field sizing ini kurang lebih... - Input yang mengikutin...
- Ngikutin ukurannya sampai mentok ya. - Nah, ini dulu tuh ngetrend pas material design pertama kali launching ya.
Kan ada fitur kayak gini, cuma kalau dulu harus pakai JavaScript kan.
- Oh iya, kalau sekarang pure CSS ya? Kalau kata Pak Dika ya, CSS bro. - CSS bro.
Tapi masih limited karena Firefox dan Safari belum masuk ke baseline.
Jadi ada kemungkinan user kita ada yang belum bisa menikmati.
- Tapi ini progressive... - Pasti ada poly fill-nya.
- Maksudnya ditambahin aja, tapi experience-nya nggak muncul aja di Firefox dan Safari. - Iya, jadi nggak ngelebar aja gitu kan ya, text area-nya tetap ada gitu ya.
Ini ada contohnya, ini nggak pakai grow, yang ini pakai grow.
Kita lihat, oh ini dia, layer itu apa sih masih?
- With text area, select field sizing content. - Pokoknya udah 2 tahun yang lalu.
- Ini ya, sizing content kan ya, yang membuat dia... - Ini bisa setel minimal sama maksimalnya.
- Jadi biar nggak ekstrem. - Oh, ini ya. Halu, halu, halu, halu, halu, itu, ngikutin ya.
Kalau yang nggak grow ya begini, standar ya.
- CH itu apa ya? - Mana?
- Characters. Characters. - Oh, jumlah characters.
- Hah, apaan sih? - To the Eyeler, ini kan?
- Iya, baru tahu bahwa. - Iya, baru tahu makanya.
- Kapan-kapan bahas CSS unit lah kita. - Oh iya CSS unit, makin banyak ya.
Terus, itu yang pertama, apa, field-nya ngikutin ukuran apa, contentnya.
- Yang kedua... - Dengan customization bisa di set minimal dan maksimal juga.
Yang kedua ada animate to hide, auto.
- Nah ini... - Ability to animate to hide auto. A slight variation of that request is to transition the width properly instead of the height.
Or to transition to any of other intrinsic sizes, represent by keyword like main content, max content, and feed content.
From Chrome 129, you can use interpolate size property or half size function to enable transition and animations from length to intrinsic sizing keyword and back.
- Ini contohnya? - Ini use case yang sering kan, kalau misalnya kita mau animate kalau di-click atau di-buka atau di-tutup atau apalah jadi melar, jadi dari kecil jadi besar.
Nah itu kan enogik banget kan, kalau hide auto itu nggak bisa, jadi biasanya diakalin dulu, ditung berapa pixel pakai JavaScript, baru di-animate.
Jadi kalau dulu yang bisa di-transition pakai CSS itu cuma unit angka kayak 0 ke 300 pixel atau 30 rem atau berapa lah, pokoknya harus ada angkanya kalau auto itu nggak bisa di-animate.
- Tapi sekarang jadi bisa. - Eh cuma browser supportnya masih belum...
Belum juga, masih ada dua nih yang ganjil, non-chromium ya.
Yang mana contohnya?
- Card size. - Gap editing.
Interpolate size jawab cari, interpolate size.
Ini di atas tadi?
Ini?
Ini doang?
Ini bisa di-comment nggak bisa ya? Oh harus di-click.
- Harus buka. - Harus buka ya.
- Interpolate size... - Ini kan obtain the workplace to animate to from intrinsic size keyword.
- Jadi harus obtain specifically ya, kita harus specify bagian mana yang mau kita include, biar bisa animate intrinsic sizing. - Calc size-nya dimana coba?
- Try demo ya, ya lari dia ke sini.
Calc size-nya nggak ada.
Coba kalau kita comment ya.
- Bisa tuh? Tapi nggak animasi ya? - Tapi nggak animate.
Animasi-nya...
Kalau ini balikin baru...
Nah ada animasi-nya ya.
Tapi yang dia ngitung ini-nya, panjang dan lain-lainnya dimana ya?
Pull D, display, di sini nggak ada ya, Le, reply.
- Nggak, itu max content, width-nya max content.
- Mana? Oh ini ya? Oh focus invisible, bener-bener.
Coba ini.
Nggak ngaruh. Coba di-comment.
- Nggak muncul? - Nggak muncul.
Jadi max content atau min content itu dia kayak intrinsic sizing kan, dia ngitung, ya kayak auto lah semacam.
Kalau yang di atasnya 2.5 RM itu kan labor icon-nya.
- Oh, ketika nav anchor ada focus, on focus, width-nya dibuat max ya.
Ya, to hover.
- Dan istimewa ya, kalau dulu itu nggak bisa dianimasi.
Itu dulu nggak bisa ada pelan-pelan ngebuka gitu, jadi kayak cuma flicker aja.
Nah kalau sekarang udah bisa dianimasi.
- Coba panjang ya. Eh, belum.
- Ini JavaScript library berkurang satu ya, dia bikin kayak gitu.
- Kefikiran tuh bikin begini-gini tuh, ada aja yang bisa mikir, spek-spek begini.
- Pake CSS pula ya.
- Karena salah satunya karena ada intrinsic size tadi, kalau dulu kan sekuatnya kita harus hitung dengan JavaScript kan.
- Interpolate size itu.
- Capsize juga termasuk, terus warna bisa didarken, dilighten itu kan dari CSS ya.
Itu juga perhitungan kan, jadi CSS sudah bisa ngitung sekarang.
Makin pintar.
Oke, yang ketiga, ada Exclusive Details.
Akordian Komponen, ini udah baseline, udah aman, temen-temen bisa pakai langsung.
- Nah ada penjelasannya tuh, kalau di-click.
Nah, sejak September, sudah bekerja di seluruh versi browser, ya ke empat versi browser yang diatas itu.
- Empat versi sebelumnya?
- Dua deh, dua.
- Oh dua, oke.
Jadi Exclusive Detail itu adalah akordian biasanya, di dalam akordian itu ada details.
Ada tag atau element details.
Terus, ketika kita buka satu details, details yang lain otomatis ketutup.
Jadi kalau dari dulu kan udah ada itu sebenarnya element HTML, details sama-sama.
- Yang gini udah ada, ya udah ada.
Tapi kalau dibuka, semuanya dibuka.
- Diklik ke buka, diklik lagi untuk toggle, cuma masing-masing misalnya kita punya beberapa item itu 1, 2, 3, 4.
Dia nggak sepinter itu untuk...
Itu kan berarti harus stateful kan, kayak kita pengennya keempat itu tahu kalau misalnya 2 dibencet, kebuka.
Berarti yang lain 1, 3, 4 harus tutup. Nah, kalau dulu kan nggak handle itu harus pakai JavaScript kan.
Berarti sekarang udah cukup pinter buat jalan sendiri.
- Dia bisa otomatis sesuatu itu semua?
- Iya, misalkan ini kan kita lagi buka yang satu, kita mau buka yang kedua, yang satu itu ketutup.
- Nice.
- Kalau mungkin kita logiknya itu harus antara di JavaScript atau di back-end, nambahin CSS class, open, close, ya kan?
Kayak bikin itu aja, kayak bikin table, ya maksudnya di back-end, kan di back-end juga bisa gitu kan.
Waktu, kalau server render ya. Kalau bikin table yang warna-warnanya berbeda antara yang genap sama yang ganjil kan juga.
- Oh, ada event, ada classnya.
- Iya, event code gitu kan.
Ini berarti kita pakainya dari pakai details.
Oh, namanya sama, jadi dianggap satu grup gitu ya?
- Iya, jadi dia kayak, sebenarnya internally di browser, ya kan browser-nya kayak keep track mengfordinasi state-nya, itu tadi kan yang kayak kita bahas tadi.
Harus keep track, misalnya dia cari semua yang namanya learn CSS. Satu dibuka, berarti browser yang kerja, tiga lainnya, semua item lainnya harus ditutup.
- Iya. Ini details-nya sendiri sebenarnya diberi 5 property open ya.
- Pada tertarik ini nggak sih untuk kerja di browser?
- Nggak bisa.
- Oh, skill issue.
- Harus di plus-plus kan kalau Chrome itu kan.
- Iya. Harus misalnya low-level language lah.
- Ada yang udah pakai RAS kan?
Ada browser yang baru kan?
- Apa tuh?
- Ladybug, Ladybug.
- Yang baru? Iya.
- Yang mana?
- I don't know. Entah gue cari, ya kan.
- Kayaknya pernah di posting deh.
- Pernah.
Soalnya kalau browser engine written from scratch in RAS, tetap aja gue nggak bisa, jadi ya oke.
- Iya, RAS juga tidak semudah itu.
Ini details-nya ada property open, jadi by default dia buka yang pertama kan.
Tapi kalau misalkan kita tutup terus kita buka yang kedua, di sini open-nya nggak ada ya.
Jadi dia perubahan-nya itu di JavaScript-nya nggak ada, ada nggak?
- Nggak, browser-nya nggak ada.
- Servo? Tapi kan nggak production ready, nggak ada yang pakai ya?
- Belum, belum, belum.
- Oh iya rencananya mau dijadikan engine untuk Firefox, tapi belum-belum ya.
Oh ini ada JavaScript-nya untuk toggling ya, nambahin atribut.
Jadi kalau box gitu, nambahin atribut.
- Oh, ini polyfill.
- Oh iya.
- Berarti aslinya CSS aja ya, cukup ya?
- Iya, iya, iya.
- Gimana dia?
- Kenapa?
- Iya.
- Oh iya.
- Ada font family, anybody.
Font family apa ini?
- Iya kayak gini.
Itu juga ya.
- Menarik.
- Iya nggak ada ya?
Berarti hanya HTML aja?
- Iya, hanya HTML.
- Oh karena di satu grup, jadi itu dia akan menyimpan state yang mana yang besar, yang mana yang itu.
- Udah susimpul itu karena namenya sama.
- Iya, iya, iya.
- Benar, benar, benar.
- Oke.
- Ada terangannya di atasnya.
- Oke, atas lagi.
- Oh ini ya.
- Iya.
- Add name atribut to elements.
- Ya, exclusive.
- When this attribute is used, multiple detail elements yang memiliki nama yang sama akan mementuk suatu semantic group.
- Oh, mantap ya.
- Oke.
- Kalau kita mau buka salah satu details element dari grup tersebut, maka yang sebelumnya terbuka akan otomatis.
- Yes.
- Memudahkan web dev ya, ngerti? Sekarang.
- Terus kalau misalkan ada yang belum support, ya tinggal pada JS ya.
Ini yang lama ya, solusi yang sebelumnya.
- Iya.
- Dikunakan selektor. Apa itu? Ini?
- Sebenarnya element detail summary sebagai element HTML sudah lama banget, 10an tahun kali.
Ini kasusnya mirip dengan date ticker atau semacamnya. Jadi ada HTML elementnya, tapi stylingnya ribet setengah mati.
Jadi biasanya developer ya pakai UI, apalah UI component yang udah jadi atau bikin dari defaultnya bikin workaround sendiri karena sulit di styling.
- Nah, ini nggak tahu nih. Gua nggak tahu sih ini styleable details apaan. Cuma kelihatannya itu berusaha memudahkan styling detail.
Kayak misalkan ada toggle-nya tuh tadi yang misalnya accordion judulnya yang buat diklik, itu tuh dulu kayaknya stylingnya sulit lah.
Ada yang harus di-hide, harus pakai pseudo element. Nah, nggak tahu ini styleable details apakah jadi lebih gampang di styling apa?
- Dulu katanya kan details itu fix kan begitu aja. Sekarang details itu bahkan bisa diganti direction-nya yang tadinya mungkin kolom,
hanya kolom doang, sekarang bisa jadi row misalkan. Kayak gini. Kalau ini nggak mungkin dulu hanya dari atas ke bawah aja.
Nah, sekarang details-nya ini bisa nih. - Iya, iya.
- Coba kalau di-pedit flex direction-nya. - Iya, iya. Flex direction-nya kita ganti jadi itu.
- Harus di ini, harus di-code. - Edit dulu, buka di-code. - Resource? Ini bukan, kok bukan ya? Editnya ini gimana? Ini?
- Edit on-code pen. - Udah gede begitu ya. - Ini pakai browser apa sih?
- Brave. - Oh, Brave. - Tidak, tiap bulan ganti-ganti. - Kayak lagunya si Katy Perry.
- Apa itu? - Brave. - Brave? Emang ada ya?
- Tidak tahu. - Maaf saya nggak ngeluhin Katy Perry.
- Ini mana tadi flex direction-nya? Jadi kolom. - Iya, kolom. - Jadi ke bawah.
- Tara, ke bawah dia. Tapi kebuka semua. - Tapi jadi full. - Iya.
- Berarti dulu detail nggak bisa kita styling ya? Sekarang udah bisa di-styling ya? Ditambahin flex, tapi terbatas.
- Kayak ada yang harus diumpetin, ada yang harus pakai sudo element after, before-after, ya gitulah. Harus jungkir balik dulu.
- Benar-benar. Wah keren sekali ini. Kaga ada JS-nya lho, CSS doang. - CSS bro. - CSS bro.
- CSS bro. - CSS. - Tapi kan kebun-buni styleable details masih belum baseline, baru chromium-base.
- Ya sih. Ya, chromium-base masih. - Kok dia nggak ada yang bikin yang hanya Firefox aja, chromium-nya belum support nggak ada ya?
- So far belum pernah nemu. - Ya ini kan dari tim Chrome. - Iya maksudnya biar adil gitu.
- Harus ada orang dari Firefox ternyata, dari Safari-nya yang bikin lah. Atau kerja sama-kerja sama.
- Jamannya CSS Grid, Firefox tuh lebih cepat lho daripada Chrome. Jadi grid template columns atau apalah punya yang nested template columns atau grid area.
- Itu dulu punya Firefox duluan dan bahkan DevTools yang buat, apa, yang ada garis indikator grid itu yang pertama adopsi. - Yang mempulpori Firefox duluan.
- Cuma kayaknya sekarang nggak terlalu.
- Ini apa? "In addition to using more display types, the content of details element automatically get rubbed in a detail content shadow element.
All children of detail element except summary get slot into that shadow. You can use this shadow to control the part of detail disclosure element that expand and collapse."
- Apa maksudnya? Oh ngikut ya, height-nya ya. Ini naik atas kan. Ini ke bawah dia. Ini pandang. Pasti gitu ya.
- Karena bisa, apa jadi bisa animatik. - Tapi kayak animasi ya?
- Iya, ada kayak bouncing-nya gitu kan ya. - Iya, oh ini. Transition.
- Transition. - All summary.
- Tunggu tuh ada warning-nya. Tadi di atas tuh ada warning-nya kayak selektor details content dot warning. Cari yang ada dot warning-nya di place none.
- Warning, your browser that's not support. - That's not support. So this demo won't work as intended. Tapi ini support.
- Berikutnya, anchor positioning. Ini juga kayaknya penting ya. Tapi sayangnya masih premium based ya. "Is a fresh and declarative way to position element relative to each other. It perfect for menus to tip, select, label, card, setting, dialogs, and many more. With anchor position..."
- Pokoknya apapun yang kayak semacam pop-up gitu ya. - Iya.
- Layered user interface, tool tips atau apa lah yang kayak info lightbox atau dialog pop-up. - Iya, contohnya ya. Nah ini, over easy.
- Gak, lucu aja. - Oh, gak bisa di-click ya? - Dikasih lihat aja contohnya disini, misalkan ini. Image.
- Oh, di egg, gambar-gambar telurnya itu anchor. Over easy-nya itu position. Jadi kita gak harus manually kayak, kan biasanya kalau dulu di luarnya itu dikasih div, position relative ya kan.
Terus misalnya over easy-nya itu di position absolute, di bottom 0, terus di ketengahin gitu, biar bisa relative to image. Nah sekarang udah gak...
- Langsung ya. Over easy. Anchor name over easy. Ada yang lain gak? Tread over easy.
- Apa sih maksudnya? Gak ngerti gue. - Nah ini. - Tuh, tuh, tuh. - Oh, bisa kayak tool tip gitu, posisinya dimana.
- Iya, posisinya dimana. Betul. - Oh. - Kali dulu kan kita secara manual, misalnya apalah di-trigger, di-click atau di-buka atau apa, kita harus ada container luar yang position...
- Pake position fix. - Posisinya right, titik 2, 0. Ya misalnya kita bikin... - Eh, position relative ya. - Posisinya position top left atau center left atau apalah masing-masing posisinya. Terus kalau misalnya apalah top left, kita jadi left, titik 2, 0, top titik 2, 0, dan dulu harus manually kayak gitu, kan.
- Ini udah baseline belum sih? Atau limited ya? - Belum. - Limited? - Belum. - Belum. - Ya, baru mau pake.
- Ya, kembali lagi, kalau dulu mungkin ini pakai JavaScript ya, butuh JavaScript untuk menghitung posisinya ada dimana, taruhnya dimana gitu kan. - Biasanya sih udah pake... - Pake di tengah-tengah, di atas.
- Biasanya sih udah pake library, tooltip. - Ya, library tooltip ya udah ada ya pilihannya mau dimana.
Oh, ini ada resource-nya nih. Punyanya mbak Una. Oh, yang tadi. Entar, entar. Oke, nah habis untuk yang komponen. Sekarang kita masuk ke bagian interaction.
- Nah, ini menarik nih. - Nah, yang berhubungan dengan interaction. Scroll. Custom scroll bar.
- Weee. - Versi limited availability. Yang color ya, tapi kalau... - Sudah bisa. - Oh, scroll bar width udah baseline? Yay. - Sudah baseline.
- Jadi kita bisa memperbesar atau memperkecil ukuran scroll bar ya yang ada di browser. - Dan maksimalisasi. Ini penting banget sih buat yang ngerjain UI front-end.
Kadang kita kan coding banyakan sih, developer pakai Mac ya kan. Apa pun brosernya, kalau di macOS itu kan scroll bar-nya tuh langsing dan kalau misalnya over... Oh, kita value overflow titik 2 auto. Kalau misalnya elemennya panjang, ya udah muncul brosernya, tapi dia auto-hide dan kalau di macOS emang default style scroll bar-nya tuh tipis kan.
Nah, kalau kita nggak ngecek di Windows tampilannya gimana, begitu liat pasti shock. Apa? Karena di Windows default scroll bar-nya tuh lebih besar dan kalau pun nggak scroll, jalurnya ada.
Nah, itu. Jadi kalau misalnya kita kebiasaan cuma ngecek di laptop atau di device kita sendiri, pasti kaget karena unexpected pas di Windows. Nah, mungkin ini dengan scroll bar width, nggak tahu ya, belum coba juga sih, cuma diharapkan kan bisa jadi pen-streamline bentuknya, jadi maksudnya itu expected lah.
Sekaligus bisa buat branding. Terus juga bisa dipakai untuk branding ya. Misalkan warna, logo perusahaan gitu ya. Disesuaikan sama background web-nya. Kenapa? Nuansa. Nuansanya, disamakan. Hot pink blue? Woy, scroller hot pink blue. Kayak gimana hot pink blue? Nah, ini.
Oh, gitu. Ini sengaja bikin mencolok banget ya supaya memang kaya. Black pink dong, black pink. Black pink. Kalau warnanya cuma abu-abu, kita nggak sabar.
Gua kalau ke tes selalu pakai merah sama hijau biar sakit mata udah. Oh iya, merahnya merah ini ya. Merah 255.00 ya. Sama hijau. Nah, ini ya. Mantap.
Langsung sakit mata. Oh berarti ini, scrolling yang ini nanti akan berubah seperti ini gitu ya. Kalau kita buka website-nya ya. Kalau full buka website-nya ya. Lucu ya, kalau semua website pemerintah kita diwajibkan menggunakan begini gitu.
Apa? Merah putih, merah putih. Merah putih. Sakit mata. Oke, untuk yang color itu Safari belum bisa. Tapi yang lain udah apa? Kayaknya Safari masih menolak deh, kayaknya mungkin dia.
Dia nggak mau warna yang ngerjiteng-ngerjiteng gitu merusak. Dia punya branding dia sendiri untuk iOS dia. Design sistemnya dia ya. Width-nya mungkin dia terima, tapi color kayaknya masih belum dia terima.
Custom scroll bar on Bram.us. Mas Bram. Oh ini penjelasannya. Pake WordPress loh dia. Kok tau? Kayaknya ya, iya pakai WordPress. Iya, iya.
Terus di-powered by WordPress. Jadi kegoda pengen bahas WordPress drama lagi tapi nggak usah dulu lah ya.
Emang gimana dramanya? Oh iya, nanti aja. Itu yang double bookkeeping. Itu bukan WordPress, Pak. Itu sesuatu yang visi. Oke, CSS.
Itu view transition. Ini lanjutannya dari view transition ya. View transition yang bisa, beda halaman. Bener nggak? Beda page ya maksudnya.
Sayangnya di Firefox belum tapi Safari sudah. Gampangannya server-side lah. Jadi kalau misalnya routing-nya client-side atau punya dalam browser, kan pindah halaman juga bisa pakai client-side routing ya.
Jadi di-handled in browser itu bisa pakai same document view transition yang level 1. Tapi kalau misalnya kita pakai encore, pakai A biasa, link biasa, klik itu kan kayak server render ya.
Nah itu harus pakai cross document, ini yang level 2. Oke yang level 2. Tuh, di paragraf kedua, kalimat kedua lihat ya, as a result, you no longer, tidak lagi harus me-reward statistic.
Paragraf kedua, kalimat kedua, you no longer need to rework your website as a SBA. Kalau yang di same document yang level 1 dulu, harus dijadiin SBA.
Ya atau minimal diakalin dengan client-side routing, biar bisa pakai view transition. Tapi kalau sekarang, kalau udah cross document, ya MPA, multi-page application biasa juga bisa.
Hmm, Ivan mau bahas di Google IOS standard?
Kayaknya ya.
Bahas kayak gimana?
MPA, jadi misalnya performa terus ditambahin MPA, kayaknya asik ya.
Oh.
Bikin aplikasi seperti MPA tapi serasa SBA gitu ya?
Iya, betul.
Bisa, bisa, bisa.
Coba lah nanti ya.
Menarik, menarik.
Tinggal kurang Firefox ya. Aduh.
Iya, tinggal kurang Firefox.
Jadi kalau pun aplikasi kita server render, tidak SBA, nggak menggunakan React atau front-end framework lain yang simpan single-page application, itu secara user experience-nya bisa mendekati lah.
Kita udah cukup sering ya bahas tentang view transition, jadi kita lanjut aja.
Scroll driven animation.
Ini juga masih limited availability.
Ini adalah kita bisa melakukan animasi ketika scrolling ya.
Banyak banget contoh-contoh kerennya, nanti kalau ada yang pengen lihat, lihat.
Nah, ini nih.
Mas Sandika di YouTube ada.
Defex, Defex.
Defex Jakarta.
Mas Sandika di Defex tentang ini.
Ya, jadi pada saat scrolling.
Ini kan harus pakai JavaScript ya.
Iya, apa sih, Parallax ya namanya ya, Parallax.
Gitu-gitu ya.
Sekarang udah CSS bro.
CSS bro.
Nggak ada contoh ininya ya?
Banyak banget contohnya.
Banyak banget contohnya ini.
Dimana contoh demo-nya?
Pak Dika juga bikin ini tuh kayak Star Wars.
Openingnya Star Wars gitu loh.
Oh, iya, iya, iya, Star Wars.
Dikumpulin di satu, apa, gambar mouse-nya aja pakai scroll driven animation kan tuh.
Coba scroll kan masih.
Iya.
Nah, saking banyaknya demo-nya dikumpulin di sini.
Ada free video course segala, oh ini.
Ada 10 ya, 10 video.
Panjang sekali, banyak berarti ya tipe-tipenya ya.
Kalau yang lebih cocok belajar pakai apa sih, video penjelasan itu.
Tapi kan ada orang yang kalau misalnya diceramain di video malah ngantuk lebih gampang liat demo
karena bisa diubah-ubah sendiri.
Itu semua demo-nya di situ tuh, enak banget.
Ada di sini ya.
Scroll driven animation, kita bisa chat nggak?
Kita coba fitur chat-nya.
Kita cek ke penonton atau cek ke kita?
Nggak bisa di highlight ya? Wah, nggak bisa.
Nggak ada fitur chat-nya.
Ngasih, ngasih.
Oke, lanjut.
Scroll driven udah, eh, perlu dibahas lagi lebih lanjut nggak?
Udah tau lah ya, betul-betul kayak tinggal cari liat demo-nya aja.
Silahkan liat demo-nya sendiri.
Next, scroll snap events.
Scroll snap ini kalau nggak salah yang buat, ya biasanya buat karusel atau semacamnya itu kan ya.
Build-in snap events.
Coba gameplay.
Oh, buat karusel, iya, iya, iya.
Pas di tengah gitu ya.
Di tengah, dan gue udah pakai ini udah, udah ada di semua browser.
Gue barusan banget hari ini nge-ship ini ke production, seneng deh.
Wuih, tepuk tangan dulu.
Tapi ini JavaScript ya?
Tapi ini JavaScript ya?
Oh dulu, JavaScript gitu, atau gimana?
Ini ya contohnya ya?
Ada penjelasannya di atas.
Ada penjelasannya di atas by komputer, build-in.
Aku pakai atribut CSS-nya, tapi waktu terjadi snap, ternyata...
Ada event, ya.
Firing event.
Iya, ada eventnya.
Kita bisa ngapain lagi lah.
Ponsual itu di JavaScript ya?
Ini malah baru tau juga sih ada eventnya.
Kalau soal CSS only bisa scroll snap itu udah nggak lama, kelihatannya udah lama.
Udah lama ya.
Ini contohnya ya?
Udah baseline juga, makanya udah berani nge-ship.
Ini nggak bisa digeser ya.
Oh, pakai bubble.
Open props.
Proportinya apa, kalau mau bikin kayak gitu?
Yang ini ya?
Scroll snap change ya?
Bukan, itu ininya, itu eventnya.
Itu JavaScript-nya kan ya?
Event, iya.
Yang penggaris itu, demonstrasi eventnya itu seru sih.
Maksudnya, jadi bukan kita bisa nubah lewat input angkanya.
Tapi kalau misalnya kita scroll pakai mouse, kita geser aja.
Scroll kiri-kanan gitu, angkanya ikut nge-update.
Coba deh.
Oh iya.
Jadi maksudnya, apa ngebaca snap-nya kemana, nge-update isi input field-nya?
Hmm, ini ya scroll snap type ya?
Iya.
Oke.
Coba scroll bar, wait, scroll bar, oh nggak bisa diubah disini ya.
Oh, diubah.
Scroll bar, scroll bar width.
Kita ada ini kan?
Ini?
Iya, coba.
Modisi berapa?
10 pixel.
Ini?
Iya, kita ada 10.
Ya, bikin 100 pixel.
Loh, kok nggak bisa?
Lebarnya.
Oh, deh.
Bukan?
Iya, iya.
Coba 1 pixel.
Enggak ngaruh.
Apa karena macOS?
Kan width nggak bisa?
Kan ini macOS kan?
Iya, kan macOS width nggak bisa?
Ini color yang nggak bisa ya?
Width bisa ya?
Bukan iOS yang nggak bisa.
Enggak ngaruh?
Oke.
Lanjut, lanjut, lanjut.
Oke.
Kalau mau info lebih detail, bisa ke developer.chrome.com/block.
Buka aja ya.
Scroll Snap Event, disini ada penjelasannya.
Oke, selanjutnya kita masuk ke bagian ketiga, yaitu DX Developer Experience.
Ada kata pengantarnya kita lagi, sekarang ke laut.
Tadi kan udah ke gunung, udah ke hutan, sekarang ke laut.
Mana laut?
Oh, seas ya, across the seas.
Iya, across the seas.
We discover way to simplify backdrop inheritance, magic color function called light/dark.
Nah, ini menarik ya.
Safer and smarter variable width property.
A way to specify a starting style for transition, pop into the top layer, improve Ruby alignment.
Apa ini Ruby alignment?
Gak ngerti semua dari atas.
Dan lain-lain.
Oke, backdrop inheritance.
From Chrome 122, this backdrop shadow element has been converted into a tree abiding element.
Meaning that it is inheritable properties from its originating element.
Ini bisa diturunkan?
Kalau ada reset from family atau apa yang maunya CSS itu si backdropnya ikut kena, ya?
Ikut kena.
Coba itu apa sih?
Dialloc.
Pake ini ya, shadow element backdrop, kita bisa kasih backdrop element.
Dari CSS variable, CSS custom property.
Iya, ini kan standar lah ya.
Oh, dari dialognya ya.
Karena meng-inherit dari dialognya.
Iya.
Oke.
Lanjut, light/dark.
System colors in CSS has been ability to react to current use color scheme.
Bisa otomatis juga.
CSS nya gimana?
Coba lihat kodonya.
Color scheme, light/dark.
Oh, wah seru color scheme.
Berarti preferensinya ya light/dark.
Maksudnya kalau misalnya kita mau prefer dark duluan, dark/light gitu.
Gak tahu, coba ya.
Coba ya.
Enggak?
Enggak.
Berarti enggak.
Enggak.
Ini apa ruangnya?
Kita baca dulu kali ya.
If you declare color canvas text in CSS rules, the color of the match element will be either light or dark depending on color scheme value.
In the following demo, use drop down to control color scheme of the div.
Because div is system color.
It support both light and dark styles.
The light/dark function expose the same capabilities to developer.
This function accept to argument.
This must be a color.
Oh, primary color nya light/dark.
Oh, langsung dua-duanya di-define ya.
By changing the value of color scheme, either the first or second value light/dark is used.
Jadi kita gak perlu lagi implement, oke kalau light itu ini.
Kasih class name.
Langsung ada dua warna langsung disiapkan ya.
Jadi ini contohnya kalau system, ya kalau system udah langsung dark.
Karena by default system yang saya pakai, ya dark.
Kalau kita ganti system general.
Gimana ya ganti ininya ya?
Experiences, Light, Restart, Refresh, Relog.
Oh, buka ini ya.
Masih gelap.
Kok gak garuh?
Refresh.
Ini dark ya?
Gak garuh, kok gak garuh?
Light itu masih dark, coba refresh sekarang.
Gak garuh.
Ya sedih.
Ya sedih.
Ya gue coba force light/force dark lah.
Mungkin di brave nya kali.
Mungkin juga, mungkin juga.
Apa bukanya di safari?
Jadi intinya kan yang ini kan.
Mana dia?
Tadi ya, ini ya.
Jadi kita bisa specify kalau in that case, di contoh tadi kan ada ijo, ada pink kan.
Ini ya.
Ini kan.
Pink yang ini.
Berarti, mau background, mau color, mau highlight.
Highlight color itu kalau light, dia hot pink.
Kalau dark, dia lime.
Ini kan light.
Ini.
Kalau primary color nya.
333 yang light.
Ini kan, yang background nya.
Dark nya itu fa fa fa.
Dan seterusnya.
Fu fu fa fa coba.
Next.
Ini dulu deh.
Property, maaf telat.
Property, apa ini? Oh property sudah baseline.
Bukannya udah lama ya?
Atau beda ya maksudnya?
Ya karena udah baseline.
Ini kita bisa bikin property sendiri gitu?
Ya.
Oh wow.
Belum pernah pakai sih use case nya.
Gimana?
Namanya sama ya, kayak bikin variable warna ya.
Pakai minus minus.
Terus namanya.
Syntax nya color.
Syntax nya itu mengikuti color.
Oh syntax nya mengikuti property yang sebelumnya.
Property yang CSS.
CSS kan macam-macam ya.
Ada yang menerima unit.
With, kalau mission background.
Font size gitu kan ya.
Maksudnya dia menerima jenis unit apa.
Nah kelihatannya ini syntax nya.
Nerima unit color.
Oke.
Angle.
Terus kita tinggal pakai dengan ini ya.
Terus ada value nya.
Jadi gak perlu nulis.
Ya gak perlu nulis panjang-panjang.
Mungkin nanti butuh animation.
Ini mungkin bisa ditulis jadi custom property sendiri.
Jadi tinggal dipake gitu ya.
Cuman dia gak bisa benar-benar dari awal.
Harus ada turunannya dari property yang mana kan ya.
Harus pakai semacam jenis property CSS.
Ikutin kayak inherit lah ya.
Inherit ya.
Property CSS yang udah ada.
Oh ini pakai angle.
Kok dia bisa animasi gitu.
Ada animasi itu.
CSS animation.
CSS animation disitu.
Ini kan.
TV itu di bawah ya.
Animation 10 second.
Oh ini ya.
Keren ya.
Itu mah animasi CSS biasa.
Bentar.
Oh dia pakai border image.
Makanya border nya bisa warna ya.
Kira infill.
Isi warnanya.
Terus di tengah-tengahnya ada div lagi kosong.
Enggak ya.
Dia pakai border image.
Jadi kita bisa bikin custom berdasarkan property yang sudah ada ya.
Sudah available.
Berikutnya.
Ini kan udah baseline.
Kenapa masih limit ya.
Maksudnya.
Itu udah secentang semua.
Udah.
Oh iya iya.
Mungkin baru.
Popover juga udah cukup lama sebenernya ya.
Yang sama modal ya.
Tahun lalu inget ini.
Popover.
Ini juga biasanya pakai library kan ya.
Sama modal.
Itu juga udah.
Pure HTML, CSS.
Iya ini sekarang Pure HTML, CSS.
Pakainya bisa pakai div.
Bisa macem-macem.
Terus kita definisikan
Popover sebagai.
Popover.
Ini.
Jadi ketika ini
Didefinisikan sebagai Popover
Dia nggak muncul langsung ya.
Popover target.
Jadi button triggernya.
Popover target.
Harus sama dengan
Koresponden ID.
Ini ya sama IDnya ya.
Kalau ini Popovernya nggak kita
Isi.
Dia muncul.
Nggak ke height ya.
Jadi harus ada tambahan
Popover.
Di proses oleh browser sebagai Popover.
Oh nggak perlu display none gitu-gitu ya.
Ya nggak perlu.
Kan under the hood.
Browser yang ngerjain itu semua buat kita sekarang.
Kita tinggal pilih-pilih ini aja.
Tinggal ongkang-ongkang kaki aja.
Mantap.
Hit escape or click away.
Oh hit escape itu juga udah otomatis ya?
Ya tapi hanya
Pakai browser API.
Oh.
Udah include ya.
Secara manual.
Key event.
Deteksi key event.
Kan sebenernya kita harus listen.
Kasih add event listener.
Terus kita check.
Escape dipencet.
Kita close dulu kan harus manual itu.
Ya harus manual sendiri ya.
Atau pakai library yang manualnya kayak gitu ya udah.
Sekarang nggak semua browser yang kerja.
Oke oke oke.
Mantap.
Next. Tinggal sedikit lagi.
Entry effect
with starting style.
Ini masih limited juga.
Hanya firefox yang masih ketinggalan.
Starting style.
Ini untuk transition.
Transition itu biasanya kan mulainya itu dari mana.
Misalkan kita mau background colornya
setengah second.
Transparan. Mulai
Transitionnya mulai dari transparan.
Ya.
Atau dari warna kuning.
Nah ini transparan dulu.
Kuning dulu.
Kuning sampai akhirnya jadi transparan.
Jadi ada startingnya.
Starting style nya.
Kasi tahu ada action yang terjadi.
Ya.
Oh ngerti ngerti ngerti.
Kalau dulu kan harus pakai JavaScript kan.
Biasanya div.
Terus div.
Animated.
Baru background color.
Background colornya diganti.
Kalau kita klik buttonnya.
Si div itu harus kita kasih class name.
Ya betul.
Ganti background color.
Animate. Apa?
Transitionnya emang dari CSS.
Tapi terjadi transisinya itu.
Harus karena nambah atau berkurang.
CSS class name nya ya.
Kalau sekarang udah ada starting style.
Berarti ga usah kasih class name extra.
Lucu ya.
Another use case.
Is to animate in dialogs when open.
Jadi starting style nya.
Opacity 0.
Transform nya scale x 0.
Open dialog.
Eh mana dia?
Oh dia ke itu ya.
Ke geser.
No bug.
Ada sedikit.
Ada sedikit.
Ya tanpa JavaScript sama sekali.
Liat dulu.
Kosong ya.
Ada sedikit.
Transisi.
Mana sih tadi?
Itu exit state.
Starting style nya mau gimana?
Starting style nya mau gimana?
Starting style nya mana?
Oh ini.
Dialog open. Translate.
100.
Vertical height.
Oh dari bawah naik ke atas.
Ya ya ya.
Mengerti mengerti.
Line breakable Ruby
+ CSS Ruby Align.
Apa ini? Ruby Align.
Ruby annotation
are line breakable
and you can style Ruby text
with the Ruby Align CSS property.
Ruby text itu apanya gue gak tau.
Apa Ruby annotation?
I learned.
I see what ini ya.
What font non-UTF.
Non-UTF ya.
Non-ASCII non-ASCII.
Rendering result before
Chrome 128
with long Ruby annotation text.
Rendering result
as of
Chrome 128
with long Ruby annotation text.
Bidanya.
Oh ini ada penjelasan Ruby itu apa.
Oh ini ada penjelasan Ruby itu apa.
Oh itu itu.
East Asian Languages.
East Asian Languages.
Ya karena mungkin
bentuknya juga lain ya.
Ya.
Jadi kayak untuk styling nya pun
kayak pendekatannya harus
ada itu khusus.
Kan gak tau karena
belum pernah mengalami ya.
Phone yang CJK
Chinese, Japanese, Korean
itu gak mengenal yang namanya
Spasi.
Oh.
Mereka gak punya Spasi.
Jadi yang kayak ada space itu
di tengah-tengah itu sebenarnya satu karakter yang
punya white spaces.
Tapi sebenarnya satu karakter itu.
Oh gitu.
Ngaruh ke wrapping nya juga berarti ya mungkin.
Iya.
Thailand, Thailand
bahasa Thailand, bukannya gak ada Spasi juga ya?
Gak tau.
Bahasa Jawa ada Spasi gak?
Gak tau.
Ada kan? Holocoroko ada ya?
Ada, ada.
Kan mas orang ini kan?
Orang Indonesia.
Merdeka.
Tapi,
itu ada bedanya coba.
Dia potongnya coba.
Di scroll up dulu.
Stop.
Itu kan sampe
xiao se hong po.
Itu kan
di atas kan sampe hong po.
Dan di bawah itu xiao se.
Itu yang halap ya.
Line break yang pertamanya.
Oh sampe sini.
Dan itu lihat.
Xiao se hong po nya udah di bawah.
Bukan, plus juga
kalau di atas itu
tulisan
romawinya di atas.
Iya kan?
Oh iya iya.
Di tengah.
Oh iya iya iya, ngerti ngerti.
Jadi apa
ngikut kayak satu
kata dalam huruf latin
itu korespon dengan
satu karakter yang
di gambarkan.
Yang ini tadi kita
pake elemen Ruby.
Terus ini ada kata-katanya.
Terus ada RT.
RT itu kayak pengucapannya kali ya.
Iya.
RT nya isu di atas.
Iya, latin text nya di atas.
Ininya di bawah. Padahal ini taruhnya di bawah.
Ya bisa sih di styling dan lain-lain.
Tapi ini by default udah begitu ya.
Ya tuh itu, Ruby style itu
dari position under.
Ya iya iya bener.
Jadi ini kalau yang
baru dia mengikuti ya.
Bisa
bisa di ini, bisa turun lagi.
Oh bisa diatur, bisa diatur ya.
Anotation nya kan belum tentu
satu kata. Maksudnya belum tentu
satu kata korespon dengan satu karakter bisa.
Itu tadi yang emoji kan kayak
ada beberapa karakter.
Atau malah mungkin sebaliknya huruf
anotation huruf latin nya lebih panjang.
Itu kayaknya dia bisa otomatis ke tengah.
Atas-bawah gitu.
Kita bisa bikin website untuk
ini nih, untuk karaoke.
Hah?
Untuk karoke itu tulisan Chinese nya
sama tulisan cara bacanya di atas.
Sekarang lebih gitu kalau karoke kan.
Emang karoke,
enggak tau. Emang karoke
harus menyanyikan lagu Sina?
Lagu mana?
Lagu Korea?
Halo lagu Indonesia?
Ya contohnya kayak lagu
Blackpink, Rose to Black
apa-apa kan kita harus ada baca
emang ada ya
orang yang karoke tapi nyanyinya lagu itu.
Oh ada ya, si Jessica sering ya.
Ada lah, banyak.
Ada cuman nggak pernah aja.
Di komunitas aja banyak nyanyi.
Oh banyak ya, iya iya, oke oke.
Space around.
Ada ini ada value nya.
Ada banyak.
Ini mengikuti,
value nya itu mengikuti ala-ala
flex ya, flex box ya.
Ada space between, space around, start dan center.
Mau ke tengah,
rata sama karakternya
atau ke samping,
rata kiri, start ya.
Sama kalau mau center
di tengah.
Ini contohnya, kalau Jepang kan ada
kanji, ada katakana
atau hiragana. Katakana, hiragana.
Iya, jadi
katakana di bawah, terus katakana
di atas, atau hiragana
nya.
Dan katakana, hiragana
itu cenderung lebih panjang,
soalnya kan, apa persuku kata
kan, itu kayak
Hono Choroko gitu kan, kalau
kanji kan satu konsep
belum tentu, satu kata, satu arti.
Satu konsep, satu karakter kan.
Kalau di Jogja kan biasanya nama jalan
ada nama latinnya, ada nama
Jogja kan?
Sanskrit ya?
Jokascript.
Jokascript.
Bisa juga untuk ini kali jah,
kayak Indian juga gitu kan,
kan ada tulisan
Sanskrit nya juga, ada beda-beda
apa sih, font, bukan font.
Beda bahasa.
Typeface.
Typeface.
Ya pokoknya beda
Hono Choroko nya Mas.
Di selatan utara, timur barat itu beda
Hono Choroko nya.
Saya gak tau udah apa tuh namanya.
Tulisannya.
Beda tipografi.
Beda tipografi.
Ya bener bener.
Oke lanjut.
Pen Order.
Pen Order, ini
udah semua tapi masih baru.
"Using text stroke or pen order
property can control
the order that the text fill
and desired stroke are stacked
or rendered together."
Kalau ada outline-outline gitu ya?
"When you want to ensure that stroke
is rendered on top of the fill."
Ini nih yang tadi
diceritakan tentang font.
Ya walaupun font nya yang ini gak nyambung ya.
Ini kita bisa bikin
jadi kayak
apa tuh kalau di
tools kayak Figma gitu, bisa
union, bisa intersection.
Ini kayak gini nih, coba liat ya.
Tuh union kan.
Ya ya ya ngerti.
Jadi apa?
Outline nya tuh mau dibaliknya
atau di atasnya ya?
Ya kalau mau di bawah
atau mau di atas. Jadi bisa
seolah-olah efeknya itu dia
text nya nyambung semua. Padahal itu kan
dirapetin kan.
Caranya adalah dengan
stroke fill. Oh stroke dulu
baru fill.
Stroke dulu berarti
stroke nya di bawah gitu.
Coba kita cek ya.
Langsung ya.
Stroke fill.
Kalau stroke fill berarti stroke nya di atas, fill nya
di bawah.
Kalau fill stroke,
berarti dia yang tadi
gak sembuh-sembuh nanti dia.
Gak juga ngaruh.
Di bawah, di bawah.
Bawah mana?
Cuma...
Balikin dulu ya.
Stroke dan fill.
Default nya ini kan.
Stroke fill. Oh ini stroke fill.
Coba ganti.
Itu kan default yang tadi.
Oh iya bener.
Stroke.
Begini dia.
Berarti
kalau fill itu yang bawah ya.
Yang kiri itu yang bawah, ini yang atas.
Kalau stroke nya disini, berarti stroke nya
di atas.
Bisa di ini juga dong, bisa di animate.
Eh fill nya di atas, sorry.
Bisa di apa? Bisa di animate.
Bisa aja sih.
Bisa aja.
Ini dia bisa bikin font nya
nempel gini pakai apa?
Letter Spacing.
Letter Spacing ya.
Minus ya.
Nah, aslinya begini.
Eh aslinya enggak ya.
Aslinya begini.
Aslinya begini.
Normalnya begini.
Tapi dibikin rapat.
Habis itu
dikasih stroke nya
ditimpa oleh fill nya.
Jadi fill nya di atas, stroke nya di bawah.
Jadi tetep tadi nggak sih ngerjain
bling?
Bisa menganmenan bikin begini.
Sikil isu.
Sikil isu.
Siapa yang
developer Indonesia
kerja di Jepang?
Makina.
Dia yang bikin, yang bikin browser.
Tapi dia nggak bisa.
Gak bisa dan nggak pernah.
Bukan bidangnya, ya
pakai CSS nya ini, ya dia nggak pernah pakai
diluar pas bikin
ngetes. Berarti itu emang
dua bidang.
Berarti dia bisa baca spek.
Bisa jalanin
tesnya.
Tapi nggak bisa.
Ya CSS nya nggak ngerti.
Lucu juga ya.
Oke.
Kebalikannya gue.
Kayaknya terakhir. Ya terakhir.
CSSOM
Next State Declaration. Apa ini?
To fix some weird
bugs. Object model.
Pokoknya untuk mengatasi masalah
CSS nesting. Nesting ya?
Oh ya CSS nesting itu.
Gue juga udah nyoba di production
by default semua browser
aman, lancar jaya.
Oh ya? Wow.
Nggak perlu lupa CSS lagi.
Nggak perlu lupa CSS.
Tapi nggak bisa kayak
SAS atau SCSS yang
class name apa?
Misalnya tanda dan terus
dash dash
atau harus
kepisah.
Selektornya kepisah. Nggak bisa
dijadikan
satu kata atau satu selektor.
Jadi ini apa nih?
Nggak ngerti.
Kayaknya cuma bilang
nge-benerin bug aja.
Nge-benerin bug ya?
Oke.
It's a good time
to be front-end dev.
Yang bikin adalah
Mas Adam
Brahmus
Mbak Rachel
Mas Berry sama Mbak Una.
Kalau temen-temen mau lihat, disini ada
GitHubnya. Jadi silahkan
cek aja langsung
belajar, dipelajari.
Menarik ya. Ini jelas
tidak mudah. Pasti mereka
punya orang desainnya ya.
Oh iya. Pasti bukan mereka
yang bikin. Tapi apa?
brainstorming-nya bikin ide-nya.
Apalah prototyping
mereka.
Cuma
diwujudin secara visual ya
pasti ada tim
orang lain. Coba aja deh ini.
Komitnya. Coba lihat komitnya.
Di GitHub.
Kayaknya nggak nih.
Yang bikin.
Yang bikin pixel-pixelnya.
Coba lihat tuh.
Kontributornya tuh.
Kontributor
paling atas ya.
Siapa aja.
Ini tumpat tadi.
Ya mereka
yang tertinggi.
Yang ngomit. Tapi maksudnya kayak
asset-nya. Aset visualnya.
Kayak pemilihan fontnya. Ya mungkin kan
dibalik itu ada orang lainnya.
Bikin speknya.
Ada nggak file Figma-nya
di sini?
Nggak ada.
Orang nggak pake Figma.
Gak bikin Figma ya?
Nggak.
Weh. Dependensi.
Dependowon. Kuberjaya.
Kira ini apa?
Ada yang...
Oh ada. Fix biome
responsive. Oh pake biome.
Udah.
Banyak kan itu. Isunya apa?
So it's taken.
Dependensisnya apa?
Nggak ada.
Pake open props. Pastinya ya.
Soalnya yang bikin
si Mas Adam.
Pake typescript.
Mas Adam yang bikin open props ya?
Iya.
Oke cukup untuk malam ini.
Terima kasih banyak
buat semua aja yang sudah
hadir dan menonton.
Dengan demikian kita tutup
episode kita malam
hari ini kita ketemu lagi
minggu depan di hari Selasa.
Mudah-mudahan kita bisa live kembali
dengan format live.
Selamat malam. Selamat istirahat.
Bye bye.
Terima kasih sudah menonton.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb ----------------------------------------------------------------------------------- Bergabung menjadi anggota elit di kanal ini: https://www.youtube.com/channel/UCHhAlFGFCGgIusQkQIqJLYw/join Donasi dapat meningkatkan kualitas kanal ini: 💰 https://karyakarsa.com/rizafahmi/tip 💸 https://sawe Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
25 Feb 2025
Ngobrolin Fitur Terbaru CSS bersama @AdamArgyleInk dan Bramus @ChromeDevs
Episode ini membahas CSS Wrap 2024 bersama Adam Argyle dan Bramus, dua Developer Relations Engineer dari tim Chrome yang...
2 Jan 2024
Yang Seru di 2024
Episode ini membahas tentang hal-hal seru yang dinantikan di dunia web development pada tahun 2024. Para host membahas p...
17 Nov 2022
Ngobrolin Island Architecture
Episode ini membahas Island Architecture beserta dua topik yang saling menyambung: Quicklink dan Astro. Dimulai dari Qui...
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 .