Ngobrolin CSS Wrapped Bagian 2

5:58deh itu enggak apa namanya kayak mungkin adaptif gitu adaptif adaptif sih enggak resolusinya diturunin dulu coba coba saya ganti

6:11audio ruce mic mic background noise-nya diunceck cobaudah Iya mungkin dari si itu Dar I settingannya si ini

6:25streamyardamy kalau Pak l kecil jadinya suaranya halo halo sekarang gimana nah bagus kecil tapi tapi tidak naik turun Nah lancar Heeh

6:38Iya Naikin aja volumein nah Berarti kayak itu Echo cancelation-nya si streim tuh kayak dia berusaha reduce noise-nya kaliik Iya

6:49kayak putus-putus sekarang gimana nah lebih lancar bagus cuma tinggal dinaikin aja volumenya volumenya naikin volumenya kurang volume Volume input ya audio I

7:02110% sudah 114% kurang kok enggak nggak rusik 130 enggak ngaruh k kayak enggak ngeruh deh kayak ada settingan mixer atau apa

7:15mungkin segini Segini nah cukup sudah Iya lebih enak oke oke Wah masih kurang atau cukup cukup cukup ya oke i i jadi

7:28eeak banyak fitur-fitur yang mungkin kita enggak tahu dan bahkan CSS pun sekarang sudah apakah sudah bisa dikategorikan sebagai bahasa pemorgaman

7:37karena Nah itu debat sepanjang masa iya sudah ada trigonometri sudah ada kondisal kan eh media query dan

7:46query-query lainnya yang bakal kita lihat itu kan kondisional kond sudah ada kondisional lain media query ya Iya

7:53media kan if screen size bla bla bla nah terus variabel Ah ada nah l nesting nesting juga sudah bisa Heeh betul nah

8:03Oleh karena itu Mari kita bingung bersama Iya bingung sendiri itu enggak enak jadi bingung bareng-bareng kita ngajak-ajak kalian bingung sebenarnya

8:14oke nah kemarin tu kita sudah bahas tiga kotak pertama ya Dar arkitectural foundation tipografi sama warna nah malam hari warnanya pun di

8:26speedrun karena kita udah pernah sebetulnya Kian kita sudah pernah bahas di episode entah Episode berapa tapi pernah berapa ada yang ngomongin warna

8:35tuh awal-awal ya yang ingat banget tuh Rebecca Purple cerita tentang Rebecca Iya heeh he cerita sedih campur kocak

8:43tadinya kocak tahunya sedih tapi ada ininya ada selanjutnya yang kita khusus membahas warna yang komplit ada ya iya

8:52ya itu yang HCL HCL hsl okes sama saat bingung bersama juga saat itu okr KPI itu Kerjaan kantor Maaf ya

9:09salah iya jadi kita terakhir sampai di sini di bagian color nah Malam ini kita akan masuk ke responsive design

9:17responsive design yang paling seru kalau responsive design ini kayaknya eh sempat dicover juga di Dev kemarin ya sama Pak

9:26Dika ya Kalau enggak salah ya ngomongin Oh iya iya ya betul jadi yang masuk kategori responsive desain yang pertama adalah S

9:36container query ini juga salah satu topik bersejarah karena ee inisiasi I yang pertama bikin kita ngobrolin web

9:47literally bertiga Iya kita ngumul bertiga terus ketemu eh apa yang baru nih kontainer query kontainer query berul ya tiap minggu gitu Ken kita

9:59ketemu dan kontener query itu baru 1 hari jadi H plus one gitu H plus one eh kita langsung bahas kontener query

10:07bersama H dan ternyata Langsung nyambung dari sebelumnya kita kan jarang ketemu juga ya jarang ketemu yang bertiga

10:14kalaupun ketemu ya kayak basabasilah say ha engak k Emang pernah ketemu bertiga langsung Oh iya di itu ya di acaranya

10:23web UNC bukan oh iya we UN Iya betul I basa-basi doang nah cuma ternyata ngobrolin web ini kontainer query dan

10:32ternyata semua browser eh semua browser Major sudah support Ya sudah sudah keajaiban alam eh media query eh

10:42Sebelumnya kan kita baru punya media query hanya berdasarkan size ire si Iya sekarang berdasarkan kontainernya ukuran kontainer atau elemen yang berada enggak

10:54harus immediate parent pokoknya Eh tapi ya harus eh harus enggak sih kayaknya harus gak gak harused parent tapi sesuai

11:03harus ini ya berarti ya kata kuncinya ya Nah kenapa tuh ada udah ada media query Tapi kenapa harus ada perlu ada lagi

11:12kontainer query itu karena ya kembali lagi karena layout sekarang kan makin Kompleks ya makin kompleks dan belum tentu e ukuran screen

11:27size kalau kita misalnya Mik in e blok ya blok blok blok dan ada satu blok misalnya sideb sideb itu hanya bisa

11:35mungkin e elemen yang dalam sidebar itu ukuran ukuran elemennya kan tergantung sama parentnya yaitu sidebnya kan Tapi

11:45kalau misalnya screennya naik turun kan misalnya saat screennya mengecil tentu side barnya turun dan mungkin bentuk ukuran side barnya membesar sedangkan

11:54ukuran viewpnya mengecil Nah kalau kita menggunakan k kita enggak perlu repot lagi gitu Jadi hanya tidak peduli viewpnya berapa kita

12:05hanya peduli dengan kontainer parentnya berapa jadi lebih mempermudah hidup si front end lebih fleksib Heeh Enggak banyak apa properti-properti atau kan eh

12:19Jadi kan sebetulnya prinsip responsif Itu kan mungkin Eh kalau sekilas orang suka salah paham ya responsif cuma Apa

12:26dikira ukuran viewport aja tapi kan responsif itu banyak termasuk ya Eh misalnya di luar ini ada light mode Dark

12:33mode ada orientation ngadap mana Nah termasuk eh bukan viewport tapi kontainernya jadi ya kayak contoh sidebar tadi bisa aja apa dibukanya di

12:43iMac atau apalah yang besar banget tapi eh suatu komponen itu munculnya di sidebar Nah kan enggak lucu kalau

12:51ditampilinnya besar banget karena yang perlu menyesuaikan ke parentnya yaitu si sidebar yang kecil itu Jadi sebetulnya sih kelanjutan dari prinsip responsif

13:01ini berguna banget buat Kalau kayak wujud ya ini contohnya di video ini kalau pakai media query setengah mati

13:09wiinnya banyak banget ini kondisionalnya to be honest kalau enggak pakai container query maksudnya kalau enggak pakai container

13:17query Oh Pak Med dia kalalin pakai javascript bisa aja kita apa Calculate kan harus query selector dokumen query

13:25selector ambil wi-nya baru di di kalkulasi diassign kuas Mana yang mau dipakai pakai pakai ini namanya apa

13:34namanya ada eh ada helper toolnya ya resver apa e eh Res reserver apa istilahnya apa tuh jadi kontainer ini kalau untuk

13:52ehverserver reses observer Iya observer nah oh js-nya iya i eh ininya api-nya Res ap I api Iya jadi harus ee apa

14:04namanya kayak ngecek kalau misalnya orientation Berubah kan pakai resess observer H kalau reak tuh ada hooknya malah

14:14sampai kok gua ma jadi resolver resolver Cris observer ya ada rnya ada vernya iya nah kalau pakai

14:29tinggal buat pakai add container seperti itu dan semua browser sudah support sudah masuk baseline si belum Ini add

14:35container masuk Basel Ya enggak tahu dua versi terakhir atau belum Yang ini ya berarti ya Yang Iya

14:43heeh coba zoom in zoom in Oh yang di zooom in ininya bukan apa namanya mana dia harus diklik dulu berarti di atas

14:53atas n select dulu ini ya Heeh coba Zoom Zoom enggak bisa Oh gak bisaom itunya e apa yang besar

15:07Arnya gak ngaruhnya nihennya kita klik aja coba ini dizoom ini diclose bisa gaknya diose itunya JS javascriptnya aja diiz ke

15:24kanan nahudah ini ya ya iya ya itu kalau kontainernya lebih besar kontainernya lebih besar atau sama dengan 400 wait wait wait wait bacanya

15:36dari atas dulu defaultnya gak nak benar yang tadi yang tadi yang tadi bawahit defaultnya Which is mobile ya

15:49mobilenya begitu begitu mulai naik dari 400 Which is kenanya ke tablet ya kena itu terus di atas 600 kenanya yang

16:03bawah lagi Hm Oke berarti mirip-mirip ktainer query juga cuman ini bukan media query mirip media mirip-mirip media

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

16:22parentnyaent ada kan biasanya kalau dari Sas itu kan MQ MQ E ini kan sor yang dia e apa namanya packageennya untuk

16:35eh mixingnya namanya MQ jadi sampaial mix custom mixnya Iya MQ itu ada ada packagenya jadi sudahfine itu biasanya dari dokumentasi awal sudah

16:50define Oke target kita untuk e biasanya small Iya sudah ditargetkan UN medium terus kemudian tablet segala macam sudah

17:05sudah ada break pos Nah sudah ada break posnya jadi E itu targetnya media media query sedangkan Nanti kalau sudah pakai

17:14ktainer query sudah berkurang eh penggunaan media query karena kita bisa langsung targetkan eh ktainernya oke nah gimana kalau enggak support

17:26Browser yang enggak support eh itu untungnya Maksudnya semua teknologi web platform itu dibikin eh nonbreaking jadi ya kalau browsernya enggak support eh ya

17:38Apa style style yang diapply ya yang di atas itu yang gre auto auto auto Iya heeh gitu doang Maksudnya enggak akan

17:45rusak cuma ya apa tampilannya Al kadernya lah enggak error kecuali H waktu itu bikin eror H bikin error di

17:57di Firefox ya nanti kita bahas sebelumnya sebelumnya sekarang sekarang sudah stabil sekarang sudah stabil sebelumnya I Oh itu berarti ya

18:10bukan nah udah ada pluginnya juga l ini Coba buka dari Link jadi ini makanya t Tadi bahas apa bahas SS library Jadi

18:22kita tetap perlu tahu yang baru-baru kayak gini biar kalau to kita pakaibrary atau frame eh dan ada pluginnya nah

18:30kalau kita enggak tahu tadi tentang container query dan ggak tahu Cara pakainya kita enggak bakal pakai ini

18:34juga kan ini apa ber ada enggak Twin Twin layer Ada enggak sih ini plugin ya belum k plugin ya terpati pluginnya

18:43Enggak enggak Dar Iya e maksudnya plugin tambahan bukan terparti sor plugin tambahan kita kalau misalkan kita instal pertama kali

18:54kan dia enggak ada kanak ada biasanya biasanya jadi kalauudah ituudah sekitar du versi terakhir bakal di Jadi ceritanya

19:05ceritanya begini caranya biasanya Project open source saya enggak tahu soal Twin tetapi Project open source seperti di WordPress

19:14contohnya kalau misalnya ada suatu fitur dan itu bakal featureature fitur yang e akan masuk ke Core sebelum masuk ke

19:25Core dibikin plugin dulu saya lihat caranya ini sebelum dia sebelum dia stabil dia bikin dia dibuat sebagai plugin dulu yang bisa orang

19:37bebas OP in atau op nah suatu saat perkembangan rilis selanjutnya dia bakal Mer ke cornya nanti ya ke depannya gak

19:46perlu Instal lagi Jadi sebenarnya awalnya semuanya yang las las las ini yang untuk eksperimental dibuat sebagai plugin terlebih

19:56dahuluah kalautoh kasus contoh kasus yang kayak gitu itu dulu aspek rasio kan di CSS ada aspek rasio ya dulu banget

20:05itu detail berupa plugin ya plugin official setelah apa setelah ST setelah ST saat sekarang aspek rasionyaudah masuk yang jadi emang caranya Ang betul

20:23begituuu terak mungkin ya pemakaiannya basic ya jadi engak perlu Plin macam-macam tapi tetap aja ada NPM package sebenarnya Mas

20:33tetap aja NPM package makud Heeh Ya paling mungkin pakai pakai telwin yang lain yang enggak engakak enggak ngeh

20:42gitu enggak ngak benar benar benar misalkan pakai biasanya langsung loncat ke itu ke UI library Des UI atau pakai apa E flow bit

20:54gitu-gitu tapi enggak tahu di dalamnya dia pakai plugin e t sendiri atau enggak gitu e nah tuh Scroll ke bawah ada contohnya

21:06Ini ya nah jadi sebetulnya ya itu eh di awal kita juga Ah bilang enggak wajib wnya jangan sampai bergantung ke beginian

21:14tapi misalnya kita apa praktiknya ya tim kita semua udah pakai tawin terus kita pengin Cepatlah e tinggal nulis kelas

21:22name ya bisa dipakai juga yang penting kan kita tahu cara kerjanya enggak tiba-tiba bingung apaan nih ada add add

21:29container dalamnya ada add large eh tik2 underl berarti eh yang at large ini akan mengikuti ukuran si kontainer ini

21:40seberapa besar atau seberapa kecil G bukan jika kontainernya large eh maka di isi si di yang Heeh di yang CH itu akan

21:49dikasih garis bawah Tuh kan ada keterangannya tuh when the container is larger than bla bla bla nah lar

21:55small-nya breakpnya itu pakai breakp tailwin Bawan tailwin atau yang bisa kita custom juga LG bisa dicom bisa

22:05dicustom tuh ada tulisnya tuh by default we provide container sizes dari XL sampai 7 XL Oke menarik menarik nah terus

22:16bawahnya tuh kan tadi kita bahas harus immediate parent atau enggak harus makudnya Harus apa ini elemen harus yang

22:23mau disyle harus langsung di dalamnya atau enggak Nah kalau tadi kan by default kita enggak perlu kasih nama

22:30karena apa langsung parent dan child-nya itu langsung tapi kalau misalnya mau ada lengkap satu misalnya lengkap lebih dari

22:37satu gitu enggak immediate parent Child harus dikasih nama Nah itu bisa kita kasih nama seperti itu snxsnya

22:48oke Bisa arbitrary container size lama-lama saya jadi pengikut aliran t ini emang sekarang belum sekarang tergantung Project saya

23:02enggak punya enggak punya preferensi oke Ya kan yang penting ngerti cara kerjanya justifikasi gitu justifikasi loh benar kan misalnya suatu saat

23:14tiba-tiba enggak boleh pakai telwin Ya udah enggak masalah ya aja biasa leh tepatnya lebih tepatnya karena di posisi

23:21saya sekarang kalau misalnya ada yang berat-berat soal ee soal penentuan atau arsitektur untuk front endnya saya panggil orang yang panggil orang yang

23:34ini panggil orang yang lebih jagolong dong I set up dong tinggal bilang sama PMnya Saya butuh orang itu

23:42diesourcing e seminggu untuk beresin ini tinggal gituin Iya kalaug [Tertawa] delegasi-degasiahbang saya ngerjain bisa

23:58sebulan kali Enggak kelar itu fungsinya teamwork tapi harus ngerti karena e minimal kan Setelah dia selesai atau

24:12siapapun Project kan tetap dimaintain Masa cuma update sedikit harus ganti orang kan gak ya Jadi tetap harus

24:21mengerti Lagian kalau kita gak ngerti ya gawat juga mau pakaiwin mau pakai vanila atau apa misalnya contoh yang tadi kalau

24:29child-nya di misalnya harus di Eh suruh dipindahin nah dipindahin tapi parent-nya enggak dipindahin yang yang ada apa class name container query-nya

24:38Ya udah berantakan semua kan Iya yes betul kita lanjut l lanjut style container query Oh masih container query

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

24:59Oke sama sekali ya enggak tahu kalau suatu hari mereka tiba-tiba dapeting pencerahan ini tambah mirip bahasa pemrograman jadi yang di dalam itu style

25:13Apa metodnya style kan tuh itu kondisi berdasarkan CSS custom property atau yang kita sering tahunya CSS variab ya

25:23CSS variab atau CSS custom Property Heeh Gimana cara kerjanya ini jadi gini tuh eh contohnya Tuh add

25:32container sty kurung apa Dash Das rain.2 true nah style yang di dalam apa kontainer itu bakal diapply kalau target

25:43elemennya itu punya custom property Rain yang value-nya true t lah true ya entar juga ada contohnya [Musik]

25:53Nah coba kalau t tldr nya itu tadi mendeteksi keberadaan custom property di elemen yang ditargetkan ini yang ke efek yang ini

26:07yang R Heeh jadi eh apa lihat html-nya deh yang di kiriah Li list item Yang Pertama eh

26:18class card container style sama dengan atas atas up up up Oh iniah Kan ada styennya R tik

26:30eer keatnya itu jugatainer semua tapi yang style ada custom property R Nah jadi gak dipply kan Coba deh Gak cuma eh engak Tapi oh

26:49gak bisa ya harus [Musik] Ex yang punya anak pasti tahu yang punya anak pasti tahu jok bapak-bapak

27:08Oke berarti Wah semakin Kompleks ya he ya kayak pemrograman ya kan Iya benar Oh ini jadi satu blok sendiri di dalamnya ada eh

27:21enggak ya Iya kan Benar kan satu blok sendiri ya Iya query kan kontainer query kontainer query tapi kan kita tetap

27:28harus mentargetkan suatu selecttor tertentu kan Nah di sini selecttornya weather C kalau tanpa style Bisa enggak kalau tanpa Ini apa bagaimana cara

27:39membuat Ya dikasih id atau apa misalnya tuh yang perama dikasih kas Ya dikasih kas name ya CL name class name-nya C eh

27:47atau card dasd Rain nah cuma itu mah sama aja Iya Jadi ada kondisi ee apa kita nambahin pakai javascript gitu kali

28:00kalau misalkan datanya Rin pakai pakai kassas kan bisa juga sebenarnya cuman He Oh Kenapa butuh container style gitu ya

28:08E Jadi sebenarnya lebih mempersimpel aja ya Iya samaersimpal dari mananya ini malah ribet Kak apa mempersimpal html-nya tapi kompleksitasnya di CSS

28:24atau gimana lebih tepat itu Jadi mempersimp mempersimple kalau anggap aja ini si ktainer style ini sudah satu satu

28:35mixin sendiri satu blok yang unit ya satu unit gitu dan untuk mentargetkannya itu hanya kayak ngasih style apa gitu

28:44misalnya E Das makudnya ini kan contohnya Rain E dan ini custom property kan sebenarnya kan jadi apapun custom

28:52propertynya bisa e anggap aja custom property D atau custom Property like atau dan mungkin accessibility juga custom property untuk accessibility juga

29:04bisa ditargetkan kan Atau mungkin kita udah pakai custom propertynya untuk hal lain mungkin misalnya data visualization apalah kan

29:13banyak tuh misalnya bar chart atau apa Eh value-vue-nya ya Sekarang kan udah mulai banyak yang pakai eh apa custom

29:21properti Nah itu kan kayak mumpung itu udah ada nah bisa lebih jauh lagi di adjust stylingnya Eh pakai CSS dengan

29:30mentargetkan si custom property itu Oh tapi ya jangan senang dulu karena eh browser selain premium masih belum I ini

29:39Kayaknya masih ini ya masih belum ya masih belum di tapi ya masih ada kans ke depannya ya mungkin bisa enggak tahu

29:472024 2025 2026 ini ini status baselinenya masih Orange ya kuning Heeh belum hijau Eh tadi Kalau yang si apa container query

30:01size eh itunya apa hijau eh biruor biru Wah udah centang itu maksudnya Berarti udah support du versi terakhir apa ya udah

30:13udah stabil lah ya udah bisa siap Sudah Basel sudah baseline Oh udah hampir 1 tahun umurnya tuh tuh ada di paragraf

30:21pertama container queries menjadi stabil di seluruh browser di Valentine day di itu kan 2023 berarti 2024 besok nih

30:32setahun gila ya sudah setahun cuma masih banyak yang belum tahu betul ini baru style dengan eh custom properti Nah kalau kita mau

30:45main kondisi bisa kayak gini juga Nah benar jadi bahasa pemrograman ya in future versions belum Sekarang belum Oh

30:54belum Ya nantinya ya ke depannya ya nah cuma itu makanya kelihatannya bakal ke arah data visualization gitu sih Kan

31:02yang ada angka biasanya yang ada valuevue angka eh chart chartan atau apalah dashboard dashboard widget widget gitu

31:12Paling I benar benar benar kalau angkanya tinggi jadi hijau atau apalah jadi merah Oh iya i sense dan lain-lain

31:21Ya lanjut H nah ini yang salah sat diomongin e udah udah support juga udah biru berarti sudahudah

31:32aman y k eh ini apa eh problem yang mau di ini dulu saya eh apa namanya pernah biasa ya

31:44pengetahuan seorang yang non ahli CSS gimana sih Saya mau ng-estyle parent tetapi berdasarkan value yang ada di

31:52child-nya tu gimana gitu gimana Enggak susah gitu Saya mau ngerubah Child eh saya ngerubah karena di di CH

32:01elementennya itu e apa namanya ada value anggap ya Eh border ya border itu bordernya itu nempel di parent di

32:12container parent tetapi di ee bordernya itu merah kalau sebenarnya nilai saya di dalam itu error atau invalid eror atau ya itu

32:25gimana caranya akhirnya ya harus pakai server rendering yang dikasih Kalau value-nya rendah saya tambahkan di templatingnya ya Iya error

32:36class Kalau sekarang enggak perlu Jadi kalau misalnya di dalam e di dalam elemen itu ada error message otomatis

32:46parentnya menjadi warna backgroundnya warna merah contohnya itu bisa Jadi kalau cardnya punya error message jadi merah kalau kalau di sini contohnya

32:57kalau cardnya punya image jadi Purple Heeh Nah jadi ini selecttor yang ibaratnya ngelawan kadrat lah ngawan kadrat CSS kan jadi kan CSS itu kan

33:08diproses sama layout engine pakai CSS object model Ya semua kan dibaca dari atas ke bawah makanya alasannya dari

33:15kalau CSS lama sebelum has parent bisa ng-estyle child-nya terus sibling apa yang eh apa elemen yang setara sibling

33:25kayak kakak gitu yang muncul pertama bisa eh ng-estyle eh selecttor eh elemen setelahnya bisa ng-estyling adiknya Tapi

33:33dibalik enggak bisa anak enggak bisa ngestyle orang tua Terus apa sibling Elements adik enggak bisa ngestyle kakaknya atau yang berada di atasnya

33:41dulu sebelum H nah H ini ya memungkinkan eh itu tadi kebalik titik dua H ini apa Istilahnya

33:52ya kalau Shadow elemen kan pakai n kayaknya strtur doang deh ada istilahnya engak sih iya kalau Sud basanya yang dua

34:04kan kalau seperti sama kayak Child juga kan Child juga sama kan caranya Oh iya nth Child ya i ya

34:15Heeh Jadi kalau ini Ini bacanya gimana kita kena kita kena spamentar basmi basmi spam dulu kena spam oh

34:27f f jualan kpto udah ada yang spam Heeh naik level kita sudah ada yang spam sunb sunbardbnya dimatiin gara-gara tadi

34:43trouble mic Kayaknya ada pengaruh di situ bisa diband kalau diband Tuh hilang ya kayaknya baru pernah ya kita biarin aja

34:59ya biarin Hah bangga diband lah pengin pengin lihat Oh diband 70 episode baru pernah Kena apa spam spamot sekarang wah

35:1071 malah semua ye pencapaian ya oke nah Ini bacanya gimana nih ee Ini card kan iya terus kalau card Punya card

35:25media yang atas kan enggak di dalamnyaard ada kard media Heeh yang atas kan enggak ada ya Mak maka dia akan

35:34menjadi colornya 6300 FF ini yang adalah Ungu ya Coba bikin aja dbk Purple gitu Oh iya sama aja

35:43Ungu beres beres apa sih jadi warna apa hijau hijau oh oh iya jadi dia akan mencari card

35:55media ya kard medianya yang ini Oh ya luah aja card media itu jadi card medias gitu tambah s

36:05Nah jadi tap warnanya sama Kena enggak kena ya oh oke dia carinya berarti berdasarkan Oh bisa apa aja kan kalau

36:15IMG Bisa kan Bisa bisa kayak selecttor dia kayak selektoror biasa Selor CSS dalamnya ya selecttor CSS jadi enggak

36:24mestis enggak mesti ini ya bisa class name ya bisa Apapun lah bisa ID name bisa elemen ya i ya oke oke oke

36:33Bisa pakai itu juga misalnya mau bikin kayak eh selecttor yang contohnya do media tapi langsung Pana apa gitu bisa

36:43spesifik juga kok H ee ya bisa spesifik bisa intinya CSnya selecttor dalam itu sebuah selecttor aja luar dalam luar dalam selecttor

36:56semua ini ada pertanyaan dan bisa dibuat dan bisa dibuat has not juga dibuat kebalikannya has not Oh

37:06kalau tidak punya atau kalau tidak berisi bla bla bla kasih sty ini i bisa dibine ini ada pertanyaan dari yang

37:17namanya sama sama saya R bedanya selorwin sama yang dibahas sekarang apa gak ada bedanyawin C juga itu kan cuma class name jadi apa

37:28selecttor tailwin ya berupa class name misalnya apalah m myy-4 Nah tailwin itu menganut pendekatan Atomic utility CSS ya utility class

37:42first ya H jadi satu properti CSS koresponnya ke satu telwin Class name contoh tadi misalnya m m margin gitu m

37:54eh CSS property-nya margin terus dibuat abstraksinya dalam library tailwin berupa class name eh m-4 itu CSS biasanya margin

38:06ti21 Rem jadi ya Eh itu kayak abstraksi aja sih Isinya ya sama CSS biasa juga Iya ujung-ujungnya ke CSS

38:17juga tapi istilah selector diilwin juga sama sama istilah selecttor di CSS kan ya enggak ada beda sama kan itu Kel name

38:26aja kan CL name my4 atau m M4 dan lain-lain ini contoh-contohnya niat banget ya bikinnya ya Iya makanya bagus

38:37senang lihatnya kalau kita kayaknya ini bikin satuik Conto yang ngebikin satu halaman ini kayak kerja tim berapa hari gitu Iya

38:49iniang kerja dia itu ya Iya bikin Conto enak ya k sebulan sendiri untuk Bik satu halaman ini kayaknya ya ya terus lebih

38:59ke apa dapat ada ilustrasi-ilustrasinya iya ilustrasinya terus mikir apa ya kayak estetika warna gua pun yang front end yang sefront end

39:08front end-nya tetap aja bikin contoh merah hijau warnanya tabrak lari yang kan yang penting jelas makudnya eh yang

39:14ditunjukin apa biasanya malah makin jelek makin makin senang karena makin jelas kan nunjukin Oh kalau kayak gini e

39:21kalau case-nya begini jadi munculnya begini orang uiux-nya yang hm cek cek c tuh ada komen dari Mas Abdul

39:30Malik tuh kayak ngecek k Ius sudah dis-support banyak apa nih eh H ya Oh iya h iya ini apaagi le hover hover ini sudah

39:44lama ya ya itu selector Hah hover hover mah dari dulu Oh iya plusnya atau hovernya ini artinya Li elemen Li punya

39:55punya presidented bukan punya saudara saudara apa Iya punya Iya sibling setelahnya kan tambah itu e buat sibling yang di bawahnya bawa

40:05e sibling setelahnya lagi di hover Oh Nah makanya itu itu kayak dok Coba aja hover kan Coba hover salah satu ini kan

40:13ini kan Nah kan yang samping-sampingnya ikut di style kan iya iya oh iya agak besar sedikit nah selama ini kita kan

40:23gampang ngest yang kanannya yang kanannya ya itu tinggal selecttor apa tanda tambah aja nah ngestyle yang kirinya gimana dulu gak bisa kan kalau

40:32enggak pakai apa javascript sekarang bisa fish Oh itu namanya efek fish ya mikirnya efek apa do eh OS doos do

40:50Oke next update media kalau ini baru tahu baru lihat sekarang ini give you a way to add to refresh rate of device Oh ini gua

41:04gak tahagi belum pernah lihat dan tiba-tiba out of Nowhere semua browser sudahah support semua udah dukung apa sih ini engak pernah ada yang

41:16ngomongin ini juga sih Ya itu refresh rate jadi bisa smooth banget kalau handphone kita sudah atau device kita sudah mendukung

41:28e refresh rate yang tinggi bisa mungkin slow atau eh atau nan bahkan kalau e device kita low

41:39enggak bisa animasi Iya contohnya misalnya kita buka pakai e reader pakai kindle kindle itu kan yang pixel-pixel

41:47gitu kan ini He kalau slow gimana lebih rapat rapet ya kalau non Enggak bisa ya kalau non Enggak bisa Oh kalau slow E apa ya

42:01udah frame-nya lebih sedikit jadi frame-nya ya udah cuma e lihat kiri atau kanan Nah kalau fast kan bisa dibikin

42:09Heeh Gimana caranya Kok bisa sih ya kalau standar kan 60 60 FPS kan render render render render ya standar t pakai

42:22Oh bubelnya sih enggak usah perlu dihat karena kayaknya itu cuma buat ngatur ngatur ininya ngatur html-nya perlu wih ini keren

42:33html-nya svg doang weh itu pakai view Transition enggak ktainer qu container queries plus view Transition gila keren

42:43kita jadi lihat animasi di mana-mana layer demo support nih layer ini apa ayo nah yang kemarin itu

42:52kan ya kita enggak jawab juga sih kita bah kita belum tahu sampai saat ini masih bingung demo support mana dia

43:00media ini ya oh bukan bukan mana atas kayaknya deh atas Oh ini atas nah eh bukan itu scriptnya jangan enggak ada

43:15media querynya gak ada di sini ini Oh itu speed speednya dari mana tuh Coba ke atas deh vari E value speed speed sama

43:27dengan fast speed sama fast kan pilihan di sini Oh iya kalau kita pilih I Nah terus si ss-nya mana Iya mana apa jangan

43:38yang di html coba diintip enggak ada Jadi gimana nah masih misteri Iya dibuka dokumentasinya coba ke bawah learn more about media

43:55update zoom in ehah itu ada media querynya add media kok di demo tadi ini kan ada tadi

44:09kayaknya di demo ada ya ada tadi media Kita kirain media query padahal ya media query cuma update media

44:18media query untuk update bu bukan mana lagi iya ya Mana Iya mana Gimana sih ini demonya masih

44:32misteri satu doang lagi kalau di JS memang ada media dia Siapa tahu dia set media media engak ada enggak ada enggak

44:49ada Wah penipuan nih penipuan I pokoknya bentuknya kayak gitu Oh apa jangan-jangan yang ini enggak pakai sebelumnya begitu Gitu enggak ya

45:02Mana dia tadi loh gak ada ini update media he update oh coba slow deh pencet

45:20slow css-nya ada yang ditambahin engak di sini ya I CSS eh salah nih terus slow enggak lah

45:34engak berubah ya enggak bisa di Oh iya k gak bisa ya Nah ini masih misteri misteri lagi

45:45nih gara-gara ini layer ni dia pakai layer jadi misteri di man ya ini media updateennya juga misteri udah kita

45:54tabung aja entar kita bikin bikin edisi remedian misteri CSS misteri membedah demo iya ya di contohnya Beda Soalnya langsung

46:09media update fast media update slow tapi enggak working juga kalau misalnya di demonya enggak ada demonya juga enggak

46:17working kalau misalnya mungkin karena saya Pak Lain nih di ma yang lain nih yang dari dokumentasinya layer

46:24demo terus terus itu ada kalau itu ada media update fast Heeh kalau yang tadi yang e di CS rap itu engak ada kalau

46:33fast kalau slow ya kalau slow Iya lebih slow kurang halus Kalau Non I enggak enggak berubah Enggak berubah kalau slow eh

46:50slow enggak bisa slow enggak bisa kalau fes tadi tadi bisa nah ini F slow tadi enggak bisa ya

47:03slow tuh enggak bisa slow apa janj ada contoh lagi di bawah Oh enggak ada media update slow Oh udah ada slow di

47:12sini di sini F aja slow ada di sini Canvas texs-nya 11 pikel ini berarti masuk yang F Fali

47:28Ya iya lah soalnya ini kan bukanya di browser iya iya ya besok coba tes buka di kindle Oh harus pakai itu oh mungkin

47:39mungkin gara-gara itu dia bikinnya ini yang simulasi aja Jadi sebenarnya enggak dipakai Oh gu cuma cuma tampilannya kayak gitu Oh iya

47:49yailannya seperti itu mungkin ya contoh doang I mungkin i misstery solve Entar dulu belum tahu oke lanjut nah ini yang

48:01lebih berguna eh tap makud supportnya supportnya udah full ya ternyata ya Iya full ya itu tadi magically kita enggak

48:09pernah dengar kayak jarang ada orang yang bahas tiba-tiba semua browser sudah support aja nah ini juga tiba-tiba semua

48:17browser udah support aja sudah Heeh Ini sen Safari Safari versinya rendah sekali ya Yang lain udah 100an

48:26dia masih 17 karena Safari kan setahun sekali bareng sama update e osx Heeh Ini apa sih Iya nestate nestate CSS

48:39itu salah satu juga yang di update di tahun ini ya Heeh tahun lalu Oh iya tahun lalu 2002 2023 Masih berasa 2023

48:49Terus enaknya bisa di apa bisa di colaps expand itu loh kalau di eh po editor w ya Jadi bisa Di bisa lebih fokus

49:00ya descripting media query can be used to check whether or not javascript is available This is very nice for

49:09progressive enhancement before this media query strategy is if for detec javascript no JS begitu Loading javascriptnya diemove apa

49:22classlistreove body.cllist.remove ini cuma ngedetect itu Ya lumayan ya jadi mudah pakai CSS bisa ngdetect itu I lebih

49:34rapi Inya ya itu scripting enak ya ini beneran kayak if kan kayak if apa kurung bla bla bla ya

49:47kita tulis aja kondisinya conditionnya ini kalau kalau javascripnya di dia akan capacity-nya nol yang ini kan heeh enggak ada uapnya

49:58Iya kalau misalkan ee enable maka ini muncul uapnya Oh gitu layer lagi penasaran sama layer kalau dihapus Gimana Enggak ngaruh Oh

50:14ngaruh Iya enggak bisa ngaruhlah Kirain enggak Ngaru Oke ee lanjut kita ke sebenarnya hal yang simpel hal yang simpel tapi kayak apa ya

50:29ngurangin ketergantungan javascript sama lebih rapi ya penggunaannya gimana apa ya rata-rata kita pakai no JS itu ya

50:37kalau misalnya E No js-nya masih ada kita kasih message gitu ya rata-rata sih begitu ya please enable javascript atau

50:48itu loh misalnya tampilan yang eh dibukanya harusck here to ral yang ada togtog ini itu kalau misal enggak ada

50:55javascript Ya udah dijbrank aja di dalam card kan bisa enggak CSS ngdetect itu add blocker seru tuh kan apa detect blockers

51:09jadi scripting atau add blocker media query C main kucing-kucingan nanti diganti lagi sama si e apa add blockernya terus

51:22aja kalau sebaliknya pernah eh apa kalau lupa deh kalau class name CSS class name bla bla bla ada add eh Dash bla bla bla

51:36itu di beberapa extension add blocker dianggap iklan kena blokir pernah dong enggak sengaja kayak gitu sering jadi

51:44itu cara ngdetect add blocker juga begitu misalnya kayak ada eh apa namanya kayak dumy javascript yang mengandung kata

51:54atau apa gitu akan ngeblok Jadi kalau misalnya dia ada add blocker dia muncul anti add blocker contohnya gitu keluar

52:02pop itu bener kucing kucing-kucingan Iya kucing-kucingan betul ya Jadi ini salah satu cara untuk mendeteksi javascript e di enable atau

52:14disable nah pertanyaannya ya ini m pertanya penting kopi tadi itu logonya Java bukan sih bukan ya logonya Java

52:22kayak gitu kan mirip ya lanjut ya Oh teman-teman di sini Berapa orang yang mable javascript di browser

52:40kayaknya testing karena make kalau misalnya javascriptnya dimatiin yaamanya Gak boleh rusakak browsowud javascript tapi ya tetap

52:57pengin ngetes eh kontennya terrender atau enggak apa ya sama mungkin kalau kalau user user beneran mungkin orang-orang

53:07yang kayak privacy minded gitu ya terutama di luar neg kalau di Indonesia sih enggak terlalu tapi ya mungkin ada i

53:15i benar Mungkin ada yang masih menggunakan apa links sebagai browser itu javpnyaap naator ya G enggak jalan

53:29lah orang di terminal Tex base Kok iya oke lanjut reduce transparansy media query Oh ini masih ada hubungan

53:40sama media query ya cuman ini masih orange masih responsif kan Iya e Firefox masih Bendera Kuning e Safari belum ada

53:50yang meninggal Ya ampun Bendera Kuning bendera bendera orange apa orange ya orange kontrasnya jelek ya heehak Kelihatan ini juga Orange ya Non op

54:01interface can use head or vis struggle forici jadi ini aksesibilitas ya untuk apa eh kelainan Apa fungsi mata fungsi

54:17mata [Musik] ehucear from theu

54:34jadi dia mengikuti prerensi dari settingan kitaang udah ada ya di OS mana gitu yang udah adaak tah Coba ya kalau rtion kan Ang di ya di

54:52windowsudah ada di macos jugaud tahu ada ada ada ini Redu R Trans Redu transparansi sama baru tahu

55:03juga Oh kalau di maksudnya dari OSnya ada gitu kah kalau di Windows ada transparency effecteknya ada On atau Off

55:11tapi kalau kita cari accessibility enggak tahu ya accessibility Enggak ada enggak ada kalau di Maos rasanya ada deh kayak

55:25kayaknya di bagianibility Engak enggak pernah lihat belum belum lihat ya mungkin ke depannya bakal ada di sini udah dia sebut kan di sini

55:37kan remove transfer UI Oh iya udah ada berarti Heeh kita aja engak pernah lihat karena Maksudnya kita kita enggak

55:46ngalamin gangguan pandangan yang kayak gitu mudah-mudahan atau belum bukan belum di belum jadi belum jadi Oh iya ada loh belum

55:57masuk lighth coba mas Riza ya ini silakan Share screen Ma bukan Oh enggak enggak di Mac Siapa yang mau share

56:06screenan saya bisa nih Eh saya lagi caranya gimana Oh ini ini entire application window entire entire gak gak application window kelihatan

56:17enggak diumputin dulu yang perlu diimputin terlihat terlihat tuh ada INF Oh iya W kontras ini bagan display

56:28accessibility benar kanity Dis display Iya ada Invert color R motion Inc contrast transpareny Oh iya ada ada Baru tahu klik jadi apa ya Oh jadi

56:44aneh jadi gelap eh jadi hilang jadi ggak pakai transparansi kan Iya jadi dia op full e op kontras Iya maksudnya kalau

56:56background-nya abu-abu ya abu-abu kalau misalnya transparansi kan itu kayak kebawa ee apa wallpaper di belakangnya kan Oh iya

57:05betul iya oh iya jadi mainan jadi mainan bisa bisa bisa kelihatan kalau saya share eh whole entire screen Oh gitu ar ar tapi

57:20sayangnya Android gah belum ada ya belum coba coba saya sudah oke Google Iya Google Google kelihatan ya ini kelihatan

57:29ya Ada ada belakangnya kan Iya heeh ini STT ini estt buat keindahan cuma kalau misalnya ada klik tuh hilang abuabu

57:39sudah enggak transparan lagi apa istil tapi kan jadi lebih jelas ya background blur ya jadi backgroundnya diblur agak

57:46ngblur gitu kan iya he Heeh efek apa lensa ya Iya secara estetika bagus tapi mungkin kan kalau misalnya yang ada masalah

57:58pandangan atau apa itu kan sebenarnya ngaruh kan maksudnya bikin itu ngaruhin kontras juga kan bikin masa background-nya yang harusnya abu-abu

58:05gelap jadi ada putih-putihnya karena tadi apa gambar langit atau gambar apalah tadi laut Iya e mungkin background atau wallpaper-nya enggak

58:15sesuai biasanya biasanya untuk ini nih paling sering di card depannya card belakangnya Hero terus ada cardnya mungkin sign in sign up gitu kan Eh di

58:30tengah gini ya sign in sign up gitu yang kita bikin estetika bagus ya Kita kasih opacity sehingga apapun backgroundnya si

58:39depannya ini backgroundnya biasanya ada gradien-gradien ya kan yang ngetren biasanya biasanya sunset sunset lah Sunset gitu ya terus atau yang abstrak

58:48kan suka gradien depannya 90% opacitynya udah standar terus kelihatan kan Nah berarti kalau kita reduce transparansi kayak gitu harus udah putih aja

58:59maksudnya apa ya apa kontras kontras Iya background dan teks enggak kepikiran loh baru baru baru tahu sekarang he belum

59:09jadi standar ini soalnya maksudnya standar check aksibilityibility check yang saya pakai belum belum pakai makanya baru tahu apa belum masuk

59:21extension kayak apa Axe itu loh a dan lain-lain mungkin tapi kalau fitur ini sudah ada ya berarti siap-siap aja

59:31next hari bakal bakal masuk kalau udah biru Ya baseline-nya sudah masuk baseline ya dan OS pun eh apa para

59:39pembuat OS udah menyadari bahwa itu fitur yang diinginkan sama user kan berarti itu ya valuable ya selesai untuk responsif Apakah kita

59:53akan masuk ke interaction Habisin aja hari ini habisin ya Habisin aja habisin tapi cepat-cepat aja besok besok bakal ada

1:00:04remedialnya view Transition kita gak usah bahas Ya udah lumayan sering ya Dan jugaudah bahas kemarin kemar ngomongin

1:00:13ini berapa kali ini kalau mau lebih lanjut Lihat videonya Eka di deves deves Bogor Ada kan Ada

1:00:22ya Bogor Iya ini juga Eh tapi belum semua ya Eh Firefox sama Safari belum Tapi udah itu udah ngasih eh apa hampir

1:00:35eh request for position mereka udah eh position-nya tuh Oke jadi eh belum belum berupa komitmen bakal langsung masukin

1:00:44ke browser Mereka cuma secara esensi eh mereka enggak masalah dengan apa api ini Hm berarti sudah setujuah kira-kira gitu

1:00:54ya Heeh Oke besar kemungkinan suatu hari bakal masuk browser lain iya tldr-nya iya udah diadaptasi sama framework-framework seperti SP Wah

1:01:05banyak banget e spellkit Astro NX kalau next masih unofficial sih tapi UD ada pluginnya sampai yang server

1:01:15side aja kayak Turbo heeh ada ada kalau di Framework ada cuma kalau di sini mah enggak harus bikin sendiri Iya Intinya

1:01:23kita bisa punya apa ya transisi antar page misalkan page A warnanya merah page B warnanya biru dia bisa

1:01:31ee kayak bertransformasi dari merah ke biru gitu ya Kay kayak SP tetap elemen Heeh jadi e sebetulnya view Transition

1:01:40itu ada dua level udah kayak makanan udah kayak penyetan cabe kan kayak makan pedas aja kan ada level-levelnya nah

1:01:48level 1 level 2 yang level 1 itu masih yang CLI side yang buat spa jadi apa antar elemen lah jadi e Apun itu

1:01:57elemennya terserah mau kayak gini ini kan cuma ngrender sebenarnya Cuma ngrender svg yang berbeda-beda kan kalau kita klik svg-nya dirender Udah gitu

1:02:07doang jadi Apun elemen Apun eh Jadi kayak mengconnect antara eh state atau kondisi UI sebelum dan sesudah nah terus

1:02:17dibuat transisinya kita yang mefine animasinya Seperti apa Nah terus perkara ngumpetin dan kan sebenarnya Anim transisi itu kan terdiri dari dua aspek

1:02:28kan before after Terus eh apa style animasinya Seperti apa nah eh mengorchestrate before afternya itu dihandle sama Vi Transition nah ini yang

1:02:40dan itu fully fully CSS kan eh css-nya bahkan optional jadi apa cuma javascript eh start Transition jadi karena ini kan

1:02:50masih yang level S ya c jadi misalnya kita eh apa eh yaitu show hide eh menampilkan suatu elemen kita ngeklik

1:03:00terus kita start view Transition Ya udah itu langsung dihandle nah cssnya Buat apa css-nya Buat eh style animasinya

1:03:11keyfame-nya oh berarti dia lebih ke api javascriptnya ya berarti ya Iya tapi native javascript dan kalau dulu

1:03:20sebelumnya Eh kalau javascript yang masih workar akal kan sebetulnya itu eh di javascript kita harus menduplicate atau meng-copy elemennya diumpetin

1:03:32misalnya opacity-nya dinolin biar waktu elemen aslinya hilang itu masih ada terus dianimate e javascript ke eh state yang dari before

1:03:43ke after habis itu baru dihapus lagi nah kalau ini enggak usah Ya udah kita pokoknya seperti biasa aja mau nge-hide

1:03:50show e elemen langsung cuma bisa kita harus manggil start view Transition itu ya harus panggil harus harus He Oh oke

1:04:01nah kalau yang level 2 yang belum nih level 2 itu yang antar halaman itu kelihatannya enggak usah di enggak perlu

1:04:09dipanggil dari javascript karena server site ya kan Eh tapi harus berada di Origin yang sama nah cuma level 2 ini

1:04:18sayangnya eh si apa webkit sama Firefox masih banyak ee banyak tanya-tanya masih banyak diskusi jadi seru sih kalau lihat

1:04:28itu kan semua terbuka ya apa eh di github Heeh kayak yang kita bahas kemarin itu enggak kelar-kelar udah yang

1:04:36level duanya ini yang salah satu di disayangkan sama Jack archibal itu ya yang view Transition enggak masuk

1:04:43interup 2024 benar enggak sih emang enggak masuk ya justru divting eh apa enggak masuk enggak masuk Oh enggak

1:04:51masuk ya ya lebih lama lagi dong I tahun depan Kalau enggak salah ya saya coba cari daripada saya

1:05:03hoax apa setahua sih yang e diting buat interop 2024 itu yang level 1ya eh kenapa Karena kan maksudnya Firefox dan

1:05:13Safari udah gimana saya saya saya Hoa eh yang disayangkan dia itu adalah yang navigation api Oh navigation api enggak

1:05:24masuk e apa namanya enggak masuk Inter Wah kayaknya Besok masesti bahas Inter 2024 kali seru Iya kayaknya bisa

1:05:36tuh apa Yang dimasukinting gimana gimana ternyata ternyata ada TW selanjutnya view Transition juga gak ikut saya Ben Coba

1:05:47klik aja a klik aja tter saya itu baah I lebih panjang lagi dong Ininya hah enggak pas Def kemarin itu

1:05:59itu masuk ke dalam slide yang dipotong biar biar masuk waktak kelihatan ya dia di bagianan kalauak login harus login ya

1:06:09harus Logi E ini saya kasih a url bawahnya Iya ini bentar Si El Pit ya E kalau misalnya enggak login semua

1:06:20fungsi-fungsi yang kayak apa sih manggil-manggil Kan biasanya ada rel tweet pokoknya reply apa reply trade dimatiin semua kayaknya lagi ngirit Vi

1:06:30Transition isn't being included either dia lebih lebih sedih kalau yang navigationnya lebih sedih yang tadi karena ini kan cuma buat progressive

1:06:42enhancement nah ini akhir tahun lalu banyak yang eh ng-vote view Transition karena pertimbangannya maksudnya kan eh Framework responnya bagus developer

1:06:52responnya bagus dan betul h firefoama we jugaudahak masalahudah bilang Oke jadi not masuk tapak masuk sed nextnya Mungkin kita bisa

1:07:06bahasah tren depan berarti begitu Trans ini sudah masuk berarti kita ketemu lagi nanti di Bali kita bahas akhirnya masuk

1:07:18g Oh jadiju yaer nextnya ada Vi view Transition dibali lagi Amin mudah-mudahan dapat ini lagi ya Kesempatan lagi buat semoga

1:07:32didengar sama mas Danang searang mas Danang Muncul lagi Iya dia lanjut lanjut kita berikutnya ke linear eing function ini e animasi ya

1:07:45Heeh animasi dan ternyata bukan kalau linear kan kita bayanginnya sama gitu yang kayak cuma kalau grafik Ya cuma

1:07:52begini Nah justru Ini bukan buat itu cuma enggak ngerti sih karena enggak terlalu kebiasaannya masih the linear

1:08:00function not to be confused with linear keyword allows you to create complex easing fun manle fun jadi itu kayak ada

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

1:08:17linear ituini doang speed untuk munculnya itu linear konstanst is Iya konstan ising Enggak ada e e out in kan

1:08:26biasa kan Kalau udah dekat dia melambat atau kalau dari awal dia lambat dulu baris kencang kan kalau ini langsung Z

1:08:32stabil gitu stabil I pertanyaannya stabil kan begini Ini kan lebih aneh maksudnya bouncingnya kalau is in e out

1:08:41kan jelas kan eh lebih cepatnya di awal atau di akhir lah kalau ini ada perhitungannya sendiri kan ini

1:08:48matematika stabil stabil enggak enggak enggak yang jarak antar titiknya lebih pendek itu lebih cepat Coba lihat deh Oh

1:08:56ya ini kan jaraknya jauh nih kan tuh jauh pelan dia pelan pelan cepat tuh I kan cepak kelihatan enggak kelihatan oke

1:09:07nah Ini ada pertanyaan dari saya ini brer supportnya udah support semua nih atau belum Udah semua tapi belum belum

1:09:15masuk baseline belum masuk bas 17 Titi du tuh Safari Oh baru banget Safari normalnya berapa coba aja cari sekarang browser

1:09:27today Enggak kan sekarang 17 jadi dia ngbas kalau udah dari 16 bahkan ini keluarnya tuh dari 17.2 kayak semacam

1:09:38patchnya buka buka browser Happy Nah sekarang 172 sekarangudah 1 tapi kan harusnya kalau dia biru nantiim artinya belum masuk

1:09:55Iya sudah udah mungkin sudah ini sudah stabil tapi belum masuk baseline Ya mungkin belum masuk ininya Basel kan ada

1:10:04baseline Tahun berapa belum masuk baseline 2023 Iya mkin nanti dua versi Major terakhir nih broser Happy oa gak termuk

1:10:18engak ada browser gak ada ya sekarang yang lagi naik down Vivaldi kan ya rata-rata pada dengar Vivaldi itu

1:10:29for Iya forbnya Opera saya kalian pada pakai browser apa sih fireefox Safari Chrome udah ya Thor lah kalau

1:10:45buat itu yang aneh-aneh Dark engak Dark juga [Tertawa] sih kalau di nya ya itu Firefox Safari Chrome doang gak pernah pakai semacam Ar

1:10:58atau Brave atau lain-lain Ini ar nih yang lagi ditampilin chromium ya kayaknya chromium bas Ar ya pada pakai

1:11:10browser nah tu lar I fungsinya apa ya ini kelihatnya kayak buat game atau apa ya yang grafik- kayak gini tuh nunjukin

1:11:26sesuatu atau ya game lah pastinya Ya jarang juga kita bikin-bikin kayak gini ya next Iya Maknya makud Bedanya

1:11:35apa sih misalnya cuma modal muncul mau is in is out user Emang ngebedain gitu Ada juga yang ngebedain

1:11:44tergantususus kalau misalkan kita bikin web untuk nampilin I sat video nah yang Mas Yohan bahas kemarin web Based video

1:11:53editor ya mungkin atau ini ini aja apa bikin slide bikin slide dia ada animasi transisinya kan heeh itu juga bisa he

1:12:04Oke kita lanjut dulu ya Scroll n Scroll ini kita bisa ngecek Apakah scrollnya udah sampai hampir akhir Udah mentok

1:12:12atau belum Udah mentok atau belum hampir mentok atau belum kan He enggak sih Eh sudah mentok apa belum sudah mentok atau

1:12:21belum oke ini juga javascript ternyata ya cuma dimasukinnya ke CSS Karena untuk UI nah sebelum ada SCR and event

1:12:33bentareterangannya sebel ada event kita harus pakateing

1:12:52belumak that understands whether a user is still me gesture or not Oh mendeteksi apa dia nge-scrollnya udah

1:13:00selesai atau belum gitu jarinya udah naik atau belum Iya iya ini javascript ya he Berarti html-nya kita keculinnya

1:13:10kita bisa nah ini Scroll bit fill ini belum Udah habis ya Scroll Scroll n oke Scroll on Scroll n Oh dia pakai on

1:13:26Scroll n ya Heeh on Scroll n itu progressive enhancement-nya itu Iya ini dicek dulu kan udah dukung apa belum

1:13:36terus udah langsung aja tambahin class has Scroll n jadi muncul yang yang pink ini Nah itu dari Has Scroll n kan ada

1:13:47t-rex-nya ada t-rex-nya mana txnya H Scroll n mana txnya generated dari javascript enggak itu kalau gak B Kalau

1:14:02enggak ada kalau enggak support if Scroll He Oh iya oke langsung ja ini to Nah itu to oke

1:14:19oke semakin seru ya jadi kalau mau bikin kayak paralx gitu bisa perroll gitu ya Sampai Akhir habis itu nanti ada

1:14:28misalkan eh click to top call to action ya daftarkan Submit your email BL bla and we will sell your email mcp up

1:14:37muncul pop up untuk paywall biasanya Heeh Oh iya dapatkan konten seperti ini hanya dengan r.700 r000 Senin harga naik Selasa

1:14:52ngobrolin web boleh tuh jadi baru Iya naik bisa bisa bisa bisa masuk masuk

1:15:08masuk nanti dicut Mas itu Tine kita yang baru Ben yang tadi saya maksud sebenarnya ini Scroll animation kayak paralx gitu

1:15:19Kanah I ini keren banget i iya oh dulu saya bikinnya ini yang di atas sama Jav bukan ya Eh I pakai javascript tapi yang

1:15:29kalau bisa discroll bukan ada kayak bar kita reading progress Saya pernah diminta bikin gituan dulu itu sempat

1:15:38ngetrend banget gara-gara medium dulu per e kayaknya pertama kali medium deh habis itu medium malah enggak pakai

1:15:44kayaknya sekarang cuma dulu kayaknya sempat ngetren lupa deh medium atau wordpress atau apa ya pokoknya dulu sempat ngetren gara-gara ada yang pakai

1:15:54Oh enggak pernah ya iya ya berarti medium pokoknya blogging platform Oh ini bisa dipakai untuk itu ya ada contohnya tuh contohnya lengkap

1:16:04banget coba deh buka di eh doc eh Scroll driven animation eh style nah ini yang bikin Kalau enggak

1:16:16salah Mas apa bramus eh dari defel Chrome Bram Mas Bram Mas Bram Kak kenal Oh wow keren sekali itu demo semua itu

1:16:29apa variasi-variasi penggunaannya cakep Wow tapi sebenarnya cakep tapi ini ngerusak mata walaupun bukan demonya demo harus tapi kalau misalnya di dunia nyata ya

1:16:47aksesibility jangan lupa ini jadi bikin kayak itu loh yang ingat enggak kalau si ee e Apple punya produk page kalau

1:16:56diroll terus dia banyak banyak an animasi Nah itu sepertinya mempermudah untuk bikin kayak gitu ya Heeh dan enggak harus pakai

1:17:09observer enggak pasang observer macam-macam yang custom karena stylingnya ditempelin di elemen itu sendiri kalau misalnya elemen itu masuk

1:17:21di layar nah di styling gimana Tapi sayang Firefox eh masih benderah orange dan Safar belum orang Safari malah masih masih eo

1:17:36Oke padahal yang paling butuh Apple ya bikin untuk page begitu ya dia egois dia mau bikin Pakai caranya sendiri kali

1:17:44jahat banget suzon suzon oke lanjut lagi divert ini enggak ngerti ini apaan apagi ini ini ada hubungannya sama

1:17:58Scroll animation terus CSS eh Oh ini kayak helper buaten making it limited to Scroll anestors

1:18:14only the Element need to be Animated is not a child of scroller but an element located in entirely different sub

1:18:24Apa ini maksudnya knya kayak buat eh ngedeteksi walaupun relasinya kan mungkin bisa nested nested beef ya kelihatannya Oh atau di luar nesting

1:18:36dipakainya soalnya itu tuh use case-nya karusel gimana gimana Eh karusel terus Timel Scope gallery Scroll El ada contohnya Enggak

1:18:51coba animation timeline ya itu with Timel Scope declare on the shar parent the Scroll timeline declared on

1:19:02scroller can be found by the Element That uses The Animation timeline ini kalau kita lihat demonya gimana

1:19:12nih javascript-nya enggak ada ini pure CSS ya kita bisa Scroll enggak ya enggak bisa scroll bisa ya oh bisa bisa Scroll pakai shift

1:19:26pakai shift Oh pakai shift maksudnya pencet shift Terus pencet e Mouse Scroll mouse-nya diroll Iya Scroll atas bawah itu jadi ke

1:19:40samping artinya Iya ke samping kalau pakai ini bukananya ada mouse-nya ada yang ini biasanya ada ada yang kiri

1:19:47kanan ada Tapi mous saya cuman ada atas bawah ohrollingnya Oh ada penjelasannya di sini nih ada penjelasannya tapi gak ada demonya buka

1:20:02deh private chat yang ini ada demonya tapi kurang kurang jelas penjelasannya ini ada ini bawahah ataskit

1:20:18zom nah iniingaca Uhang attaching to nonancestor Scroll timeline Nah kan jadi kalau by default eh apa tadi yang buat Scroll timeline

1:20:33itu cuma bisa buat ancestornya kayaknya mendeteksi dia eh apa elemennya ngroll in relation to parentnya entah itu body

1:20:42atau parent apa parent elem nah terus cuma ini kalau kasusnya karusel kan Eh misalnya apa Dot nya itu itu kan di luar

1:20:55di luar e kontainer buat slide-nya kelihatannya intinya sih untuk itu Nah itu timeline Scope sih pokoknya itu kan

1:21:02paragraf pertama e sering terjadi elemen yang perlu dianimasi bukan Bukannya si scrollernya itu bukannya si apa kalau

1:21:12misal karusel Kan Bukannya si tempat gambar-gambar karusel itu kan Nah jadi pakainya timeline Scope si bla bla bla

1:21:21itu intinya Timel SC oke oke karena belum biasa bingung ya Belum mendailnya lagi agak nangkap sih maksudnya apa cuman casnya mungkin ya

1:21:34sekilas udah paham cuma makudnya kalau suruh bikin ya bingung i gak tahu juga bingung juga juga ya kita lanjut lagi

1:21:42discreete property animation another new capabilityility to Animate discre animationre animation apa ya dulu kan gak bisa jadi sekarang bisa

1:21:58gitu wowak ada warna-warni gitu Ini bukan jadi hilang displ I ada danada dulu kan gak bisa dulu sudah ada Ada Dan Tiada lag

1:22:14isi isi adalah kos biasanya opacity ya balik layus Spin out Terus opacity Nol display n display n keyframe-nya f out F

1:22:32minus out yang ini kan iya he oke terus ada Spin and Delete nah Spin and delete ini transp filter Oh ini yang ininya ya

1:22:47apa E progressnya ya Iya frame-nya itu ada display non-nya juga kalau udah selesai display Iya kalau udah

1:22:56100% Terus tadi Eh elemennya apa loh l salah elemennya apa eh ininya discrp property animation display none content

1:23:08visibility Oh dia cuman ini ya kita jadi bisa menganimate display dulu kan belum bisa Allo discrete maksudnya tapi harus

1:23:16allow discrete gimana allow discrete coba disarch halo not found enggak

1:23:32Ada halo enggak ada ya ini demo misterius lagi enggak ada di sini enggak mungkin ha hah demo macam apa

1:23:51ini joba ya lagi

1:24:07ada ini perkaranya jadi bisa anerti displ atau ada properti khususakudah itu doang loh tapi caranya

1:24:25gimana di sini enggak ini juga tuh gimana caranya dia rotaterotate doang ada display non itu dihapus oh ini on

1:24:36cck kan ketika diklik Heeh dokumen delete ini maka ditambahin fade out I kan F out dan spin out dan spin out jadi

1:24:47ini Fed out dan spin Oke Fed out di sini kan Animate He iya Animate dot F out CL

1:24:56F out animationnya F out yang dibikin sendiri dari sini He nah itu ada display nnya Kayaknya cuma perkara bisa

1:25:04menganimate gara-gara ada displ jadi dia jadi keanimasi secara otomatis gitu ya ya Jadi bisa e display kan standarnya

1:25:16blok mungkin jadi blok kanan ya mungkin jadi hangus displnya dis nya kita hapus iyanya harusnya putarpar putar aja loh

1:25:28ya Coba e inspect inspect deh inspect elemen bisa ya Bisa dong kan Nah itu kan opacity-nya Nol

1:25:40tapi masih ada mana Tadi kayaknya keeselect deh tuh Nah itu tuh tuh tuh tuh tu tu tu

1:25:54tuh ada kan Nah sedangkan kalau ada display non-nya ya jadi hilang enggak ada lagi itu Iya katnya perkaranya cuma itu deh

1:26:03dulu display enggak bisa enggak bisa dimasukin keyframe sekarang jadi bisa Oh curiganya gitu Oh iya bisa jadi

1:26:15oke lanjut lanjut lanjuty apa lagi ini belum pernah lihat sty nah ini masih berkaitan sama tadi kayaknya animating to and

1:26:38from dia bisa tahu ketika elemennya belum dibuka Oh ini video yaak bisa Diak Oke kita lihat di sini ya Tapi

1:26:53harusnya unya juga begitu loh ke mana ini oh ini kita pakai ini aja Nah ini kan misalkan kalau kita klik

1:27:03dia akan animasi dulu sebelum tampil Heeh gitu kan heeh ini Click the button Open dialog Mana dia Ini dialognya

1:27:13dialognya Udah Na ya buttonnya Ada onccknya buttonnya ada Open dialognya ini onccknya show modal modal nya ini

1:27:22kan Terus yang jadi beda beda adalah transis ada display non Enggak tadi ada allow discrip Oh iya itu tu Akhirnya

1:27:40ketemu di dalam Transition dialog hal di screen hari Coba hapus all di

1:27:56scrip-nya eh bentar ini Trans iya iya nah I taruh Enggak loh kok tutup gitu enggak enggak enggak Engak enggak yang ini nih Iya dia

1:28:11kan dia kan exit state exit state-nya Heeh kalau hilang by default kalau hilang ya hilang aja kan enggak

1:28:18dianimate out kalau ini i gak bisa gak bisa Iya dia turun ke bawah tuh nah bawah itu

1:28:26dan enggak pakai javascript sama sekali js-nya kosong kos Wow keren ya keren tapi belum bisa di belum bisa di belum bisa diafari belum

1:28:37bisa diowser lain belum ada yang mau Firefox juga engak mau belum belum ya Ya lumayan lah lanjut overlay Wah sama nih

1:28:48statusnya new CSS overlay property can be Transition to enable Element with top layer Styles Oh iya Ini bagus deh udah

1:28:57pernah Eh lihat demonya Oh iya jadi jadi warnanya agak hitam itu ya yang overlay itu ya Kalau agak hitamnya pakai pakai

1:29:06CSS itu kita style pakai CSS tapi e ngaruh ke accessibility juga jadi tahu kan kalau kita e buka modal dialog kan

1:29:15belakangnya semua harus kita freeze kan harus enggak bisa disroll harus POnya enggak bisa diap enggak bisa interaksi

1:29:21Apun Kalau dulu kan harus pakai javascript ya buat apa kita harus ngeset itu manual Sekarang udah enggak dihandle

1:29:28sama CSS Eh sama apa html malah jadi ini unik sih sebenarnya ya kalau mau ditarget pakai CSS boleh tapi ini berupa

1:29:38e atribut html buka e mana

1:29:55dia overlay to hal discrete lagi Oh iya ini buat animasinya kali Iya ya buat apa E buat e

1:30:06muncul sama nah buat pasti closnya kan Mana html ya show entar mana ya action bar taruhnya di mana tulisannya gimana

1:30:20oh drop itu isolation mode tadi backop bukan Iya backdrop ini ya backdrop ya backdrop itu bagian dari e api-nya

1:30:34overlay jadi ada ada beberapa ya Ada beberapa Nah bentar dulu kayaknya ngihat demonya lebih jelas deh cuma lihat lihat

1:30:42di mana Lupa mana ya Iya besok-besok de ada komponen W masih ada komponen banyak Eh ini juga Besok bahas

1:30:59kapan-kapan Saya bahas Open UI aja kali ya ini kan Soalnya e apa sih Ada working group ya working group namanya Open UI

1:31:09untuk eh mereka itu dari itu asalnya dari berbagai vendor browser jadi tujuannya ya Ini buat memajukan apa ya

1:31:18web platform tapi pakai UI yang ya sesuai kebutuhan aplikasi modern lah J pop pop over ini pop over dan

1:31:27teman-temannya Kalau enggak salah termasuk eh hasil brainstorming si kelompok Open UI ini Nah mungkin besok-besok kita bahas kita bisa bahas

1:31:36Open UI termasuk include eh si pop over ini Oke siap nah terakhir masih ada ini ya masih

1:31:46ada satu ee bab lagi ya componen p kita cepetin aja dikit sih dikit cuman dikit kok pop over yang tadi

1:31:56ya pop over ya Heeh pop over Nanti aja Hah nanti ini powerover itu yang hamburger menu ini ya iya bukan Iya iya

1:32:05betulbetul jadi powerover dia dialog ya itu ya bukan Ya intinya sih semacam dialog cuma kelihatnya ada pembedanya deh ee bedanya

1:32:16ini apa dia bisa aksesibity jadi kalau pakai ke bisa bisa interaksi atau engak ada keyboard binding-nya by default Oke

1:32:26next horizontal Rul in select horizontal rule Oh bisa diroll bukan itu ada ininya Itu ada garis-garisnya sekarang oh nah select a

1:32:39favorite feature Nah kan bawahnya tuh ada opsi-opsinya tuh kan dipisahin sama garis horizontal i i Oke hal sesimpel

1:32:47itu selama ini kan eh developer harus bikin apa send ya kalunak bikin sendiri kan kita harus insty demi estetika visual karena

1:32:59mungkin kita harus ngikutin apa desain yang udah dibuat sama orang UI kan Nah sekarang udah bisa Apa web platform

1:33:09terus ini sih yang menarik browser supportnya ya tanget kombinasinya Safari and Chrome itu tu Ini engak ada brow Iya

1:33:18cuma di keterangannyar and Safari baru pernah kan Lihat kombinasi browser support Chrome and Safari Iya Firefox justru ketinggalan ya ini ya

1:33:33pun belum Chrome yang ketinggalanrium kan Ya cuma kalau misalnya ednya belum mau masukin ini kan baru disupport oleh

1:33:43Safari dan Chrome Chrome berarti maksudnya walaupun premium udah ada -nya gak mau kali masih diud SR Oke lanjut nah ini udah bisa

1:33:57semua valid and invalid sebelumnyaudah ada validalid kanudah ada ini ada user valid us invalid itu maksudnya kalau formbrary

1:34:19dirakanyaak Dar itu ada istilah eh dirty itu kalau user udah berinteraksi sama input tersebut jadi by default kan

1:34:29misalnya input t masih kosong itu kan kalau dari sudut pandang kita developer logic logic logiknya kan itu invalid

1:34:39karena gak boleh kosong tapi kalau dari perspektif user UX diisi aja belum Masa tibati udah merah error ituak S setelah userisi baru kalau

1:34:52misalnya engak memenuhi apa validasi baru kita Tunjukkan bahwa itu invalid dan itu pakai CSS aja ya iya

1:35:02keren ya jadi Green jadi merah invalid tapi dia belum merah ya ini merah kan udah diklikudah ini valid

1:35:18kalaunya ya biar enggak valid Oh kosongin aja karena kita udah apa Kar kita udah ngetik kita udah ngetik tapiuhi kriteria

1:35:29I tapi kalau belum dia masih tetap normal Ya normal Oh ini hanya dan selama ini kan cuma bisa dari apa cuma bisa

1:35:39dari apa eh form library atau custom script lah custom JS Nah sekarang di CSS udah ada invalid invalid ini masih state

1:35:48normal tapi kalau kita udah terus kita hapus dia kamera Nah Enggak bisa salah ih asli baru tahu entar semua browser

1:35:57udah tadi udah udah sudah full semuanya ye sudah baseline lagi Sudah lama ini Iya Firefox juga Firefox duluan berarti

1:36:06ini ya Oh iya udah dari lama lagi Iya ini kayaknya ini baru ada di Chrome baru ada di Chrome balik ya Heeh alright next

1:36:19exclusif akordon ada-ada aja eh cuma itu lumayan sering sih maksudnya itu opsi yang sering dan biasanya kita jadi harus pakai custom

1:36:29javascript juga kan custom UI eh library atau custom javascript walaupun udah ada elemen details baru bisa di

1:36:39chromium ini sebutnya udah padahal Iya apa si dan Safari juga udah tapi dia nyebutnya new Chrome namerib for detail

1:36:54Jadi gimana nih ya itu C kalau satu dibuka eh yang lain nutup Maksudnya Coba aja bukabuka eh enggak MP ini

1:37:07MP kalau ini yang with name Oh ini CSS doang CSS doang berarti atau html doang ada js-nya juga tuh jsnya UNT

1:37:26apa ini kayaknya enggak bukan buat itu deh Event to pof ini pofil pofil Oh Baca a di atas

1:37:37tadi ada polyfil Oh iya i aslinya kan sebenarnya pakai detail ada detail name ya Mana detail name bawah

1:37:46bawah name myordeon Jadi kalau ini di kelompok dengan name maka dia akan E hanya bisa membuka satu dalam satu waktu ya kalau

1:37:56satu di toogle yang lain tutup seru ser selesai conclusion [Tepuk tangan] akirnya 2023 banyak banget ya update-nya

1:38:12ya banyak itu banyak yang kita ggak tahu ya yang kita tahu cuman kayak transer kontainer query Iya jadi ini yang bikin dari Chrom

1:38:28Dev ada Mbak Una ada Mas Bram dan ada Mas Adam Mantap Jadi kayak orang Indonesia ya Mas Adam Mas kita ketemu Mbak Una kan

1:38:39ya di Iya kalian kalian Saya tidak belum Makanya saya bilang kita kita saya Mbak Eka oke oke benar benar oke

1:38:52Jadi gimana sudah puas dengan CSS sudah bingung puyeng ianya puyeng Iya puyang ya kapan-kapan episode khusus layerah khusus yang hal-hal yang kita

1:39:09skip tadi Iya karena Tujuan kita kan belajar bersama Iya undang Siapa ya yang bisa bahas yang bisa yang yang expert di

1:39:19bidang layer kalau enggak Mas ad BR atau M mbak UN Iya kayaknya mas masmas atau mbak yang

1:39:29di sini ya kali ya bisa gak ya kita undang mereka ya Ya siapa tahu dulu wishing ajaing mudah-mudahan didengar sama

1:39:42masang masang lagi banyak teman-teman yang gakak tahu nih k Mas Dang Ini siapa sih kadang muncul kan iya ya tetap

1:39:57enggak tahu tetap bingung tetap engak tahu kan siapa dia muncul siapa he Oke kalau gitu terima kasih banyak

1:40:04buat semuanya Terima kasih sudah berpusing-pusing Ria bersama kita ya jadi minggu depan kita tidak akan membahas CSS lagi Eh kita ada bahas

1:40:12CS karena udah pusing Karang udah pusing jadi kita stop dulu bahas CSS ya ganti dulu biar enggak bosan Heeh kapan-kapan

1:40:20ee beberapa hal yang menarik contohnya tadi apa eh UI Open ui ya Open UI iniisia Open UI interop belum lagi

1:40:29minggu depan special guestal kalau interog sudah ada sudah ada ininya kayaknya bisa kita bahas kalau sudah sudah rilis ya iya iya kalau udah rilis

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

1:40:44gitu ya I oke terima hari lalu oke than kalau ada yang mau apa ngide ada yang mau ngide bisa ke

1:40:58pesana.in/ngobrolin ini the topik ataupun narasumber ya bikin aja gthub isue eh bukan isu discussion G dision di

1:41:08repo kita nanti e atau kalau ada topik yang menarik bisa diupad ya jangan lupa login dulu ke github-nya itu aja dari

1:41:17kita malam hari ini eh selamat malam sampai jumpa lagi minggu depan by bye bye