Ngobrolin CSS Wrapped 2024 - Ngobrolin WEB

1:37Iya hari ini.

1:39Besok...

1:40Long weekend, super long weekend.

1:42Tapi pada ngasih ibu, ya ibu.

1:44Practeknya nggak long weekend.

1:46Karena kebetulan kerjanya ada yang harus preview di kultur yang nggak merayakan Isra Miraj.

1:51Jadi merayakan Chinese New Year.

1:55Jadi on paper ligur, tapi ya ada yang harus diselesain juga.

2:00Di atas kertas ligur, di bawah kertas.

2:04Ya ada yang jawab yang kudu diselesain dulu sebelumnya.

2:08Nasi remote worker ya.

2:09Iya betul.

2:12Remote worker yang kerjanya di perusahaan luar ya.

2:15Bukan perusahaan Indonesia.

2:16Saya hari ini full meeting.

2:20Aduh. Full meeting ya.

2:22Banyak banget.

2:23Sampai lelah.

2:25Makanya lebih enak ngobrolin web aja.

2:27Lebih seru meetingnya.

2:31Ini juga meeting, tapi meetingnya.

2:34Turtul, turtul, turtul, turtul.

2:35Okay, okay.

2:36Ya, berasa sih capainya meeting itu.

2:39Berbeda dengan kita coding ya.

2:41Coba teman-teman yang sini remote worker.

2:45Salam satu online.

2:49Salam satu online.

2:52Iya.

2:54Menurut orang lain enak ya kerjanya duduk-duduk, ngetik-ngetik doang.

2:57Kalau remote worker yang perusahaan Indonesia mungkin masih merayakan.

3:03Maksudnya masih libur kali ya, kali.

3:06Tapi kalau yang perusahaan luar, atau mungkin perusahaannya perusahaan Indonesia.

3:11Tapi kliennya klien luar.

3:12Biasanya tuh pasti ada yang standby.

3:15Kalau gue timnya emang Indonesia sih, sebenarnya tim Indonesia sebetulnya di atas kertas ikut hari liburi Indonesia.

3:24Tapi ya, kadang ada.

3:26Nggak selalu sih, ini kebetulan lagi ada tanggung jawab yang harus diselesaikan dulu.

3:30Karena urusannya, proyeknya, urusannya sama pihak-pihak yang nggak di Indonesia.

3:37Yang tidak di Indonesia, iya.

3:39Dulu tuh saya pernah kerja sama di perusahaan Korea, Korsel.

3:45Mereka sampai komplain, kan urusannya orang sana langsung.

3:50"Indonesia tuh banyak sekali, liburan ya."

3:53Iya, kita ada 6 agama, 6 kali.

3:57Kalau bisa ditambah satu lagi, mabuk-mabuk.

3:59Eh, tahun baru? Udah juga kan.

4:03Hari Raya, tahun baru.

4:06Ya, apa, holidays, holidays, public holidays, dan berbagai kultur kita akomodasi.

4:12Emang di Korea liburnya kapan?

4:15Nggak, kita liburnya cuma Natal tahun baru doang.

4:17Akhir tahun.

4:20Kampanye tempat saya bekerja nggak ada libur, Mas.

4:25Oh, nggak ada juga ya?

4:26Tapi bisa cuti kan, kapan aja?

4:28Iya.

4:29Jadi secara aturan kampanye,

4:31karena orangnya diverse banget, jadi dari kampanye sendiri nggak ada hari libur.

4:38Tapi total hari yang boleh diambil buat libur, ya banyak.

4:45Termasuk banyak, ya.

4:46Ya, jadi atur sendiri lah mau libur kapan.

4:48Tapi justru enak buat orang-orang yang pengen liburan, anti mainstream.

4:57Tidak di hari libur umum.

5:00Ya, kalau lajang.

5:02Kalau anak udah sekolah nggak bisa juga, Mas.

5:05Betul, betul.

5:07Merasakan kok, merasakan.

5:10Boleh izin acara keluarga lah. Betul, liburan sama keluarga itu acara keluarga kan.

5:14Iya.

5:15Oke, sebelum kita ngelantur kemana-mana.

5:20Oke, sebelum kita ngobrolin, ngobrolin liburan, kita ngobrolin web.

5:24Ya, kita bahas CSS Wrap. Jadi CSS Wrap itu dipublikasi itu mungkin tahun lalu ya, akhir tahun lalu ya, kalau nggak salah ya.

5:37Sebelum 2004 berakhir ya.

5:40Ya, kita pernah bahas.

5:572022, sejak 2022.

6:10Ya, gitu. Jadi intinya ini kayak recap lah, karena belakangan ini kan sekitar 2-3 tahun terakhir tuh web UI CSS, eh utamanya CSS.

6:19Ada tambahan misalnya HTML, atribut, dan lain-lain. Pokoknya terkait CSS itu sangat cepat ya, banyak fitur-fitur baru, nggak kayak dulu.

6:28Kalo dulu banget ya, Flex, Flexbox launching, tapi baru 2 tahun, baru diadaptasi browser lain.

6:35Iya, adaptasinya panjang ya, waktunya ya.

6:38Lama, surem. Nah, kalau sekarang tuh, ya kalau lebih baik antar browser juga sudah banyak inisiatif saling bekerja sama.

6:46Dampaknya apa? Jadi banyak fitur yang rilis dalam 1 tahun, itu ada banyak. Jadi kayak setiap akhir tahun, awal tahun ya ini.

6:58Setiap awal tahun tuh kayak ada semacam showcase apa aja sih yang baru, fitur-fitur CSS. Nah, ini kayak dikemas.

7:07Dikemas 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.

7:20Cuma kan, ya mungkin kurang menarik lah. Jadi ini kayak direka, dikumpulin jadi satu, masukin satu website yang tampilannya menarik.

7:30Biar kita bisa lihat sepanjang tahun 2004. 2024 ini ada major features apa aja sih yang baru di CSS, safe-nya begitu.

7:41Ya, jadi ini bukan kayak state of CSS atau state of JS yang adalah survey ya. Ini bukan survey kan, ini adalah showcase kan ya.

7:51Betul, showcase. Jadi di 2024 ini, ada, saya diklik, tidak usah lah, saya kliknya video. Nah ini, ada 3 kategori.

8:03Jadi fiturnya di component, interactions, dan developer experience.

8:12Kita 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.

8:25Dan dia menggunakan, coba kita lihat ya, package gipsen, astro.config.mgs.

8:33Iya, ah iya ya, di kanan bawah aja udah ada gitu ya, astro ya.

8:42Dia jadi bahasa, oh iya ya komponennya, komponennya astro ya.

8:46Oh, mereka nggak pakai web component ya.

8:58Nggak pakai framework, ya bisa aja kalau pakai web component yang javascript di dalam file astronya, bisa diskon.

9:06Nah, 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.

9:19Lebih tematis ya, ada temanya gitu ya.

9:31Karena yang fiturnya juga banyak.

9:36Iya, color flow juga sih, kayak fitur color, tau nggak? Karena ada color juga muncul di 2023, apa 2022 ya.

9:44Kita bandingkan, ini bukan, ini kan, iya bagus, keren, oh jadi temanya ini ada fiturnya ya.

9:56Kalau ini, kalau melihat di sini, temanya retro ya, ada, apa ini?

10:08Retro game, pixel art, retro game, terus hamburger menu-nya, icon hamburger menu yang di kanan atas, beneran hamburger dong.

10:17Kan bisa tiga garis itu disebutnya hamburger menu, nah ini hamburger menu.

10:24Tugunya 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.

10:39Mungkin itu juga jadi fitur yang dibahas, dipakai di sekalian itu, jadi tema dari website ini.

10:48- 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.

11:00- Siapa tahu? - Nanti kita tanya, nanti kita tanya.

11:04Nanti kalau kita ketemu sama yang bikin kita tanya nanti ya, itu jadi pertanyaan yang bagus juga.

11:09- Oke, kita langsung. - Kali atas.

11:22- Mana? - Ini, play ini.

11:35- Di bawah dikit. - Di bawah, ini ya?

11:43- Kayak RPG gitu loh, kayak game RPG pembukaannya. - Oh iya, lucu-lucu.

11:50- Apa? Scroll ke bawah lagi. - Oh ini.

12:07Kreatif banget ya, kreatif ya, bisa mikirin kayak gini ya.

12:12Jadi ini ada 17 fitur highlight-nya, dibagi ke 3 kategori, yaitu Komponen, Interaction, dan Developer Experience.

12:21Ini Komponen, pakai artwork segala ya.

12:27"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."

12:56- Apa itu? Kita lihat. - Nggak ngerti tuh.

12:58- Field sizing, field sizing ini kurang lebih... - Input yang mengikutin...

13:05- Ngikutin ukurannya sampai mentok ya. - Nah, ini dulu tuh ngetrend pas material design pertama kali launching ya.

13:14Kan ada fitur kayak gini, cuma kalau dulu harus pakai JavaScript kan.

13:20- Oh iya, kalau sekarang pure CSS ya? Kalau kata Pak Dika ya, CSS bro. - CSS bro.

13:35Tapi masih limited karena Firefox dan Safari belum masuk ke baseline.

13:48Jadi ada kemungkinan user kita ada yang belum bisa menikmati.

13:52- Tapi ini progressive... - Pasti ada poly fill-nya.

13:56- 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.

14:12Ini ada contohnya, ini nggak pakai grow, yang ini pakai grow.

14:18Kita lihat, oh ini dia, layer itu apa sih masih?

14:24- With text area, select field sizing content. - Pokoknya udah 2 tahun yang lalu.

14:33- Ini ya, sizing content kan ya, yang membuat dia... - Ini bisa setel minimal sama maksimalnya.

14:42- Jadi biar nggak ekstrem. - Oh, ini ya. Halu, halu, halu, halu, halu, itu, ngikutin ya.

14:52Kalau yang nggak grow ya begini, standar ya.

15:00- CH itu apa ya? - Mana?

15:06- Characters. Characters. - Oh, jumlah characters.

15:18- Hah, apaan sih? - To the Eyeler, ini kan?

15:23- Iya, baru tahu bahwa. - Iya, baru tahu makanya.

15:28- Kapan-kapan bahas CSS unit lah kita. - Oh iya CSS unit, makin banyak ya.

15:35Terus, itu yang pertama, apa, field-nya ngikutin ukuran apa, contentnya.

15:42- Yang kedua... - Dengan customization bisa di set minimal dan maksimal juga.

15:47Yang kedua ada animate to hide, auto.

15:54- Nah ini... - Ability to animate to hide auto. A slight variation of that request is to transition the width properly instead of the height.

16:06Or to transition to any of other intrinsic sizes, represent by keyword like main content, max content, and feed content.

16:14From 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.

16:32- 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.

16:47Nah itu kan enogik banget kan, kalau hide auto itu nggak bisa, jadi biasanya diakalin dulu, ditung berapa pixel pakai JavaScript, baru di-animate.

16:56Jadi 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.

17:13- Tapi sekarang jadi bisa. - Eh cuma browser supportnya masih belum...

17:19Belum juga, masih ada dua nih yang ganjil, non-chromium ya.

17:25Yang mana contohnya?

17:31- Card size. - Gap editing.

17:37Interpolate size jawab cari, interpolate size.

17:41Ini di atas tadi?

17:44Ini?

17:49Ini doang?

17:52Ini bisa di-comment nggak bisa ya? Oh harus di-click.

17:57- Harus buka. - Harus buka ya.

17:59- Interpolate size... - Ini kan obtain the workplace to animate to from intrinsic size keyword.

18:11- Jadi harus obtain specifically ya, kita harus specify bagian mana yang mau kita include, biar bisa animate intrinsic sizing. - Calc size-nya dimana coba?

18:26- Try demo ya, ya lari dia ke sini.

18:32Calc size-nya nggak ada.

18:38Coba kalau kita comment ya.

18:41- Bisa tuh? Tapi nggak animasi ya? - Tapi nggak animate.

18:47Animasi-nya...

18:49Kalau ini balikin baru...

18:53Nah ada animasi-nya ya.

18:56Tapi yang dia ngitung ini-nya, panjang dan lain-lainnya dimana ya?

19:04Pull D, display, di sini nggak ada ya, Le, reply.

19:13- Nggak, itu max content, width-nya max content.

19:19- Mana? Oh ini ya? Oh focus invisible, bener-bener.

19:24Coba ini.

19:26Nggak ngaruh. Coba di-comment.

19:33- Nggak muncul? - Nggak muncul.

19:38Jadi max content atau min content itu dia kayak intrinsic sizing kan, dia ngitung, ya kayak auto lah semacam.

19:47Kalau yang di atasnya 2.5 RM itu kan labor icon-nya.

19:53- Oh, ketika nav anchor ada focus, on focus, width-nya dibuat max ya.

20:02Ya, to hover.

20:05- Dan istimewa ya, kalau dulu itu nggak bisa dianimasi.

20:08Itu dulu nggak bisa ada pelan-pelan ngebuka gitu, jadi kayak cuma flicker aja.

20:13Nah kalau sekarang udah bisa dianimasi.

20:16- Coba panjang ya. Eh, belum.

20:21- Ini JavaScript library berkurang satu ya, dia bikin kayak gitu.

20:34- Kefikiran tuh bikin begini-gini tuh, ada aja yang bisa mikir, spek-spek begini.

20:40- Pake CSS pula ya.

20:44- Karena salah satunya karena ada intrinsic size tadi, kalau dulu kan sekuatnya kita harus hitung dengan JavaScript kan.

20:55- Interpolate size itu.

20:57- Capsize juga termasuk, terus warna bisa didarken, dilighten itu kan dari CSS ya.

21:06Itu juga perhitungan kan, jadi CSS sudah bisa ngitung sekarang.

21:12Makin pintar.

21:15Oke, yang ketiga, ada Exclusive Details.

21:19Akordian Komponen, ini udah baseline, udah aman, temen-temen bisa pakai langsung.

21:27- Nah ada penjelasannya tuh, kalau di-click.

21:30Nah, sejak September, sudah bekerja di seluruh versi browser, ya ke empat versi browser yang diatas itu.

21:41- Empat versi sebelumnya?

21:43- Dua deh, dua.

21:45- Oh dua, oke.

21:47Jadi Exclusive Detail itu adalah akordian biasanya, di dalam akordian itu ada details.

21:53Ada tag atau element details.

21:56Terus, ketika kita buka satu details, details yang lain otomatis ketutup.

22:06Jadi kalau dari dulu kan udah ada itu sebenarnya element HTML, details sama-sama.

22:11- Yang gini udah ada, ya udah ada.

22:13Tapi kalau dibuka, semuanya dibuka.

22:16- Diklik ke buka, diklik lagi untuk toggle, cuma masing-masing misalnya kita punya beberapa item itu 1, 2, 3, 4.

22:23Dia nggak sepinter itu untuk...

22:25Itu kan berarti harus stateful kan, kayak kita pengennya keempat itu tahu kalau misalnya 2 dibencet, kebuka.

22:33Berarti yang lain 1, 3, 4 harus tutup. Nah, kalau dulu kan nggak handle itu harus pakai JavaScript kan.

22:40Berarti sekarang udah cukup pinter buat jalan sendiri.

22:43- Dia bisa otomatis sesuatu itu semua?

22:46- Iya, misalkan ini kan kita lagi buka yang satu, kita mau buka yang kedua, yang satu itu ketutup.

22:54- Nice.

22:55- Kalau mungkin kita logiknya itu harus antara di JavaScript atau di back-end, nambahin CSS class, open, close, ya kan?

23:09Kayak bikin itu aja, kayak bikin table, ya maksudnya di back-end, kan di back-end juga bisa gitu kan.

23:17Waktu, kalau server render ya. Kalau bikin table yang warna-warnanya berbeda antara yang genap sama yang ganjil kan juga.

23:31- Oh, ada event, ada classnya.

23:33- Iya, event code gitu kan.

23:36Ini berarti kita pakainya dari pakai details.

23:44Oh, namanya sama, jadi dianggap satu grup gitu ya?

23:56- 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.

24:07Harus keep track, misalnya dia cari semua yang namanya learn CSS. Satu dibuka, berarti browser yang kerja, tiga lainnya, semua item lainnya harus ditutup.

24:17- Iya. Ini details-nya sendiri sebenarnya diberi 5 property open ya.

24:22- Pada tertarik ini nggak sih untuk kerja di browser?

24:28- Nggak bisa.

24:31- Oh, skill issue.

24:38- Harus di plus-plus kan kalau Chrome itu kan.

24:40- Iya. Harus misalnya low-level language lah.

24:44- Ada yang udah pakai RAS kan?

24:46Ada browser yang baru kan?

24:49- Apa tuh?

24:51- Ladybug, Ladybug.

24:53- Yang baru? Iya.

24:55- Yang mana?

24:56- I don't know. Entah gue cari, ya kan.

24:58- Kayaknya pernah di posting deh.

25:01- Pernah.

25:03Soalnya kalau browser engine written from scratch in RAS, tetap aja gue nggak bisa, jadi ya oke.

25:10- Iya, RAS juga tidak semudah itu.

25:12Ini details-nya ada property open, jadi by default dia buka yang pertama kan.

25:16Tapi kalau misalkan kita tutup terus kita buka yang kedua, di sini open-nya nggak ada ya.

25:21Jadi dia perubahan-nya itu di JavaScript-nya nggak ada, ada nggak?

25:24- Nggak, browser-nya nggak ada.

25:27- Servo? Tapi kan nggak production ready, nggak ada yang pakai ya?

25:34- Belum, belum, belum.

25:36- Oh iya rencananya mau dijadikan engine untuk Firefox, tapi belum-belum ya.

25:42Oh ini ada JavaScript-nya untuk toggling ya, nambahin atribut.

25:50Jadi kalau box gitu, nambahin atribut.

25:57- Oh, ini polyfill.

25:59- Oh iya.

26:01- Berarti aslinya CSS aja ya, cukup ya?

26:05- Iya, iya, iya.

26:07- Gimana dia?

26:09- Kenapa?

26:11- Iya.

26:13- Oh iya.

26:15- Ada font family, anybody.

26:19Font family apa ini?

26:21- Iya kayak gini.

26:23Itu juga ya.

26:25- Menarik.

26:29- Iya nggak ada ya?

26:31Berarti hanya HTML aja?

26:33- Iya, hanya HTML.

26:35- Oh karena di satu grup, jadi itu dia akan menyimpan state yang mana yang besar, yang mana yang itu.

26:43- Udah susimpul itu karena namenya sama.

26:47- Iya, iya, iya.

26:49- Benar, benar, benar.

26:51- Oke.

26:53- Ada terangannya di atasnya.

26:55- Oke, atas lagi.

26:57- Oh ini ya.

26:59- Iya.

27:01- Add name atribut to elements.

27:03- Ya, exclusive.

27:05- When this attribute is used, multiple detail elements yang memiliki nama yang sama akan mementuk suatu semantic group.

27:11- Oh, mantap ya.

27:13- Oke.

27:15- Kalau kita mau buka salah satu details element dari grup tersebut, maka yang sebelumnya terbuka akan otomatis.

27:21- Yes.

27:23- Memudahkan web dev ya, ngerti? Sekarang.

27:27- Terus kalau misalkan ada yang belum support, ya tinggal pada JS ya.

27:33Ini yang lama ya, solusi yang sebelumnya.

27:37- Iya.

27:39- Dikunakan selektor. Apa itu? Ini?

27:51- Sebenarnya element detail summary sebagai element HTML sudah lama banget, 10an tahun kali.

27:59Ini kasusnya mirip dengan date ticker atau semacamnya. Jadi ada HTML elementnya, tapi stylingnya ribet setengah mati.

28:09Jadi biasanya developer ya pakai UI, apalah UI component yang udah jadi atau bikin dari defaultnya bikin workaround sendiri karena sulit di styling.

28:19- Nah, ini nggak tahu nih. Gua nggak tahu sih ini styleable details apaan. Cuma kelihatannya itu berusaha memudahkan styling detail.

28:29Kayak misalkan ada toggle-nya tuh tadi yang misalnya accordion judulnya yang buat diklik, itu tuh dulu kayaknya stylingnya sulit lah.

28:37Ada yang harus di-hide, harus pakai pseudo element. Nah, nggak tahu ini styleable details apakah jadi lebih gampang di styling apa?

28:45- Dulu katanya kan details itu fix kan begitu aja. Sekarang details itu bahkan bisa diganti direction-nya yang tadinya mungkin kolom,

28:55hanya kolom doang, sekarang bisa jadi row misalkan. Kayak gini. Kalau ini nggak mungkin dulu hanya dari atas ke bawah aja.

29:05Nah, sekarang details-nya ini bisa nih. - Iya, iya.

29:15- Coba kalau di-pedit flex direction-nya. - Iya, iya. Flex direction-nya kita ganti jadi itu.

29:25- Harus di ini, harus di-code. - Edit dulu, buka di-code. - Resource? Ini bukan, kok bukan ya? Editnya ini gimana? Ini?

29:35- Edit on-code pen. - Udah gede begitu ya. - Ini pakai browser apa sih?

29:41- Brave. - Oh, Brave. - Tidak, tiap bulan ganti-ganti. - Kayak lagunya si Katy Perry.

29:49- Apa itu? - Brave. - Brave? Emang ada ya?

29:55- Tidak tahu. - Maaf saya nggak ngeluhin Katy Perry.

30:01- Ini mana tadi flex direction-nya? Jadi kolom. - Iya, kolom. - Jadi ke bawah.

30:11- Tara, ke bawah dia. Tapi kebuka semua. - Tapi jadi full. - Iya.

30:19- Berarti dulu detail nggak bisa kita styling ya? Sekarang udah bisa di-styling ya? Ditambahin flex, tapi terbatas.

30:27- Kayak ada yang harus diumpetin, ada yang harus pakai sudo element after, before-after, ya gitulah. Harus jungkir balik dulu.

30:37- Benar-benar. Wah keren sekali ini. Kaga ada JS-nya lho, CSS doang. - CSS bro. - CSS bro.

30:49- CSS bro. - CSS. - Tapi kan kebun-buni styleable details masih belum baseline, baru chromium-base.

30:57- Ya sih. Ya, chromium-base masih. - Kok dia nggak ada yang bikin yang hanya Firefox aja, chromium-nya belum support nggak ada ya?

31:07- So far belum pernah nemu. - Ya ini kan dari tim Chrome. - Iya maksudnya biar adil gitu.

31:19- Harus ada orang dari Firefox ternyata, dari Safari-nya yang bikin lah. Atau kerja sama-kerja sama.

31:27- Jamannya CSS Grid, Firefox tuh lebih cepat lho daripada Chrome. Jadi grid template columns atau apalah punya yang nested template columns atau grid area.

31:39- Itu dulu punya Firefox duluan dan bahkan DevTools yang buat, apa, yang ada garis indikator grid itu yang pertama adopsi. - Yang mempulpori Firefox duluan.

31:51- Cuma kayaknya sekarang nggak terlalu.

31:59- Ini apa? "In addition to using more display types, the content of details element automatically get rubbed in a detail content shadow element.

32:09All 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."

32:23- Apa maksudnya? Oh ngikut ya, height-nya ya. Ini naik atas kan. Ini ke bawah dia. Ini pandang. Pasti gitu ya.

32:35- Karena bisa, apa jadi bisa animatik. - Tapi kayak animasi ya?

32:41- Iya, ada kayak bouncing-nya gitu kan ya. - Iya, oh ini. Transition.

32:47- Transition. - All summary.

32:53- 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.

33:03- Warning, your browser that's not support. - That's not support. So this demo won't work as intended. Tapi ini support.

33:17- 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..."

33:41- Pokoknya apapun yang kayak semacam pop-up gitu ya. - Iya.

33:47- Layered user interface, tool tips atau apa lah yang kayak info lightbox atau dialog pop-up. - Iya, contohnya ya. Nah ini, over easy.

33:59- Gak, lucu aja. - Oh, gak bisa di-click ya? - Dikasih lihat aja contohnya disini, misalkan ini. Image.

34:13- 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.

34:29Terus misalnya over easy-nya itu di position absolute, di bottom 0, terus di ketengahin gitu, biar bisa relative to image. Nah sekarang udah gak...

34:43- Langsung ya. Over easy. Anchor name over easy. Ada yang lain gak? Tread over easy.

34:53- Apa sih maksudnya? Gak ngerti gue. - Nah ini. - Tuh, tuh, tuh. - Oh, bisa kayak tool tip gitu, posisinya dimana.

35:09- 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...

35:23- 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.

35:46- Ini udah baseline belum sih? Atau limited ya? - Belum. - Limited? - Belum. - Belum. - Ya, baru mau pake.

35:58- 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.

36:10- Biasanya sih udah pake library, tooltip. - Ya, library tooltip ya udah ada ya pilihannya mau dimana.

36:18Oh, 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.

36:41- Nah, ini menarik nih. - Nah, yang berhubungan dengan interaction. Scroll. Custom scroll bar.

36:49- Weee. - Versi limited availability. Yang color ya, tapi kalau... - Sudah bisa. - Oh, scroll bar width udah baseline? Yay. - Sudah baseline.

37:01- 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.

37:11Kadang 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.

37:39Nah, 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.

37:55Nah, 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.

38:16Sekaligus 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.

38:41Oh, 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.

38:57Gua 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.

39:15Langsung 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.

39:31Apa? 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.

39:47Dia 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.

40:01Custom scroll bar on Bram.us. Mas Bram. Oh ini penjelasannya. Pake WordPress loh dia. Kok tau? Kayaknya ya, iya pakai WordPress. Iya, iya.

40:21Terus di-powered by WordPress. Jadi kegoda pengen bahas WordPress drama lagi tapi nggak usah dulu lah ya.

40:31Emang gimana dramanya? Oh iya, nanti aja. Itu yang double bookkeeping. Itu bukan WordPress, Pak. Itu sesuatu yang visi. Oke, CSS.

40:51Itu view transition. Ini lanjutannya dari view transition ya. View transition yang bisa, beda halaman. Bener nggak? Beda page ya maksudnya.

41:05Sayangnya 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.

41:19Jadi 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.

41:33Nah 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.

41:51Paragraf 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.

42:05Ya 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.

42:19Hmm, Ivan mau bahas di Google IOS standard?

42:24Kayaknya ya.

42:26Bahas kayak gimana?

42:28MPA, jadi misalnya performa terus ditambahin MPA, kayaknya asik ya.

42:35Oh.

42:37Bikin aplikasi seperti MPA tapi serasa SBA gitu ya?

42:47Iya, betul.

42:49Bisa, bisa, bisa.

42:51Coba lah nanti ya.

42:53Menarik, menarik.

42:55Tinggal kurang Firefox ya. Aduh.

42:57Iya, tinggal kurang Firefox.

42:59Jadi 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.

43:17Kita udah cukup sering ya bahas tentang view transition, jadi kita lanjut aja.

43:24Scroll driven animation.

43:26Ini juga masih limited availability.

43:30Ini adalah kita bisa melakukan animasi ketika scrolling ya.

43:39Banyak banget contoh-contoh kerennya, nanti kalau ada yang pengen lihat, lihat.

43:43Nah, ini nih.

43:45Mas Sandika di YouTube ada.

43:47Defex, Defex.

43:49Defex Jakarta.

43:51Mas Sandika di Defex tentang ini.

43:53Ya, jadi pada saat scrolling.

43:56Ini kan harus pakai JavaScript ya.

43:58Iya, apa sih, Parallax ya namanya ya, Parallax.

44:01Gitu-gitu ya.

44:03Sekarang udah CSS bro.

44:06CSS bro.

44:09Nggak ada contoh ininya ya?

44:13Banyak banget contohnya.

44:15Banyak banget contohnya ini.

44:17Dimana contoh demo-nya?

44:18Pak Dika juga bikin ini tuh kayak Star Wars.

44:23Openingnya Star Wars gitu loh.

44:25Oh, iya, iya, iya, Star Wars.

44:26Dikumpulin di satu, apa, gambar mouse-nya aja pakai scroll driven animation kan tuh.

44:32Coba scroll kan masih.

44:33Iya.

44:35Nah, saking banyaknya demo-nya dikumpulin di sini.

44:38Ada free video course segala, oh ini.

44:40Ada 10 ya, 10 video.

44:42Panjang sekali, banyak berarti ya tipe-tipenya ya.

44:45Kalau yang lebih cocok belajar pakai apa sih, video penjelasan itu.

44:50Tapi kan ada orang yang kalau misalnya diceramain di video malah ngantuk lebih gampang liat demo

44:55karena bisa diubah-ubah sendiri.

44:57Itu semua demo-nya di situ tuh, enak banget.

44:59Ada di sini ya.

45:01Scroll driven animation, kita bisa chat nggak?

45:04Kita coba fitur chat-nya.

45:07Kita cek ke penonton atau cek ke kita?

45:11Nggak bisa di highlight ya? Wah, nggak bisa.

45:15Nggak ada fitur chat-nya.

45:16Ngasih, ngasih.

45:19Oke, lanjut.

45:22Scroll driven udah, eh, perlu dibahas lagi lebih lanjut nggak?

45:25Udah tau lah ya, betul-betul kayak tinggal cari liat demo-nya aja.

45:31Silahkan liat demo-nya sendiri.

45:32Next, scroll snap events.

45:36Scroll snap ini kalau nggak salah yang buat, ya biasanya buat karusel atau semacamnya itu kan ya.

45:42Build-in snap events.

45:45Coba gameplay.

45:47Oh, buat karusel, iya, iya, iya.

45:52Pas di tengah gitu ya.

45:54Di tengah, dan gue udah pakai ini udah, udah ada di semua browser.

45:59Gue barusan banget hari ini nge-ship ini ke production, seneng deh.

46:03Wuih, tepuk tangan dulu.

46:11Tapi ini JavaScript ya?

46:14Tapi ini JavaScript ya?

46:15Oh dulu, JavaScript gitu, atau gimana?

46:21Ini ya contohnya ya?

46:22Ada penjelasannya di atas.

46:25Ada penjelasannya di atas by komputer, build-in.

46:29Aku pakai atribut CSS-nya, tapi waktu terjadi snap, ternyata...

46:35Ada event, ya.

46:37Firing event.

46:38Iya, ada eventnya.

46:40Kita bisa ngapain lagi lah.

46:41Ponsual itu di JavaScript ya?

46:43Ini malah baru tau juga sih ada eventnya.

46:46Kalau soal CSS only bisa scroll snap itu udah nggak lama, kelihatannya udah lama.

46:51Udah lama ya.

46:52Ini contohnya ya?

46:53Udah baseline juga, makanya udah berani nge-ship.

46:58Ini nggak bisa digeser ya.

47:03Oh, pakai bubble.

47:07Open props.

47:16Proportinya apa, kalau mau bikin kayak gitu?

47:19Yang ini ya?

47:20Scroll snap change ya?

47:22Bukan, itu ininya, itu eventnya.

47:24Itu JavaScript-nya kan ya?

47:26Event, iya.

47:27Yang penggaris itu, demonstrasi eventnya itu seru sih.

47:34Maksudnya, jadi bukan kita bisa nubah lewat input angkanya.

47:40Tapi kalau misalnya kita scroll pakai mouse, kita geser aja.

47:44Scroll kiri-kanan gitu, angkanya ikut nge-update.

47:48Coba deh.

47:49Oh iya.

47:50Jadi maksudnya, apa ngebaca snap-nya kemana, nge-update isi input field-nya?

47:57Hmm, ini ya scroll snap type ya?

48:01Iya.

48:05Oke.

48:06Coba scroll bar, wait, scroll bar, oh nggak bisa diubah disini ya.

48:11Oh, diubah.

48:13Scroll bar, scroll bar width.

48:18Kita ada ini kan?

48:20Ini?

48:21Iya, coba.

48:22Modisi berapa?

48:2310 pixel.

48:27Ini?

48:28Iya, kita ada 10.

48:29Ya, bikin 100 pixel.

48:37Loh, kok nggak bisa?

48:39Lebarnya.

48:41Oh, deh.

48:42Bukan?

48:43Iya, iya.

48:44Coba 1 pixel.

48:47Enggak ngaruh.

48:51Apa karena macOS?

48:54Kan width nggak bisa?

48:56Kan ini macOS kan?

48:59Iya, kan macOS width nggak bisa?

49:01Ini color yang nggak bisa ya?

49:03Width bisa ya?

49:04Bukan iOS yang nggak bisa.

49:10Enggak ngaruh?

49:12Oke.

49:14Lanjut, lanjut, lanjut.

49:16Oke.

49:18Kalau mau info lebih detail, bisa ke developer.chrome.com/block.

49:26Buka aja ya.

49:28Scroll Snap Event, disini ada penjelasannya.

49:37Oke, selanjutnya kita masuk ke bagian ketiga, yaitu DX Developer Experience.

49:44Ada kata pengantarnya kita lagi, sekarang ke laut.

49:47Tadi kan udah ke gunung, udah ke hutan, sekarang ke laut.

49:51Mana laut?

49:52Oh, seas ya, across the seas.

49:54Iya, across the seas.

49:57We discover way to simplify backdrop inheritance, magic color function called light/dark.

50:04Nah, ini menarik ya.

50:05Safer and smarter variable width property.

50:08A way to specify a starting style for transition, pop into the top layer, improve Ruby alignment.

50:16Apa ini Ruby alignment?

50:18Gak ngerti semua dari atas.

50:20Dan lain-lain.

50:22Oke, backdrop inheritance.

50:27From Chrome 122, this backdrop shadow element has been converted into a tree abiding element.

50:38Meaning that it is inheritable properties from its originating element.

50:46Ini bisa diturunkan?

50:48Kalau ada reset from family atau apa yang maunya CSS itu si backdropnya ikut kena, ya?

50:58Ikut kena.

51:02Coba itu apa sih?

51:04Dialloc.

51:10Pake ini ya, shadow element backdrop, kita bisa kasih backdrop element.

51:15Dari CSS variable, CSS custom property.

51:19Iya, ini kan standar lah ya.

51:21Oh, dari dialognya ya.

51:23Karena meng-inherit dari dialognya.

51:26Iya.

51:29Oke.

51:31Lanjut, light/dark.

51:33System colors in CSS has been ability to react to current use color scheme.

51:39Bisa otomatis juga.

51:43CSS nya gimana?

51:45Coba lihat kodonya.

51:47Color scheme, light/dark.

51:49Oh, wah seru color scheme.

51:51Berarti preferensinya ya light/dark.

51:53Maksudnya kalau misalnya kita mau prefer dark duluan, dark/light gitu.

51:57Gak tahu, coba ya.

51:59Coba ya.

52:11Enggak?

52:13Enggak.

52:15Berarti enggak.

52:17Enggak.

52:19Ini apa ruangnya?

52:21Kita baca dulu kali ya.

52:25If 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.

52:35In the following demo, use drop down to control color scheme of the div.

52:41Because div is system color.

52:43It support both light and dark styles.

52:45The light/dark function expose the same capabilities to developer.

52:53This function accept to argument.

52:55This must be a color.

52:57Oh, primary color nya light/dark.

53:01Oh, langsung dua-duanya di-define ya.

53:09By changing the value of color scheme, either the first or second value light/dark is used.

53:19Jadi kita gak perlu lagi implement, oke kalau light itu ini.

53:23Kasih class name.

53:25Langsung ada dua warna langsung disiapkan ya.

53:31Jadi ini contohnya kalau system, ya kalau system udah langsung dark.

53:35Karena by default system yang saya pakai, ya dark.

53:39Kalau kita ganti system general.

53:45Gimana ya ganti ininya ya?

53:47Experiences, Light, Restart, Refresh, Relog.

54:03Oh, buka ini ya.

54:09Masih gelap.

54:11Kok gak garuh?

54:15Refresh.

54:17Ini dark ya?

54:19Gak garuh, kok gak garuh?

54:21Light itu masih dark, coba refresh sekarang.

54:25Gak garuh.

54:27Ya sedih.

54:29Ya sedih.

54:31Ya gue coba force light/force dark lah.

54:35Mungkin di brave nya kali.

54:37Mungkin juga, mungkin juga.

54:45Apa bukanya di safari?

54:47Jadi intinya kan yang ini kan.

54:51Mana dia?

54:53Tadi ya, ini ya.

54:55Jadi kita bisa specify kalau in that case, di contoh tadi kan ada ijo, ada pink kan.

55:03Ini ya.

55:07Ini kan.

55:09Pink yang ini.

55:11Berarti, mau background, mau color, mau highlight.

55:17Highlight color itu kalau light, dia hot pink.

55:19Kalau dark, dia lime.

55:21Ini kan light.

55:23Ini.

55:25Kalau primary color nya.

55:29333 yang light.

55:31Ini kan, yang background nya.

55:33Dark nya itu fa fa fa.

55:35Dan seterusnya.

55:39Fu fu fa fa coba.

55:41Next.

55:51Ini dulu deh.

55:53Property, maaf telat.

55:57Property, apa ini? Oh property sudah baseline.

56:01Bukannya udah lama ya?

56:03Atau beda ya maksudnya?

56:05Ya karena udah baseline.

56:07Ini kita bisa bikin property sendiri gitu?

56:09Ya.

56:11Oh wow.

56:13Belum pernah pakai sih use case nya.

56:15Gimana?

56:17Namanya sama ya, kayak bikin variable warna ya.

56:19Pakai minus minus.

56:21Terus namanya.

56:23Syntax nya color.

56:25Syntax nya itu mengikuti color.

56:29Oh syntax nya mengikuti property yang sebelumnya.

56:33Property yang CSS.

56:35CSS kan macam-macam ya.

56:37Ada yang menerima unit.

56:39With, kalau mission background.

56:41Font size gitu kan ya.

56:43Maksudnya dia menerima jenis unit apa.

56:47Nah kelihatannya ini syntax nya.

56:49Nerima unit color.

56:51Oke.

56:55Angle.

56:57Terus kita tinggal pakai dengan ini ya.

57:03Terus ada value nya.

57:05Jadi gak perlu nulis.

57:09Ya gak perlu nulis panjang-panjang.

57:11Mungkin nanti butuh animation.

57:13Ini mungkin bisa ditulis jadi custom property sendiri.

57:15Jadi tinggal dipake gitu ya.

57:17Cuman dia gak bisa benar-benar dari awal.

57:21Harus ada turunannya dari property yang mana kan ya.

57:23Harus pakai semacam jenis property CSS.

57:27Ikutin kayak inherit lah ya.

57:31Inherit ya.

57:33Property CSS yang udah ada.

57:35Oh ini pakai angle.

57:39Kok dia bisa animasi gitu.

57:43Ada animasi itu.

57:45CSS animation.

57:47CSS animation disitu.

57:49Ini kan.

57:51TV itu di bawah ya.

57:53Animation 10 second.

57:55Oh ini ya.

57:57Keren ya.

57:59Itu mah animasi CSS biasa.

58:01Bentar.

58:05Oh dia pakai border image.

58:09Makanya border nya bisa warna ya.

58:13Kira infill.

58:15Isi warnanya.

58:17Terus di tengah-tengahnya ada div lagi kosong.

58:19Enggak ya.

58:21Dia pakai border image.

58:25Jadi kita bisa bikin custom berdasarkan property yang sudah ada ya.

58:31Sudah available.

58:33Berikutnya.

58:35Ini kan udah baseline.

58:37Kenapa masih limit ya.

58:39Maksudnya.

58:41Itu udah secentang semua.

58:43Udah.

58:45Oh iya iya.

58:47Mungkin baru.

58:49Popover juga udah cukup lama sebenernya ya.

58:51Yang sama modal ya.

58:53Tahun lalu inget ini.

58:55Popover.

58:57Ini juga biasanya pakai library kan ya.

59:01Sama modal.

59:03Itu juga udah.

59:05Pure HTML, CSS.

59:07Iya ini sekarang Pure HTML, CSS.

59:09Pakainya bisa pakai div.

59:11Bisa macem-macem.

59:13Terus kita definisikan

59:15Popover sebagai.

59:17Popover.

59:19Ini.

59:21Jadi ketika ini

59:23Didefinisikan sebagai Popover

59:25Dia nggak muncul langsung ya.

59:27Popover target.

59:29Jadi button triggernya.

59:31Popover target.

59:33Harus sama dengan

59:35Koresponden ID.

59:37Ini ya sama IDnya ya.

59:39Kalau ini Popovernya nggak kita

59:41Isi.

59:43Dia muncul.

59:45Nggak ke height ya.

59:47Jadi harus ada tambahan

59:49Popover.

59:51Di proses oleh browser sebagai Popover.

59:53Oh nggak perlu display none gitu-gitu ya.

59:55Ya nggak perlu.

59:57Kan under the hood.

59:59Browser yang ngerjain itu semua buat kita sekarang.

1:00:01Kita tinggal pilih-pilih ini aja.

1:00:03Tinggal ongkang-ongkang kaki aja.

1:00:05Mantap.

1:00:09Hit escape or click away.

1:00:11Oh hit escape itu juga udah otomatis ya?

1:00:13Ya tapi hanya

1:00:15Pakai browser API.

1:00:17Oh.

1:00:19Udah include ya.

1:00:21Secara manual.

1:00:23Key event.

1:00:25Deteksi key event.

1:00:27Kan sebenernya kita harus listen.

1:00:29Kasih add event listener.

1:00:31Terus kita check.

1:00:33Escape dipencet.

1:00:35Kita close dulu kan harus manual itu.

1:00:37Ya harus manual sendiri ya.

1:00:39Atau pakai library yang manualnya kayak gitu ya udah.

1:00:41Sekarang nggak semua browser yang kerja.

1:00:45Oke oke oke.

1:00:47Mantap.

1:00:49Next. Tinggal sedikit lagi.

1:00:51Entry effect

1:00:53with starting style.

1:00:55Ini masih limited juga.

1:00:57Hanya firefox yang masih ketinggalan.

1:00:59Starting style.

1:01:01Ini untuk transition.

1:01:03Transition itu biasanya kan mulainya itu dari mana.

1:01:05Misalkan kita mau background colornya

1:01:07setengah second.

1:01:11Transparan. Mulai

1:01:13Transitionnya mulai dari transparan.

1:01:15Ya.

1:01:17Atau dari warna kuning.

1:01:19Nah ini transparan dulu.

1:01:23Kuning dulu.

1:01:25Kuning sampai akhirnya jadi transparan.

1:01:27Jadi ada startingnya.

1:01:29Starting style nya.

1:01:31Kasi tahu ada action yang terjadi.

1:01:33Ya.

1:01:35Oh ngerti ngerti ngerti.

1:01:37Kalau dulu kan harus pakai JavaScript kan.

1:01:39Biasanya div.

1:01:41Terus div.

1:01:43Animated.

1:01:45Baru background color.

1:01:47Background colornya diganti.

1:01:49Kalau kita klik buttonnya.

1:01:51Si div itu harus kita kasih class name.

1:01:53Ya betul.

1:01:55Ganti background color.

1:01:57Animate. Apa?

1:01:59Transitionnya emang dari CSS.

1:02:01Tapi terjadi transisinya itu.

1:02:03Harus karena nambah atau berkurang.

1:02:05CSS class name nya ya.

1:02:07Kalau sekarang udah ada starting style.

1:02:09Berarti ga usah kasih class name extra.

1:02:11Lucu ya.

1:02:15Another use case.

1:02:17Is to animate in dialogs when open.

1:02:19Jadi starting style nya.

1:02:21Opacity 0.

1:02:23Transform nya scale x 0.

1:02:25Open dialog.

1:02:27Eh mana dia?

1:02:29Oh dia ke itu ya.

1:02:31Ke geser.

1:02:33No bug.

1:02:39Ada sedikit.

1:02:41Ada sedikit.

1:02:43Ya tanpa JavaScript sama sekali.

1:02:45Liat dulu.

1:02:47Kosong ya.

1:02:49Ada sedikit.

1:02:51Transisi.

1:02:53Mana sih tadi?

1:02:55Itu exit state.

1:02:57Starting style nya mau gimana?

1:02:59Starting style nya mau gimana?

1:03:01Starting style nya mana?

1:03:03Oh ini.

1:03:05Dialog open. Translate.

1:03:07100.

1:03:09Vertical height.

1:03:11Oh dari bawah naik ke atas.

1:03:15Ya ya ya.

1:03:17Mengerti mengerti.

1:03:19Line breakable Ruby

1:03:23+ CSS Ruby Align.

1:03:25Apa ini? Ruby Align.

1:03:27Ruby annotation

1:03:29are line breakable

1:03:31and you can style Ruby text

1:03:33with the Ruby Align CSS property.

1:03:35Ruby text itu apanya gue gak tau.

1:03:37Apa Ruby annotation?

1:03:39I learned.

1:03:41I see what ini ya.

1:03:43What font non-UTF.

1:03:45Non-UTF ya.

1:03:47Non-ASCII non-ASCII.

1:03:49Rendering result before

1:03:53Chrome 128

1:03:55with long Ruby annotation text.

1:03:57Rendering result

1:03:59as of

1:04:01Chrome 128

1:04:03with long Ruby annotation text.

1:04:05Bidanya.

1:04:07Oh ini ada penjelasan Ruby itu apa.

1:04:09Oh ini ada penjelasan Ruby itu apa.

1:04:11Oh itu itu.

1:04:13East Asian Languages.

1:04:17East Asian Languages.

1:04:19Ya karena mungkin

1:04:21bentuknya juga lain ya.

1:04:23Ya.

1:04:25Jadi kayak untuk styling nya pun

1:04:27kayak pendekatannya harus

1:04:29ada itu khusus.

1:04:33Kan gak tau karena

1:04:35belum pernah mengalami ya.

1:04:37Phone yang CJK

1:04:39Chinese, Japanese, Korean

1:04:41itu gak mengenal yang namanya

1:04:43Spasi.

1:04:45Oh.

1:04:47Mereka gak punya Spasi.

1:04:49Jadi yang kayak ada space itu

1:04:51di tengah-tengah itu sebenarnya satu karakter yang

1:04:53punya white spaces.

1:04:55Tapi sebenarnya satu karakter itu.

1:04:57Oh gitu.

1:04:59Ngaruh ke wrapping nya juga berarti ya mungkin.

1:05:01Iya.

1:05:03Thailand, Thailand

1:05:05bahasa Thailand, bukannya gak ada Spasi juga ya?

1:05:07Gak tau.

1:05:09Bahasa Jawa ada Spasi gak?

1:05:11Gak tau.

1:05:13Ada kan? Holocoroko ada ya?

1:05:15Ada, ada.

1:05:17Kan mas orang ini kan?

1:05:19Orang Indonesia.

1:05:23Merdeka.

1:05:29Tapi,

1:05:31itu ada bedanya coba.

1:05:33Dia potongnya coba.

1:05:35Di scroll up dulu.

1:05:37Stop.

1:05:39Itu kan sampe

1:05:41xiao se hong po.

1:05:43Itu kan

1:05:45di atas kan sampe hong po.

1:05:47Dan di bawah itu xiao se.

1:05:49Itu yang halap ya.

1:05:51Line break yang pertamanya.

1:05:53Oh sampe sini.

1:05:55Dan itu lihat.

1:05:57Xiao se hong po nya udah di bawah.

1:05:59Bukan, plus juga

1:06:01kalau di atas itu

1:06:03tulisan

1:06:05romawinya di atas.

1:06:07Iya kan?

1:06:09Oh iya iya.

1:06:11Di tengah.

1:06:13Oh iya iya iya, ngerti ngerti.

1:06:15Jadi apa

1:06:17ngikut kayak satu

1:06:19kata dalam huruf latin

1:06:21itu korespon dengan

1:06:23satu karakter yang

1:06:25di gambarkan.

1:06:27Yang ini tadi kita

1:06:29pake elemen Ruby.

1:06:31Terus ini ada kata-katanya.

1:06:33Terus ada RT.

1:06:35RT itu kayak pengucapannya kali ya.

1:06:37Iya.

1:06:39RT nya isu di atas.

1:06:41Iya, latin text nya di atas.

1:06:43Ininya di bawah. Padahal ini taruhnya di bawah.

1:06:45Ya bisa sih di styling dan lain-lain.

1:06:47Tapi ini by default udah begitu ya.

1:06:49Ya tuh itu, Ruby style itu

1:06:51dari position under.

1:06:53Ya iya iya bener.

1:06:55Jadi ini kalau yang

1:06:57baru dia mengikuti ya.

1:06:59Bisa

1:07:01bisa di ini, bisa turun lagi.

1:07:03Oh bisa diatur, bisa diatur ya.

1:07:05Anotation nya kan belum tentu

1:07:07satu kata. Maksudnya belum tentu

1:07:09satu kata korespon dengan satu karakter bisa.

1:07:11Itu tadi yang emoji kan kayak

1:07:13ada beberapa karakter.

1:07:15Atau malah mungkin sebaliknya huruf

1:07:17anotation huruf latin nya lebih panjang.

1:07:19Itu kayaknya dia bisa otomatis ke tengah.

1:07:21Atas-bawah gitu.

1:07:23Kita bisa bikin website untuk

1:07:25ini nih, untuk karaoke.

1:07:27Hah?

1:07:29Untuk karoke itu tulisan Chinese nya

1:07:31sama tulisan cara bacanya di atas.

1:07:33Sekarang lebih gitu kalau karoke kan.

1:07:35Emang karoke,

1:07:37enggak tau. Emang karoke

1:07:39harus menyanyikan lagu Sina?

1:07:41Lagu mana?

1:07:43Lagu Korea?

1:07:45Halo lagu Indonesia?

1:07:47Ya contohnya kayak lagu

1:07:49Blackpink, Rose to Black

1:07:51apa-apa kan kita harus ada baca

1:07:53emang ada ya

1:07:55orang yang karoke tapi nyanyinya lagu itu.

1:07:57Oh ada ya, si Jessica sering ya.

1:07:59Ada lah, banyak.

1:08:01Ada cuman nggak pernah aja.

1:08:03Di komunitas aja banyak nyanyi.

1:08:07Oh banyak ya, iya iya, oke oke.

1:08:09Space around.

1:08:13Ada ini ada value nya.

1:08:15Ada banyak.

1:08:17Ini mengikuti,

1:08:19value nya itu mengikuti ala-ala

1:08:21flex ya, flex box ya.

1:08:23Ada space between, space around, start dan center.

1:08:25Mau ke tengah,

1:08:27rata sama karakternya

1:08:29atau ke samping,

1:08:31rata kiri, start ya.

1:08:33Sama kalau mau center

1:08:35di tengah.

1:08:37Ini contohnya, kalau Jepang kan ada

1:08:39kanji, ada katakana

1:08:41atau hiragana. Katakana, hiragana.

1:08:43Iya, jadi

1:08:45katakana di bawah, terus katakana

1:08:47di atas, atau hiragana

1:08:49nya.

1:08:51Dan katakana, hiragana

1:08:53itu cenderung lebih panjang,

1:08:55soalnya kan, apa persuku kata

1:08:57kan, itu kayak

1:08:59Hono Choroko gitu kan, kalau

1:09:01kanji kan satu konsep

1:09:03belum tentu, satu kata, satu arti.

1:09:05Satu konsep, satu karakter kan.

1:09:07Kalau di Jogja kan biasanya nama jalan

1:09:11ada nama latinnya, ada nama

1:09:13Jogja kan?

1:09:15Sanskrit ya?

1:09:17Jokascript.

1:09:19Jokascript.

1:09:21Bisa juga untuk ini kali jah,

1:09:27kayak Indian juga gitu kan,

1:09:29kan ada tulisan

1:09:31Sanskrit nya juga, ada beda-beda

1:09:33apa sih, font, bukan font.

1:09:37Beda bahasa.

1:09:39Typeface.

1:09:41Typeface.

1:09:43Ya pokoknya beda

1:09:45Hono Choroko nya Mas.

1:09:47Di selatan utara, timur barat itu beda

1:09:49Hono Choroko nya.

1:09:51Saya gak tau udah apa tuh namanya.

1:09:53Tulisannya.

1:09:55Beda tipografi.

1:09:59Beda tipografi.

1:10:01Ya bener bener.

1:10:03Oke lanjut.

1:10:05Pen Order.

1:10:07Pen Order, ini

1:10:09udah semua tapi masih baru.

1:10:11"Using text stroke or pen order

1:10:15property can control

1:10:17the order that the text fill

1:10:19and desired stroke are stacked

1:10:21or rendered together."

1:10:23Kalau ada outline-outline gitu ya?

1:10:27"When you want to ensure that stroke

1:10:29is rendered on top of the fill."

1:10:31Ini nih yang tadi

1:10:33diceritakan tentang font.

1:10:35Ya walaupun font nya yang ini gak nyambung ya.

1:10:37Ini kita bisa bikin

1:10:39jadi kayak

1:10:41apa tuh kalau di

1:10:43tools kayak Figma gitu, bisa

1:10:45union, bisa intersection.

1:10:47Ini kayak gini nih, coba liat ya.

1:10:49Tuh union kan.

1:10:51Ya ya ya ngerti.

1:10:53Jadi apa?

1:10:57Outline nya tuh mau dibaliknya

1:10:59atau di atasnya ya?

1:11:01Ya kalau mau di bawah

1:11:03atau mau di atas. Jadi bisa

1:11:05seolah-olah efeknya itu dia

1:11:07text nya nyambung semua. Padahal itu kan

1:11:09dirapetin kan.

1:11:11Caranya adalah dengan

1:11:17stroke fill. Oh stroke dulu

1:11:19baru fill.

1:11:21Stroke dulu berarti

1:11:23stroke nya di bawah gitu.

1:11:25Coba kita cek ya.

1:11:27Langsung ya.

1:11:33Stroke fill.

1:11:35Kalau stroke fill berarti stroke nya di atas, fill nya

1:11:37di bawah.

1:11:39Kalau fill stroke,

1:11:41berarti dia yang tadi

1:11:43gak sembuh-sembuh nanti dia.

1:11:45Gak juga ngaruh.

1:11:49Di bawah, di bawah.

1:11:51Bawah mana?

1:11:53Cuma...

1:11:55Balikin dulu ya.

1:11:57Stroke dan fill.

1:12:01Default nya ini kan.

1:12:03Stroke fill. Oh ini stroke fill.

1:12:07Coba ganti.

1:12:09Itu kan default yang tadi.

1:12:11Oh iya bener.

1:12:13Stroke.

1:12:17Begini dia.

1:12:19Berarti

1:12:21kalau fill itu yang bawah ya.

1:12:25Yang kiri itu yang bawah, ini yang atas.

1:12:27Kalau stroke nya disini, berarti stroke nya

1:12:29di atas.

1:12:31Bisa di ini juga dong, bisa di animate.

1:12:33Eh fill nya di atas, sorry.

1:12:35Bisa di apa? Bisa di animate.

1:12:37Bisa aja sih.

1:12:41Bisa aja.

1:12:43Ini dia bisa bikin font nya

1:12:47nempel gini pakai apa?

1:12:49Letter Spacing.

1:12:53Letter Spacing ya.

1:12:55Minus ya.

1:12:59Nah, aslinya begini.

1:13:01Eh aslinya enggak ya.

1:13:03Aslinya begini.

1:13:05Aslinya begini.

1:13:07Normalnya begini.

1:13:09Tapi dibikin rapat.

1:13:11Habis itu

1:13:13dikasih stroke nya

1:13:15ditimpa oleh fill nya.

1:13:17Jadi fill nya di atas, stroke nya di bawah.

1:13:19Jadi tetep tadi nggak sih ngerjain

1:13:23bling?

1:13:25Bisa menganmenan bikin begini.

1:13:29Sikil isu.

1:13:31Sikil isu.

1:13:33Siapa yang

1:13:37developer Indonesia

1:13:39kerja di Jepang?

1:13:41Makina.

1:13:43Dia yang bikin, yang bikin browser.

1:13:47Tapi dia nggak bisa.

1:13:49Gak bisa dan nggak pernah.

1:13:51Bukan bidangnya, ya

1:13:53pakai CSS nya ini, ya dia nggak pernah pakai

1:13:55diluar pas bikin

1:13:57ngetes. Berarti itu emang

1:13:59dua bidang.

1:14:01Berarti dia bisa baca spek.

1:14:03Bisa jalanin

1:14:05tesnya.

1:14:07Tapi nggak bisa.

1:14:09Ya CSS nya nggak ngerti.

1:14:11Lucu juga ya.

1:14:13Oke.

1:14:15Kebalikannya gue.

1:14:17Kayaknya terakhir. Ya terakhir.

1:14:19CSSOM

1:14:21Next State Declaration. Apa ini?

1:14:23To fix some weird

1:14:25bugs. Object model.

1:14:27Pokoknya untuk mengatasi masalah

1:14:31CSS nesting. Nesting ya?

1:14:33Oh ya CSS nesting itu.

1:14:35Gue juga udah nyoba di production

1:14:37by default semua browser

1:14:39aman, lancar jaya.

1:14:41Oh ya? Wow.

1:14:43Nggak perlu lupa CSS lagi.

1:14:45Nggak perlu lupa CSS.

1:14:47Tapi nggak bisa kayak

1:14:51SAS atau SCSS yang

1:14:53class name apa?

1:14:55Misalnya tanda dan terus

1:14:57dash dash

1:14:59atau harus

1:15:01kepisah.

1:15:03Selektornya kepisah. Nggak bisa

1:15:05dijadikan

1:15:07satu kata atau satu selektor.

1:15:09Jadi ini apa nih?

1:15:13Nggak ngerti.

1:15:15Kayaknya cuma bilang

1:15:17nge-benerin bug aja.

1:15:19Nge-benerin bug ya?

1:15:21Oke.

1:15:23It's a good time

1:15:25to be front-end dev.

1:15:27Yang bikin adalah

1:15:29Mas Adam

1:15:31Brahmus

1:15:33Mbak Rachel

1:15:35Mas Berry sama Mbak Una.

1:15:37Kalau temen-temen mau lihat, disini ada

1:15:39GitHubnya. Jadi silahkan

1:15:41cek aja langsung

1:15:43belajar, dipelajari.

1:15:45Menarik ya. Ini jelas

1:15:47tidak mudah. Pasti mereka

1:15:49punya orang desainnya ya.

1:15:51Oh iya. Pasti bukan mereka

1:15:53yang bikin. Tapi apa?

1:15:55brainstorming-nya bikin ide-nya.

1:15:57Apalah prototyping

1:15:59mereka.

1:16:01Cuma

1:16:03diwujudin secara visual ya

1:16:05pasti ada tim

1:16:07orang lain. Coba aja deh ini.

1:16:09Komitnya. Coba lihat komitnya.

1:16:11Di GitHub.

1:16:13Kayaknya nggak nih.

1:16:15Yang bikin.

1:16:17Yang bikin pixel-pixelnya.

1:16:19Coba lihat tuh.

1:16:21Kontributornya tuh.

1:16:23Kontributor

1:16:25paling atas ya.

1:16:27Siapa aja.

1:16:29Ini tumpat tadi.

1:16:31Ya mereka

1:16:33yang tertinggi.

1:16:35Yang ngomit. Tapi maksudnya kayak

1:16:37asset-nya. Aset visualnya.

1:16:39Kayak pemilihan fontnya. Ya mungkin kan

1:16:41dibalik itu ada orang lainnya.

1:16:43Bikin speknya.

1:16:45Ada nggak file Figma-nya

1:16:47di sini?

1:16:49Nggak ada.

1:16:51Orang nggak pake Figma.

1:16:53Gak bikin Figma ya?

1:16:55Nggak.

1:16:57Weh. Dependensi.

1:16:59Dependowon. Kuberjaya.

1:17:01Kira ini apa?

1:17:03Ada yang...

1:17:05Oh ada. Fix biome

1:17:07responsive. Oh pake biome.

1:17:09Udah.

1:17:11Banyak kan itu. Isunya apa?

1:17:13So it's taken.

1:17:15Dependensisnya apa?

1:17:23Nggak ada.

1:17:25Pake open props. Pastinya ya.

1:17:27Soalnya yang bikin

1:17:29si Mas Adam.

1:17:31Pake typescript.

1:17:33Mas Adam yang bikin open props ya?

1:17:35Iya.

1:17:41Oke cukup untuk malam ini.

1:17:43Terima kasih banyak

1:17:45buat semua aja yang sudah

1:17:47hadir dan menonton.

1:17:49Dengan demikian kita tutup

1:17:53episode kita malam

1:17:55hari ini kita ketemu lagi

1:17:57minggu depan di hari Selasa.

1:17:59Mudah-mudahan kita bisa live kembali

1:18:01dengan format live.

1:18:03Selamat malam. Selamat istirahat.

1:18:05Bye bye.

1:18:11Terima kasih sudah menonton.