CSS Wrapped - Ngobrolin WEB

0:00[musik]

0:17Dapatkan hanya di Domenecia

0:19[musik]

0:29Halo, halo, halo, selamat malam

0:33Halo, halo, halo

0:37Gimana kabarnya semuanya?

0:40Kita masih kurang satu nih ya panelisnya

0:44Mana kemana Ivan?

0:46Portrait, landscape, dua-duanya

0:49Landscape, yang portraitnya dihapus

0:52Sudah cukup ya kita eksperimen ya

0:55Mudah-mudahan teman-teman yang diportrait

0:59Sekarang sudah berpindah ke landscape aja

1:04Supaya layarnya kelihatan lebih besar ya

1:07Halo Gilbert

1:11Gimana kabarnya Surabaya?

1:14Apakah sudah hujatan di link ini sudah selesai belum?

1:24Ya ampun, enggak lah sudah sukses kan

1:27Sudah selesai semua acara

1:29Sudah selesai ya

1:31Deves, gimana Deves?

1:33Seru nggak Deves?

1:35Jogja, eh Jogja

1:37Surabaya ya, Surabaya

1:39Kemarin kita ke Jogja

1:41Deves Jogja seru dong

1:43Deves Jogja seru

1:45Deves, Surabaya harus seru

1:49Bisa dengan Ivan

1:51Kali ini di Jogja saya jadi penonton

1:54Enak juga

1:56Enak ya, aman ya Surabaya

1:58Oh boleh, dengan tenang hati kita kembali ke Surabaya

2:02Boleh-boleh, asal waktunya pas saja

2:06Wah Ivan kemana Ivan, nggak ada kabarnya Ivan

2:13Jangan-jangan sih di Jogja belum balik Jakarta

2:18Enggak ya, kalian balik bareng nggak sih?

2:21Bareng lah, satu pesawat

2:24Ya keren kayak gue kemarin pas di Bali nyangkut sampai ke Miss

2:28Oh extent ya

2:30Jalan-jalan dulu

2:32Sambil menunggu mungkin

2:37Buat teman-teman yang mau nyobain layanan hosting

2:42Bisa cobain dominasi ya

2:44Bisa pake promo ngobrolin WebDN

2:49Terus juga bisa dapat diskon 10% untuk pake web hosting

2:54Berlaku untuk siklus 1 atau 2 tahun

2:56Nah buat yang mau cobain VPS, virtual private server

3:02Ada diskon 50%, lebih gede lagi ya

3:06Diskon 50% pakai promo code nya ngobrolin VPSDN

3:12Kayak di bawah

3:14Kodo promo ini bisa dipake lebih dari satu kali

3:17Di akun yang sama, jadi nggak perlu ganti-ganti bikin akun baru ya

3:22Langsung pake aja, cek ke domenisia.com pake kodoko cernya

3:27Sekali lagi terima kasih buat Domensia yang sudah berkolaborasi dengan kita

3:34Dan sudah membuatkan event yang keren banget ya, Sabtu kemarin

3:39Ada yang hadir nggak disini ya, siapa yang hadir ya

3:43Kemarin sih waktu kita tanya, ada satu orang ya

3:47Ada satu orang yang sering menonton kita

3:51Yang nonton

3:53Nah satu orang itu nggak nonton sekarang mungkin

3:56Oh iya, mungkin nggak nonton

3:58Nah ini dia yang dicari hari ini

4:00Kirain masih ketinggalan di Jogja

4:04Kirain jalan-jalan dulu

4:07Ayah, lagi nge-push, commit, terus lupa

4:14Waduh

4:16Kehidupan sehari-hari ya

4:20Kalau nge-push udah kan, tinggal biarin si ICD aja sambil nontonin

4:23Ada masalah

4:24Maksudnya tadi ada

4:26Oh tadi ada darurat

4:29Darurat

4:31Jadi ada fitur, sudah kerjakan

4:34Besok mau dipake fiturnya

4:37Terus udah gue bikin bagus-bagus

4:39Habis kena quote review, dapat feedback

4:42Ya gue nge-push dulu

4:44Pas gue nge-push, terus lupa deh

4:47Ada ngobrolin gue

4:49Untung di ping

4:54Di ping ya

4:56Kalau nggak di ping udah bablas

5:00Bablas ya, langsung tidur ya, langsung istirahat

5:03Langsung lagim

5:05Iya, jadi sabtu kemarin kita ngadain acara di kantornya Dominesia di Jogja

5:13Apa namanya? Hub apa?

5:17Deneva Hub

5:19Ivana

5:20Deneva

5:21Deneva

5:23Dominesia

5:25Deneva Cloud

5:27Deneva Cloud

5:29Dominesia dan Deneva Cloud

5:31Iya, makanya Deneva Cloud

5:33Deneva Hub, maaf

5:35Deneva Hub

5:37Seru sih acaranya, walaupun

5:41Fotonya mana dong, tunjukin dong fotonya

5:44Foto?

5:45Sudah dikasih foto-fotonya

5:47Oh iya iya

5:48Ada ya

5:49Google fotonya kenapa?

5:51Ada, bentar bentar

5:54Ini ya

5:55Di-hide dulu foto keluarga

5:59Wih, ya TTA tuh

6:01Kosong loh, kosong

6:03Kenapa di album ya TTA ada foto keluarga?

6:06Foto keluarga

6:08Kan di Google fotonya Mas Riza ceritanya

6:11Wih siapa tuh celana pendekan, kurang ajar

6:15Nah ini nih orangnya nih

6:17Ini foto kita bertiga ya

6:20Iya

6:22Ada Mas Zain juga

6:25Ada Mas El

6:27Tuh akhirnya saya bisa ketemu sama Mas El

6:30Padahal sebelumnya udah podcast juga tapi online

6:35Jadi ini sesi pertama khusus ngobrolin web ya

6:39Ini hari Sabtu, jadi hari Minggu nya DevFest

6:42Sabtu nya kita bela-belain

6:44Datang ke Dominesia

6:46Buat menyapa temen-temen di Dominesia apa

6:49Komunitas di Jogja ya terutama ya

6:51Dari Python, dari WordPress, dari mana lagi itu

6:55Ada DevOps juga

6:57Seru lah pokoknya, seru ya

6:59Diskusinya mengalir ya

7:03Diskusinya hangat Dom, mengalir

7:07Sampai gak berasa tuh sejam kita yeping ya

7:12Tahunya waktunya udah habis ya

7:14Sampai di belakang udah begini-gini

7:18Udah stop loh

7:20Iya

7:22Oke, cukup ya

7:25Mudah-mudahan di kota-kota lain

7:28Iya, di kota-kota lain misalkan kayak Surabaya ya

7:32Bisa kita bikin pindarat

7:34Makasar

7:36Kita masih ada unfinished business ini di Makasar

7:39Iya, Makasar ya

7:41Makasar

7:43Dalam kurung makan jodoh Makasar

7:46Gue sama Eka udah makan pisang epe di Pantai Lo

7:53Udah, gue juga udah

7:55Teru

7:56Tapi kan belum bertiga sekali Gus

7:58Iya, belum bertiga

8:00Kita foto di Pantai Lo itu, Pantai Lo

8:03Pantai Lo, sorry

8:05Oke, nah malam ini kita akan

8:15Apa ya, review ya

8:17Lebih ke review

8:20Recapitulasi fitur-fitur CSS baru yang hadir di Google Chrome di tahun 2025

8:27Ya namanya CSS Red

8:29Ini kita gak ada?

8:31Gak ada

8:33Kenapa habis?

8:35Udah, gini aja lah

8:37Udah cukup karena terlalu ribet ya

8:40Biar enak dilihat

8:42Biar enak dilihat

8:44Malah gak enak di dua-duanya

8:46Iya

8:48Ini agak agak sensitive ya kalau rap-rap ini

8:53Biasa akhir tahun tuh ada Spotify Rap

8:57Terus ada apa lagi ya

8:58Tadi itu Spotify, abis itu YouTube Rap

9:00Gitu

9:02Google Photos

9:04Sofa Score ada rap-nya

9:06Itu paling gak masuk akal

9:07Sofa Score?

9:09Apa itu? Google Photos

9:11Live Score

9:13Oh Live Score

9:15Live Score ada rap-nya

9:17Itu paling aneh

9:19Ya hati-hati ya tahun ini

9:21Semua ada

9:23Hati-hati tahun ini kalau mau rap ya

9:26Karena nanti bisa-bisa down internet ya

9:29Outflare Rap

9:32Kena CSS Rap

9:34Outflare Rap posting-nya Anda tuh

9:36Anda down juga tapi di tahun ini

9:39Mudah-mudahan ada yang bikin gak sih?

9:44Outflare Rap gitu gak ada ya?

9:47Berapa kali

9:49Ada yang bikin ini kali ya?

9:51Internet Down Rap

9:55Kasusnya outflare pertama kan

9:59Gara-gara rap kan

10:01Jadi dia gak mau bikin rap

10:03Trauma dia

10:05Maksudnya ada yang bikin Outage Rap gak sih?

10:10Si ini down, si ini down

10:13Oh iya tahun ini kayaknya hampir semua ya

10:15Kebagian ya

10:16AWS ada, GTP ada ya

10:19Bikin ah, bikin ah

10:21Seru-seruan aja ntar gua bikin

10:23Ya ya

10:25Total berapa menit kamu down

10:28Terus apa ada kasih grouping

10:30Kamu tipe yang apain kalau internet

10:33Kalau apa infrastructure-nya lagi down

10:36Gue general pake nano banana aja

10:39Gue list kan, gue pake nano banana

10:41Bisa kali ya

10:43Bisa

10:45Hati-hati boncos ya

10:47Ini degenerate pake nano banana gak?

10:53Gambarnya

10:54Pasti lah

10:55Kayaknya enggak

10:57Kayaknya enggak sih

10:58Karena ada konsep

11:00Kalo liat konsepnya ya

11:02Gak, ini juga sini gak

11:04Maksudnya ada hidden kayak

11:06Kayak di bawah itu kan

11:07Tutup kurung, buka kurung, tutup kurung tuh

11:10Hmm, gini ya

11:12Ya kan bisa di custom

11:14Gitu ya

11:16Tinggal promnya aja loh

11:18Kita kurang pintar kayaknya

11:20Kurang pintar ngepromnya ya

11:24Ada hidden-hidden ini gak sih hidden

11:26Ada hidden mark naik gak sih ini?

11:30Gak ada ya?

11:31Gak sih, kayaknya ini buatan manusia

11:34Kalo tebakan saya sih

11:36Tebakan saya sih manusia yang bikin

11:39Tebakan saya, gak tau ya bener apa enggak

11:42Ini kan kayak serial ya

11:45Aset dan style-nya

11:47Dibikin, kayak dikasih contoh

11:49Kan sekarang bisa tuh

11:51Oh iya, satu tema ya

11:53Secara ini Google ya yang bikin

11:55Jadi maksudnya, mereka kan ngerti banget manfaatinya

11:57Jadi mereka kasih contoh-contoh

11:59Ini kan sprinkles kan, ini kue ya temanya

12:01Ya dikasih aja

12:03Palet warnanya

12:05Pake skema warna yang begini-gini

12:09Temanya makanan

12:11Ini contohnya kayak gini, ya dikasih contoh 1 atau 2

12:13Dia suruh generate sisanya

12:15Bukannya ada watermark ya

12:17Kalo nanda-banana ya

12:19Ya kan ini Google yang bikin

12:21Di remove juga bisa

12:23Emang boleh gitu

12:25Tau sih, ini asal

12:29Jadi

12:31Jadi

12:33Kalo nanti misalkan

12:35I/O Extended atau

12:37Event-event GDG lainnya

12:39Melihat banyak slide

12:41Yang menggunakan

12:43Gemini nano banana

12:45Terus

12:51Seragam semua tuh

12:53Tipenya kan mirip-mirip ya

12:55Temanya ya

12:57Ya kayak kartun-kartun gitu

12:59Kecuali beneran mirip

13:01Prompting banget

13:03Bisa sih dikasih contohnya ya gitu

13:05Itu generic ya

13:07Anyway

13:09Ini CSS Rap 2025

13:11Setelah tahun lalu kita juga

13:13Udah bahas yang 2004

13:15CSS Rap itu

13:17Adalah recap titulasi

13:19Iya recap titulasi

13:21Sama tadi kayak YouTube Rap

13:23Spotify Rap, Sofa Score Rap

13:25Ya ini

13:27Setelah tahun fitur menarik apa

13:29Yang bisa di highlight

13:31Di bidang CSS dan UI

13:33Sepanjang tahun ini

13:35Ini tahunan ya

13:37Ini kayak apa

13:39Program

13:41Tahunan dari

13:43Chrome DevRel

13:45Jadi ini emang punya

13:47Google Chrome Cuma ya karena

13:49CSS UI kan universal web

13:51Ya bisa berlaku buat browser

13:53Terlainya sebetulnya

13:55Ini kalau sama 2022 ya

13:57Kurang tahu sih iya kayaknya

14:01Tapi kan ini sebenarnya

14:03CSS yang

14:05Fitur CSS baru yang

14:07Muncul di 2025 untuk Chrome kan

14:09Sebenarnya kan

14:11Iya Chrome tapi kan ada juga

14:13Yang udah jadi

14:15Baseline di

14:17Semua browser

14:19Cuma ini spesifik untuk

14:21Chrome karena ya yang bikin juga Google

14:23Timnya Google Chrome kan

14:25Iya inget gak

14:27Gua bilang minggu lalu

14:29Gua sedikit kecewa dengan 2025

14:31Kenapa

14:33Ntar dulu

14:35Disimpen dulu

14:37Disimpen dulu

14:39Kita

14:41Bahas mungkin bahas sedikit-sedikit ya

14:43Satu persatu ya

14:45Jadi tema tahun ini

14:47Berarti lebih ke

14:49Apa ya

14:51Sculpt a dynamic web

14:53Nggak tahu nih

14:55Sesuai sama gambarnya

14:57Atau nggak ya

14:59Kalau tahun lalu kan

15:01Ingat gak 2024

15:03Kayak game petualangan ya

15:05Ya petualangan betul

15:07Jadi kayak apa sih bisa lewat udara

15:09Bisa lewat apa laut

15:11Bisa lewat apa jadi kayak journey gitu

15:13Betul jadi perjalanan

15:15Gitu ya

15:19Nah kalau ini

15:21Oh baru sadar

15:23Tahun ini temanya

15:25Jadi yang di atas itu orang-orang

15:27Anya tau gak sih clay apa

15:29Liling malam itu loh

15:31Hah

15:33Itu play doh play doh play doh

15:35Nah brand-brandnya

15:37Play doh

15:39Ini temanya apa

15:41Membentuk jadi apa CSS

15:43Atau UI fitur-fitur CSS

15:45Atau UI ini sebagai building block

15:47Yang bisa kita tahu kan kalau apa

15:49Liling malam itu play doh bisa kita

15:51Bentuk-bentuk sendiri kita gabung

15:53Kita combine sendiri

15:55Kirain kue

15:57Ya lanjut

15:59Oh iya iya

16:01Halo Wika

16:03Jadi

16:05Ada tiga ya

16:07Seperti kemarin juga

16:09Kemarin banyak ya

16:11Ini ada tiga ya

16:13Tiga kategori ya

16:15Ada

16:17Customizable

16:19Komponen

16:21Next Gen

16:23Interaction dan Optimized

16:25Ergonomics

16:27Give you the clay

16:29Functional styleable

16:31Komponen oke

16:33Jadi komponen-komponen yang

16:35Tadinya mungkin agak susah

16:37Diubah

16:39Style nya

16:41Harus menggunakan library

16:43Atau JavaScript sekarang

16:45Udah bisa contohnya

16:47Dropdown

16:49Popover, select

16:51Popover

16:53Modal ya

16:55Kalau Next Gen Interaction

16:57Ini berarti

16:59Ini mungkin semakin view transition

17:01Ya

17:03Apa yang scrollable

17:05Animation ya

17:07Scrollable animation

17:09Jadi ngasih mirip sama tahun lalu

17:11Tapi ya mungkin fiturnya nambah

17:13Sama apa ya ada improvement nya

17:15Pasti

17:17Terus yang Optimized Ergonomics

17:19Ini lebih ke DX ya

17:21Developer Experience

17:23Lebih memudahkan kita

17:27Menulis CSS

17:29Kayaknya ada beberapa hal yang tadinya

17:31Harus dengan JavaScript

17:33Sekarang udah bisa CSS aja

17:35Oke kita lihat satu-satu ya

17:39Oh iya ini

17:41Play Doh semua ya

17:43Play Doh itu merek ya

17:45Apa sih? Lillin

17:47Lillin Lunak

17:49Lillin Malam

17:51Kok namanya Lillin Malam ya?

17:53Gak pake

17:55Lillin Malam sih

17:57Malam aja namanya

17:59Kok malam?

18:01Iya

18:03Bukan malam

18:05Jadi kayak ada

18:07Namanya kayak komonim ya

18:09Iya arti berbeda

18:11Oke

18:23Ada 1, 2, 3, 4, ada 8

18:25Ada 8 komponen

18:278 item

18:29Yang pertama adalah invoker

18:31Comment, invoker comment ini

18:33Yang tadinya kita harus

18:35Pakai JavaScript

18:37Untuk membuka

18:39Mbuka moda

18:41Iya

18:43Sekarang gak perlu, tinggal pakai comment for

18:45Sama comment aja

18:47Jadi dari sini

18:49Gantinya ini

18:51Dan yang amazing

18:53Firefox support

18:55Yang belum malah safari, Firefox kan

18:57Kayak suka gak niat kan

18:59Masih belum

19:01Baseline, masih belum baseline

19:03Ini udah jadi

19:05Di luar chromium minimal udah ada

19:07Satu yang adopt, itu kan kayak

19:09Peer pressure bentar lagi ya safari

19:11Mungkin bisa

19:13Adopt juga

19:15Jadi kalau gini

19:17Ini kita bisa langsung

19:19Dari HTML nya, pakai comment for

19:21Sama comment

19:23Javascript

19:25Kalau label ini

19:27Mirip sama patternnya

19:29Kayak label for

19:31Input di dalam label ya

19:33Tapi ini harus ke ID ya

19:35Terus ke ID nya itu

19:37Harus disiapkan ID nya ya

19:39ID elemennya

19:41MyDialog nih ya

19:43Harus sama

19:45Comment nya showmodal

19:47Berarti ini udah

19:49Specifik ya, showmodal itu tujuannya adalah

19:51Untuk ini ya

19:53Ada fungsinya di Javascript nya juga ya

19:57Tapi untuk close nya gimana?

19:59Yang belum nya itu before dan after

20:01Iya

20:03Tapi maksudnya showmodal ini

20:05Tulisan showmodal nya

20:07Ini kan?

20:09Javascript

20:11API Javascript kan

20:13Iya

20:15Jadi ini fungsi yang

20:17Sekarang diadopti jadi atribut

20:19Element HTML

20:21Jadi sekarang button jadi menerima

20:23Atribut comment for

20:25Sama comment

20:29Kalau close nya

20:31Hide model gitu aja

20:33Hide popover

20:35Coba liat ya

20:37Close nya dimana nih

20:39Itu yang di

20:41Button nya punya

20:43Atribut comment, value nya

20:45Close comment sama dengan

20:47Omen hide popover

20:49Itu yang button kedua

20:51Close ya

20:53Nah

20:55Satu dialog

20:57Satu dialog, satu lagi popover

20:59Itu beda elemen dong

21:01Oh iya iya iya

21:03Ini ya, button close ya

21:05Iya

21:07Comment close, berarti close aja

21:09Comment for my dialog

21:13Comment nya close

21:15Ini kan? Diklik, dia akan hide

21:17Apa beda dialog sama

21:19Popover ya

21:21Beda di, apa sih, kayak

21:23Ada satu blocking, kayaknya dialog dia

21:25Yang blocking, punya salah satu

21:27Blocking, kayak butuh user

21:29Decision, kalau satu

21:31Kayak optional aja, dicuekin juga

21:33Bisa

21:35Oh iya itu ada

21:37Ada runcing nya tuh

21:39Ada runcing nya sedikit kalau popover

21:41Ya, popover, udah gitu kalau popover

21:43By default, kalau diklik

21:45Diluar, dia akan hide

21:47Kalau modal, diklik diluar dia

21:49Tidak akan hide, by default ya

21:51Ini bisa diatur sih sebenarnya

21:53Dan ini, pengaruhnya ke accessibility

21:55Juga ya, kalau misalnya orang pakai

21:57Apalah, pakai keyboard

21:59Tab navigation atau dan lain-lain

22:01Itu kayak behavior nya, udah ada aturan

22:03Aturannya sendiri kan

22:05Misalnya dialog, apa behavior nya gimana

22:07Popover gimana

22:09Nah, ini udah di, ya

22:11Udah di handle semua dari browser

22:13Kalau kita pake

22:15Window unlock, terus

22:17Munculin dialog apa ya

22:19Ketutup ga?

22:21Kalau jaman dulu kan

22:23Ada window unlock, terus ada alert

22:25Tuh, ga jadi, apakah

22:27Anda bener-bener ingin keluar dari halaman

22:29Ini?

22:31Enggak lah, alert

22:33Yang apa

22:35Yang ngeblock kan

22:37Alert, kalau ini kan dia ga ngeblock

22:39Apakah harga ram

22:43Akan naik karena saya scribe

22:45Enggak dong

22:47Gara-gara AI, gara-gara AI yang dibutuhin

22:49Buat bikin CSS

22:51Terbaru

22:53Bisa disambung-sambungin nih

22:57Apa, LLM nya kan training data nya

22:59Belum nyampe CSS yang baru ini nih

23:01Jadi harus nge-search lulu

23:03Harus nge-parsing ini dulu

23:05Baru bisa nulis CSS yang baru, yang bagus

23:07Oh, ini komen nya ya

23:09Nah, ini tadi penjelasan nya

23:11Yang kita bingungin nge-close gimana

23:13Jadi ini apa, equivalent nya

23:15Atau sama kayak JavaScript

23:17Web API

23:19Support offer, high pop offer

23:25Sama total pop offer

23:27Itu sudah jadi prototipe

23:33Ini loh, prototipe function buat dia

23:35Maksudnya sudah dibawa

23:37Di dalam JS nya si element itu

23:39Tapi cuma ada di browser ya

23:41Hal ini ya, ga ada di node JS

23:43Ya, ini kan di node JS

23:45Gak bisa nge-close pop offer

23:47Ada custom comment juga

23:49Pake minus-minus

23:51Bisa begitu

23:55Tapi harus dibikin

23:57Di handle

24:01Event nya harus di handle

24:03Kok bisa

24:05Apakah bisa di web view

24:13Ya, kalau web view nya sudah

24:15Chrome sekian

24:17Atau iOS sekian

24:19Maksudnya Safari sekian

24:21iOS belum bisa

24:23Safari belum bisa

24:25Jadi kalau di iOS

24:27Biasanya web view itu telat

24:29Tapi kalau di iOS, bukan web view pun

24:31Tetep web, gitu

24:33Masih ya

24:41Oke, lanjut

24:43Dialog light dismiss

24:45Bringing a nice pop offer

24:47API feature to dialog

24:49Ini sama ya

24:53Safari juga belum

24:55Tapi ada itu loh, sekarang ada

24:57Thumbs up tuh, kalau yang 2024

24:59Gak ada thumbs up tuh

25:01Ini ya

25:03Kayak voting

25:05Ada voting kalau suka, gitu

25:07Oh, diambil dari sini

25:09Masuk ke github

25:11Github, iya

25:13If you want this feature

25:15Jadi kayak social engineering

25:17Kalau kamu ingin

25:19Loh, masih 2-3

25:21Di-repress coba

25:23Kita harus

25:25Github issue nya

25:27Masih telat

25:31Udah, udah 2-5

25:33Real time

25:35Harus dibuild lagi

25:39Bisa juga ya

25:41Kalau kamu ingin feature ini tersedia di semua browser

25:49Berilah issue ini

25:51Thumbs up reaction

26:09Close by attribute

26:13Ini dialogue nya bisa pakai escape

26:15Gak bisa

26:17Oh ini ya

26:19Nah

26:21Close by ini ya, ada itunya

26:23Kalau ini gak bisa

26:25Light dismiss itu apa sih?

26:27Ya itu pakai escape atau

26:29Semacamnya

26:31Kalau keyboard, escape

26:35Kalau HP, touch screen

26:37Back button

26:39Apa nih, snacks

26:47Enak ya

26:49Enak pop up itu pakai apa

26:51Bagusnya, pop up

26:53Pop up bagusnya

26:55Pop up bagusnya pakai

26:59Native browser

27:01Kan udah ada

27:03Gak usah pakai

27:05Library yang lain lagi

27:07Udah pakai ini aja tuh

27:09Di-repress coba

27:11Karena ini CSS biasa ya

27:13Bisa di styling

27:15Maksudnya gak usah takut

27:17Tampilannya gila

27:19Suruh aja AI nya

27:21Di styling pakai

27:23Hellwind, Shad, CN dan lain-lain

27:25Oh iya, terus ngomong

27:27Scroll ke atas dikit deh

27:31Atas lagi yang tadi

27:33Notification, maksudnya sneak notification itu apa ya?

27:35Yang kayak gimana ya?

27:37Gak tau

27:39Toast ya, bukan toast ya

27:41Atas lagi dikit

27:43Atas lagi

27:45Nah

27:47Paragraf atas tuh

27:49Ada sudo element

27:51Titik 2 2 kali, titik 2 titik 2

27:53Backdrop

27:55Nah ini tuh hal yang simple

27:57Tapi underrated banget

27:59Kalau menurut gue, kayak dulu sebelum

28:01Ada ini, kan kalau

28:03Popupnya lagi kebuka

28:05Biar belakangnya ketutupan

28:07Tapi dikit kan, biasanya

28:09Body titik 2 after, terus

28:11Content titik 2 string

28:13Kosong, terus position

28:15Absolute, tau kan yang buat

28:17Nutup seluruh layar, tapi opasitifnya

28:19Separo, harus

28:21Menutupi content

28:23Layarnya, nah ini Z indexnya

28:25Kayak harus dimainin

28:27Tapi harus di bawahnya dialog, ya gak boleh

28:29Menutupin dialognya juga kan, bayangin itu

28:31Itu kan dulu semua harus manual ya

28:33Harus bikin sendiri, nah

28:35Kalau sekarang, ada backdrop

28:37Ya tetap harus di styling sih

28:39Cuma lebih gampang soal si indexnya udah

28:41Di range dari browser

28:43Kita tinggal ngestyling

28:45Opacity backgroundnya

28:47Nah, ya kalau

28:49Ada yang belum tau, nah ini

28:51Ada sudo element backdrop, dan dia otomatis

28:53Muncul dan ilang, kalau dialognya

28:55Ditutup, dia ilang sendiri

28:57Yaitu, nah termasuk ini

28:59Apa, dia nerima interaksi kan

29:01By clicking outside of the popover

29:03On the backdrop, ya kalau

29:05Bisa di setting, biar kalau user ngeklik disitu

29:07Dia nutup sendiri, jadi

29:09Kalau dulu kan, udah harus bikin

29:11Harus bikin sudo

29:13Element sendiri, harus nerima

29:15Apa, click event sendiri

29:17Nah, sekarang tuh udah di handle

29:19Semua dari browser

29:21Ya, lanjut

29:25Layar-layarnya harus manual, betul?

29:27Kalau sekarang udah

29:29Tapi gampang, gak perlu library juga ya

29:31Popover hin

29:33Ephemeral popover

29:37That don't close readers

29:39Ephemeral itu hidupnya singkat

29:43Jadi cepet

29:47Biasanya kalau button A ada popovernya

29:49Button B juga, kalau B dibuka

29:51A nutup otomatis

29:53Kalau dulu kan harus di handle manual

29:55Ini-ini-ini

29:57Di bawah ada

29:59Gua udah liat ini, di bawah ada

30:01Oh iya

30:03Popover hin

30:07Yang di atas bukan hin

30:09Itu popover biasa

30:11Yang di bawah itu hin

30:13Oh yang ini ya

30:15Yang kayak, gue main ini ya

30:17Jadi kalau kita keluar dari area-nya

30:19Dia akan hilang ya

30:21Kayak ini ya

30:23Kayak ini ya

30:25Kalau di

30:27Tooltip, kayak tooltip

30:29Nah

30:31Kayak tooltip ya, tapi ini popover

30:33Elemen, jadi bisa di styling

30:35Bisa, ya itu elemen

30:37Ephemeral elemen ya, jadi bisa

30:39Di siapa saja, kalau tooltip kan cuma text kan

30:41Ini ya, popover comments

30:45Itu, ya

30:47Betul

30:49Popover comments

30:51Tapi mana popover tooltipnya mana ya

30:53Comment-nya dimana

31:01Oh ini

31:03Isinya ya

31:05Bukan

31:07Ini bukan

31:09Isinya paling bawah

31:11Di tempelnya pakai ID

31:13Nah itu, kan pakai ID sama itu

31:15Ada ID yang popover

31:17Popover

31:19Popover equal hin

31:21Ininya

31:23Itu yang membuat dia

31:25Membuat dia jadi, kalau itu dihapus

31:27Cuma dihapus, pasti nggak bisa

31:31Muncul langsung ya

31:33Gak bisa dihapus

31:35Oh harus open di edit

31:37Di toolcode pane

31:39Yah, hilang deh

31:41Ah, hilang apanya

31:43Oh nggak, kebuka newtop

31:47Ya bener

31:49Ya bener maksudnya

31:51Coba dihapus

31:53Bawa-bawa

31:55Ya itu, popover hin

31:57Oh ini dia di bawah nih

32:07Ya jadi deep biasa

32:17Ini nggak

32:19Oh bisa

32:21Pakai, pakai

32:23Gak pakai S, nggak pakai S

32:25Ini bisa

32:27Enak ya

32:29Ya forgiving

32:31Web technology itu forgiving

32:33Salah-salah dikit bisa jalan

32:35Popover

32:39Whatever

32:41Bisa nggak ya

32:43Bisa

32:45Oh

32:47Editing truthy

32:49Apapun yang truthy, dianggap sebagai popover

32:51Bisa, tapi kalau hin kayaknya ada

32:53Behavior khususnya deh

32:55Kayaknya

32:57Apa bedanya

33:01Nggak tahu

33:03MDN, CSS, popover

33:07Attribute

33:09Kayaknya

33:13Ada CSS-nya deh

33:15Itu yang mengatur

33:17Itu yang popover itu

33:19Opacity

33:21Muz, sekarang jadi nggak ngerti loh

33:25CSS yang baru ini kayak gimana, apalah

33:27Artinya itu

33:29Oke, lanjut

33:35Ini

33:37Kalau nggak salah topiknya

33:39Pak Sandika Gali ya

33:41Jadi select itu sekarang udah bisa di

33:43Di bikin seperti ini

33:47Tanpa harus menggunakan

33:49Akal-akalan, montir, pakai

33:51Diff, gitu ya

33:53Sekarang udah bisa di-

33:55Apa

33:57Gua present di

33:59IOX Jogja, pas sebelumnya

34:01Pak Dika, jadi enak nyambung

34:03Bahas ini, tapi sedikit

34:05Tapi nggak sampai apa

34:07Masing-masing kodenya

34:09Nah, cuma apa

34:11Detailnya di-present sama Pak Dika

34:13Paling enak deh, kalau

34:15Dapat piring yang kayak gitu

34:17Nah, ini

34:19Kalau dulu kita harus pakai Diff

34:21Terus harus pakai JavaScript, mungkin ya

34:23Pakai

34:25Sementinya di-hide dulu

34:27Iya

34:29Sekarang, ini

34:31HTML, CSS aja, option

34:33Terus bisa ditaro image

34:35Ada

34:37Diff, bisa terima Diff juga dalamnya

34:39Ini adalah select kan

34:41Select

34:43Tapi jangan seneng dulu

34:45Jangan seneng dulu, baru Chromium

34:47Jadi, apa, kalau teman-teman pengen

34:49Ini ada di

34:51Routerline juga, itu

34:53Jangan lupa di-Thumbs up

34:55Dijempolin

34:57Safari belum

34:59Firefox belum

35:01Firefox belum, baru bisa di Chromium base ya

35:03Chromium only, sayang sekali

35:05Tapi, ini berguna banget loh

35:07Sebetulnya, kan, misalnya aplikasi web

35:09Apa sih yang nggak ada select-nya

35:11Maksudnya, ini use case yang

35:13Umum banget kan

35:15React select, nggak bisa ya

35:17Gini ya

35:19Oh, nggak tahu

35:21Ini bisa

35:23React select, atau apa

35:25Library JavaScript

35:27Ya, bisa, kalau library JavaScript bisa aja

35:29Kita bisa

35:31Ya, kita bisa

35:33Library, mengurangi

35:35Risiko kena supply chain attack

35:37Atau masalah-masalah

35:39Security, aneh-aneh lainnya

35:41Mengurang-urangi dependensi lah

35:43Terhadap package yang lain

35:45Itu juga cukup penting ya

35:47Next

35:49Carousel scroll affordance

35:51With native CSS

35:53Shadow element

35:55Creating carousel and other

35:57Scrolling experience in CSS

35:59Become much easier with the introduction

36:01Of two new shadow elements

36:03Scroll button and scroll marker

36:05This feature let you create native

36:07Accessible and performant carousel

36:09With just few lines of CSS

36:11No JavaScript required

36:13Mana satu

36:15Ini bagus banget

36:19Berguna banget kan, Del

36:21Jadi, kita selama ini kan manual kan

36:23Nge-check, misalnya carouselnya

36:2510 item, yang muncul 3

36:27Berarti kudu ada button-nya

36:29Kalau udah di scroll kanan

36:31Sampai abis, yang kiri diumpetin

36:33Ya gitu lah, pokoknya kita harus

36:35Bikin logic-nya semua sendiri

36:37Ini ada 2

36:39Ada 2 feature ini

36:41Kalau scroll ke atas sedikit, yang tadi

36:43Yang scroll

36:45Scroll marker itu baru

36:47Ini doang

36:49Coba ya

36:51Wait, ini bahkan

36:53Di Chrome aja belum

36:55Turun sedikit

36:59Ya, ini belum ada semua

37:01Ini masih scroll button

37:03Ya

37:05Yang satu lagi

37:07Ya, scroll marker

37:09Ada di Edge

37:11Ini baru scroll button kan

37:13Ada scroll marker

37:15Edge sih, udah duluan

37:17Kalau button belum ada sama sekali tadi

37:19Berarti ini

37:21Dorongannya si Edge ini

37:23Bikin ini

37:25Dari tahun lalu

37:27Edge ini memisahkan diri

37:29Dari Chromium base ya

37:31Jadi dia nge-fork ya

37:33Dia nge-fork Chromium

37:35Tapi kalau dia ubah, dia push lagi

37:37Upstream nggak ya

37:39Tergantung si Chromium-nya mau nggak

37:41Kalau

37:43Kalau si

37:45Edge-nya

37:47Kalau si Chromium-nya update, dia ngambil

37:49Oh gitu

37:53Kayanya sih

37:57Oh, kirain dia mau

37:59Memisahkan diri bener-bener

38:01Jadi lebih badiri

38:03Dia tetap ambil forking juga

38:05Makanya cepet juga kan dia

38:07Update-nya

38:09Kalau si Chromium udah bisa, dia ambil

38:11Cuma yang ini kan

38:13Kayanya si Chrom belum ini deh

38:15Masih on the way kayaknya

38:17Masih on the way ya

38:19Nah, ngomong-ngomong Carousel

38:21Coba buka demo Carousel deh

38:23Overall

38:25Ya, ini gabungan, kan sebenarnya Carousel

38:27Gabungan dari banyak fitur ya

38:29Cuma, kalau pengen liat

38:31In practice bentuknya kayak gimana

38:33Bisa tuh, liat di

38:35Chrom.dev/carousel

38:37Itu si mas Ninja

38:39Sudah buka

38:41Mana?

38:45Mas Adam

38:49Iya, makanya beliau yang bikin

38:51Nah, ya

38:53Coba horizontal cards

38:55Itu bisa di scroll banyak

38:57Banyak contoh-contohnya kan

39:01Itu tadi scroll button, scroll marker

39:03Di atas ada itu

39:05Jadi yang ini tetap di tengah ya

39:07Posisinya ya

39:09Posisi yang mau kita

39:11Pokoknya ada satu card

39:13Yang ada di tengah

39:15Itu ada

39:19Cross scroll button

39:21Coba

39:23Di atas kan ada list

39:25Di judul

39:27Nggak, itu gak clickable sih

39:29Cuma contoh

39:31Cuma bilang ini pakai scroll button

39:33Teknologi apa aja yang didemoin

39:37Soalnya ya itu satu Carousel kan

39:39Tertiri dari banyak fitur

39:41Sebetulnya

39:43Ini dia pakai

39:47Scroll button, scroll marker

39:49Scroll state queries

39:51Tapi disini juga ada yang bagus nih dibawah sini

39:53Yang keren

39:55Nah, ini

39:57Keren banget nih

39:59Oh, ini yang gue lihat

40:01Mas Dika ini

40:03Kayak pernah lihat

40:05Di presentasinya Pak Dika

40:07Cakep ya

40:13Itu yang panah-pana itu

40:15Scroll different animation itu

40:17Ini

40:19Iya

40:21No, JavaScript

40:23Only CSS

40:25Wow, JavaScriptnya kosong

40:27JavaScriptnya kosong

40:29CSS bro

40:31Kalo kata Pak Dika kan

40:37CSS bro

40:45Oke, lanjut

40:47Tiga lagi ya, scroll target group

40:49Turn a list of anchor links

40:53Into connected scroll markers

40:55Apa ini

40:59Tak mengerti saya

41:01Ya, jadi kayak navigasinya

41:05Dibisa

41:07Designates an element

41:13As a container for a group

41:15Of navigation items

41:17Jadi kayak ada navigation items

41:21Tapi kalo dikasih

41:23Scroll target group ini

41:25Jadi bisa dipakai untuk

41:27Mentarget si carousel itu

41:29Gak harus di dalamnya, jadi keliatannya ya

41:33The following example create a scroll spy highlighting

41:37Where you are on the page in an overview

41:39Or table of contents

41:41Ini ada table of contents kan

41:43Terus sectionnya ini

41:49Ditujukan ke ID

41:51Section 123

41:53Terus

41:55The following CSS create the scroll target group

41:57Then starts the table of contents

41:59Pasti kita semua pernah bikin deh

42:09Nah, jadi kalo kita scroll dia

42:11Merah sendiri

42:13Kalo dulu kan harus pake

42:15Intersection observer

42:17Kita ngecek masing-masing section di web

42:19Sudah bisa

42:23Itu masing-masing dikasih intersection observer

42:25Kalo muncul, nah terus si

42:27Table of contents itu

42:29Coba liat ini dong

42:31Coba liat

42:33Apa namanya

42:35Coba liat sudah sampai mana ini

42:39Gak ada ini

42:41Gak ada baseline-nya

42:43Belum ada baseline-nya

42:45Di jempolin aja

42:47Gak bisa dong

42:49Gak ada, belum ada

42:51Baseline-nya

42:53Belum ada kan experimental kan

42:55Di MDN-nya ada tulisannya tuh

42:57This is experimental technology

42:59Silahamah dong

43:01Tapi suit-nya aja gak ada

43:05Eh tapi di chrome udah bisa

43:07Mungkin ada polyfill-nya

43:09Ini kan chrome

43:11Udah bisa

43:15Dan ini HTML CSS doang

43:17Ya kan

43:21Coba edit one more time

43:23Ya gue juga bisa sih ini

43:25Ini, ini

43:27Chrome 140

43:29Chrome 140

43:31Oh, ya ya ya

43:33Oh iya, chrome sama

43:358 140

43:37Udah bisa

43:39Karena gue pernah bikin, gue lagi cari

43:41Sontonya ya

43:43Dan itu buatnya susah setengah mati bentar ya

43:45Lanjut dulu deh, gue cari dulu

43:47Aku juga pernah bikin

43:49Yaitu tadi masing-masing dipasangin

43:51Observer

43:53Terus add/remove di

43:55Class yang di kanan itu

43:57Ya lanjut

43:59Container queries aja kita belum bahas ya

44:03Ini udah ada anchor-nya lagi

44:05Iya

44:07Ini cuma masih

44:09Kayaknya bukan

44:11Container query yang size tapi

44:13Ada type khusus

44:15Container type, titik 2, anchor

44:17Jadi kelihatannya apa kalau kita pindah-pindah

44:21Jadi itu

44:23Ke anchor, ke parent-nya

44:25Jadi gak perlu posisinya

44:29Iya betul, yang tadi kayak Observer yang ini ya

44:33Jadi dia yang nge-check

44:35Itu susah

44:37Susah banget

44:39Kalau Observer manual

44:41Iya saya pakai Observer

44:43Udah gak nampak

44:47Gimana tadi, potong

44:49Anchor container query

44:51Container type-nya anchor

44:53Kalau ada

44:55Fallback begini

44:57Jadi itu kayak misalnya

45:01Tool-tip

45:03Tool-tip atau drop-down atau pop-over

45:05Kan kadang kita gak tahu tuh

45:07Harus ngebukanya ke bawah

45:09Atau ke atas, kalau misalnya button

45:11Trigger-nya pas lagi di bagian bawah

45:13Nah user gue gak scroll ke bawah

45:15Kan kalau nge-click

45:17Harus ngebukanya ke atas

45:19Kan biar gak ketutupan

45:21Kalau dulu kan harus calculate pake Javastrip

45:23Sekarang bisa pake itu

45:31Menarik, ini ya

45:33Ada, bisa pake ini juga ya

45:35Tanda panah ke atas ke bawah gitu ya

45:37Contohnya ini

45:39Oh, otomatis dia turun

45:45Ya makanya

45:47Kalau dulu kan harus calculate

45:49Harus ya apalah

45:51Pasang Observer

45:53Ini kalau kita scroll ke atas

45:55Dia akan turun ke bawah

45:57Karena nanti bisa gak kelihatan

46:01Kalau di bawah juga sama

46:03Tidak ada Javastrip

46:05CSS Bro

46:07Interest Invoker

46:19Deklarative Interest Trigger UI

46:21With Interest For

46:23Ini masih limited

46:25Berarti yang non-chromium

46:27Belum bisa

46:29Apa ini Interest Observer?

46:31Interest Invoker

46:33Ini tuh kayak

46:35Kalau kita mau mouse over

46:37Atau semacamnya

46:39Itu dia udah ngebuka dulu

46:41Oh

46:51Jadi sebelum di-click

46:53Iya

46:55Tapi dia meneteksi sebelum di-click

46:57Tapi kursor kita

46:59Mendekati kayak 1%

47:01Ada calculasinya sendiri

47:03Menekati point-point itu

47:05Dia udah ngebuka

47:07Mirip Popover juga ya

47:13Berarti ya

47:15Jangan-jangan itu Popover

47:17Callout

47:21Iya itu Popover

47:23Itu Popover

47:25Tapi Interest For itu

47:27Kayak memperkaya

47:28Kayak fitur tambahan dari Popover

47:30Iya kayak

47:34Button Class

47:36Button Class Info Point

47:38Mana sih?

47:40Terus dia manggil

47:42Callout

47:441

47:46Kita gak

47:48Pasang Event Listener

47:50Button On Mouse Over

47:52Oh iya

47:54Iya benar

47:56Jadi gak perlu

48:02Tapi hanya bisa buat

48:04Mouse

48:06Gak

48:08Gak bisa buat

48:10Ada itunya deh

48:12Touchscreen bisa

48:16Kalau udah kayak gini

48:18Tapi belum up

48:20Itu udah dianggap

48:22Ngebuka juga

48:24Gak ada yang bisa detect mata ya

48:30Kalau mata sudah liat button itu

48:32Tiba-tiba udah ngebuka

48:34Oke selesai

48:50Itu tadi bagian pertama

48:52Custom Component

48:54Sekarang masuk bagian kedua, ini ada 8 juga

48:56Interaksi

48:58Interaksi

49:00Next Generation

49:02Berikutnya

49:04Pake Next dong

49:06Yang pertama

49:08Gak, pake Astro

49:10Hahaha

49:12Next Gen

49:14Astro Gen

49:16Interaction

49:18Hahaha

49:20Detergen kali

49:22Hahaha

49:24Scroll State Queries

49:26Style Descendant Based On

49:28Whatever Something Is Scrollable

49:30Stack Or Snag

49:32Container

49:34Scroll State Queries

49:36Ini juga

49:38Masih Chromium Base

49:40Yang pengen, oh 9

49:46Sudah ada dari 1.33 ya

49:48Oh

49:54Dia otomatis ke tengah gitu

49:56Iya

49:58Coba ada contohnya gak dibawah tuh

50:00Ada

50:02Jadi kalau kita

50:06Eh kok gak bisa

50:08Pake ini, pake

50:10Pake scrollnya ini mas

50:12Ada gak, di mouse-nya ada scrollnya gak

50:14Ada

50:16Ini

50:18Coba itu di quals

50:20Wait

50:22Itu ada centangnya tuh

50:24Request topic at each

50:26Nah

50:28Coba di

50:30Nah kan kalau gini kan

50:32Kita gak bisa kan, di tengah-tengah sini gak bisa dia

50:34Nempel di sini

50:36Iya

50:38Kalau kita mau di sini gak bisa

50:40Mau di sini juga gak bisa nih

50:44Oh

50:46Oke

50:52TML CSS

50:54Gimana caranya

51:00Dianandain ya

51:02Ya

51:08Tree counting

51:10Function

51:12Segregate animation

51:14Segregate animation, apa tuh

51:16Sibling index

51:18Kita mencerna semua gitu

51:32Iya

51:36Terlalu banyak, ini coba bisa di shuffle

51:40Apa sih maksudnya

51:42Saya bingung

51:44Ini animasinya satu-satu

51:50Cuma dia apa

51:52Nge-stagger 1234

51:54Dulu kan harus manual

51:56Misalnya yang pertama

51:58Di delay-nya 0,2

52:00Yang pertama item pertama 0

52:02Item kedua 0,25

52:04Delay-nya

52:06Dulu kita yang tentuin sendiri ya

52:08Dulu kan

52:10Kita harus kasih index 1

52:12Atau nth child

52:14Dalam kurung 1, nth child

52:16Dalam kurung 2

52:18Terus sekarang gak

52:20Lama-lama

52:24CSS bisa

52:26Bisa cyclic redundancy

52:28Ini nanobanan nih

52:30Iya

52:32Ada tangganya

52:34Jaman naik

52:36Oke

52:38Lanjut, scroll into view

52:42Container

52:44Sometimes scrolling only

52:46The nearest ancestor scroll

52:48Is all you want

52:50Bukannya sudah ada scroll into view

52:54Itu kan java script

53:04Itu dia bisa gerak

53:06Kalau ini dia gak geser ya

53:10Snap ya berarti

53:14Bukan, bukan

53:16Up and down-nya gak gerak-gerak

53:18Biar kalo pake mouse

53:26Atau semacam yang enak ya

53:28Gak sengaja

53:30Kita nyampingnya gak perfect

53:32Gak diagonal, gak sengaja turun ke bawah

53:34Bukan, maksudnya kalo

53:38Ini kan dia karena gak pake itu

53:40Karena ada

53:42Ada scroll into view-nya

53:44Ada

53:46Ada TLS

53:50Angkor

53:52Layout sieve ya

53:54Bukan, ada angkor

53:56Kan dia ada div-nya, kita klik itu kan

53:58Si browser kan otomatis

54:00Kita arahkan ke angkor link itu

54:02Overflow-nya

54:04Di dalam kotak div itu

54:06Kalau ini

54:08Kalo kita nyalain

54:12Maka dia gak gerak

54:14Pada saat kita klik ya

54:16Iya

54:18Nah, coba liat HTML-nya dulu

54:20HTML

54:22Coba liat

54:24Ada div-nya pasti itu

54:28Div class, carousel

54:30Carousel, scroller

54:32Slide

54:34Image, slide

54:36Itu class-class slide semua

54:38Dibawahnya yang bulat-bulat ya

54:42Ini

54:44Omar, carousel

54:46Tapi

54:48Ya, sudah gak mengerti lagi

54:50JSC ada gak sih?

54:52Kayaknya ada

54:54JSC itu buat

54:56Iya

54:58Iya, karena

55:02Scroll into view itu

55:04Akan membuat

55:08Scroll into view itu akan

55:10Membuat si

55:12Apa namanya?

55:14Browser itu akan menuju ke elemen itu kan

55:16Kalo kita

55:18Contohnya

55:20Back to top, kan biasanya back to top itu

55:22Scroll into view ke atas kan

55:24Pake, gue sering pake

55:26Scroll into view gitu soalnya

55:28Nah, kalo kita pake

55:30Scroll into view di marker itu

55:32Ya, jadi dia gerak-gerak begitu

55:34Lompat-lompat jadinya

55:36Tapi, gue jarang pake

55:38Jadi ini begini

55:40Bukan buat carousel

55:42Iya, ada aja yang mikirin

55:52Okay, lanjut

55:54Scroll to the specific slide

55:56Lanjut

55:58Ini buat nesting ya

56:20Di grouping ya

56:22Ini ahlinya

56:24Gimana Eka, coba

56:26Belum coba sih

56:28Cuma intinya kayak

56:30Kartnya tuh grouping itu kan

56:32Biar kart ada animasinya sendiri

56:34Image ada animasinya sendiri

56:36Nah, cuma ini perubahnya apa gak tau

56:38Oh, biar gambarnya gak

56:40Gambarnya bisa di animate

56:42Separately itu

56:44Coba itu use nestednya itu dihapus

56:50Nah, kalo gak nested

56:52Gambarnya sempet ikut mular kali ya

56:54Oh

56:58Gak juga, apa bedanya

57:00Gak

57:02Kartnya, nah

57:04Kartnya kayak

57:06Kalau ini

57:08Kartnya gede ya

57:12Gede sebelah

57:14Oh, maksudnya

57:16Start sama finishnya tuh kayak

57:18Apa

57:20Ya bener gitu loh

57:22Mulainya sampe abisnya tuh kayak

57:24Apa gimana jelasinnya

57:28Pokoknya lebih natural

57:30At obnoxious 3D

57:32Coba intinya di

57:36Nestingnya dihilangin sama slowdownnya

57:38Dihilangin

57:40Kalo slowdown dihilangin mah gak kerasa

57:48Saya bener bener bingung

57:50"Without nested few transition group

57:52The avatar and name

57:54Do not rotate along

57:56With the card

57:58But when the option

58:02Is checked, the 3D effect

58:04Can be restored"

58:06"Kalo gak pake nested

58:10Avatar sama name tidak

58:12Rotate bersama dengan card"

58:16Oh, mungkin ini

58:18Oh, di slowdown ya

58:22Ini gak rotate

58:24Gak rotate, iya kan

58:26Gak rotate kan

58:28Oh, jadi aneh ya

58:32Kalau nested, gambarnya ikut

58:34Rotate tuh

58:36Oh

58:38Ada bedanya

58:40Oh, jadi

58:42Walaupun card punya

58:44Animasi sendiri

58:46Foto punya animasi sendiri

58:48Tapi dua-duanya bisa

58:50Grouping sama-sama dirotate

58:52Biar natural, maksudnya biar

58:54Kayak disaapkan-akan itu

58:56Satu animasi

58:58Padahal gak

59:00Good

59:06"Dome state per serving move

59:08Move iframe and video

59:10Across the dome without

59:12Reloading them"

59:14Ya, ini

59:16Gue udah pernah baca ini

59:18Untuk Youtube nih kayaknya

59:20Buat iklan sih

59:22Ya, mau saya apapun sih

59:24Mau iklan atau nonton

59:26Video

59:28Ini

59:30Jadi coba di play

59:32Terus di insert

59:36Before

59:38Di insert

59:40Nah

59:42Kalau insert before kan dia

59:44Ke atas dia, ke atas

59:46Reset kan

59:48Ya, coba

59:50Di play

59:52Terus move

59:54Move before yang sebelahnya

59:56Masih play ya

1:00:02Ya, iframe-nya tidak

1:00:04Digenerate ulang

1:00:06Oh

1:00:08Gak dirender ulang, sorry

1:00:10Dia cuma dipindahkan

1:00:12Padahal downloadnya dipindahkan

1:00:14Kalau dipindahkan biasanya kan itu

1:00:16Sebenernya kayak bikin instance baru kan

1:00:18Kayak bikin interwewe baru

1:00:20Sekarang gak

1:00:22Bisa inget ya

1:00:24Tapi

1:00:26Gunanya apa ya

1:00:28Ya itu

1:00:30Kalau lagi play video

1:00:32Use scroll bisa pindah ke mana-mana

1:00:34Sama kayak

1:00:36Transition group

1:00:38Kayak mau pindah page

1:00:40Mungkin videonya masih ke bawah kali ya

1:00:42Bisa jadi ya SPA

1:00:44Mungkin

1:00:46Ya

1:00:48Sekarang Youtube juga gitu kan

1:00:50Kalau misalnya kita lagi play video

1:00:52Terus kita scroll

1:00:54Ke bawah kan

1:00:56Ada video rekomendasi

1:00:58Kalau kita buka dari situ

1:01:00Kalau kita balik ke feed

1:01:02Kalau kita balik ke home

1:01:04Video yang lagi di play itu

1:01:06Masih kayak persisted gitu

1:01:08Persistence masih ada di kanan bawah

1:01:10Mempel dan masih main

1:01:12Masih playing

1:01:14Itu bukannya picture in picture ya

1:01:16Beda ya

1:01:18Emang itu picture in picture

1:01:20Udah ganti halaman loh, ganti route

1:01:22Gak tau

1:01:24Iya, ngerti, ngerti

1:01:26Dia ada di bawah, cuma

1:01:28Dan itu custom UI

1:01:32Ada misalnya kayak apa

1:01:34Yang nempel di kanan bawah itu

1:01:36Apa sih kayak ada

1:01:383.menunya Youtube yang bisa

1:01:40Save to favorite atau apalah

1:01:42Save to watch later

1:01:44Jadi itu custom UI

1:01:46Bukan picture in picture

1:01:48Bawaan browser

1:01:50Oke, lanjut

1:01:54Kita lanjut

1:01:56Ke bagian ketiga

1:01:58Optimized Agronomics

1:02:00Ada lebih banyak ya

1:02:02Ada 9

1:02:04Ini gue tau, ini banyakan mengenai

1:02:06CSS function

1:02:08Cuma gak tau apa gunanya saat ini

1:02:14Ada attribute function

1:02:16Beyond simple string

1:02:18Ini kita pernah bahas kan nih

1:02:20Pas lagi bahas unit

1:02:22Ini untuk

1:02:24Type safety

1:02:26Mengenforce

1:02:28Ini

1:02:30Jadi maksudnya

1:02:32Kalau si data color-nya

1:02:34Value-nya gak valid sebagai color

1:02:36Itu di ignore

1:02:38Yang dibaca

1:02:40Fullback-nya red

1:02:42Oke

1:02:50Kayak ada type systemnya ya

1:02:52Jadi type-nya color gitu ya

1:02:58What's that?

1:03:00Custom Eden

1:03:06None

1:03:08Custom Identity

1:03:10Finally, this demo

1:03:12Show how to use attribute function

1:03:14In multiple ways

1:03:16Pursues data rating

1:03:18To determine

1:03:20A percent fill to visually

1:03:22Fill the star mask

1:03:24And representing the rating

1:03:26Then use the same data attribute

1:03:28In content property

1:03:30To insert the value in shadow element

1:03:32Jadi background

1:03:34Linear, to right

1:03:36Warnanya gold

1:03:38Variable-nya percent fill

1:03:40Transparent, far, percent fill

1:03:42Disini

1:03:44Oh bukan itu, ini ya percent fill

1:03:46Itu adalah calculate

1:03:48Attribute, data rating

1:03:50Jadi ini nilainya 20%

1:03:5220%

1:03:54Ya

1:03:56Nggak sih, 20% yang terakhir

1:03:58Iya maksudnya

1:04:00Total kan 100

1:04:02Terus data rating-nya

1:04:06Itu sebagai

1:04:08Content, jadi ada 2 cara ya

1:04:10Yang ini untuk mengitung

1:04:124,5

1:04:143, 3,5 ya

1:04:16Bukan-bukan

1:04:18Masukin di dalam gradient-nya

1:04:20Sebagai argument

1:04:22Ya disini kan

1:04:24Iya, kalau buka

1:04:26Coba liat buka HTML ya, kayaknya saya mengerti deh

1:04:28Itu data

1:04:30Data rating-nya

1:04:32Attribute 4,5

1:04:34Itu yang

1:04:36Content 4,5 itu tinggal ditampilin

1:04:38Terus tapi kalau bintangnya

1:04:40Itu pakai

1:04:42Itu tadi, yang percent fill itu

1:04:44Ini ya

1:04:48Iya

1:04:50Coba aja ganti 10%

1:04:52Oh nggak bisa disini ya

1:04:54Iya

1:04:56Ganti aja rating

1:05:00Kalau rating-nya 5, 5x20%

1:05:02Sama dengan 100% keisi

1:05:04Kuning semua

1:05:06Kalau 10% jadi separuhnya semua

1:05:12Setengahnya

1:05:18Menarik

1:05:20Jadi bisa ini ya

1:05:22Pake CSS

1:05:24Apalagi pakai JS

1:05:26Beginian, dulu kan pakai SVG ya

1:05:28SVG, terus dikasih

1:05:30Di

1:05:32Apa namanya, dipake CSS juga sih

1:05:34Temen SVG-nya yang di iniin

1:05:36Dikalkulasi

1:05:38Untuk nampilinnya

1:05:40Oh, menarik deh

1:05:42Kalau misalnya

1:05:44Data rating-nya

1:05:46Diganti pakai yang bukan angka

1:05:48Tulis aja ABC gitu

1:05:50Ya, dia nggak ngerender

1:05:52Apa-apa

1:05:54Ayo

1:06:02Karena

1:06:04Ada

1:06:06Data type-nya ya

1:06:08Data type-nya ya

1:06:10Rumber to data to data

1:06:12Data rating, type, number

1:06:14Ya

1:06:16Sama

1:06:20Sebelumnya nggak bisa kayak gini

1:06:22Karena kan kalau data atribut

1:06:24Atribut apa

1:06:26Dari elemen HTML apapun

1:06:28Kan jadinya string kan

1:06:30Data rating sama dengan

1:06:323.5 ya kan

1:06:34Selama ini diterit sebagai string

1:06:363.5

1:06:38Nah, kalau sekarang bisa di

1:06:40Enforce

1:06:42Slip itu kan number

1:06:44Number prototype dan number class

1:06:46Ya

1:06:48Oke, lanjut

1:06:54Sorry

1:06:56Atribut ini sudah ada di mana aja tadi

1:06:58Saya lupa

1:07:00Di thumbs up dong

1:07:02Thumbs up

1:07:04Thumbs up aja semua nih

1:07:08Sebenernya pengen

1:07:10Semua kok

1:07:12Hebat ya

1:07:14Wait, wait

1:07:16Ininya bagus lho

1:07:18Back-forward cache-nya

1:07:20Ya

1:07:22Kalau yang ini nggak

1:07:24Yang GitHub nggak

1:07:26Tapi yang ini ya

1:07:28Dia implement back-forward cache ini

1:07:30Makanya begitu kita balik

1:07:32Posisinya sama

1:07:34Ya kalau dari awal posisinya udah betul

1:07:36Dan tidak re-render

1:07:38Di cache ya

1:07:40Hebat memang

1:07:42Mas Adam

1:07:44Mas Adam atau

1:07:46Mbak Una yang bikin

1:07:48Kayaknya sih

1:07:52Buatan mereka lah

1:07:54Toggle event source

1:07:56Find which element was

1:07:58Responsible for toggling the target

1:08:00Ini kecuali safari udah bisa

1:08:02Padahal

1:08:04Thumbs up-nya cuma 4

1:08:06But

1:08:08When a pop-up detail element

1:08:10Get toggled it can be interesting

1:08:12To know which element was responsible

1:08:14For toggling it

1:08:16Knowing accept cookie

1:08:18Or reject cookie button to dismiss

1:08:20A cookie banner is very important detail

1:08:22Source attribute of toggle event

1:08:26Let you know exactly that

1:08:28As it contains

1:08:30The element which trigger the event

1:08:32To be fired if applicable

1:08:36Sebelumnya bisa

1:08:38Tapi pake event target

1:08:40Source ya sama

1:08:42Harus kayak manual

1:08:44Source nya itu

1:08:46Dikasih ID biar bisa dicek

1:08:48Kalau ini otomatis ngebaca note elementnya

1:08:50Ini cuma disini ya nih

1:09:04Di command for cookie banner

1:09:06Terus

1:09:08Apa namanya

1:09:10Di JS nya kita tinggal cari

1:09:12Event

1:09:16Source ya

1:09:20Gimana sih bingung sendiri jadinya

1:09:26Ya itu event dot source

1:09:32Sama dengan button yes

1:09:34Sama button no

1:09:36Sebelumnya gak bisa ya

1:09:40Sebelumnya kayak

1:09:42DX nya panjang

1:09:44Event dot target dot source

1:09:46Gak bisa langsung

1:09:48Ngecompare sama note elementnya

1:09:50Jadi kayak harus ngecek ID nya

1:09:52Jadi misalnya kalau dulu

1:09:54Yes sama no itu masing-masing

1:09:56Harus dikasih class atau ID

1:09:58Masing-masing button

1:10:00Ada event listener nya ya

1:10:02Masing-masing button ya

1:10:04Sebelumnya ya

1:10:06Misalnya data attribute aja

1:10:08Data action type

1:10:10Sama dengan yes data action type

1:10:12Sama dengan no

1:10:14Di event listener nya

1:10:16Ada event dot target dot source

1:10:18Atau semacamnya

1:10:20Bisa tapi ribet dulu

1:10:22Intinya ini mempersingkat aja

1:10:30Textbox features

1:10:32Flawlessly center text

1:10:34Vertically

1:10:36Oh bisa di tengah-tengah gitu

1:10:38Ya nih kalau kali ini

1:10:40Baseline nya si firefox

1:10:42Yang belum implement

1:10:44Apa mani

1:10:50Ya itu

1:10:52Typography stuff

1:10:54Dia di tengah-tengah ya

1:10:58Ada ini sama yang dibawah

1:11:00Maksudnya gimana sih

1:11:02Ini yang ngerti orang yang

1:11:06Ahli typography sih

1:11:08Punya biar balance aja

1:11:10Kan huruf ada yang

1:11:12Kayak naik ke atas

1:11:14Dan naik ke bawah

1:11:16Coba G tambahin G

1:11:18E kecil

1:11:20Terus kalau

1:11:22I, huruf I

1:11:26Oke

1:11:28Huruf apa lagi yang aneh

1:11:30Nggak ada

1:11:34Ya ini buat nge custom aja

1:11:38Kayak naik turunnya

1:11:40Ah ya tak terlalu ngerti

1:11:54Oh buat si JK kali ya

1:11:56Kalo

1:11:58Kalo si JK kan mungkin

1:12:00Bisa berlebih gitu kali ya

1:12:02Bisa di adjust

1:12:04Platin juga kok

1:12:06Ya kan tergantung font nya

1:12:08Masih ngasih font lain-lain

1:12:10Jadi ini kayaknya biar bisa di custom aja

1:12:12Ini kan

1:12:20Text

1:12:22Box kan

1:12:24Ini text box kan

1:12:26Kalo misalkan kita pilih text

1:12:28Dia akan ke bawah

1:12:30Ikutin text yang kita pakai ya

1:12:32Terus edge nya diganti itu

1:12:34Yang kiri deh, edge kan ada trim banget

1:12:36Non, coba dari non dulu

1:12:38Non

1:12:40Kalo nggak diseti

1:12:42Line height nya kan

1:12:44Line spacing nya segitu

1:12:46Nah terus coba aja ganti

1:12:48Satu per satu star

1:12:50Dia ke atas

1:12:52Kalo n dia nipel ke bawah

1:12:54Kalo bold di atas-bawah

1:12:56Kalo bold ke tengah

1:12:58Itu aja sih

1:13:00Terus trim over nya juga

1:13:02Bisa diatur

1:13:04Ya ini typography stuff sih

1:13:06X ini apa?

1:13:08X itu huruf X

1:13:10Nggak, literally huruf X

1:13:12Kan kita bahaskan

1:13:14Pas di CSS unit kemarin

1:13:16Ke X itu

1:13:18Karena huruf X itu

1:13:20Patokan space ya

1:13:22Patokan tengah-tengahnya huruf

1:13:24Patokannya ya

1:13:26Ini tengah-tengah ya

1:13:28Huruf yang paling simetris

1:13:30Bukannya

1:13:32H, simetris

1:13:34H besar

1:13:36Ini, di atas dia

1:13:38Iya kan, makanya H kan

1:13:40Jadi contoh, H besar kan

1:13:42Simetris juga

1:13:44Ya, ini biasa sih

1:13:46Yang ini, yang ini

1:13:48Bisa, bisa, bisa

1:13:50Bisa juga

1:13:52Cuman kurang ke tengah

1:13:54Kita nggak ada titik tengahnya nih

1:13:56Kecuali X ya

1:13:58Garis tengahnya, garis tengah

1:14:00Oke

1:14:02Lanjut, lanjut, lanjut

1:14:04Shape function

1:14:06Nah, ini udah nyobrol juga nih

1:14:08Shape, shape, shape

1:14:10Firefox belum

1:14:12Yang nge-thumb up juga sedikit lagi

1:14:14Jadi intinya

1:14:16Tahu nggak sih, kalau majalah cetak

1:14:18Majalah print, kalau CSS kan

1:14:20Kalau float, bisa ngikutin

1:14:22Misalnya ini, ada gambar kotak

1:14:24Float, teksnya ngikut, tapi nggak nabrak

1:14:26Image-nya ngikut di sekitarnya

1:14:28Nah, sekarang ini bisa buat

1:14:30Bentuk custom apapun

1:14:32Pake polygon, Pak

1:14:34Apa sih nih masanya?

1:14:38Saya bingung

1:14:42Yaitu jelasinnya susah punya

1:14:44Behaviour-nya float, tahu nggak

1:14:46Kalau ada image, image kan inline

1:14:48Nah, terus di sekitarnya

1:14:50Ada paragraf teks

1:14:52Banyak teks blok

1:14:54Bisa, bisa

1:14:56Dia menggir

1:14:58Teksnya otomatis menggir

1:15:00Ngasi space untuk gambar itu sendiri

1:15:02Yang misalnya gambarnya cuma 200 pixel

1:15:04Tapi kan semua di CSS

1:15:06Semua di browser adalah kotak

1:15:08Jadi kan kalau pakai float, dia cuma bisa menggit

1:15:10Ikutin, nyesuaikan bentuk

1:15:12Untuk bentuk kotak, kan

1:15:14Kalau ini, behavior yang kayak gitu

1:15:16Seperti itu, cuma untuk

1:15:18Bentuk custom apapun

1:15:20Nah, bentuk custom-nya apa, ya itu

1:15:22Terus shape-nya mana?

1:15:28Shape

1:15:30Function-nya, dipanggil di mana?

1:15:32Oh, itu di atas, paling atas tadi

1:15:34Itu kuebra, kuebra 2, shape

1:15:36Shape, function

1:15:40Kalau nggak pakai, jadi-nya gimana?

1:15:42Coba edit

1:15:46Ganti aja kelasnya, jadi

1:15:50Jangan usah, play-nya biarin aja

1:15:52Tapi kelasnya aja ganti

1:15:54Oh, masking ya

1:15:56Masking

1:15:58Oh, jadi masking yang gue bilang itu

1:16:00Shape outside, sorry

1:16:02Ini sepasang soalnya, ada shape

1:16:04Ada shape outside, yang dibahas di sini

1:16:06Shape

1:16:10Oh

1:16:12Iya, iya

1:16:14Jadi, dia bisa di

1:16:16Shape-nya bisa

1:16:18Bisa digambarlah ya

1:16:20Image-nya mengikuti bentuk

1:16:22Ini ya

1:16:24Belokan-belokannya ya

1:16:26Wah, kalau pakai hitung-hitungan

1:16:28Ini susah ini, harusnya nanti

1:16:30Ada tools ini, kayak kita

1:16:32Ada generator, tadi ada link-nya

1:16:34Ada, another example

1:16:36Here uses a blob generator

1:16:38Kalau tadi shape kan masking ke dalam

1:16:40Kalau shape outside, keluar

1:16:42Yang tadi gue bilang itu

1:16:44Scroll aja ke bawah, sampai ada contohnya

1:16:48Nah, itu-itu-itu, ya gitulah intinya

1:16:54Dia bisa mengikuti bentuk topi

1:16:56Sama bentuk orangnya

1:16:58Wih

1:17:00Keren

1:17:02Tapi harus punya ini ya

1:17:06Iya, sama kayak tadi

1:17:08Ada polygon-nya

1:17:10Cuma shape outside ya, sesuai namanya

1:17:14Keluar, mempengaruhi elemen di luar

1:17:16Kalau tadi yang shape doang, function shape

1:17:18Apa? Kedalam masking

1:17:20Oke

1:17:26Ada nih blob generator-nya

1:17:28Cek aja tuh

1:17:30Nah, another example here uses blob generator

1:17:34Oh, blob generator

1:17:36Mereka main-mainin aja

1:17:38Gitu

1:17:46Bisa pakai CSS ya, ini CSS ya

1:17:48CSS

1:17:52Bungu

1:17:54CSS, bro

1:17:56CSS, kak

1:17:58Oh, panggil eka

1:18:00Iya

1:18:02Hahaha

1:18:04CSS

1:18:06Ya, kalau sudah di CSS

1:18:08Sudah, ini udah nggak usah dilihatin lagi

1:18:10Ampe sama kayak

1:18:14SPG ya

1:18:16Tapi kayaknya lebih aman

1:18:18Dari ini, daripada SPG

1:18:20Gak bisa di CCP

1:18:22SPG kan

1:18:24Tidak begitu aman

1:18:32Ada program-an

1:18:34CSS adalah bahasa program-an

1:18:36Ini ada blog-nya

1:18:38Udah toren complete belum?

1:18:40Kayaknya belum ada ini juga ya

1:18:46While, atau looping-nya

1:18:48Belum ada soalnya

1:18:50Oh, iya belum

1:18:52If

1:18:54Semakin rumit ya

1:18:56If kondisi 1, value 1

1:19:00Kondisi 2, value 2

1:19:02Else, callback

1:19:04CSS, semakin rumit

1:19:06Ternary operator ya

1:19:08Flex Direction

1:19:10If Medial Orientation, let's get

1:19:12Pakai jadi row, else-nya column

1:19:14Pertanyaannya, ini kalau

1:19:16Detail Win

1:19:18Detail Win Nice, itu gimana caranya ya?

1:19:20Oh, dia ada mas Thanos

1:19:22Kabur-kabur-kabur

1:19:26Bye-bye

1:19:28Terima kasih

1:19:30Ini buat yang gak pake tailwind

1:19:34Ya, suatu saatnya

1:19:36Bakal ada yang

1:19:38Detail Win Nice gitu, saya gak tahu ya

1:19:40Bisa lah, tailwind kan ekosistem plugin-nya

1:19:42Bagus kok, jadi kayak

1:19:44Ada ifrifan-nya juga dia

1:19:46Ada

1:19:48Container query pun

1:19:50Sebelum diintegrate ke

1:19:52Tailwind core-nya kan, dibikin plugin

1:19:54External dulu

1:19:56Udah baseline, pas begitu

1:19:58Newly baseline, ya diintegrate ke core-nya

1:20:00Kan ada plugin ekosistemnya

1:20:02Eh, sorry, ini ada

1:20:06Pertanyaan kelewat nih

1:20:08Mau tanya, apa perbedaan

1:20:10Setiap posisi yang mana ya?

1:20:12Tadi, yang mana ya?

1:20:14Yang ini, atau yang mana?

1:20:16Kelewat, gak kebaca

1:20:24Posisi

1:20:26Posisi popover

1:20:28Atau apa nih? Mungkin dia

1:20:30Nontonnya replay gitu

1:20:32Boleh

1:20:36Siapa nih, 32

1:20:38Panky

1:20:40Briana

1:20:42Tolong dielaborasi lebih lanjut ya

1:20:44Pertanyaannya posisi apa nih?

1:20:46Kita lagi ngomongin CSS

1:20:48Atribut apa?

1:20:50Laman Vibe Coding

1:20:52Terima kasih, Tailwind jadi lupa CSS

1:20:54Ayo

1:20:56Jangan lupa diaseh ya, otaknya ya

1:20:58Minimal tahu ada fitur ini

1:21:02Jadi pas Vibe Coding

1:21:04Kita ngerti

1:21:06Pas kita mecut AI

1:21:08Kita merintahnya apa

1:21:10Vibe Coding belum tahu dia beginian

1:21:12Belum nyampe dia

1:21:14Bisa disuruh belajar

1:21:16Buka dulu CSS surep

1:21:18Full calling

1:21:20Di kasih linknya

1:21:22Bisa itu sendiri

1:21:24Ati-ati boncos

1:21:26Tapi

1:21:28Ya ditanggung sendiri

1:21:30Plugin apa?

1:21:32Ini CSS bro

1:21:36Gak ada plug-in, ini vanilla CSS

1:21:38Jadi gak pakai plug-in

1:21:40Maksudnya tadi kali Tailwind ya

1:21:42Kita kan bahas gimana kalau

1:21:44Tadi konteksnya kan ifa nanya

1:21:46Gimana kalau orang yang pakai Tailwind

1:21:48Kalau mau pakai Tailwind

1:21:50Terus pakai sinteks if gini

1:21:52Kan sinteks baru ya ada fungsinya

1:21:54If dalam kurung

1:21:56Kita masukin argumen-argumennya

1:21:58Itu mah di belakang layar

1:22:00Maksudnya konteksnya

1:22:02Itu usannya gimana

1:22:04If apa kan jadi panjang banget

1:22:06Klasnya Mila

1:22:08Nah ya kalau panjang

1:22:10Cuma tadi maksudnya jawabannya

1:22:12Jawaban gue adalah

1:22:14Bisa di handle pakai plug-in

1:22:16Dicustomize aja

1:22:18Masukin argumen-argumennya

1:22:20Tapi iya pasti jelek banget klas namenya

1:22:22Ini gak akan ke

1:22:24Kayaknya gak akan ke

1:22:26Expo sampai ke

1:22:28Tailwindnya deh

1:22:30Tailwind itu kan udah ada if-ifan

1:22:32Secara tidak langsung udah ada if-ifan kan

1:22:34Sebenarnya kan kayak misalkan

1:22:36Landscape, MD, titik 2

1:22:38Row gitu kan

1:22:40Tapi itu bukan

1:22:42If itu

1:22:44Content and query

1:22:46Media query itu

1:22:48Bukan content and query

1:22:50Media queries

1:22:52Ya mungkin kalau content and query

1:22:54Beda lagi ini ya kan

1:22:56I don't know CQ

1:22:58Cuma ecosystem tailwind itu

1:23:00Kalau

1:23:02Orang yang udah tenanjur

1:23:04Apa fanatik tailwind banget

1:23:06Kan apapun harus di tailwindin

1:23:08Kayak gue bilang

1:23:10Bakal ada deh yang bikin plug-innya

1:23:12Ya plug-in eksternal, plug-in community

1:23:14Cuma kalau ada atau nggak dan bisa

1:23:16Atau nggak, yakin pasti ada yang

1:23:18Bikin itu

1:23:22Ya walaupun gak practical ya

1:23:24Maksudnya bukan berarti

1:23:26Harus dipake juga

1:23:28Isinya 1 MDN

1:23:30Iya, tokennya berapa itu?

1:23:32Buka ini nya Mbak Una

1:23:36Ini deh, yang if itu

1:23:38Dimana ya

1:23:40Ini nih if article

1:23:42Gue ngebookmark ini buat

1:23:44Davis kemarin

1:23:46Cuma malah nggak present soalnya

1:23:48Iya

1:23:50Karena itu yang bagus dari Mbak Una

1:23:52Ini kan teorinya

1:24:04Ada contoh-contohnya

1:24:06Di Mbak Una

1:24:08Apa?

1:24:10Paling practical itu tuh yang

1:24:12Kan ban board yang dibawah

1:24:14Oh ini dia

1:24:22Mana if nya

1:24:28Itu tadi atas

1:24:32Scroll atas

1:24:34If border color titik 2

1:24:36If statusnya pending

1:24:38Royal blue

1:24:40If statusnya complete si green

1:24:42Nah dia dapat data status dari mana

1:24:44Dari atribut HTML

1:24:46Apa markupnya

1:24:48Itu di paling atas

1:24:50Canggih kan

1:24:52Harusnya work pressure nya, Mas Riza pakai kayak ginian

1:24:54Kemarin

1:24:56Kalau sentiment analysis

1:24:58Beda fokus

1:25:00Kan skill issue

1:25:04Nggak bisa saya kayak gitu

1:25:06Berarti bisa dikembangin lagi nih kalian

1:25:16Bisa pakai if

1:25:18Berarti bisa kita cek kalau dark mode

1:25:26Oh bisa tame

1:25:28Bisa rock gitu

1:25:34Pakainya HSL

1:25:36Pro

1:25:38Pakainya HSL

1:25:40Kalau untuk colornya

1:25:42Sekarang

1:25:44Hue, Saturation, Heart

1:25:46Ya unik aja

1:25:48Kan jarang lihat

1:25:50Hue, Saturation, Lightness

1:25:52Kita kan biasanya masih pakai RGB

1:25:56RGB

1:25:58Pakai TMY kah

1:26:00TMY kah buat di print

1:26:04Ya gitu pokoknya detail banget sih artikel ini

1:26:08Waduh

1:26:10Semakin skill issue ini

1:26:30Kalau yang saya suka yang dari Mbak Una

1:26:32Ada juga 5 useful CSS function

1:26:40Nah ini bukan if doang berarti

1:26:42Macam-macam

1:26:44Iya

1:26:46Oke lanjut ya

1:26:48Lanjut dulu

1:26:50Ini gimana

1:27:02Oh

1:27:04Kalau ini ya

1:27:06Kalau

1:27:08Eh mana dia

1:27:10Hilang

1:27:12Oh ini tuh

1:27:18Kabur dia

1:27:20Iya

1:27:22Ini gak nge adjust

1:27:24Oh bukan di sini

1:27:26Itu pakai satu

1:27:28Kan ada 1 kali, 2 kali itu tadi ada zoomnya mas

1:27:30Di bawah mas

1:27:32Oh iya, nah ini bisa nih

1:27:34Eh salah

1:27:36Kapet gede nya

1:27:40Ini dia gede nya

1:27:42Ini bukan yang sudah bisa pakai itu ya

1:27:44Pakai

1:27:46Media query aja

1:27:48Bisa

1:27:50Ini lebih singkat dari media query

1:27:52Dia kan ngejelasin

1:27:54Is more concise

1:27:56Oh orientation

1:27:58Orientation itu dari orientation ini ya

1:28:02Orientation si device ya

1:28:04Kalau kita lagi

1:28:06Pake DevTools itu apa

1:28:08Comment, Shift, M

1:28:10Buat emulate

1:28:12Yang ada orientationnya

1:28:14Comment, Shift, M

1:28:16Iya

1:28:18Oke

1:28:20Itu ada yang paling kanan

1:28:22Iya

1:28:24Orientation

1:28:26Cuma ini iframe sih

1:28:28Jadi dia gak ngikut ya gitu lah

1:28:30Kalau bikin

1:28:32Kalau bikin beneran

1:28:34Ada apa aja

1:28:36Function negation

1:28:38Iya

1:28:40Ini contoh, ini kayak recipe aja

1:28:42Oke

1:28:44Ini bisa dibikin kan

1:28:46Function ini kan

1:28:48Iya custom function

1:28:50Sekarang kayak javascript aja kita bisa bikin function

1:28:52By the way

1:28:54Nanti ada custom function sih

1:28:56Di paling bawah

1:28:58Kita bahas terakhir aja ini

1:29:00Oh terakhir

1:29:02Oke

1:29:04Lanjut ya, custom function

1:29:06Di bawah ya ini

1:29:08Cuma tadi

1:29:10Apa, scroll ke atas dikit deh

1:29:12Sebelum

1:29:14Masuk ke stream

1:29:16Baru chromium ya

1:29:18Scroll atas lagi dikit

1:29:20Atas lagi

1:29:24Atas lagi

1:29:26Atas lagi dikit

1:29:28Dia ngebahas kok

1:29:40Kan sebenernya udah bisa pake media query

1:29:42Tapi kan kita harus kopas nama

1:29:44Class name-nya kan

1:29:46Gak dry lah

1:29:48Bahkan pro misalnya

1:29:50Target 3 misalnya

1:29:52Mobile, tablet

1:29:54Sama desktop kan

1:29:56Biasanya 3 itu kan ada

1:29:58Ada 3 block CSS kan

1:30:00Kalau ini bisa di satu baris

1:30:02Tunggu

1:30:04Terus media query-nya kan seringnya biasanya

1:30:06Di paling bawah tuh, nah terus kalau temen kita

1:30:08Update ini

1:30:10Nggak teliti, ngebahas class name-nya atau apa

1:30:12Nanti lupa lagi, ngebahas class name yang di bawah

1:30:14Nanti bikin lagi style baru

1:30:16Nah itu kan

1:30:18Kalau udah vibe coding, nggak bakalan lupa gitu

1:30:20Vibe coding AI-nya juga halu

1:30:24Nggak inget ya, apanya mempermudah lah

1:30:26Custom function, lanjut

1:30:32Custom function

1:30:36Negate yang tadi ya

1:30:38Iya, apalagi artinya negate

1:30:40Negative value

1:30:42Negative value

1:30:44Conditional radius

1:30:50Kondisinya pas apa nih?

1:31:02Claim

1:31:04Apply radius until you are

1:31:06Coba di atas dikit

1:31:08Wait, salah

1:31:10Di bawah, ada kan codenya

1:31:12Kecepetan

1:31:16Nah itu di

1:31:18Until you are

1:31:22Default

1:31:24But pixel

1:31:26Or specify

1:31:28Second argument from

1:31:30The edge of your

1:31:32Screen

1:31:34Maksudnya

1:31:38Oh jadi ilang ininya

1:31:44Jadi ilang rounded corner-nya

1:31:46Yes

1:31:48Ya ampun

1:31:50Dulu kayak gini-gini, style-nya harus

1:31:52Banyak manual ketik

1:31:54Ini tuh, mempermudah buat

1:31:56Orang males sih

1:32:02Ya

1:32:04Ini kayak

1:32:08Ini hari ini ilmunya kayak

1:32:10Oh bisa begitu ya terus nggak pake

1:32:12Habis itu, setahun kemudian

1:32:14Kayaknya

1:32:16Ada deh, coba-coba buka dulu

1:32:18Ngobrolin web atau CSS web yang lalu

1:32:20Baru bisa pake

1:32:22Jadi ingatnya nanti

1:32:24Ya ingatnya nanti tahun depan

1:32:28Oh tahun depan udah baseline

1:32:30Jadi bisa pake

1:32:32Iya makanya sekarang dimasukin aja dulu

1:32:34Oh bisa begitu, oh bisa begitu

1:32:36Makanya nanti tahun depan

1:32:38Ini gue tadinya, Deves pengen bawain ini

1:32:42Cuma kayak, apa ya

1:32:44Kayak kurang practical aja kalau belum baseline

1:32:46Jadi akhirnya milih function lain

1:32:48Yang udah baseline

1:32:50Tadi sih custom function

1:32:52Oh, mumpung masih ngomongin

1:32:54Function, ini nih

1:32:56Ada library, maksudnya ada

1:32:58Buat ide, buat ide bagus juga sih nih

1:33:00Buka di private chat deh

1:33:02Dari mas yang produktif

1:33:04Banget ini, mas husky

1:33:06Sinder

1:33:08Sinder source

1:33:12Dan karena namanya susah

1:33:14Nggak pernah inget namanya, cuma profitnya

1:33:16Husky, jadi dalam hati kok

1:33:18Menurutnya ini mas husky

1:33:20Ya pokoknya ini cukup ngompo

1:33:22Itu bukan husky

1:33:24Malamut

1:33:26Malamut kayaknya

1:33:28Ya putih

1:33:30Oh iya, ya itulah

1:33:34Hancing kutub

1:33:36Opacity

1:33:38Negate, lerp, ini apa nih

1:33:40Jadi inget sus nggak sih

1:33:42Fluid type

1:33:46Ya pokoknya, jadi

1:33:48Kita nggak install pun nggak apa-apa

1:33:50Tapi kalau misalnya kita butuh inspirasi

1:33:52Function itu buat apa sih, ini helpful banget

1:33:56Ini ya

1:33:58Funksinya ada di sini nggak

1:34:00Oh iya bener

1:34:02Itu kopas

1:34:04Kopas aja

1:34:06Range

1:34:08Ratio

1:34:10Ini dia bikin satu-satu ya

1:34:12Ya mungkin fivefolding

1:34:16Ya nggak tahu, cuma ya buat

1:34:18Inspirasi aja

1:34:24Yang di sini untuk

1:34:26Ya itu comparison tuh

1:34:30Berapa, sampai berapa, sampai berapa

1:34:32Oh

1:34:34Oh bisa begitu

1:34:36Ya jangan seneng dulu

1:34:38Chromium only

1:34:40Ya tapi bisa

1:34:42Chromium only

1:34:44Ini cocok buat ini ya

1:34:48Ya cocok buat

1:34:50Ini juga dong

1:34:52Yang kayak bintang-bintang tadi bisa juga dong

1:34:54Iya ya

1:34:56Kalau tadi kan gradient ya, kalau ini

1:34:58Custom, jadi misalnya kalau ratingnya

1:35:004-5

1:35:02Itu kita nggak harus menarget satu-satu

1:35:04Kita misalnya

1:35:06Border nya ijo

1:35:08Ya kayak aplikasinya

1:35:10Workpreso mas Risa itu misalnya

1:35:12Kalau ratingnya 3 abu-abu

1:35:14Kalau di bawah 3

1:35:16Itu merah misalnya

1:35:18Merah, burung

1:35:20Atau bisa juga kayak trending

1:35:22Article, bisa tahu nggak ya

1:35:24Trending artikel bisa di sidebar

1:35:26Yang top 3 nya itu bisa warnanya

1:35:28Gold, silver, bronze

1:35:30Sisanya

1:35:32Warna lain

1:35:34Bisa juga kali ya digituin ya

1:35:36Bisa

1:35:38Besarkan data attribute

1:35:40Sama ini buat

1:35:42Kalau yang antar nya besar

1:35:44Maksudnya kalau cuma top 3

1:35:461, 2, 3 gampang targetnya

1:35:48Kalau ini kan rain-nya misalnya

1:35:50Kalau hujan

1:35:52Jadi biru atau jadi atas

1:35:54Kalau chance of rain greater than

1:35:5645%

1:35:58Kalau menarget 46%,

1:36:0047, 48

1:36:02Apapun yang lebih besar dari 45%

1:36:04Warnanya biru

1:36:06Interesting

1:36:12Wow

1:36:18Once again tinggal tunggu detail win kan

1:36:20Semua akan detail win

1:36:24Next

1:36:32Stretch sizing keyword

1:36:34Make an element feel its containing block

1:36:36Regardless of box sizing

1:36:38Containing block

1:36:42Hate, stretch

1:36:48Hate, auto

1:36:50Oh, di full 100

1:37:00Benar-benar 100% ya

1:37:02Iya

1:37:04Coba kalau ini, kalau yang 100%

1:37:06Tadi

1:37:08Oh, 100%

1:37:10Kena

1:37:12VH

1:37:14Oh, ini lebih

1:37:16Terus ke bawah ya

1:37:18Iya

1:37:20Benar-benar full

1:37:24Scroll bar nya di dalam

1:37:26Oh, iya

1:37:28Cocok bikin ini

1:37:32Berarti ya, kayak SPA gitu

1:37:34Yang benar-benar hanya aplikasi yang

1:37:36Yang kita mau satu full screen kali ya

1:37:38Kayak web app

1:37:42Yang satu full screen kita nggak mau ada

1:37:44Mereka scrolling-scrolling semuanya

1:37:46Jadi screen nya benar-benar kayak aplikasi beneran

1:37:48Kayak aplikasi native

1:37:50Aplikasi native lah contohnya

1:37:52Lanjut

1:38:00Ini

1:38:02Chromium ya, masih Chromium

1:38:04Ini juga masih Chromium

1:38:06Corner shape beyond rounded edges

1:38:08This year CSS give us

1:38:10More power, more control

1:38:12Over the shape of our elements

1:38:14Ada round, bevel, notch

1:38:16Scoop, squirkel

1:38:18Squirkel

1:38:20Squirkel

1:38:22Square, circle

1:38:24Squirkel

1:38:26Scoop apa? Scoop

1:38:28Bevel

1:38:30Oke

1:38:34Notch

1:38:36Square

1:38:40Square nggak ngaruh ya

1:38:42Iya

1:38:44Ini border radius kan

1:38:46Iya

1:38:48Squirkel

1:38:50Square by circle

1:38:52Squirkel

1:38:54Coba ditambah ini nya

1:38:56Tambah radius nya

1:38:58Nah disitu aja dia

1:39:00Kalau dulu kan harus pakai sudo elemental

1:39:02Buat di kiri kanan, tapi kan cuma before after

1:39:04Harus ada 1 div 0

1:39:06Buat atas bawah

1:39:08Cape bener

1:39:10Oke

1:39:14Tuh bisa bikin kayak gitu tuh

1:39:16Hahaha

1:39:18Iya

1:39:20Oke CSS

1:39:22CSS bro

1:39:24CSS bro

1:39:26Ini apa?

1:39:30Itu pakai itu

1:39:32Marquee, Marquee

1:39:34Marquee

1:39:36Hahaha

1:39:38Marquee

1:39:40Marquee nih

1:39:42Iya, kelasnya ya

1:39:44Bukan elemennya

1:39:46Hahaha

1:39:48Loh elemen Marquee juga

1:39:50Masih jalan kok sebetulnya

1:39:52Masih

1:39:54Oh udah habis oke

1:39:56Habis

1:39:58Gak ada mas Adamnya disitu ya

1:40:00Boleh

1:40:02Gak ada lah

1:40:04Ya

1:40:06Padahal

1:40:08Layout ini semuanya masih kayak

1:40:10Ceplakan dari 2024

1:40:12Ininya

1:40:14Komponennya

1:40:16Semuanya sama

1:40:18Ya emang

1:40:20Itu kan kopas copy dari

1:40:222024 kali cuma di custom

1:40:24Lagi

1:40:26Ganti contents sama ganti

1:40:28Design

1:40:30Tapi nambah kan, ya kemarin gak ada ini 3 orang kan

1:40:32Coba

1:40:34Memang suka

1:40:36Ini web

1:40:38Sering kan dia

1:40:40Gak tahu ya

1:40:42Beliau itu

1:40:44In charge ya web.dev

1:40:46Cuma kelihatannya kan

1:40:48Beliau lebih spesialis apa

1:40:50Writing cara menyampaikannya

1:40:52Ya mungkin

1:40:54Dia kayak copy editor

1:40:56Buat biar

1:40:58Ini kan konsep-konsepnya aneh-aneh

1:41:00Banyak gimana biar ringkas tapi jelas

1:41:02Gak, jadi gimana temen-temen

1:41:06CSS editor

1:41:08CSS apa yang

1:41:10Favoritnya temen-temen

1:41:12Untuk 2025

1:41:14Voting yang mana kalian suka

1:41:16Ya usah voting itu

1:41:18Mending voting topic

1:41:20Banyak

1:41:22Voting topic

1:41:24Tapi ini baru bahas ini ada yang nanya

1:41:26Ada yang nanya gak sih

1:41:28Ada, ada

1:41:30Ini pertanyaan apa pernyataan

1:41:32Itu komentar

1:41:34Tapi itu menarik juga sih

1:41:36Kalau yang tertarik soal warna bisa tolong buka

1:41:38Linknya di private chat

1:41:40High definition CSS

1:41:42Color, ya intinya

1:41:44Color space itu

1:41:46Mempengaruhi

1:41:48Dimana warna ditampilkan

1:41:50Terutama yang di monitornya janggih

1:41:52Kalau monitornya

1:41:54Kamu mending-mending

1:41:56Ya mungkin gak kerasa

1:41:58Jujur termasuk gue sendiri juga gak ngerasa

1:42:00Bidanya sih, tapi sebetulnya

1:42:02Emang itu kayak

1:42:04Dengan color space yang beda

1:42:06Kayak RGB, HSL, hex

1:42:08Dan lain-lain

1:42:10Itu kayak bisa ngehasilin

1:42:12Warna yang beda, terutama kalau

1:42:14Gradient, jadi itu kerasa banget

1:42:16Sebetulnya

1:42:18Tapi sebenarnya kalau awam

1:42:22Kayak kita, kalau harus

1:42:24Bedain

1:42:26Yang itu banget gak terlalu kerasa sih

1:42:28Tapi ya tetap ada bedanya tuh

1:42:30Terutama kalau

1:42:34Udah masuk kokong

1:42:36Gak, gak ini ya

1:42:40CSS ya

1:42:42Skelisuh ya

1:42:44Biar gantiin dong

1:42:46Biar ini

1:42:52Kalau warna, baca-baca sendiri aja

1:42:54Kita pernah bahas

1:42:58Warna secara mendetail

1:43:00Kalah satu topik kita

1:43:02Tahun lalu kayaknya

1:43:04Iya

1:43:06Oke

1:43:10Kita

1:43:12Kita, apa namanya, spotting

1:43:14Minggu depan

1:43:16Tanggal 23

1:43:18Libur atau tetap

1:43:20Tetap live

1:43:22Kita rekaman aja

1:43:24Rekaman atau libur

1:43:26Libur aja, libur

1:43:28Kita aturlah nanti

1:43:32Kita

1:43:34Diumumkan di waktu

1:43:36Kayaknya

1:43:382-3 libur

1:43:40Kayaknya 2-3

1:43:42Lebur, mendingan libur ya

1:43:44Libur dulu lah, 2 kali lah

1:43:462-3 sama 30, ketemu lagi tahun depan

1:43:48Tahun depan bahasnya

1:43:50Itu kaleidoskop biasa

1:43:52Kaleidoskop

1:43:54Preview dan review ya

1:43:56Boleh, boleh

1:43:58Preview dan review

1:44:00Jadi satu aja gak usah dipisah

1:44:02Kayak dulu, maksahin dipisah

1:44:04Biar ada episode buat pre-recording ya

1:44:06Iya

1:44:08Sekarang jadi satu aja udah

1:44:10Yes, oke

1:44:12Untuk malam ini mungkin cukup ya

1:44:14Cukup, cukup

1:44:16Nanti mungkin tahun depan ya

1:44:18Tahun depan

1:44:20Kalau back end kayak Laravel

1:44:22Back end apa sih, boleh tau gak

1:44:24Mas Lukman Harun

1:44:26Ada ide gak, back endnya apa

1:44:28Atau isi ke

1:44:30Github discussion aja

1:44:32Discussion ya

1:44:34Kalau ada yang mau

1:44:36Apa namanya, topik

1:44:40Silakan

1:44:42Ke github.com/orgs/

1:44:44Discussion

1:44:46Nah, back endnya tuh

1:44:50Maksudnya apa

1:44:52Apakah bahasanya

1:44:54Apakah frameworknya

1:44:56Apakah database-nya

1:44:58Back end kan namanya

1:45:00Specifiknya apa

1:45:02Apa back end secara umum

1:45:04Bikin server, bikin web server

1:45:08Bikin server, bikin API

1:45:12Boleh dong banyakin back end

1:45:14Bisa back end dulu

1:45:16Ya, jadi langsung aja ke

1:45:18Github.com/orgs/

1:45:20Ngobrolin/discussions

1:45:22Oke

1:45:24Mungkin untuk malam ini sekian dulu

1:45:26Terima kasih banyak buat semuanya yang sudah

1:45:28Meramaikan, iya ada Mas Yudi, halo-halo

1:45:30Kita ketemu lagi

1:45:36Tahun depan

1:45:40Specifik database

1:45:42Oke, database ya berarti ya

1:45:44Superbase kali ya, kayak superbase

1:45:46Atau DirectBase itu kali ya

1:45:48Menarik, buat dibahas

1:45:50Back end as a service ya

1:45:52Bikin HTTP from scratch

1:45:54Wow, ini hardcore

1:45:56Http

1:46:00Bikin web server maksudnya ya

1:46:04Iya, HTTP server

1:46:08Bikin lihau pernah deh

1:46:10Lihau

1:46:12Pernah bahas ya

1:46:14Siap-siap, kita tampung dulu ya

1:46:16Topik-topiknya jangan lupa

1:46:18Ditulis aja di discussion

1:46:20Nanti kita diskusi secara

1:46:22Asingkronus

1:46:24Ya, pada pokoknya HTTP

1:46:26Oke, untuk malam ini

1:46:28Kita udahan dulu, terima kasih

1:46:30Selamat malam, selamat istirahat, bye-bye

1:46:38[musik]

1:47:08[musik]