Ngobrolin CSS Wrapped Bagian 2 - Ngobrolin WEB

3:48Entah itu bootstrap atau yang lagi terkoneksi sekarang kayak Tailwind, OpenProc, dll

3:57Jadi mungkin kita gak banyak tahu karena kita sudah tergiat sama framework

4:04Nah kalaupun kita pakai Framework atau library CSS kita tetap perlu tahu fiturnya karena ya

4:12musim misalnya kita pakai tailwind nih kalau kita enggak tahu ada fitur X ya kita enggak

4:17bakal nyari itu kan kayak nanti ada contohnya sih container ada contohnya ya kalau dulu ya

4:26kemat minggu lalu yang kita kebingungan bersama yaitu CSS layer hahaha oke sekarang ke depannya

4:36pun kalau itu di incorporate sama apalah library atau preprocessor atau framework CSS kan kita tetap mesti tahu cara kerjanya biar bisa pakai apa ntar kita bingung juga Pak kita sekarang kita kemarin bingung nih pas lihat yang vanilla

4:52nanti misalnya diadopsi sama Tailwind ya kita bingung juga

4:56jadi ya sebaiknya bingungnya diselesaikan dulu sekarang dengan yang vanilla

5:02hal yang bagus juga kalau kita nggak terlalu bergantung kepada framework

5:06kalau kan kita butuh animation sederhana, kayak head in, head out

5:14karena CSS pun sudah bisa animasi, tidak perlu harus

5:19Greenstock, library.js, atau Tailwind sudah menyediakan, Openproc sudah menyediakan

5:26kalau kita tahu vanilanya, kita bisa

5:28Hai kalau hanya berdua suara volume Mas Riza sama Eka naik turun ya sih atau saya dong putus-putus

5:38siapa yang putus-putus kayak Mas Riza naik turun pas lagi pas lagi ngomong naik turun

5:45masih sekarang ada kadang kuat kadang-kadang mengecil gitu takutnya penonton iya bener

5:55ada teteh jaringan deh atau itu enggak apa namanya kayak mungkin adaptif gitu adaptif

6:03rezeki enggak rezeki turunin dulu coba coba saya ganti audios mic mic background noise

6:14nya diancek coba mungkin dari si ya mungkin settingannya si ini stream ya

6:25kecil jadinya suaranya Halo Halo sekarang gimana Nah bagus kecil tapi tapi tidak naik turun lancar

6:38ya naikin aja nah berarti kayak itu Echo cancel lesenya sislim itu kayak dia berusaha

6:46Hai reduce noise nya kali ya kayak putus-putus sekarang gimana nah lebih lancar bagus cuman

6:54tinggal dinaikin aja volumenya volumenya naikin volume volume volume volume audio 110% sudah

7:04114% kurang kok nggak harus sih 130 nggak ngeru deh kayak ada settingan mixer atau apa mungkin

7:15segini segini nah sudah ya lebih enak masih kurang atau cukup ya cukup ya oke jadi banyak fitur-fitur

7:30yang mungkin kita enggak tahu dan bahkan CSS pun sekarang sudah apakah sudah bisa dikategorikan

7:36sebagai bahasa pemulgaman nah itu debat sepanjang masa sudah ada trigonometri sudah ada kondisional

7:44media query dan query-query lainnya yang bakal kita lihat itu kan conditional.

7:49Sudah ada.

7:50Variable media query.

7:52Iya, kan if screen size bla bla bla. Nah terus variable udah ada.

7:58Nesting juga sudah bisa.

8:00Betul.

8:02Nah, oleh karena itu mari kita bingung bersama.

8:07Bingung sendiri itu gak enak. Jadi bingung bareng-bareng. Kita ngajak-ngajak kalian bingung.

8:11Oke nah kemarin kita udah bahas tiga kotak pertama ya dari architectural foundation tipografi sama warna

8:23warnanya pun di speedrun karena kita udah pernah sebetulnya sebagian kita udah pernah bahas di

8:30episode entah episode berapa tapi pernah ada yang ngomongin warna tuh awal-awalnya yang inget banget tuh

8:38cerita sedih campur kocet tadinya kocet tanya sedih tapi ada ininya ada selanjutnya yang

8:48kita khusus membahas warna yang komplit ada yaitu yang ada yang kita oke HCL HSL

8:57Oke RKPI

8:59Oke RKPI

9:03Itu kerjaan kantor maaf ya

9:07Salah

9:08Jadi kita terakhir sampai disini

9:12Di bagian color

9:14Nah malam ini kita akan masuk ke responsive design

9:17Responsive design

9:18Yang paling seru

9:19Kalau responsive design ini kayaknya

9:22Sempat di cover juga di

9:24Devres kemarin ya sama Pak Dika Jadi yang masuk kategori responsif design yang pertama adalah size container query

9:36ini juga

9:38salah satu topik bersejarah karena

9:40ini yang mempersatukan kita

9:42iya

9:44yang pertama bikin kita ngobrolin web

9:47literally bertiga

9:49kita ngobrol makan

9:50terus ketemu, eh apa yang baru nih

9:53container query

9:54Karena waktu itu kita ketemu dan konten query itu baru satu hari

10:02Jadi H plus one

10:04Kita langsung bahas konten query bersama

10:08Dan ternyata langsung nyambung

10:10Dari sebelumnya kita kan jarang ketemu juga ya

10:12Jarang ketemu yang bertiga

10:14Kalaupun ketemu ya kayak basa-basi lah

10:16Say hi ya

10:17Emang pernah ketemu bertiga langsung?

10:20Oh iya

10:21Di acaranya web uncounted

10:24bukan Oh iya iya betul iya basa-basi doang nah cuma ternyata ngobrolin web ini kontainer query

10:31dan ternyata semua browser semua browser major udah support ya sudah sudah sudah ajaibkan alam

10:39media query sebelumnya kan kita baru punya media query hanya berdasarkan size ya sekarang berdasarkan

10:50kontainernya kontainer atau elemen yang berada enggak harus imediate parent pokoknya tapi ya

10:57harus eh harus enggak sih kayaknya enggak harus enggak enggak harus imediate parent tapi sesuai

11:02dengan operennya ini ya berarti ya kata kuncinya ya kenapa tuh ada udah ada media query tapi kenapa

11:10harus ada, perlu ada lagi container query.

11:17Karena, ya balik lagi, karena layout sekarang kan makin kompleks ya,

11:23makin kompleks dan belum tentu ukuran screen size kalau kita misalnya mikirin blok ya, blok-blok-blok.

11:31Dan ada satu blok misalnya sidebar. Sidebar itu hanya bisa mungkin elemen yang di dalam sidebar itu

11:37itu ukuran elemennya kan tergantung sama parentnya yaitu sidebar nya kan

11:44tapi kalau misalnya screen nya naik turun kan misalnya saat screen nya mengecil tentu sidebar nya turun

11:50dan mungkin bentuk ukuran sidebar nya membesar sedangkan ukuran viewport nya mengecil

11:56nah kalau kita menggunakan country query kita gak perlu repot lagi gitu

12:01lagi gitu jadi hanya tidak peduli viewportnya berapa kita hanya peduli dengan kontainer perannya

12:08berapa jadi lebih mempermudah hidup si frontend lebih fleksibel enggak banyak apa properti-properti

12:18atau kan jadikan sebetulnya prinsip responsif itu kan mungkin kalau sekilas orang suka salah paham

12:24ya responsif cuma apa dikira ukuran viewport aja tapi kan responsif itu banyak termasuk

12:30ya misalnya di luar ini ada light mode dark mode ada orientation ngadep mana nah termasuk bukan

12:38viewport tapi containernya jadi ya kayak contoh sidebar tadi bisa aja apa dibukanya di iMac atau

12:44apalah yang besar banget tapi suatu komponen itu munculnya di sidebar nah kan nggak lucu kalau

12:51ditampilinnya besar banget karena yang perlu menyesuaikan ke parentnya yaitu si sidebar yang

12:57itu jadi sebetulnya sih kelanjutan dari prinsip responsif ini berguna banget buat kalau kayak

13:04wujud deh ini contohnya di video ini kalau pakai media query setengah mati binginnya banyak banget

13:10ini conditionalnya to be honest kalau enggak pakai container query maksudnya kalau enggak pakai

13:15container query kalau pakai kan biasanya biasa biar kalian pakai javascript bisa aja kita apa

13:22calculate kan harus query selector dokumen query selector ambil widthnya baru di kalkulasi di assign

13:31kelas mana yang mau dipakai pakai ini namanya apa namanya ada oh ada helper toolnya ya

13:38apa?

13:40apa?

13:42apa?

13:44apa?

13:46apa?

13:48container ini kalau untuk

13:50container ini kalau untuk

13:52container ini kalau untuk

13:54observer

13:56observer

13:58ini nya api nya

14:00ini nya api nya

14:02ini harus

14:04kayak ngecek

14:06kalau misalnya orientation berubah kan pakai resource observer kalau react tuh ada hooknya malah sampai kok gua jadi resolver resolver ya ada reanya ada pernya Iya

14:27Hai nah kalau pakai konten ini tinggal buah pakai container seperti itu dan semua browser

14:32sudah support sudah masuk baseline sini belum ini container ya nggak tahu dua versi terakhir

14:40atau belum yang ini ya berarti ya Iya coba zoom in zoom in yang di zoom in ininya bukan

14:49klik dulu berarti di atas selek dulu ini ya coba zoom

14:58Oh nggak bisa. Artikelnya. Yang besar artikelnya.

15:07Code pen-nya nggak ngaruh ya? Code pen-nya kita klik aja.

15:11Coba. Ini di-zoom.

15:15Ini di-close. Bisa nggak?

15:19Itu JS-nya dikecilin. JavaScript-nya aja di-resize ke kanan.

15:24ini ya Iya itu kalau kontainernya lebih besar atau sama dengan 400

15:34baca dari atas dulu defaultnya bener-bener yang tadi-tadi yang tadi

15:41defaultnya which is mobile ya mobile-nya begitu

15:50begitu mulai naik dari 400 which is kenaknya ke tablet ya kena itu terus di atas 600 kenaknya yang

16:03bawah lagi Oke berarti mirip-mirip konten rekueri juga cuman ini mediaferi meriah soe mirip-mirip

16:11tapi kalau media query berdasarkan ukuran layar atau ukuran browser viewport kalau ini berdasarkan parent

16:22ada kan biasanya kalau dari SAS itu kan MQ ini kan sorry yang dia apa namanya package nya untuk mixin nya namanya MQ

16:38media towing, sampai aval mixing custom ya, mixingnya iya MQ itu ada ada package nya jadi sudah di define

16:48itu biasanya dari dokumentasi awal sudah define oke target kita untuk biasanya XS, Xsm, Xsm ya sudah

17:02target ke medium, terus kemudian tablet segala macam sudah

17:05ada break point

17:08nah sudah ada break point ya, jadi

17:11itu targetnya media query sedangkan

17:14kalau sudah pakai container query sudah berkurang

17:17penggunaan media query karena

17:20kita bisa langsung targetkan containernya

17:23nah gimana kalau nggak support

17:26browser yang nggak support itu

17:29Untungnya, maksudnya semua teknologi web platform itu dibikin non-breaking.

17:34Jadi ya kalau browsernya nggak support, ya apa? Style yang di-apply ya yang di atas itu, yang grid-template auto-auto-auto.

17:43Iya.

17:43Iya. Gitu doang. Maksudnya nggak akan rusak. Cuma ya tampilannya ala kadernya lah.

17:49Nggak. Nggak error kecuali hash.

17:51Hmm.

17:53Waktu itu hash itu..

17:54Hah? Hash bikin error?

17:55Hash bikin error di Firefox.

17:58ya nanti kita bahas sebelumnya sebelumnya sekarang sudah stabil sebelumnya Iya oh itu

18:07berarti ya bukan expected udah ada telwin pluginnya juga loh ini coba buka dari link

18:16jadi ini makanya tadi tadi bahas apa bahas CSS library jadi kita tetap perlu tahu yang baru-baru

18:24begini biar kalau toh kita pakai library atau framework dan ada pelaginnya kalau kita enggak

18:31tahu tadi tentang container query dan enggak tahu cara pakainya kita enggak bakal pakai ini juga kan

18:35ini apa ini berarti telwin layer ada enggak sih? ini pelagin ya belum oke ini pelagin ya terpati

18:42pelaginnya enggak enggak no no ini dari telwin labs iya maksudnya pelagin tambahan bukan terpati

18:50plugin tambahan kita kalau misalkan kita install pertama kali kan dia nggak ada kan

18:55biasanya kalau udah baseline jadi kalau udah itu udah di support

19:01Sekitar dua versi terakhir bakal di merge

19:04Jadi ceritanya begini caranya

19:08Biasanya project open source, saya nggak tahu soal Tailwind tetapi

19:12Project open source seperti di Wordpress contohnya

19:15Kalau misalnya ada suatu fitur dan itu bakal feature

19:20Fitur yang akan masuk ke core

19:24Sebelum masuk ke core dibikin plugin dulu

19:27sama saya lihat caranya Tailwind ini sebelum dia stabil dia dibuat sebagai plugin dulu yang bisa orang bebas opt-in atau opt-out

19:39nah suatu saat pekembangan rilis selanjutnya dia bakal merge ke core nya

19:44ya nanti ya kedepannya gak perlu install lagi

19:48jadi sebenarnya awalnya semuanya yang labs labs labs ini yang untuk experimental dibuat sebagai plugin terlebih dahulu

19:56Nah, kalau contoh kasus yang kayak gitu, itu dulu aspek rasio, kan di CSS ada aspek rasio ya,

20:04dulu banget itu di Tailwind berupa plugin, ya plugin official.

20:09Nah, setelah stable beberapa saat, sekarang aspek rasionya udah masuk Tailwind yang core.

20:18Jadi, emang caranya Tailwind emang betul begitu.

20:21saya juga baru tahu ternyata selama ini enggak pakai sampai ke plugin mungkin ya pemakaiannya

20:29basic ya jadi enggak tapi tetap aja di npm package tetap aja npm package jadi

20:35ya paling mungkin pakai pakai telwin yang lain enggak enggak enggak enggak gitu enggak enggak

20:43bener-bener ya misalkan pakai biasanya langsung loncat ke itu ke UI library ya

20:48CSS PSI ya

20:49desi UI atau pakai apa flowbytes gitu-gitu tapi nggak tahu di dalamnya dia pakai plugin

20:57Tailwind sendiri atau enggak gitu

21:03nah tuh Scroll ke bawah ada contohnya

21:05ini ya

21:07Jadi sebetulnya ya itu, di awal kita juga udah bilang nggak wajib,

21:12maksudnya jangan sampai bergantung ke beginian.

21:14Tapi misalnya kita prakteknya, ya tim kita semua udah pakai Tailwind,

21:19terus kita pengen cepat lah tinggal nulis class name, ya bisa dipakai juga.

21:24Yang penting kan kita tahu cara kerjanya, nggak tiba-tiba bingung apaan nih ada add container,

21:30dalamnya ada add large.2, underline.

21:35yang atlas ini akan mengikuti ukuran si kontainer ini seberapa besar atau seberapa kecil bukan jika

21:43kontainernya large maka di isi yang di vincel itu akan dikasih garis bawah tuh kan ada keterangannya

21:52tuh when the container is larger dan blablabla nah large smallnya breakpointnya itu pakai breakpoint

21:58tailwind kebawahan tailwind atau yang bisa kita custom juga bisa di custom

22:03ada tulisnya tuh by default we provide container sizes dari XL sampai 7 XL

22:12nah terus bawahnya tuh kan tadi kita bahas harus immediate parent atau enggak harus

22:21maksudnya harus apa ini elemen harus yang mau di style harus langsung di dalamnya atau enggak

22:27Nah kalau tadi kan by default kita nggak perlu kasih nama karena apa langsung parent dan childnya

22:32itu langsung tapi kalau misalnya mau ada lengkap satu misalnya lengkap lebih dari satu gitu nggak

22:38immediate parent child harus dikasih nama Nah itu bisa kita kasih nama seperti itu sintaksnya

22:45bisa arbitrary container size lama-lama saya jadi pengikut aliran telwin ini

22:56sekarang belum sekarang tergantung project saya enggak punya enggak punya preferensi

23:04ya kan yang penting ngerti cara kerjanya justifikasi gitu bener kan misalnya suatu

23:14tiba-tiba gak boleh pakai tailwind yaudah gak masalah

23:16lebih tepatnya

23:20karena di posisi saya sekarang

23:22kalau misalnya ada yang

23:24berat-berat soal

23:25soal penentuan

23:28atau

23:29asetator untuk frontendnya

23:31saya panggil orang yang

23:32panggil orang yang ini

23:34panggil orang yang lebih jago

23:37specializing itu

23:38set up dong

23:39saya butuh orang itu di resourcing seminggu untuk beresin ini tinggal gituin iya kalau posisi resourcing itu sih enak ya tinggal delegasi ya

23:54lah ketimbang saya ngerjain bisa sebulan kali

23:59nggak kelar

24:01itu fungsinya teamwork

24:04tapi harus mengerti karena minimal kan setelah dia selesai atau siapapun project tetap di-maintain

24:15ke masa cuma update sedikit harus ganti orang kan enggak ya jadi tetap harus mengerti agen kalau

24:23kita nggak ngerti agawat juga walaupun mau pakai telwin mau pakai Vanilla atau apa misalnya contoh

24:28tadi kalau childnya di misalnya harus disuruh dipindahin nah dipindahin tapi parentnya nggak

24:34dipindahin yang yang ada apa class name container querynya ya udah berantakan semua kan

24:40Yes betul lanjut lanjut style container query oh masih container query juga ya

24:49cuma ini lebih kompleks dan beneran suka-suka chromium gitu apa vendor lain belum ngasih belum

24:59ngasih oke sama sekali ya nggak tahu kalau suatu hari mereka tiba-tiba depenting pencerahan ini

25:09tambah mirip bahasa pemrograman jadi yang di dalam itu style apa funk metode-nya style kan

25:15itu kondisi berdasarkan CSS custom property atau yang kita sering taunya CSS variable ya CSS variable

25:24atau CSS custom property gimana cara kerjanya jadi gini tuh contohnya tuh add container style

25:34dalam kurung apa dash dash train titik dua true nah style yang di dalam apa container itu bakal

25:41apply kalau target elemennya itu punya custom property rain yang value-nya true

25:48ya ntar juga ada contohnya

25:52kalau tldr nya itu tadi mendeteksi keberadaan custom property di elemen yang ditargetkan

26:04Ini yang ke efek yang ini ya? Rain ya?

26:09Jadi, lihat HTML-nya deh yang di kiri.

26:14Nah, LE.

26:16List item yang pertama.

26:17Kelas card container.

26:19Style sama dengan atas-atas.

26:22Up, up, up.

26:23Oh ini.

26:25Kan ada stylenya rain.2 true ya kan?

26:30Selektor kelasnya card container.

26:31keempat-empatnya itu juga

26:33card container semua

26:34tapi yang style ada custom property

26:37rain

26:38nah rain false

26:40jadi gak di apply kan

26:42coba deh gak true false

26:44tapi

26:47oh gak bisa ya

26:49harus exact

26:50rain go away

26:53come again another day

26:55ya

26:56yang punya anak pasti tau

27:00yang punya anak pasti tahu

27:02semakin kompleks

27:12ya kayak

27:14pemrograman

27:15oh ini jadi

27:18satu blok sendiri

27:19di dalamnya ada

27:21iya kan bener kan satu blok sendiri

27:23iya query kan container query

27:26tapi kan kita tetap harus

27:28mentargetkan suatu selektor

27:30tertentu kan nah disini selektornya weather card kalau tanpa style bisa nggak kalau tanpa ini

27:37bagaimana cara membuat ya dikasih ID atau apa misalnya tuh yang dikasih kelas ya dikasih kelas

27:45ya atau card-rain nah cuma itu mah sama aja iya jadi ada kondisi apa kita nambahin pakai

27:58JavaScript gitu kali kalau misalkan datanya Rin pakai-pakai kelas kan bisa juga sebenarnya cuman

28:05Oh iya kenapa butuh container style gitu ya Kak jadi sebenarnya lebih mempersimpel aja ya

28:13Oh iya sama mungkin ini malah ribet gak apa mempersimpel HTML nya tapi kompleksitasnya

28:24CSS atau gimana?

28:26lebih tepatnya begitu jadi mempersimpel kalau anggap aja ini si container style ini sudah satu mixin sendiri satu blok yang unit

28:38dan untuk mentargetkannya itu hanya kayak ngasih style apa gitu, misalnya ini kan contohnya rain dan ini custom property kan sebenarnya

28:50jadi apapun custom property nya bisa

28:53anggap aja custom property dark

28:56atau custom property light

28:59dan mungkin accessibility juga

29:02custom property untuk accessibility juga bisa di target kan

29:05atau mungkin kita udah pakai

29:08custom property nya untuk hal lain

29:11mungkin misalnya data visualization apalah kan banyak tuh misalnya

29:14bar chart atau apa value-value nya

29:17ya sekarang kan udah mulai banyak yang pakai apa custom property nah itu kan kayak mumpung itu

29:24udah ada nah bisa lebih jauh lagi di adjust stylingnya pakai CSS dengan mentargetkan sih

29:32custom property itu tapi ya jangan seneng dulu karena browser selain from yum masih belum ini

29:40ini masih ini ya masih belum tapi masih ada kans ke depannya yang mungkin bisa enggak tahu 2024 2025

29:492026 ini ini status baseline nya masih orange ya kuning belum hijau eh tadi kalau yang siapa

30:01container query size itunya apa?

30:05Ijo, eh biru.

30:06Biru.

30:07Wah, udah centang itu maksudnya berarti udah support dua versi terakhir apa ya?

30:12Udah stabil lah ya, udah bisa siapin.

30:15Sudah baseline, sudah baseline.

30:17Oh, udah hampir satu tahun umurnya.

30:19Itu tuh ada di paragraf pertama container queries menjadi stabil di seluruh browser.

30:25Di Valentine Day this year itu kan 2023.

30:28Berarti 2024 besok nih.

30:31setahun

30:32gila ya, udah setahun

30:34cuma masih banyak yang belum tahu

30:36betul

30:37ini baru style

30:40dengan

30:41custom property

30:43kalau kita mau main kondisi

30:46bisa kayak gini juga

30:47benar, jadi bahasa pemograman ya

30:50in future versions

30:52belum, sekarang belum

30:54oh belum, nantinya ya, ke depannya

30:56nah cuma itu makanya kelihatannya

30:59bakal ke arah data visualization

31:01gitu sih, kan yang ada

31:03angka biasanya, yang ada value-value

31:05angka, chart-chartan

31:07atau apalah dashboard-dashboard

31:09widget-widget gitu paling

31:10kalau angkanya tinggi

31:15jadi hijau atau apalah jadi merah

31:17oh iya, iya-iya

31:19makes sense

31:20lanjut, HES

31:23nah ini yang salah satu yang

31:24banyak diomongin ya

31:26udah support juga

31:29udah biru berarti udah aman

31:31itu apa

31:35problem yang mau disolving

31:36dulu saya

31:39apa namanya

31:41pernah

31:42biasa ya pengetahuan

31:44seorang yang non ahli CSS

31:47gimana sih

31:48saya mau nge style parent

31:50tetapi berdasarkan value yang ada di childnya

31:53itu gimana

31:53susah gitu saya mau ngerubah child elementnya karena di child elementnya itu

32:02apa namanya ada value anggap ya border ya border itu bordernya itu nempel di parent

32:11di container parent tetapi di bordernya itu merah kalau sebenarnya nilai saya di dalam itu

32:20dalamnya error atau invalid?

32:22error atau ya

32:24itu gimana caranya?

32:26akhirnya ya harus pakai service site rendering yang dikasih kalau value nya rendah

32:31saya tambahkan

32:32di templating nya ya

32:34iya error class

32:36kalau sekarang gak perlu, jadi kalau misalnya

32:39di dalam element itu ada error message

32:46otomatis parentnya menjadi warna backgroundnya warna merah contohnya itu bisa jadi kalau cardnya

32:54punya error message jadi merah kalau di sini contohnya kalau cardnya punya image jadi purple

32:59nah jadi ini selektor yang ibaratnya ngelawan kodrat lah ngelawan kodrat CSS kan jadi kan CSS

33:08itu kan diproses sama layout engine pakai CSS object model ya semua kan dibaca dari atas ke makanya alasannya dari kalau CSS lama sebelum HES parent bisa nge childnya terus sibling apa yang apa elemen yang setara sibling kayak kakak

33:25gitu yang muncul pertama bisa nge-style selektor elemen setelahnya bisa nge-styling adeknya tapi

33:33dibalik nggak bisa anak nggak bisa nge-style orang tua terus apa sibling elements adek nggak bisa

33:39style kakaknya atau yang berada di atasnya dulu sebelum hess nah hess ini ya memungkinkan itu tadi kebalik

33:48titik dua hess ini apa istilahnya ya kalau pseudo elementnya pakai n

33:54sudut

33:58kayaknya struktur doang deh ada istilahnya nggak sih kalau sudut bisa yang dua kan

34:03dan kalau seperti sama kayak n-child juga kan n-child sama kan caranya Oh ya nth-child ya ya ya

34:12wah kita kena ini bacanya gimana kita kena spam

34:20Spam.

34:21Ntar, Basmi spam dulu.

34:25Hah? Spam?

34:26How are you? Fine, fine, thank you.

34:31Biasanya jualan crypto nih itu beda-beda.

34:33Udah ada yang spam.

34:34Iya, naik level kita sudah ada yang spam.

34:38Sunward, sunward.

34:40Sunward, sunward, oleh.

34:41Sunwardnya dimatiin gara-gara tadi trouble mic kayaknya ada pengaruh di situ.

34:45kalau dibantu ilang ya kayaknya baru pernah ya kita biarin aja ya biarin bangga

35:01di ban lah pengen lihat 70 episode baru pernah kena spam bot sekarang

35:0971 malah

35:11yeay

35:15pencapaian ya

35:17oke nah ini bacanya gimana nih

35:20ini card kan

35:22terus kalo card punya card media

35:25yang atas kan gak ada

35:27kalo di dalamnya card ada card media

35:29yang atas kan enggak ada ya maka dia akan menjadi colornya 6300 ff ini yang ada ungu ya Coba bikin

35:39aja deh berkepar polo gitu sama Jowu beres-beres apa sih jadi warna hijau Oh oh iya jadi dia akan

35:54cari card media ya card media ini Oh ya coba aja card media itu jadi card medias gitu tambah es nah

36:06Hai jadi jadi enggak warna sama enggak kena ya Oh oke dia carinya berarti berdasarkan Oh bisa apa

36:15bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa bisa

36:34pakai itu juga misalnya mau bikin kayak selektor yang contohnya dotmedia tapi langsung panah apa

36:43gitu bisa spesifik juga kok. Ya bisa spesifik. Intinya CSS selector. Dalam itu sebuah selector aja.

36:53Luar dalam. Luar dalam selector semua. Dan bisa dibuat has not juga. Dibuat kebalikannya has not.

37:05not oh kembali kalau tidak punya atau kalau tidak berisi bla bla bla kasih style ini ya bisa dikombin

37:15Hai ini ada pertanyaan dari yang namanya sama sama saya Riza bedanya selektor telwin sama yang

37:22dibahas sekarang apa enggak ada bedanya telunkan CS juga telwin itu kan cuma class name jadi apa

37:29selektor Tailwind ya berupa class name

37:30misalnya apalah my-4

37:33Tailwind itu

37:35menganut pendekatan

37:36utility

37:38utility CSS

37:40utility class

37:42jadi satu

37:44property CSS

37:45koresponnya ke satu

37:48Tailwind class name, contoh tadi

37:50misalnya m, margin

37:52gitu, m

37:53CSS property-nya margin

37:56terus dibuat abstraksinya

37:58dalam library Tailwind berupa

38:00class name

38:02M-4 itu CSS biasanya margin.2.1rem.

38:07Jadi ya itu kayak abstraksi aja sih.

38:11Isinya ya sama CSS biasa juga.

38:14Iya, ujung-ujungnya ke CSS juga.

38:19Tapi istilah selektor di Tailwind juga sama sama istilah selektor di CSS kan ya?

38:24Nggak ada beda.

38:25Sama, kan itu class name aja kan, class name M4 dan lain-lain.

38:32ini contoh-contohnya niat banget ya bikinnya ya Iya makanya bagus seneng lihatnya kalau kita kayaknya

38:40bikin satu halaman ini kayak kerja tim berapa hari ini

38:49sebulan sendiri untuk bikin satu halaman ini kayaknya ya terus lebih ke apa dapet

39:00ada ilustrasi-ilustrasi nya terus mikir apa ya kayak estetika warna gua pun yang front-end yang

39:08sefront-end front-end nya tetap aja bikin contoh merah hijau warnanya tabrak lari yang kan yang

39:13tinggi jelas mau saya yang ditunjukin apa biasanya malah makin jelek makin makin seneng karena makin

39:19jelas kan nunjukin Oh kalau kayak gini kalau kayaknya begini jadi munculnya begini orang

39:24itu ada komen dari Mas Abdul Malik tuh kayak ngecek can I use sudah disupport banyak

39:34ini apalagi le hover hover ini udah lama ya?

39:44selektor ah cover cover mah dari dulu Oh iya plusnya atau ini artinya li11 li punya punya

39:55adik sedentit bukan punya saudara saudara punya iya sibling setelahnya kan tambah itu buat sibling

40:04yang dibawahnya bawa sibling setelahnya lagi dihover Oh nah makanya itu itu kayak dok coba

40:11cover dan coba over salah satu ini kan yang samping-sampingnya ikut di-style kan Oh ya

40:20agak besar nah selama ini kita kan gampang ngestel yang kanannya yang kanannya yaitu

40:26tinggal selektor apa tanda tambah aja nah nge-style yang kirinya gimana dulu nggak bisa

40:31kalau nggak pakai apa JavaScript sekarang bisa fish eye

40:37oh itu namanya efek fish eye ya, good, mikirnya efek apa? doc, macOS doc

40:50oke next update media query, nah kalau ini baru tahu, baru lihat sekarang ini

40:55the update may give you a way to adapt UI to refresh rate of device

41:02ini gue gak tau apa lagi ini

41:06gue pernah lihat dan tiba-tiba out of nowhere semua browser udah support

41:11semua udah dukung

41:12apa sih ini

41:14gak pernah ada yang ngomongin ini juga sih

41:17ya itu refresh rate

41:19Jadi bisa smooth banget kalau handphone kita sudah atau device kita sudah mendukung refresh rate yang tinggi

41:30bisa mungkin slow atau none bahkan kalau device kita low end

41:39Gak bisa animasi, iya

41:41Contohnya misalnya kita buka pakai e-reader, pakai Kindle

41:45Kindle itu kan yang pixel-pixel gitu kan

41:47ya ya

41:51ini fast

41:53kalau slow gimana?

41:55lebih rapet-rapet ya, kalau non gak bisa ya

41:57kalau non gak bisa

41:59oh kalau slow, ya udah

42:02frame nya lebih sedikit, jadi frame nya yaudah cuma

42:05lihat kiri atau kanan, nah kalau fast kan bisa dibikin

42:08gmana caranya?

42:09gimana caranya?

42:12kok bisa sih? ya kalau standar kan 60 fps kan

42:15render render render render

42:17ya standar beliau pakai Oh babanya sih nggak usah perlu dia karena kayaknya cuma buat ngatur-ngatur

42:28ininya ngatur HTML perlu weh ini keren lnya SVG dong weh itu pakai transition konten kueris

42:41plus view transition kita jadi lihat animasi dimana layer demo support nih layarnya apa ya Nah yang kemarin itu kan ya kita nggak jawab juga sih cuma kita bahas belum tahu sampai saat ini masih bingung

42:58demo support mana dia media ini ya Oh bukan bukan mana atas kayaknya deh atas-atas nah eh

43:11buka Oh itu juga salah scriptnya jangan enggak ada media query-nya

43:16ini Oh itu speed-nya dari mana tuh coba ke atas deh variable value speed

43:26speed sama dengan fast pilihan di sini Oh iya kalau kita pilih nah terus si SS nya mana

43:34coba diintip

43:41namasih misteri ya dibuka dokumentasinya coba ke bawah

43:50learn more about media update

43:57zoom in

44:01nah itu ada media query nya

44:03add media

44:05kok di demo tadi gak ada ya?

44:07ini kan

44:08ada tadi kayaknya di demo

44:10ada ya?

44:10ada ada

44:11tadi media kita skip kirain media query

44:13oh gitu

44:15ya media query

44:16cuma update media

44:18media query untuk update

44:19bukan untuk size..

44:21tunggu tunggu

44:23bukan, mana lagi?

44:25iya ya

44:27mana?

44:29gimana sih ini demo nya masih misteri

44:31satu doang

44:33atau ada lagi?

44:35kalau di JS

44:37memang ada media

44:39siapa tau ada set media

44:41media

44:43gak ada

44:45gak ada?

44:47Hai wah penipuan penipuan ya bo nya bentuknya kayak gitu Oh apa jangan-jangan yang ini enggak

44:58pakai sebelumnya begitu gitu enggak ya tadi loh enggak ada ini update media query update demo

45:11coba slow deh pencet slow CSS nya ada yang ditambahin enggak

45:23nggak berubah ya nggak bisa di oh iya code pen nggak bisa ya

45:41nah ini masih misteri misteri lagi nih gara-gara ini layer nih dia pakai layer jadi misteri

45:50di mana ya ini media update-nya juga misteri udah kita tabung aja ntar kita bikin edisi remedial

45:57mystery CSS mystery membedah demo Iya ya di contohnya beda soalnya langsung media update

46:10fast media update slow tapi nggak working juga kalau misalnya demonya juga nggak working kalau

46:18misalnya mungkin karena saya pakai demo yang lain nih yang dari dokumentasinya layer demo

46:24terus itu ada kalau itu ada media update fast kalau yang tadi yang

46:30kalau slow ya

46:34lebih slow

46:40nggak berubah

46:42kalau slow

46:47Slow

46:48Gak bisa

46:51Slow gak bisa

46:53Fast

46:54Tadi bisa

46:56Nah ini

46:58Fast

46:59Slow tadi gak bisa ya

47:01Slow

47:02Tuh gak bisa slow

47:05Apa aja nya

47:07Ada contoh lagi di bawah

47:08Oh gak ada

47:08Media update slow

47:10Oh udah ada slow disini

47:12Disini fast aja

47:14slow ada di sini canvas textnya 11px ini berarti masuk yang fast iya soalnya ini kan bukanya di browser Iya Iya besok coba tes buka di Kindle Oh harus pakai itu Oh mungkin gara itu dia bikinnya ini yang simulasi aja

47:42Jadi sebenarnya nggak dipakai. Oh gitu cuma tampilannya kayak gitu.

47:48Oh iya ya. Tampilannya seperti itu mungkin ya. Contoh doang. Ya mungkin.

47:53ya mungkin

47:55misteri selesai

47:59oke lanjut

48:00nah ini yang lebih berguna

48:03eh tapi supportnya udah full ya ternyata ya

48:07iya full, ya itu tadi magically kita gak pernah denger

48:10kayak jarang ada orang yang bahas

48:12tiba-tiba semua browser udah support aja

48:15nah ini juga tiba-tiba semua browser udah support aja

48:18sudah

48:21ini seneng banget ya

48:22Safari versinya rendah sekali ya, yang lain sudah 100-an dia masih 17.

48:28Karena Safari kan setahun sekali, bareng sama update OS X.

48:37Ini apa sih?

48:38Nested CSS itu salah satu juga yang diupdate di tahun ini ya.

48:43Tahun lalu?

48:44Oh iya, tahun lalu, 2023. Masih berasa 2023.

48:49enaknya bisa di collapse expand nya kalau di code editor

48:56jadi bisa lebih fokus ya

49:00Descripting media query can be used to check whether or not javascript is available

49:06This is very nice for progressive enhancement

49:10before this media query, the strategy is if for detecting javascript

49:15ya kan no js begitu loading JavaScript nya di remove apa classlist.body.classlist.remove no js

49:26ini cuma ngedetect itu ya lumayan ya jadi mudah pakai CSS bisa ngedetect itu iya lebih rapi aja

49:34ininya ya itu setidaknya dalam kurung scripting.2 non enak ya ini beneran kayak if kan kayak if apa

49:45dalam kurung blablabla ya kita tulis aja kondisinya conditionnya di dalam ini kalau

49:52kalau JavaScript nya di disable dia akan opacity nya nol yang ini kan nggak ada uapnya ya kalau

49:59misalkan

50:00enable, maka

50:03ini muncul uapnya.

50:07Layer lagi.

50:09Penasaran sama layer, kalau dihapus

50:11gimana?

50:13Nggak ngaruh. Oh, ngaruh.

50:14Iya, nggak bisa. Ngaruh lah.

50:18Kirain nggak ngaruh.

50:20Oke.

50:23Lanjut. Kita ke...

50:25Jadi ini sebenarnya hal yang simple.

50:26Hal yang simple, tapi kayak

50:28apa ya, ngurangin

50:30ketergantungan javascript sama lebih rapih

50:32penggunaannya gimana

50:34apa ya rata-rata kita pakai

50:36no js itu ya, kalau misalnya

50:38no js nya

50:40masih ada, kita

50:42kasih message gitu ya

50:44rata-rata sih begitu ya

50:46please enable javascript, atau

50:48itu loh, misalnya tampilan yang

50:50dibukanya harus click here

50:52to reveal yang ada toggle-toggle ini

50:54kalau misalnya gak ada javascript yaudah

50:56di jembreng aja di dalam kartu

50:58bisa enggak CSS enggak detik itu adblocker

51:02seru tuh

51:06apa detik adblocker jadi scripting atau adblocker media query contohnya

51:13main kucing-kucingan nanti diganti lagi sama si apa adblockernya

51:21kalau sebaliknya pernah apa kalau misal lupa deh kalau class name CSS class name blablabla ada

51:33app-blablabla itu di beberapa extension adblocker dianggap iklan kena blokir pernah dong kesengajaan

51:42gitu sering jadi itu cara ngedetect adblocker juga begitu misalnya kayak ada apa namanya

51:51kayak dummy JavaScript yang mengandung kata ads atau apa gitu dia akan ngeblok jadi kalau misalnya

51:57dia ada adblocker dia muncul anti adblocker contohnya gitu keluar pop silahkan kucing-kucing

52:06Iya kekecinan Betul Jadi ini salah satu cara untuk mendeteksi JavaScript di atau disable Nah pertanyaannya Bentar pertanyaan Kopi tadi tuh logonya Java bukan sih Bukan ya Logonya Java kayak gitu kan

52:24Mirip

52:24Oh iya mirip tapi bukan

52:27Teman-teman disini berapa orang yang

52:30Men-disable JavaScript di browser?

52:35Kayaknya jangan

52:35Kecuali

52:36Kecuali kayaknya testing

52:39Nah tergantung

52:40Testing

52:41testing karena make sure kalau misalnya javascript dimatiin ya alamanya nggak boleh rusak

52:48atau itu sih kayak headless browser ya walaupun headless browser udah bisa parsing javascript

52:56tapi ya tetep pengen ngetes kontennya ter-render atau enggak apa ya sama mungkin kalau end user

53:05Jusre beneran mungkin orang-orang yang privacy minded gitu, terutama di luar negeri.

53:11Kalau di Indonesia sih nggak terlalu, tapi mungkin ada.

53:15Iya, benar-benar.

53:19Mungkin ada yang masih menggunakan links sebagai browser.

53:23Links?

53:25Itu JavaScriptnya nyalah nggak ya?

53:27Nyalah nggak jalan lah.

53:29Orang di terminal ya.

53:31oke lanjut reduce transparansi media query Oh ini masih ada hubungan sama media query ya cuman

53:41ini masih orange, masih responsif kan, Firefox masih bendera kuning, Safari belum, ada yang

53:51tinggal ya ampun bendera kuning bendera orange orange kontrasnya jelek ya kelihatan ini juga

53:59orange ya non-compact interface can use head X or be official struggle for various

54:07type of vision deficiencies Oh jadi ini aksesibilitas ya untuk apa eh kelainan

54:15apa fungsi mata fungsi mata riba tenredis or remove transparansi from the UI this media query

54:24for prefer reduce transparansi fit in well with the other preference media query which allow you

54:30to be creative also while also adjusting for research jadi dia mengikuti preferensi dari

54:37di settingan tapi emang udah ada ya di OS mana gitu yang udah ada

54:43coba ya setting kalau reduce motion kan emang di ya di Windows udah ada di Mac OS juga udah ada

54:55apa ada ini reduce reduce reduce transparansi sama baru tahu juga

55:02Oh kalau maksudnya dari OS ada gitu kah kalau di Windows ada transparansi efeknya ada on atau off

55:11tapi kalau oh kita cari accessibility enggak tahu ya accessibility nggak ada nggak ada kalau di macOS

55:23rasanya ada deh kayaknya di bagian accessibility nggak pernah lihat belum belum lihat ya mungkin

55:31depannya bakal ada di sini udah dia sebutkan di sini kan orimu transfer Oh iya udah ada berarti

55:42kita aja nggak pernah lihat karena maksudnya kita kita enggak ngalamin keluar pandangan yang kayak

55:48gitu dan mudah-mudahan atau belum di bukan belum di belum jadi belum jadi Oh iya ada loh udah masuk

55:58coba Mas Riza ya ini silahkan share screen bukan Oh enggak enggak di Mac siapa yang mau share screen

56:06saya bisa nih eh saya lagi caranya gimana Oh ini entah application window nanda application

56:17kelihatan nggak diumpetin dulu yang perlu diumpetin terlihat tuh ada ini ya Oh iya Wah

56:26kontras ini dari apa nama Accessibility bener Accessibility Play Play ya ada infeksi

56:33color this motion in contrast di stans peransi Oh iya ada ada perlu tahu jadi apa ya Oh jadi aneh

56:44jadi gelap eh jadi hilang jadi enggak pakai transparansi kan Iya jadi dia opek full

56:52ya kalau backgroundnya abu-abu ya abu-abu kalau misalnya transparansi kan itu kayak kebawah wallpaper di belakang

57:03Oh iya betul

57:05Oh iya

57:07Oh iya

57:09Oh iya

57:11Bisa keliatan kalau saya share whole entire screen

57:17Oh gitu

57:19Tapi sayangnya Android belum ada ya

57:23Belum

57:25Coba coba saya sudah

57:27Ini keliatan ya ada belakangnya kan

57:31ini seperti keindahan Coba kalau misalnya ada tuh hilang abu-abu dan transparan lagi

57:41background blur ya jadi agak ngeblur gitu kan bokeh-bokeh efek apa

57:51saya iya hahaha secara estetik bagus tapi mungkin kan kalau misalnya yang ada masalah pandangan

57:59atau apa itu kan sebenarnya ngaruhkan saya bikin itu ngaruhin kontras juga kan bikin masa

58:03backgroundnya yang harusnya abu-abu gelap jadi ada putih-putihnya karena tadi apa gambar langit

58:08atau gambar apalah tadi laut jadi fungsinya seperti itu mungkin background wallpapernya

58:15biasanya untuk ini nih paling sering di

58:21card, depannya card, belakangnya

58:23hero image, hero

58:25terus ada cardnya mungkin sign in, sign up gitu kan

58:29di tengah gini kan sign in, sign up gitu

58:32dan kita bikin estetika bagus ya kita kasih opacity

58:36sehingga apapun backgroundnya si depannya ini

58:40backgroundnya biasanya ada gradien-gradien

58:42ya kan yang trend

58:44biasanya sunset sunset lah sunset gitu ya

58:47terus kasih

58:48atau yang abstrak kan suka gradient depannya 90% opacity nya

58:52standar

58:53terus keliatan kan

58:55berarti kalau kita reduce transparansi kayak gitu harus bisa hilang

58:59maksudnya apa ya full contrast

59:02background dan text

59:05gak kepikiran loh baru tau sekarang

59:09belum jadi standar ini soalnya

59:12maksudnya standart checklist accessibility, accessibility check, wcag, blablabla

59:18yang saya pakai belum pakai makanya baru tahu

59:20belum masuk extension kayak axe itu loh, axe dan lain-lain mungkin

59:26tapi kalau fitur ini sudah ada ya berarti siap-siap aja next of this year gitu ya

59:31satu hari bakal ada

59:33kalau udah biru ya, udah masuk baseline

59:37OS pun, para pembuat OS

59:40Udah menyadari bahwa itu fitur yang

59:42Diinginkan sama user kan

59:44Berarti itu ya

59:45Valuable

59:46Selesai untuk responsif

59:51Apakah kita akan masuk ke interaction?

59:56Ya habisin aja ini

59:57Habisin ya

59:58Habisin tapi cepet-cepet aja

1:00:02Besok-besok bakal ada remedialnya

1:00:04View transition kita gak usah bahas ya

1:00:07udah lumayan sering ya dan Oh sering banget udah bahas kemarin-kemarin kalau kalau ngomong ini

1:00:13berapa kali nih kalau mau lebih lanjut lihat videonya Eka di devest devest Bogor ya ada ada

1:00:21ada ada devest Bogor Iya ini juga tapi belum semua ya Firefox sama Safari belum tapi udah itu

1:00:32udah ngasih request for position mereka udah positionnya tuh oke jadi belum belum berupa

1:00:42komitmen bakal langsung masukin ke browser mereka cuma secara esensi mereka enggak masalah dengan

1:00:49apa API ini berarti udah setuju lah kira-kira gitu ya besar kemungkinan suatu hari bakal masuk

1:00:58jadi tldr nya. Udah diadaptasi sama framework-framework seperti Svelte, Astro, Nux

1:01:10kalau Nux masih unofficial sih tapi udah ada pluginnya. Sampai yang server-side aja kayak Turbo

1:01:17ada, ada. Kalau di framework ada, cuma kalau di sini mah nggak harus bikin sendiri

1:01:22gini ya intinya kita bisa punya apa ya transisi antarpage misalkan page a warnanya merah page

1:01:29B warnanya biru dia bisa kayak bertransformasi ke biru gitu ya jadi sebetulnya transition itu

1:01:40ada dua level udah kayak makanan udah kayak penyetan cabai kan kayak makan pedas aja kan level Nah level 1 level 2 Yang level 1 itu masih yang client yang buat SPA

1:01:54Jadi, apa, antar elemen lah.

1:01:56Jadi, apapun itu, elemennya terserah.

1:01:59Mau kayak gini, ini kan cuma ngerender.

1:02:00Sebenernya cuma ngerender SVG yang berbeda-beda kan.

1:02:04Kalau kita klik, SVG-nya dirender.

1:02:07Udah gitu doang.

1:02:08Jadi, apapun, elemen apapun,

1:02:10jadi kayak meng-connect antara

1:02:12state atau kondisi UI

1:02:15sebelum dan sesudah.

1:02:17Nah, terus dibuat transisinya.

1:02:19Kita yang men-define animasinya

1:02:20seperti apa. Nah, terus

1:02:22perkara ngumpetin dan kan

1:02:24sebenarnya animasi transisi itu kan

1:02:26terdiri dari dua aspek kan.

1:02:29Before, after. Terus

1:02:30style animasinya seperti

1:02:32apa. Nah,

1:02:34meng-orchestrate before, afternya itu

1:02:36di-handle sama view transition.

1:02:38Nah ini yang mana?

1:02:40Dan itu fully CSS kan?

1:02:43CSS-nya bahkan optional

1:02:45Jadi cuma JavaScript start transition

1:02:49Jadi karena ini kan masih yang level 1 ya

1:02:51Client side

1:02:52Jadi misalnya kita

1:02:54Yaitu show height

1:02:57Menampilkan suatu elemen

1:02:59Kita nge-click

1:03:00Terus kita start view transition

1:03:02Yaudah itu langsung di handle

1:03:04Nah CSS-nya buat apa?

1:03:06CSS-nya buat style animasinya, keyframe-nya.

1:03:13Berarti dia lebih ke API JavaScript-nya ya?

1:03:17Iya, tapi native JavaScript.

1:03:20Dan kalau dulu sebelumnya,

1:03:21kalau JavaScript yang masih workaround,

1:03:23akal-akalan kan sebetulnya

1:03:25di JavaScript kita harus menduplikate

1:03:29atau meng-copy elemennya,

1:03:31diumpetin, misalnya opacity-nya di-null-in,

1:03:34biar waktu elemen aslinya hilang itu masih ada terus di-animate JavaScript ke state yang dari

1:03:43before ke after habis itu baru dihapus lagi nah kalau ini nggak usah ya udah kita punya seperti

1:03:48biasa aja mau nge-hide show elemennya langsung cuma bisa kita kasih styling. Harus manggil start

1:03:56spew transition itu ya? harus panggil? harus harus. Nah kalau yang level 2 yang belum nih level 2 itu

1:04:05yang antar halaman itu kelihatannya nggak usah di nggak perlu dipanggil dari javascript karena server

1:04:12site ya kan tapi harus berada di origin yang sama. Cuma level 2 ini sayangnya si webkit sama Firefox

1:04:22masih banyak banyak tanya-tanya masih banyak diskusi jadi seru sih kalau lihat itu kan semua

1:04:29terbuka ya apa di github ya salah satu yang kita bahas kemarin itu enggak kelar-kelar udah yang

1:04:37level 2 nya ini salah satu disayangkan sama Jack Archibald itu ya yang view transition enggak masuk

1:04:44interop 2024 bener gak sih emang enggak masuk ya justru defaulting enggak masuk enggak masuk

1:04:51masuk ya ya lebih lama lagi dong ya kalau nggak salah ya saya coba cari daripada saya hoax

1:05:01yang apa tahu saya yang di voting buat interop 2024 itu yang level satunya Kenapa karena kan

1:05:12saya saya saya hoax yang disayangkan dia itu adalah yang navigation API navigation API enggak masuk

1:05:25apa namanya enggak masuk interop interop wah kayaknya besok mesti bahas interop 2024 kali

1:05:33seru Iya kayaknya bisa tuh oke ya apa yang yang dimasukin voting gimana-gimana ternyata ternyata

1:05:42ada tweet selanjutnya view transition juga enggak ikut saya bener-bener coba klik aja

1:05:48klik aja klik aja Twitter saya itu ya kecewa ya lebih panjang lagi dong ininya pas device

1:05:59itu itu masuk ke dalam slide yang di potong biar masuk waktu gak kelihatan ya dia di bagian tweet selanjutnya

1:06:09harus login ya ini saya kasih aja link ya ini bentar si Ellen tweet ya dia kalau misalnya gak login semua fungsi-fungsi yang kayak apa sih

1:06:22manggil kan biasa dari latifuit pokoknya reply thread dimatiin semua kayaknya lagi ngirit transition isn being included either but I less Lebih sedih kalau yang navigation

1:06:38Lebih sedih yang tadi, karena ini kan cuma buat progressive enhancement.

1:06:42Nah, ini akhir tahun lalu banyak yang ngevote view transition,

1:06:47karena pertimbangannya maksudnya kan framework responnya bagus,

1:06:51developer responnya bagus, dan toh pihak Firefox sama WebKit juga udah nggak masalah,

1:06:56nggak masalah udah bilang oke jadi why not masukin interop?

1:07:00Tapi nggak masuk, sedih.

1:07:02Ya, nextnya mungkin kita bisa bahas interop biar kita tahu trend ke depannya ya.

1:07:08Berarti begitu view transition ini sudah masuk interop berarti kita ketemu lagi nanti di Bali.

1:07:14Kita bahas, view transition akhirnya masuk.

1:07:17Oh jadi melanjutin itu ya, pertama container query.

1:07:23nextnya ada view transition

1:07:26di Bali lagi

1:07:27semoga didengar sama Mas Danang

1:07:33karena Mas Danang muncul lagi

1:07:37ya lanjut

1:07:38lanjut kita

1:07:40berikutnya ke linear easing function

1:07:43ini animasi ya

1:07:45dan ternyata bukan

1:07:48kalau linear kan kita bayanginnya

1:07:50sama gitu kayak cuma

1:07:51kalau grafiknya cuma begini Nah justru ini bukan buat itu cuma nggak ngerti sih karena

1:07:58enggak terlalu kebiasaannya masih delinear function not to be confused with linear

1:08:02keyword allows you to create complex easing complex easing function jadi itu kayak ada

1:08:08logaritmanya gitu loh kayak apa ya kayak ada ya linear itu kan maksudnya bukan cuma garis lurus

1:08:16di sini maksudnya speed untuk munculnya itu linier konstan is-in-out is-in kan biasakan

1:08:26kalau udah dekat dia melambat atau kalau dari awal ya dulu bahas kencang kan kalau ini langsung

1:08:31stabil-stabil ya pertanyaannya ini ini kan lebih aneh musim bouncingnya kalau is-in is-out kan

1:08:42lebih cepatnya di awal atau di akhir

1:08:45kalau ini

1:08:46ada perhitungannya sendiri kan

1:08:48ini matematika

1:08:49yang jarak

1:08:52antar titiknya lebih pendek itu lebih cepat

1:08:55coba lihat ya

1:08:56ini kan jaraknya jauh nih kan

1:08:58jauh pelan ya pelan

1:09:00cepat tuh

1:09:02ya kan

1:09:02gak keliatan

1:09:05gak keliatan oke

1:09:06nah ini ada pertanyaan dari saya

1:09:10udah super semua nih tapi belum masuk baseline

1:09:16lu masuknya 17.2 tuh Safari baru banget Safari normalnya berapa Coba aja cari sekarang browser

1:09:26today sekarang 17 jadi dianggap kalau udah jadi 16 bahkan ini keluar dari 17.2 kayak semacam

1:09:36patchnya bukan-bukan Buka-buka browser Happy nah sekarang 17-2 tapi kan harusnya kalau dia biru

1:09:48dari nanti bukan artinya belum masuk baseline sudah-sudah udah mungkin sudah ini sudah stabil

1:09:59tapi belum masuk baseline ya mungkin belum masuk ininya best layak karena ada baseline tahun

1:10:05belum masuk baseline 2023

1:10:07maksudnya itu

1:10:09dua versi major terakhir

1:10:11ini browser happy

1:10:13opera mana opera?

1:10:15opera

1:10:17opera ini UC gak ada

1:10:19UC browser gak ada ya

1:10:21sekarang

1:10:23yang lagi naik down Vivaldi kan ya

1:10:25rata-rata pada daerah

1:10:27Vivaldi itu fork berapa ya?

1:10:29iya fork nya

1:10:31opera

1:10:33Kalian pada pakai browser apa sih?

1:10:37Firefox, Firefox, Safari, Chrome. Udah. Ya Thor lah kalau buat.

1:10:43Dark Web.

1:10:45Ini itu yang aneh-aneh.

1:10:47Dark Web?

1:10:48Nggak Dark Web juga sih.

1:10:52Kalau daily-nya ya itu Firefox, Safari, Chrome doang. Nggak pernah pakai semacam Arc atau Brave atau lain-lain.

1:11:00lain-lain ini art nih yang lagi ditampilin kromium ya kayaknya kromium base ya oke pada pakai browser

1:11:11nah tool ini yang sefungsinya apa ya ini kelihatannya kayak buat game atau apa ya yang berarti transisi kayak gini tuh nunjukin sesuatu atau ya game lah pastinya ya jarang juga

1:11:31kita bikin-bikin kayak gini ya next iya makanya apa sih misalnya cuma model muncul mau is in

1:11:38without user emang kebedain gitu ada juga yang membedainya mungkin tergantung

1:11:44kalau misalkan kita bikin web video editor nampilin ya webnya yang mas Yohan

1:11:51bahas kemarin web-based video editor ya mungkin atau ini ini aja apa bikin slide

1:11:57bikin slide dia ada animasi transisi nya kan itu juga bisa kita lanjut dulu ya

1:12:06Scroll end, scroll end ini kita bisa ngecek apakah scrollnya udah sampai hampir akhir.

1:12:11Udah mentok atau belum?

1:12:13Udah mentok atau belum? Hampir mentok atau belum kan?

1:12:17Enggak sih, eh sudah mentok atau belum?

1:12:20Sudah mentok atau belum, oke.

1:12:24Ini juga javascript ternyata ya, cuma dimasukinnya ke CSS karena untuk UI.

1:12:29Nah sebelum ada scroll end event, bentar keterangannya tadi.

1:12:33sebelum ada scroll and event kita harus pakai in accurate time out method that could fire while the user finger was still on the screen

1:12:45belum pernah pakai sih? belum belum belum

1:12:48you have a perfectly timed scroll and event that understands whether a user is still mid gesture or not

1:12:57oh, mau deteksi, apa, dia nge-scrollnya udah selesai atau belum gitu, jarinya udah naik atau belum

1:13:03iya, ini javascript ya, berarti htmlnya kita kecilin, javascriptnya kita bisa kecilin

1:13:10nah, ini scroll lebih, feel, ini belum, oh udah habis ya

1:13:15scroll end, scroll end

1:13:18scroll on, scroll end, oh dia pake on scroll end ya

1:13:26on scroll n itu progressive enhancement nya itu Iya ini dicek dulu kan udah dukung belum

1:13:36Hai udah langsung aja tambahin kelas has scroll n jadi muncul yang yang ping ini

1:13:44ada t-rex nya

1:13:48t-rex nya mana?

1:13:50has scroll n

1:13:54mana t-rex nya?

1:13:56no, generated dari javascript

1:14:00itu kalau gak ada, kalau gak support

1:14:04if scroll n

1:14:08oh iya iya

1:14:10terus ada ini

1:14:12Nah itu tos-tos repost Oke oke semakin seru ya Jadi kalau membuat kayak paralaks gitu bisa

1:14:25perscroll gitu ya sampai akhir habis itu nanti ada misalkan klik to top call to action ya

1:14:31menaftarkan submit your email and we will sell your email muncul pop-up untuk paywall biasanya

1:14:40dapatkan konten seperti ini hanya dengan

1:14:45Rp7.700.000

1:14:49Senin harga naik

1:14:51Selasa ngobrolin web

1:14:53Bisa bisa bisa

1:15:05Masuk masuk

1:15:06Masuk masuk

1:15:06Nanti di cut Mas Wiza

1:15:10Itu jadi tagline kita

1:15:11yang tadi saya maksud sebenarnya ini scroll different animation kayak Parallax gitu kan

1:15:19ya ini keren banget Oh dulu saya bikinnya ini yang di atas javascript bukan ya pakai javascript

1:15:28tapi yang kalau bisa di scroll bukan ada kayak bar reading progress saya pernah diminta bikin

1:15:36itu sempet ngetrend banget gara-gara medium dulu, kayaknya pertama kali medium deh

1:15:43abis itu medium malah gak pake kayaknya sekarang

1:15:45cuma dulu kayaknya sempet ngetrend, lupa deh medium atau wordpress atau apa ya

1:15:49pokoknya dulu sempet ngetrend gara-gara ada luar platform yang pake

1:15:53oh gak pernah ya, ya berarti medium, pokoknya blogging platform

1:15:58oh ini bisa dipake untuk itu ya

1:16:00ada contohnya tuh

1:16:04contohnya lengkap banget, coba deh buka di docks

1:16:09scroll driven animation

1:16:12god style

1:16:15nah ini yang bikin, kalau gak salah mas bramus dari devrel chrome

1:16:20mas bram

1:16:22mas bram, kayak kenal

1:16:26oh wow, keren sekali

1:16:28itu demo semua itu

1:16:30variasi-variasi penggunaannya

1:16:34tapi sebenarnya cakep tapi ini ngerusak betul walaupun bukan ya kan demo-demo harus kontras

1:16:44tapi kalau misalnya di dunia nyata ya accessibility jangan lupa ini jadi bikin kayak itu lo yang ingat

1:16:51gak kalau si Apple punya product page kalau di Scroll terus dia banyak-banyak ya capek

1:17:01masih itu sepertinya mempermudah untuk bikin kayak gitu dan enggak harus pakai observer enggak pasang

1:17:11observer macem-macem yang custom karena stylingnya ditempelin di elemen itu sendiri kalau misalnya

1:17:20elemen itu masuk di layar nah di styling gimana tapi sayang Firefox masih orange dan

1:17:30orange Safari malah masih masih

1:17:33padahal yang paling butuh Apple ya bikin untuk page begitu ya

1:17:40egois dia mau bikin pakai caranya sendiri kali jahat banget Susan

1:17:45Susan oke lanjut lagi divert nah ini asli nggak ngerti ini apaan

1:17:56apalagi ini ada hubungan sama scroll animation terus ya

1:18:00oh ini kayak helper buat scroll driven animation

1:18:07always works up the dom3 making it limited to scroll ancestors only.

1:18:12Very often though, the element needs to be animated.

1:18:17It's not a child of a scroller, but an element located in entirely different sub-tree.

1:18:23Apa ini maksudnya?

1:18:25Keliatannya kayak buat ngedeteksi, walaupun relasinya kan mungkin bisa nested beef ya keliatannya.

1:18:34Oh atau di luar nesting

1:18:36Dipakenya soalnya itu tuh use case nya carousel

1:18:42Gimana gimana? Carousel

1:18:46Terus Timelamp Scope Gallery

1:18:50Ada contohnya nggak coba?

1:18:53Ya itu

1:18:58With Timelamp Scope declared on the shared parent

1:19:00The scroll timeline declared on scroller can be found

1:19:04by the element that uses the animation timeline

1:19:07ini kalau kita lihat

1:19:10demonya, gimana nih

1:19:11javascriptnya gak ada, ini pure

1:19:16CSS ya

1:19:17kita bisa scroll

1:19:19gak ya, gak bisa scroll

1:19:21gak bisa ya

1:19:23oh bisa, bisa scroll pake shift

1:19:26pake shift

1:19:27oh

1:19:28pake shift maksudnya

1:19:31pencet shift terus pencet

1:19:33Mouse Scroll mouse-nya di Scroll Iya atas bawah itu jadi ke samping artinya Iya ke samping

1:19:42bukannya ada mouse-nya dan ini biasanya ada yang kiri-kiri ada tapi mau saya cuma ada atas-bawah

1:19:50Oh ada penjelasannya disini nih ada penjelasannya tapi enggak ada demonya buka deh Oke private chat

1:20:04yang ini ada demonya tapi kurang kurang jelas penjelasannya ini ada ini bawah nah attaching

1:20:14atau non eh atas dikit zoom nah ini attaching ya maksudnya biar kebaca attaching to non ancestor

1:20:26scroll timeline kan jadi kalau by default apa tadi yang buat scroll timeline itu cuma bisa

1:20:34buat ancestornya kayaknya mendeteksi dia apa elemennya nge-scroll in relation to parentnya

1:20:42entah itu body atau peran elemen Nah terus cuma ini kalau kasusnya karusel kan misalnya apa dotsnya itu itu kan di luar di luar container buat slide nya kelihatannya intinya sih untuk itu nah itu

1:21:00timeline scope sih pokoknya itu kan paragraf pertama sering tuh jadi elemen yang perlu

1:21:06animasi bukan celup bukan calonnya sih scrollernya itu bukan calonnya sih apa kalau misal karusel

1:21:13kan bukan calonnya sih tempat gambar-gambar karusel itu kan Nah jadi pakainya timeline

1:21:19scope si deferred blablabla itu intinya timeline scope karena belum biasa bingung ya belum ada

1:21:30udah nggak nangkep sih maksudnya apa, cuma use case-nya mungkin ya

1:21:34sekilas udah paham, cuma maksudnya kalau suruh bikin ya bingung

1:21:38ya nggak tahu juga

1:21:39bingung juga

1:21:40bingung juga

1:21:41ya, kita lanjut lagi, discrete property animation

1:21:45another new capability in 2023, the ability to animate discrete animation

1:21:51discrete animation apa ya?

1:21:53animating to and from display time

1:21:56dulu kan nggak bisa, jadi sekarang bisa gitu

1:21:59Wow ya tahu ini ada warna-warni gitu ini bukan jadi hilang display non ya tuh dari ada ada dan

1:22:08tiada dulu kan nggak bisa dulu sudah ada ada dan tiada lagi adalah isi isi adalah kosong

1:22:16opacity opacity baru dihilangin elemennya balik layar terus opacity nol display none

1:22:29display none keyframe-nya fade out fade minus out yang ini kan iya

1:22:35terus ada Spin and delete

1:22:40nah Spin and delete ini

1:22:43oh ini yang ininya ya apa keyframe nya ya ya ya

1:22:49display none nya juga kalau udah selesai display none

1:22:54ya kalau udah 100%

1:22:56terus tadi elemennya apa

1:23:00lul salah, halaman ini apa?

1:23:03discrete property animation, display none, content visibility

1:23:09oh dia cuma ini ya?

1:23:11ya kita jadi bisa meng-animate display dulu kan belum bisa

1:23:13allow discrete maksudnya

1:23:15tapi harus allow discrete

1:23:17gimana allow discrete?

1:23:19coba di search

1:23:23allow

1:23:25not found

1:23:29Halo, nggak ada? Halo, nggak ada?

1:23:38Ya, ini demo misterius lagi.

1:23:41Nggak ada, di sini nggak mungkin.

1:23:45Hah?

1:23:46Hah?

1:23:48Demo macam apa ini?

1:23:52Jangan-jangan kayak tadi.

1:23:54Or in transition property as shorthand.

1:23:59Coba ya tadi ulang lagi transition transition tadi ada kan transition

1:24:06ini perkaranya jadi bisa animate this property display atau ada properti khusus

1:24:14agak curiga sih jajan ini perkara apa sekarang kita bisa meng-animate display udah jajan gitu doang

1:24:23Hai loh tapi caranya gimana di sini enggak ini juga tuh caranya dia rotet-rotet doang

1:24:32Hai ada display non itu dihapus on-on klik kan ketika diklik dokumen delete ini maka ditambahin

1:24:42fade out dan spin out jadi ini fade out dan spin oke fade out disini kan animate

1:24:51animate dot fade out plus fade out animationnya fade out yang dibikin sendiri dari sini

1:25:00nah itu ada display none nya kayaknya cuma perkara bisa menganimate

1:25:05gara-gara ada display none jadi dia jadi ke animasi secara otomatis gitu ya

1:25:11Hai ya bisa jadi bisa animik di display kan standarnya blog mungkin jadi blog

1:25:17kanan yang mungkin jadi hilang

1:25:19display kita hapus ya putar aja loh Coba inspect inspect element bisa dong Hai kanai nah itu kan opacity nol tapi masih ada

1:25:43Hai mana Hai tadi kayaknya ke selektif

1:25:46to the title to the title ada kan ya sedangkan kalau ada display non nya ya jadi hilang nggak

1:26:00ada lagi itu baru ya Teteh perkaranya cuma itu deh dulu display nggak bisa

1:26:04di nggak bisa dimasukin keyframe sekarang jadi bisa singkir curiga nya gitu Oh iya

1:26:11Oke lanjut lanjut apa lagi ini belum pernah lihat

1:26:21nah ini masih masih berkaitan sama tadi tuh kayaknya animating to and from display none

1:26:31the browser can look up before element is open. Oh dia bisa tahu ketika elemennya belum dibuka

1:26:43bahkan belum ada. Oh ini video ya nggak bisa diklik. Nggak bisa. Oke kita lihat di sini.

1:26:53tapi harusnya simulnya juga begitu

1:26:56loh kemana ini?

1:26:57oh ini, kita pakai ini aja

1:26:59nah ini kan misalkan kalau kita klik

1:27:03dia akan animasi dulu sebelum tampil

1:27:07gitu kan

1:27:08ini klik the button, open dialog, mana dia?

1:27:11ini dialognya

1:27:12dialognya ada on click-nya

1:27:15button-nya ada on click-nya

1:27:17button-nya ada on click-nya, open dialognya ini

1:27:19on click-nya show modal, modalnya ini kan

1:27:22terus yang jadi beda-beda adalah

1:27:29Hai transition Hai ada display enggak tadi ada allow diskret Oh ya itu tuh

1:27:38akhirnya ketemu di dalam transition

1:27:44Hai dialog kalau diskret

1:27:52Hai coba hapus Allah diskretnya

1:27:54Hai

1:27:58ya ya ya ya ya ya

1:28:07Hai love gitu enggak enggak enggak enggak enggak yang ini dia dia kan dia kan exit

1:28:13exit state nya kalau ilang by default kalau ilang ya ilang aja kan gak di anime out

1:28:19kalau ini ya ndak bisa-bisa is out ya di turun ke bawah tuh nah oh dan enggak pakai javascript

1:28:27sama sekali ya isi kosong Wow keren ya keren tapi belum bisa disitu bisa di belum bisa di safari

1:28:37belum bisa di browser lain belum ada yang mau Firefox belum belum ya ya lumayanlah ada lanjut

1:28:46overlay sama nih statusnya ini CSS overlay property can be added to transition to enable

1:28:53the element with top layer styles oh iya ini bagus deh udah pernah lihat demonya oh iya jadi jadi

1:29:02warnanya agak hitam itu ya yang overlay itu ya kalau agak hitamnya pakai CSS itu kita style

1:29:07pakai CSS tapi ngaruh ke accessibility juga jadi tahu kan kalau kita buka modal dialog kan belakangnya

1:29:15semua harus kita freeze kan harus nggak bisa di scroll harus punya nggak bisa di tab nggak bisa

1:29:21interaksi apapun kalau dulu kan harus pakai javascript buat apa kita harus nge-set itu

1:29:26manual sekarang udah enggak di handle sama CSS sama apa HTML malah jadi ini unik sih sebenarnya

1:29:34ya kalau mau ditarget pakai CSS boleh tapi ini berupa atribut HTML buka aja tuh demo nya

1:29:45Hai overlaid togel transition overlay

1:29:52Hai mana dia

1:29:57Hai overlaid script Hai kalau diskret lagi Oh iya ini buat animasinya kali ya buat apa buat

1:30:06muncul sama nah buat pasti close-nya kan mana HTML ya

1:30:12show mode action bar taruhnya dimana tulisannya gimana oh backdrop to isolation mode tadi bukan

1:30:25iya backdrop

1:30:27backdrop itu bagian dari API nya overlay

1:30:32jadi ada ada beberapa ya ada beberapa

1:30:38bentar dulu kayaknya lihat demo nya lebih jelas deh cuma lihat lihat gimana lupa

1:30:43mana ya

1:30:47ya besok besok

1:30:50banyak

1:30:55eh ini besok bahas kapan-kapan mau saya bahas open UI aja kali ya ini kan soalnya jadi apa sih

1:31:04ada working group ya working group namanya open UI untuk mereka itu dari itu asalnya dari berbagai

1:31:13vendor browser jadi tujuannya ya ini buat memajukan apa ya web platform tapi pakai

1:31:20UI yang ya sesuai kebutuhan aplikasi modern lah jadi popover ini popover dan

1:31:27temen-temennya kalau nggak salah termasuk hasil brainstorming si kelompok open UI ini

1:31:33nah mungkin besok-besok kita bahas kita bisa bahas open UI termasuk include si popover ini

1:31:40Oke siap Hai nah terakhir masih ada ini ya masih ada satu bab lagi ya komponen

1:31:51Hai tanggung ya peti naik ke dikit sih dikit cuman ikut kok over yang tadi ya popover ya

1:31:57popover nanti aja nanti ini itu yang hamburger menu ini ya Iya Iya betul-betul jadi over

1:32:06dia dialog ya itu ya?

1:32:09ya intinya sih semacam dialog cuma kelihatannya ada pembedanya deh

1:32:14bedanya ini apa dia bisa accessibility jadi kalau pakai keyboard

1:32:19ada keyboard binding nya by default

1:32:25next horizontal rules in select

1:32:29horizontal rules oh bisa di scroll

1:32:33bukan itu ada ini nya ada garisnya garis-garisnya sekarang selek favorit fitur nah kan bawahnya tuh

1:32:42ada opsi-opsinya tuh kan dipisahin sama garis horizontal ya Oke hal sesimpel itu selama ini

1:32:48kan developer harus bikin apalah pakai custom custom react component ya kalau enggak bikin

1:32:55sendiri kan kita harus install third-party demi estetika visual karena mungkin kita harus ngikutin

1:33:00desain komp yang

1:33:02udah dibuat sama orang UI

1:33:04nah sekarang

1:33:05udah bisa pakai

1:33:07web platform, terus ini sih yang menarik

1:33:10browser supportnya ya

1:33:11kombinasinya Safari and Chrome

1:33:14ini gak ada browser support?

1:33:18iya, cuma

1:33:18di keterangannya

1:33:19which landed in Chrome and Safari

1:33:22this year

1:33:23baru pernah kan lihat kombinasi

1:33:26browser support Chrome and Safari

1:33:28ya Firefox jisul ketinggalan ya dan edge pun belum chrome yang ketinggalan

1:33:38ya cuma kalau misalnya edge nya belum mau masukin ini kan baru disupport oleh Safari dan Chrome

1:33:44chrome berarti maksudnya walaupun premium udah ada edge nya nggak mau kali masih di exclude

1:33:51Oke lanjut nah ini udah bisa semua user valid and invalid shadow class

1:34:00ada user valid invalid kan sebelumnya udah ada valid invalid kan udah ada ini ada user valid

1:34:10user invalid itu kelihatannya maksudnya kalau form library dirty deh tau gak sih apa biasanya

1:34:17kalau pakai library form yang bawaan dari framework,

1:34:21itu ada istilah dirty.

1:34:23Itu kalau user sudah berinteraksi sama input tersebut.

1:34:28Jadi, by default kan, misalnya input text masih kosong.

1:34:33Itu kan kalau dari sudut pandang kita, developer, logic, logic.

1:34:37Logicnya kan itu invalid, karena nggak boleh kosong.

1:34:40Tapi kalau dari perspektif user, UX, diisi aja belum,

1:34:45masa tiba-tiba udah merah, error.

1:34:46kan maksudnya apa itu nggak make sense setelah user ngisi baru kalau misalnya nggak memenuhi validasi baru kita tunjukkan bahwa itu invalid

1:34:58dan itu pakai CSS aja ya? iya keren ya

1:35:05jadi green, jadi merah

1:35:08karena ini invalid, tapi dia belum merah ya

1:35:11ini merah kan

1:35:12udah di klik, udah dirty

1:35:14ini valid

1:35:17kalau kita pake

1:35:18inputnya apa ya

1:35:20biar gak valid, oh kosongin aja

1:35:23karena kita udah

1:35:24kita udah ngetik

1:35:26tapi gak perlu

1:35:28tapi kalau belum, dia masih

1:35:30tetep normal ya

1:35:32oh

1:35:32dan selama ini kan cuma bisa dari apa cuma bisa dari apa form library atau custom script lah

1:35:42custom.js sekarang di CSS udah ada invalid ini masih state normal tapi kalau kita udah

1:35:49terus kita hapus dia kamera nggak bisa salah ih asli baru tahu semua browser udah tadi udah udah

1:35:59sudah baseline ini Iya

1:36:04Firefox juga Firefox duluan berarti ini ya Iya udah dari lama lagi ini kayaknya nih baru ada di Chrome

1:36:14baru ada di Chrome kebalik ya Alright next exclusive akordeon ada-ada aja cuma itu lumayan

1:36:26sering sih maksudnya itu opsi yang sering dan biasanya kita jadi harus pakai custom JavaScript

1:36:30custom UI library atau custom javascript walaupun udah ada elemen sebutnya tuh Safari udah padahal iya iya ya si Edge dan Safari juga udah tapi dia

1:36:49nyebutnya new in Chrome support name

1:36:52attribute for detail jadi gimana nih

1:36:55ya itu cuma kalau satu dibuka yang lain

1:36:59nutup setnya maksudnya coba aja buka

1:37:02buka

1:37:02Eh enggak, multival. M measurement in multiple step, without name atau USB.

1:37:08Kalau ini yang with name.

1:37:14Ohh..

1:37:16Lohh.. fluids ke PUNCS doang.

1:37:21atau HTML doang.

1:37:23Ada JS-nya juga tuh

1:37:25ик lijaja avpb,kanya RIP

1:37:30Event roar

1:37:32polifil, ini polifil

1:37:34polifil

1:37:35baca aja, tadi ada polifil

1:37:38oh iya

1:37:39aslinya kan sebenarnya

1:37:41pakai detail, ada detail name ya

1:37:44mana detail name?

1:37:45bawah-bawah, to name

1:37:47my accordion

1:37:49jadi kalau ini dikelompokkan dengan name

1:37:51maka dia akan hanya bisa membuka

1:37:53satu dalam satu waktu ya

1:37:55kalau satu ditoggle, yang lain tutup

1:37:58nice

1:37:59seru-seru

1:38:00Hai selesai conclusion akhirnya

1:38:04banyak banget ya beritanya ya dan iya banyak itu banyak yang kita nggak tahu ya kita tahu cuman kayak hash transition container query container query ya jadi ini yang bikin dari chrome ada Mbak Una ada Mas Bram dan ada Mas Adam

1:38:32Mantap

1:38:34Jadi kayak orang Indonesia ya

1:38:35Mas Adam, Mas Bram

1:38:37Kita ketemu Mbak Una kan ya

1:38:39Di Bangarundur

1:38:41Kalian, kalian

1:38:42Saya tidak

1:38:43Makanya saya bilang kita

1:38:45Saya itu dan Mbak Eka

1:38:47Benar-benar

1:38:49Jadi gimana?

1:38:53Sudah puas dengan CSS?

1:38:56Sudah bingung?

1:38:57Puyeng ianya

1:38:57Puyeng

1:38:58Iya, puyeng ya

1:38:59Kapan-kapan episode khusus layer

1:39:03Khusus yang

1:39:07Hal-hal yang kita skip tadi

1:39:09Iya karena tujuan kita kan

1:39:12Belajar bersama

1:39:13Undang siapa ya

1:39:15Yang bisa bahas

1:39:17Yang expert di bidang layer

1:39:20Kalau enggak mas Adam

1:39:22Mas Bram

1:39:23Atau mbak Una

1:39:25Iya kayaknya

1:39:26Mas atau mbak yang disini

1:39:29Bisa gak ya kita undang mereka ya?

1:39:31Ya siapa tau.

1:39:33Wishing aja dulu.

1:39:35Wishing aja dulu.

1:39:37Wishing aja dulu.

1:39:39Mudah-mudahan didengar sama Mas Danang.

1:39:41Mas Danang lagi?

1:39:43Mas Danang lagi?

1:39:45Ya.

1:39:47Banyak teman yang gak tau nih inside joke Mas Danang ini siapa sih Mas Danang ini siapa sih Kadang muncul kan Iya ya tetap nggak tahu terbingung siapa dia muncul siapa Oke kalau gitu terima kasih banyak buat semuanya terima

1:40:05kasih sudah berpusing-pusing Ria bersama kita ya jadi minggu depan kita tidak akan membahas

1:40:11CSS lagi kita ada bahasnya karena udah pusing karena udah pusing jadi kita stop bahas CSS ya

1:40:17nanti dulu biar nggak bosen beberapa hal yang menarik contohnya tadi apa you open

1:40:25you open you open you I interop belum lagi minggu depan special guest kalau interop sudah

1:40:32ada sudah ada ininya kayaknya bisa kita bahas kalau sudah dari Asia ya kalau udah karena

1:40:38menarik juga dibahas di awal tahun betul nanti di akhir tahun kayak rap lagi ya atau di awal

1:40:44depan gitu ya.

1:40:46Iya, terletak 5 hari lalu.

1:40:48Oke, terima kasih.

1:40:51Kalau ada yang mau

1:40:52ngide,

1:40:55ada yang mau ngide, bisa ke

1:40:57pesanan.in

1:40:58slash ngobrolin.

1:41:01Topik

1:41:01ataupun narasumber,

1:41:04bikin aja GitHub discussion

1:41:06di repo kita.

1:41:10Atau kalau ada

1:41:12topik yang menarik, bisa di-upload ya.

1:41:14Jangan lupa login dulu ke GitHubnya

1:41:16Itu aja dari kita malam hari ini

1:41:18Selamat malam

1:41:20Sampai jumpa lagi minggu depan

1:41:22Bye bye