Ngobrolin CSS Wrapped

5:25tahun-tahun Lalu kayaknya pertama kali ya ee apa gara-gara interop 2023 juga ngaruh engak ke situ mungkin iya kan enggak harus ada

5:36interop juga iya sih mungkin gara-gara itu ada salah satu pemicunya Coba ya C 2022 kayaknya enggak ada deh ada

5:49kayaknya baru mulai tahun ada enggak yang ada itu cuma setiap io Google io emang ada biasanya ada satu

6:00talk besar yang mengcover semua fitur eh UI atau front end related sih Cuma Si SS web yang kayak gini presentasinya

6:09Kayaknya baru tahun ini seru juga kan biasanya ada itu kan kalau yang Almanak kan ya biasanya ya kalau almana review

6:18review tahun lalu eh secara statistik ya kalau itu ya Eh sor Almanak ya Almanak user statistik semua tentang web tapi ya

6:31Ee Emang kan masing-masing bidang ada yang di-highlight kalau CSS tren yang menarik apa kecenderungannya user kayak gimana ya Ee bukan tentang fiturnya

6:41sendir bet berguna ya buat kita yang jarang update ya bukan jarang update buat kita yang punya kerjaan yang berbeda yang lain

6:54tapi mau ngikutin ini semua tuh kagak bisa gitu alas biasanya Cuma nyuruh orang front end doang ya

7:04berartiya alasan i i i nah ini topik-topik besarnya ada arsitectural foundation ada tipografi ada color color lumayan banyak

7:15ya Eh iya banyak banget kita pernah bahas banyak nih waktu bahas warna dulu ada responsive design di sini termasuk e

7:25ktainer query masuk masuk ya itu 2022 ya apa stabennya di 2023 stabnya di 2023 mungkin vendor browser

7:35lain Iya itu yang itu yang bikin kita ngobrol pertama kali soalnya Ya kontainer query I dan itu 2022 ya 2022

7:44Interaction termasuk view Transition ada komponen ya ada itu ya Oke kita langsung bahas kali ya b seru seru nih Nah ini ini kesimpulannya

7:56yang pertama ad bentar atas atas dulu deh itu apa catatan tentang nah ini Inter sama baseline baseline itu eh

8:07proek kerja sama antar vendor Browser dan pihak-pihak lainnya jadi kayak bikin apa ya cara yang gampang untuk tahu e

8:18fitur ini udah aman dipakai di semua browser atau belum Nah semua browser itu ya cuma Major browsers only ya Jadi

8:26intinya sih chromium atau Safari e sama Firefox itu di dua dua versi Major terakhir nah kadang kan ya Itu tadi

8:39kayak misalnya kalian yang sehari-hari Enggak ngerjain front end sebetulnya tahu misalnya ada fitur eh apa CSS sudo

8:47selector has atau where tahu sih tahu cuma Kayaknya cuma pernah baca sekilas terus mikir ah paling Chrome doang nih

8:55jadi kan ggak pernah pakai kan enggak pernah adopsi Developer banyak yang enggak pernah ngadopsi fitur baru karena

9:01mikir ah Paling masih belum belum diupport browser lain Nah jadi terus ya kalau ngecek k iuse bisa cuma kan enggak

9:10semua orang mau dan sempat jadi e ada inisiatif e baseline batch Nah itu batch-nya Ada centang l kalau centang He

9:20udah aman bisa dipakai kalau e apa sih tu Ini masih parsial I masih parsal kontrasnya jelek ya Nah itu berarti ya

9:28belum semua heeh tapi ininya bagus-bagus ya grafiknya Heeh lucu banget keren desainnya keren Oke kita masuk ke

9:38foundational arsitecture foundation architectural Apa itu Core CSS language and capabilities conditional tuh berarti mendasar ya Jadi sebelumnya kita nulis

9:51css-nya kayak Ya udah important important important aja atau ditaruh di bawahnya pokoknya sekarang ternyata ada cara baru untuk biasanya developer yang

10:01bukan front end bahkan developer yang front end juga pada malas nulis si SS kan karena itu kan karena makudnya eh

10:09apa spesifik spesificity Lah terus eh takut ngubah satu kelas takut berubah semua atau ada heeh ada hal yang enggak

10:19pengin diubah ikut berubah nah terus jadi suka banyak hack-hack atau workround yang aneh-aneh nah ini semoga bisa menurut saya arkitektur ini

10:29maksudnya ee kapabilit si CSS yang bertambah contohnya betul ingat enggak dulu kalau sebelumnya di CSS berapa mungkin enggak

10:39ada enggak ada Math Math apauli calculation kan sebelumnya enggak ada sekarang sudah ada nah ini maksudnya Arit foundation ini adalah capabilities

10:53CSS yang nambah function-nya contohnya trigonometri function tuh nah tapi eh yang Scope the nesting nanti juga ngaruh

11:02ke itu gimana kita mengarrange eh apa Jadi lebih enak aja sih nulis CSS secara langsung e i Kalau dibilang arsitektur

11:11kan kayak misalkan zaman dulu kan ada yang namanya apa object oriented CSS ada yang BEM ya ooc CSS Heeh BEM OSS bem Itu

11:23apa eh elemen modifier blok blok BL elem modif modif I itu kan kayak arsitektur kan Bagaimana cara kita menulis atau mengorganisasi

11:34kode CSS itu desain pattern sih itu oh termasuk juga nested kan nested yang sebelumnya nesting betul nesting itu

11:47sebelumnya hanya bisa dilakukan di e scss ya preprosessor Lah ya scss slash dan lain-lain sekarang udah bisa natif gitu

12:00tapi trigonometrik eh sbard dong sbard sbard tepuk tangan oh soundbard tepuk tangan Oke trigonometri ini jadi kayaknya

12:12semakin ke sini semakin saya saya semakin menjadi bahasa language ya Jadi semakin Kompleks Bukannya bukannya dia memang language ya

12:23Nah engak tahu enggak tahu styling language cuma ini bahan debat kayaknya orang debat di Twitter tiap 2 minggu

12:31sekali ada yang debat is CSS A programming language html aja enggak dianggap lain jus padahal belakangnya l

12:37itu language loh padahal enggak mark up language bukan Iya bukan programming Lang programing programming language berarti kan styling language kan enggak

12:48CSS itu kan cascading style sheet gak kalau engak ada selanjutnya coba Scroll ke atas dikit Coba Scroll styling

12:56language nah yang didebatin Apakah styling itu CSS CS language Iya itu bahasage coba Apakah styling bisa dianggap pemprograman kan logic udah ada

13:10variabel udah ada variabel variabel ada logic ada kan media query kan sebenarnya logic tapi looping looping looping belum

13:18adaing belum looping belum looping doang yang belum sekarang nih Matematika bisa e apa Bisa bisa Heeh kondisional ya bisa kalau nanti ada

13:30looping sudah ada looping berarti bisa jadi harus letin itu dulu ting t Ting komplit konong CSS touring komplit cuma enggak ngerti

13:42kapan-kapanlah kita bahas e kita Bah Bagaimana CSS adalah touring komplit sudah dicari-cari aja biar ada materi ya

13:49kan Iya ini eh oke trigonometrik fungsi trigonometrik itu kira-kira bisa buat apa ya ya yang standar itu bultan apa Hitung

14:02sudut Oh oke Bisa jadi begini ya jadi ngitung sudut bisa muter gitu ya Enggak enggak dua dimensi lagi

14:15ya ini kan dua dimensi nih kalau begini wow terus tahu enggak sih kalau ee menu lupa dulu namanya apa di material desain

14:25yang kanan bawah itu loh kalau ee kayak Oh FA FL action but flting action button kadang kalau kita pencet itukkkk muncul

14:33di apa Oh kayaran di sekitarnya kan kayak angka jam lah kayak angka jam nalog nah kalau dulu kan Mesti pakai

14:41javascript tuh buat ngitung sudut-sudut E itunya ionikon enggak perlu lagi ya masih pakai Jav ini javascript-nya apa

14:50nih oh itu kalau enggak kalau enggak support Oh ini he caranya gimana Angle ini

15:06kan heeh Terus ini keyframe buat animasinya Angle itu kan cuma variabel variabel salah CSS Properti apa variabel

15:17tuh properti Nah jadi nama resminya inibin De nama resminya CSS properti Tapi manggilnya dengan far eh tanda

15:27kurung wiab kok engak Prof ya Iya pakai satu istilah gitu Kenapa pasti pasti ada alasan yang aneh sih maksudnya

15:40alasan yang make sense cuma ternyata oh gitu tapi ya tetap aja nyebelin Nah jadi dikalkulasiometrinya mana sih i ini ini

15:49buat buat dapatin dapatin value dari sebuah variabel kan ini kan ini ya terus bisa dikalkulasi pakai cost di dalamnya

15:59ada variabel lagi ditambah variabel lagi dikali variabel jadi ribet ya Maaf ya saya dulu anak IPS pas SMA

16:11kalau dapat matematika sih tapi SIM kosan udah lupa semua oke ya kita yang anak kita aja enggak ingat Mas belum

16:21ngerti Belum ngerti ini apa logiknya Kenapa dia bisanya gimana I intinya ee sekarang sudah ada fungsi untuk

16:28trigonometri jadi kita enggak perlu nulis itu di javascript dulu untuk dikirim ke CSS bisa langsung gitu ya

16:35kira-kira kalau misalkan teman-teman mau bikin kayak bikin apa ya Bikin [Musik] E grafik mungkin charting library tapi

16:44visual apa dataf udah ada kan si siapa itu ada si mas masis Iya dia udah bikin jadi ee enggak

16:56pakai javascript bisa bikin eh charting library ini juga bisa misalkan mau representasi matematika belajar apa buat eh mungkin eh website untuk membuat kita

17:08belajar eh perhitungan gitu kan Misalkan bisa tanpa javascript Oke lanjut ya komlex nth selection ini apa

17:24nih kan selama ini kita punya Child sama of type ya kalau Child ada first Child ada Last Child i jadi apa buat eh apa

17:36kalau misalnya dia elemen Pertama eh dalam dari suatu parent kan first Child elemen terakhir Last Child nah nth

17:46childung 3 berarti anak ketiga anak ketiga dari parent elementnya nah yang baru apa Bisa dibikin out event juga kan

17:54Ya iya bisa pakai oh iya iya ini kita kalau misalkan mau bikin table row yang ee apa ganjilil gen belang-belang gitu

18:05bisa langsung dengan menggunakan CS tanpa harus menggunakan javascript atau bahasa pemrograman lain ya Eh kirain ini dari

18:14dulu Enggak dulu Enggak ada dulu kita bikin manual ya dulunya Mas saya dulunya du t Iya b pakainak p HP doang javascrip bisa

18:28indek nanti dikasih kelasnya event event aja gitu kasnya apa pakai mod ya mod modular kalau habis modulus

18:45modul moderator oke Ini Kirain dari dulu Ini apa sih hasilnya gimana coba lihat ma Lihat oke Halo aku masih pemula iya sama Kita juga

19:01masih pemula CSS output Element that match the build Sector will P maksudnya iya kan Oh yang baru ada offnya Jadi kalau

19:16yang pakai n itu emang udah dari dulu yaai dari ya 5 tahun terakhir lah tapi ada off Oh gitu

19:25Oh jadi ada dua lapis kayaknya tapis Oh jadi bisa kayak kalau ada big big big big Maksudnya di sini kan ada

19:35big ada small jadi bisa yang kita yang dihitungnya B doang atau small doang iya Hm Wow keren ini kira-kira use case-nya

19:45buat apa ya blog Po ya enggak harus blog media eh pokoknya konten post misalnya post typ-nya macam-macam ada yang video

19:54po ada yang galery post oh ada yang apalah Nah terus kita pengin pos paling atas untuk masing-masing tipe

20:02itu ya kayak ada highlight-nya lah atau Ada apa penanda sendiri tapi kan mungkin style-nya lain ya padding-nya lain atau

20:10apa jadi Emang kita mau custom berdasarkan masing-masing post type Oke Mak sense apagi Ya enggak tahu sih

20:21enggakang Scope nah Scope ini masih belum ini ya belumal Firefox belum he Firefox sama Safar Safari mata

20:32tandanya apa masih lihatlihatumina Lihat kondisi minat kayaknyahat Oh udah itu kan ada itu request for position jadi buat

20:43teman-teman yang belum tahu jadi ada namanya RF buat fitur-fitur eh web web platform jadi misalnya kalau dalam hal

20:51ini Chrome tim Chrome yang menginisiasi eh boleh bikin Eh kayak buka isu buka isu di repo request for position-nya eh webkit

21:04misalnya atau di Firefox jadi eh kayak piting gitulah kayak mempresentasikan api ini eh cara kerjanya begini gini

21:13gini use cas-nya gini gini gini terus bisa aja siapun orang webkitnya atau maintainer atau kontributor atau siapalah misalnya ada keberatan di

21:22bagian apalah kalau gini gimana atau misalnya faktor keamanannya gimana jadi yang yang mempropose harus ngjelasin e dan ngasih contoh Nah jadi adakanya ya

21:34bisa dicuekin aja bisa ditolak maksudnya ditolak tuh Maksudnya kami tidak tertarik not interested bisa e menyatakan interest interested Nah itu

21:45kan happynya ya si eh browser vendor lain ini juga tertarik nah tapi tertarik itu bukan berarti langsung ada kan cuma

21:54menggambarkan bahwa Oh oke mereka setuju secara konsep setuju suatu saat mereka e kemungkinan akan mendevelop fitur itu

22:03juga masukin di browser tapi ya Enggak enggak janji Kapan Nah Enggak tahu cuma tanda mata itu betul untuk eh menyatakan

22:11soal request for position atau bukan nanti kita lihat-lihat lagi ya ohoh Ke mana dia hilang preview support preview

22:19prevw Oh berarti udah Oh udah mau launching sudah Iya teknologi preview berarti Oh berarti itu ya Safari yang preview

22:29version ya oh malah udah bukan request for position lagi ini emang udah udah mau masuk Ya iya udah mau

22:38masukudah masuk di channel teknologi previewih nah Scope ini adalah dengan Scope kita bisa sangat spesif

22:54e mau menunjuk elemen yang kita Pili Tan harus menulis apa ya spesific selector jadi kan Misalkan ada kita mau select image

23:09di dalam H1 gitu ya jadi harus dari body eh header H1 image gitu gitu enggak sih atau gimana ini Nah iya jadi kan

23:20biasanya kita takut Nih misalnya ada eh kelas namanya card content eh Okelah pertama card content itu awalnya Emang e

23:29ya simpel ini kan e pattern ini juga contoh yang pakai pattern B kan block elemen modifier jadi blocknya adalah

23:36card elemennya secara logik sebuah eh parentnya atau kontainernya adalah card k card dalam card ada misalnya card

23:47content card ada konentnya jadi card und du kali content nah cuma ternyata misalnya Bukan cumaard misalnya ada

23:56slide ya ini ngarang lah misalnya eh tiba-tiba orang produk atau tim lead kita eh nyuruh bikin slide tapi slide

24:05Itu ada kontennya juga dan persis banget isinya sama card contonent jadi dalam dalam slide kita pakai card contonent

24:13aja biar enggak e ngulang-ngulang kan misalnya nah ke depannya Jadi udah habis itu kita sudah ngerjain lain kita lupa

24:19semua nah terus Eh kalau kita mentargetkan card content jadi takut nih karena tiba misalnya kita ee disuruh

24:28ngubah warna background atau ngilangin padding kirain kan cuma di card kan namanya card content ya slide-nya rusak semua nah orang jadi

24:37takut pakai CSS jadi kan solusinya selama ini orang pakai CSS in JS kan banyak Eh pakai kayak apalah style

24:46componen atau emotion atau yang lebih baru lagi ya Eh beda pendekatan pakai approachnya tawin yang atomik satu

24:53properti satu kelas sendiri biar ya kalau itu kan gak bakal rancu kan MT4 ya margin top 4 udah beneran gak bakal ada

25:02hal lain nah cuma ini ada alternatif yang bikin kita lebih eh apa yang bikin CSS lebih powerful Jadi gak perlu CSS in

25:11JS lagi nah kalau kasus card content tadi kan contoh baris kedua tuh scop card to card content jadi eh apa card

25:20content hanya yang berada di dalam card Kalau kebetulan entah gimana card content kas card content itu dipak di

25:27hal-hal lain juga Ya enggak apa-apa enggak akan ngaruh ke situ Hm kasih scop lah ya Scope itu kan kayak kasih ruang

25:35lingkup supaya jangan terkontaminasi Heeh cuma ini sintaksnya menarik sih Jadi kita tetap ya e tetap aja sih enggak enggak mecahin semua

25:45masalah juga kalau misalnya kita punya kita pakai selektor cardnya di berbagai tempat ya tetap bisa Ada kemungkinan

25:53tapi kan kita ee punya kontrol lebih besar ya jadinya card content yang berada di dalam card Nah kalau

26:00pendekatannya CSS JS ST componen dan lain-lain itu kan biasanya pakai itu kan randomiz itu loh karakter random gitu eh

26:08jadi class name-nya kan kalau Oh I generate autoate dari Heeh Dih dari library-nya kalau ini enggak kita tetap

26:18harus pakai selector cuma kita mentargetkan selector parentnya kan card parentnya tuh terus yang pengin kita targetin card konent harus berada di

26:27dalam parent yang ada CL card itu hmm Oke oke masih belum ngerti banget sih gua harus lihat contohnya sih iya harus ini

26:40contohnya Heeh coba apa tuh in this following demo the image Elements in the carousel component are not match because

26:51of the applied scoping limit jadi itu yang n n karusel itu loh kan ada karusel itu di dalam Oh di dalam

27:02ini Nah itu Kal misalnya kalau kalau kena stylingnya jadi ada bordernya di Image tapi ini yang k yang kena itu

27:12border yang di luarnya aja tapi image yang di dalam Dan itu karusal enggak kena enggak kena Oh nger he live dem

27:20klik aja Scroll Scroll kan enggak kena n image eh enggak ada bordernya imagenya enggak ada border I he karena enggak di

27:35dalam kalau kita lihat kalau Coba lihat itunya si kode cssnya itu cuma ini card ini ada card

27:46content terus Scope Daton ini apa only Mat Theon nestate komponen jadi cuma ada Oh nestate komponen tuh si karusel itu tadi

28:01ya iya oh ini data komponen sama dengan karusel ada ada ininya ada propertinya props-nya H tambahin card eh jadi Scope

28:13card to data component image-nya 0,25 ini 0,25 Yang mana Yang ini Iya bod radius Ken ada bod radius Iya kita kasih

28:27aja ganti Oh enggak bisa ya engak bisa diedit gak bisa diedit Oh iya enggak bisa harus login preview doang nah kalau

28:35eh bentar data komponen itu yang karusel kan ini bukan data komponen kan yang atas tapi ada ini kan di CL itu

28:45di class card data component card I kan Oh iya data komonen car oke oh Walaupun sama-sama ada data

28:56komponennya kalau enggak berada di dalam card kalau enggak berada di dalam card enggak kena Oh gitu ya ya ya nice ya

29:06Scope card data komponen kok agak ya karena masih baru kali ssnya sintaksnya agak Award ya I karena kita belum pernah

29:16kan belum pernah ada kayak gini belum pernah ada sama sekali kan entirely new he betul betul Kalau mungkin kalau

29:24solusi sebelumnyaim G solusi sebelumnya mungkin kalau web komponen pakai itu kan pakai Shadow D kan jadi dia scopnya di satu

29:34komponen kan tapi gak mesti pakai data komponen juga gak apa-apa makudnya engak harustor Apun stor Apun yang pengin kita

29:42targetin kan cuma perkara data komponen yang ada di dalamard kayaknya eh terus e bentar Man maksudnya menulisnya spesifik misalnya

29:59dari bodycard d apa apa apa sampai sampai target image tertentu Kita bisa mentargetkan hanya dengan pakai Scope

30:10jadi eh gitu kali ya maksudnya Ya coba kita baca buka htmlnya deh lumayan helpful

30:29sih Coba buka html-nya terus search data komponen ini data komponen ada di atas satu yang Iya Nah itu kan ada card

30:39kasnya card jadi itu kena ya Kalau enggak salah itu image-nya ada bordernya kan heeh ini card juga kan sebenarnya ya

30:48Iya card betul Heeh card di dalam card kan ini card juga kan Eh ini karosel ya bukan card ya h Iya card konten ini

30:58dalamnya semua semuanya ini card semuanya ini card he heeh tapi di dalam card itu ada karusel karuselnya pakai

31:06Div itu enggak ada clelas card enggak ada class card betul Oh enggak ada kelas card jadi

31:21dan kalau kita kasih berarti kalau kita sebenarnya sebelumnya dot kalau kita kasih dot card dot C image maka semua image yang dalam

31:32dot itu kena ya kan sedangkan kalau kita kasih kita kasih Scope dot scopnya apa dan berarti hanya cnya doang directnya

31:45si itu Iya itu tuh maksudnya logicnya Lumayan itu Ya maksudnya kayaknya kita gak CSS untuk punya log detil ini kan biasanya kalau

31:58kita harus gini ya pasti Pak tinggal dikasih panah panah eh atau kurung siku gitu ya apa apa namanya itu lebih besar

32:05tanda lebih besar bisa kan jadi direct char itu sibling eh oh iya itu itu direct char tapi kan direct CH terus image kan

32:15eh apa Kayaknya cuma bisa satu lapis Ya iya bisa enggak sih begini gini gini sampai banyak gitu bisa banyak banyak

32:25cuma ya harus didefine semua kalau pakai harus ngitung harus ngitung berapa lapis e c Iya kalau sedangkan kalau kita

32:33targetkan semuanya do image and di dalam karusel kena itu tuh maksudnya Heeh he ya kan berarti kita harus ngitung tuh

32:40kalau mau e pas image yang ini doang berarti anak ke berapa ee biar kita nyesuaiin jumlah si apa tanda lebih

32:48besarnya itu kan any H ya gitu deh ngerti engakerti lebih lanjut nanti kita kapan-kapan masih bakik si koping Heeh eh coba kan

33:00Semoga teman-teman enggak tambah bingung ya seperti saya saya tambah bingung ini buka yang standar position deh bakal

33:06tambah bingung lagi kalau lihat apa komentarnya kan penasaran nih mosilla bakal adopsi atau enggak udah baca sampai bawah walaupun ya skiming doang

33:16tetap enggak ngerti sih ini maksudnya Mozilla berniat adopsi atau enggak Iya tadi request kan ini Oh request

33:27Heeh mquest posisinya Mozilla ada keberatan atau enggak Kalau keberatan keberatannya di mana diskusinya sampai panjang banget tetap enggak

33:38jelas ya mungkin harus dibaca dengan lebih teliti ya anyway POnya sampai bawah ya Scroll aja

33:54udah sampai bawah yang paling bawah cuma update bahwa Safari has enable Scope hmm cuma lapor Aan gitu ya oh lapor

34:04doang ini ya Belum lama ini mah baru bulan lalu coba Mas dia komen Kapan Firefox Kapan gitu

34:16dimarahin ini yaak ketahuan enggak baca gitu ketahuan enggak baca atas-atasnya cuma sebenarnya menarik sih Eh jangan hapus

34:31[Tertawa] hapus menarik Baca pertimbangan-pertimbangannya terus jadi apa Jadi kerasa banget oh ribet ya Maksudnya E banyak hal yang harus

34:44dipikir ribet bikin bikin browser itu ribet banget mudah-mudahan Siapa ya yang bisa kita undang ya yang tukang bikin

34:54browser dulu ada tapi gak tahu sekarang dia posisinya di Google masih masih di Google atau gimana kita ggak tahu ya

35:04Ada apa Google Chrome Jepang Tapi kan banyak apa banyak e resuffling kan ada pindah ada yang ke Edge ada yang ke mana

35:14karena kalau menurut mereka yang biasa develop browser itu orang-orang yang eh kerjanya engineer untuk bikin browser itu larinya enggak jauh jauh tetap ke

35:27ranah browser juga jadi paling larinya antara ya Iya karena karena kan udah familiar sama cara kerjanya Iya ke

35:35Safari ke Firefox atau ke eh S ke Microsoft sekarang gitu atau udah enggak jadi IC lagi ya makudnya mas

35:44Masuk apalah lead atau Manager atau apa semacamnya Flex Bro otakku masih berproses sama sama ini salah satu fitur

35:55CSS juga ya Flex Bro Flex Flex Bro nesting nah nesting nah ini yang yang yang membuat salah satu apa ya

36:07salah satu fitur yang yang menarik di apa E Sas itu adalah nesting ini preprosessor Killer ya Dan apa makudnya

36:16entah preprosessor atau CSS injs pokoknya CSS library Killer lah kalau Oh udah udah diadopsi semua browser lagi

36:25udah i e sudah mencapai baseline bisa jadi Killer gak sih enggak Enggak beda fungsi kan jadi tuh kita bisa nulis e ya

36:41nesting ya jadi di satu properti di dalamnya kita mau select d dldt apa ya dldt enggak detail kayak key value

36:52untukpres key value I terus di dalamnya kita mau tulis lagi ntingnya bisa sampai unlimited nih Kalau dulu kan kita tulis kayak gini

37:04ya DT dulu semuanya terus habis itu e kok DL di depannya Oh iya Ang DL di depan DL terus kemudian ini asumsinya

37:16bahwa DT itu adalah anak dari DL kan Iya DL itu definition l nah terus satu list itu ini untuk kayak

37:27tabular gitu loh ke value misalnya nama Eka e hobi tidur gitu kan iya ya Engak harus table sih Apun yang key valueah

37:37terus DT itu eh definition eh detail term pokoknya t-nya term d-nya apa gak Enggak ingat sih t-nya term terus DD itu

37:47eh definition H Oke intinya gitu Jadi kalau misalkan dulu kita harus definisiin dulu dt-nya terus terus dldt-nya apa terus

37:58dldd-nya apa Karena ini adalah chart dari si DL karena bisa aja kalau kita tulis DD doang Siapa tahu di di bagian

38:08yang lain ada DD yang lain jadi kena gitu kan DD Yusuf iya jadinya ini termasuk bagian dari nesting eh sori

38:17scoping juga sebenarnya kan jadi ee di dalam DL kita bisa styling apa gitu kemudian ee di dalamnya ada anaknya nah

38:27anaknya ada dua nih kayaknya lebih seru Yaa bisa kayak ampersan gitu enggak sih kalau di Sas itu kan bisa n apa gitu

38:36jadi Oh bisa ditaruh tengah ya Iya parentnya ditaruh Tengah enggak tahu belum belum di bahas Nah ini nih contoh

38:45yang paling sering mungkin Ul atau OL di dalam Ol itu pasti ada Li kan Nah itu kita bisaestate seperti

38:53ini Ini contohnya terlalu itu ya terlalu bagus Nah kan Li Kan list kan OL Itu list pakai nomor 1 3 kalau Ul unorder l

39:08biasanya pakai Bullet atau strip atau apalah Nah biasanya kan stylingnya kadang butuh customization yang berbeda mungkin padingnya beda karena kan

39:18makudnya kalau angka mungkin lebih besar atau apah eh bentuknya lain dibanding e bulet jadi kadang ya kalau harus olli

39:28UI sekarang bisa nesting keunggulan lain yang penting Enggak penting bisa di itu loh bisa dicaps apa expand collapse

39:37kalau di vs Code kan enak kan jadi untuk Bian itu bisa di bisa di folding ditutup ya kalau layer itu apa sih add

39:48layer nah wah Mas Doni Mas Doni Hai nah nth Child ehung 1 nth childung 2 nth childung

40:043 terus kasih animation ya ini 1 2 3 ini ini balap balap capres bukan balap TX cpres wah bahaya bahaya Udah kemarin kan

40:21ya apa namanya ee kemarin itu Debat Capres e debat cawaes kan Kalau hari ini kita debat CSS aja

40:33CSS Iya layer ini apa ya ya fitur baru juga itu UN untuk ngakalin spesificity pokoknya e apa ayo apa itu kelihat basa

40:51penjelasannya apa penjelasannya apa ya pokoknya ee sty mana misalnya kan kan ada satu elemen eh namanya card kelasnya

41:00card bisa ditarget Div itu elemennya di kelasnya card bisa ditarget pakai CSS selector dcard bisa ditarget pakai

41:11selector Div bisa misalnya parentnya kontainer gitu bisa ditarget dengan eh selector.container terus bintang Nah itu kan semua mentarget ke elemen yang sama

41:24kan Tapi kan He nah misalnya masing-masing style tuh mengassign warna yang beda harus ada salah satu yang

41:32menang kan Nah itu makin makin tinggi specificity-nya eh itu masing-masing kan ada hitungannya ada poin-poinnya siapa yang menang siap yang Heeh Siapa yang eh

41:44style-nya beneran diterapin di elemen itu nah layer itu kalau enggak salah Untuk ngakalin itu cuma exactly Gimana

41:51Enggak ingat karena e kelihatannya belum semua browser bisa deh jadi enggak pernah pakai juga layar itu L ini untuk

42:04animation bukan itu gameframe animation layar buat taruh di atas gitu kan paling enggak bukan nah demo ini apa demo

42:13ini demo mana demo coba CSS player tuh apa sih demo apa penasaran coba cari enggak ada di sini ya Ada demo di sini

42:24Bukan maksudnya penjelasan si layer enggak ada sudah ada di baseline 2022 22 loh layer tahun lalu ya

42:42Heeh karena enggak ada 2022 kita jadi enggak tahu nih Wah Nah seperti seperti biasa mbn gak enak enggak t gu gua tahu dan pernah

42:59present nah pokoknya eh apa cuma ingat buat kayak gitu buat ng-eset eh Jadi kayak mengelompokkan masing-masing styling jadi Oh ingat enggak Kalau zaman

43:10pakai Sas Dulu kan suka ada eh convention yang pertama tuh untuk yang kayak e Global level tuh kayak yang buat

43:20base elemen doang habis itu ada utility Misalnya tahu kan yang impor impor-ortnya tuh ada urutannya kan Nah

43:28biasanya kan komponen terus paling bawah Diming yang soal warna Nah itu kayak buat ngurutin kayak gituih Bing masih

43:44B harus lihat demo sih emang emang maksudnya kalau baca kalau kalau baca doang itu Ang emang gak masuk tapi kalau

43:53lihat demo lebih sih Iya nah ini ada demonya engak masalahnya ini ada demonyaak Oh berarti eh layer itu juga termasuk salah satu

44:09fitur dari nesting kali ya ini ada n ler Bed lagi lain lain konsep itu kan frameworkret jadi kayaknya mungkin dalam

44:18Framework ada urutan prioritas eh apa prioritas itu tadi siapa yang menang kayak style mana yang menang nih

44:27contohctoh in this Ex the simple H2 El blue nah itu jadi kan sama-sama mentarget H2

44:43nih to the team layer orderance the bas layer sebentar DII ada layar base sama layar team he oke terus

45:01ee jadi bisa kayak bikin ini juga sih kayak Dark Dark Dark mode light mode juga bisa kayaknya pakai base ini

45:09sebentar Habis itu Jadi kesimpulannya artikel H2 itu warnanya apa turun turun Nanti kayaknya turun pastikan dijelasin manaak Oh ini Nah

45:21Enggak ada udah berhenti ini ah Habis mana sih gak ada tuh bentar ada tulisannya Mana tadi blue

45:45H2 l engak Eh by default enggak jadi kan Eh kalau by default nih eh kan spesificity

46:02ada poin-poinnya tuh ada kayak artikel eh itu kan lebih spesifik daripada selektor H2 doang by default yang menang adalah si

46:16artikel H2 H2 Purple Oke H2 warnanya akan Ungu nah tapi kan sebetulnya kalau ee yang kita tahu sekilas kalau yang

46:26lebih bawah di bawahnya kan bakal menang H2 warnanya biru ini anggap aja belum ada belum ada fitur layer ya nah kita

46:35kan bakal kita bakal bingung kan maksudnya Eh apa kayak gambling lah kita eh enggak tahu mana yang menang jadi

46:42kayak Bingung eh sulitlah eh buat memprediksi behavior-nya Nah kalau di sini eh kita bisa ngelompokin pakai layer jadi eh ngitung spesificity-nya eh

46:56itu berdasarkan kelompok layer kelompok layer bas di atas nah terus bawahnya ada kelompok layer di Nah di sini walaupun

47:05selektor h2nya itu kalah kalah kan sebenarnyault itu behavnya harusnya kalah karena kurang spesifik cuma H2 doang tapi di sini in h2nya jadi menang

47:18menang maksudnya H2 bir Ken karernyaen dua itu bagian dari kelompok layer yang berada di bawah kan makin

47:29bawah yang bawah akan mengoverride yang atas Oh cas scading ya k shading ya Iya heeh Saya saya tadi baca paling bawah

47:38ada contohnya keren banget contoh pasti ada contohnya sih ee Kalau mau nanti teman-teman bisa baca nah eh

47:46stop eh bawa lagi bawa lagi ada COD pen-nya Nah ini dia CSS ke CSS saja Nah kalau dilihat dari

47:58ininya itu layernya difine ya ada resiset eh secara specifity ya dari kiri ke kanan e reset Based theme component

48:07sama utilities dan ini pattern dari Sas dulu orang Sas tuh pasti pernah lihat deh Eh urutan ini reset base n lanjut

48:16kalau kita lihat ya itu kan H2 itu kan warnanya biru ya sedangkan si base-nya mengatakan colornya itu Purple h dia

48:26kenanya di teams karena di team layer team itu mengatakan H2 itu color blue nah terus kemudian dotlit eh dotlit

48:36itu warnanya eh Green dan important dan dia dalam layar tetimam maka dia menang secara spesifik meskipun utilities

48:48eh utilities mengatakan dia kulitnya red red Iya kenapa dia enggak Padahal di utilitas paling ujung nih sedangkan base sama tim menangan tim

49:01berarti harus baca kena kalau dia ada tadi mengatakan ee Nah kalau udah dikomen sama an ribet ya Ba paling bawah karena ada ini paling

49:12bawah eh kalau tanpa kena layer lead itu sebenarnya colornya orange important orange tapi kenapa dia bisa kenanya ke

49:22tim saya enggak tahu kalau yang eh yang paragraf yang Blue yang di bawah aslinya adalah red P color

49:35ini red jadi biru benar ya kan kalau asumsi kita ya Yang yang p yang Blue yang Blue itu apa coba yang Blue dot

49:44blue e Iya blue sor blue ini kan P kelas E dia P ya P kelas blue ya Tuh lihat tuh

49:55ya benar ya CL blue yang ini tur paling bawah sebelum kena layer sebelum seb ini setelah setelah layer bukan bukan set

50:05terus terus itu kan colornya blue kalau utilities Iya kalau bawah lagi ada enggak yang dot blue enggak ada ya Ini

50:15dia red harusnya kena red H2 blue ini blue P red ini apa Dot Lit orange P juga iya p tapi

50:33dia jadinya hijau sedangkan di sini merah gimana tuh bukan dot led-nya kan kalau kena yang di atas kan

50:44eh green Green di sini red harusnya dia secara urutan apa base secara urutan base Green base jadinya Green

50:58utillities paling terakhir ya specifity Iya base dulu kan Iya bas berarti tim kan makuknya Green ini kan Iya

51:09tim di sini komponen sama util kalau P yang red dia ambil yang di sini ini yang terakhir karenaak Oh kayaknya paling

51:21kuat lebih kuat yang di luar layer Enggak ini H2 blue sama liit orange jadi eh hijau ya Padahal dia paling bawah

51:35karena important karena important important is everything bisa diedit enggak pokoknya mungkin gara-gara ada An Nah kalau yang

51:45apa kombinasinya ini sih enggak ngerti ya cuma ingat baca bahwa eh apa yang enggak di dalam layer itu e lebih kuat

51:55daripada yang di dalam kelompok layer Hm Coba lihat ke atas dikit layer S order with important ada ininya Heeh ehj

52:12atas atas atas atas y stop stop stop stop itu ini short ordernya masih enggak ngerti layer team

52:28color green important layer utilities Element color red Nah kita enggak lihat kita enggak lihat htmlnya kalau ini Bingung iya

52:43color itu kan text color kan bukan background color kan kenapa di sini backgroundnya yang berbeda bukan ini

52:50short ordernya dia e kalau pakai important layer kalau pakai an itu ininya berbeda ee efeknya itu loh maksudnya Oh oke oke

53:03Jadi kalau yang tanpa layer yang orange yang yang di bawah dot Element color orange itu unlayered style tapi yang mana

53:17ya yang orange yang mana aja enggak tahu itu yang paling bawah tuh maksudnya Orange ya kirain merah itu pink orange

53:25orange orange putah warna oke baiklah teman-teman next dulu dah next dulu Mari kita bingungok lagi aja nah ini ada

53:38pertanyaan bagus nih tentang performa Apakah pemilihan sektor berpengaruh ke performance terus juga ini nestate itu akan pengaruh ke

53:47performance enggak Kalau banyak banget ya theoretically ngaruh lah pasti tapi sebetulnya in real life secara prakk belum pernah ngerasain sampai ngaruh

54:00sih coba Ating 100 pertanyaan gini kalau misalkan e kita bikin awalnya e eh maksudnya performance ini kan e kita

54:11bikin Nate nih terus ada yang bilang performanya kurang bagus gimana cara kita improve ada solusi gak selain Nate

54:18kita bikin jadi satu level semua gitu ya target Kenapa harus n banyak-banyak kita kita planning planning selnya ya

54:32harus lebih baik biar kalau n itu kan karena kita harus mentarget secara spesifik banget e apa Nenek moyangnya

54:41bukan parent malah apa kakek neneknya ininya banyak banget Terus jadi kita harus nyebut ini sama nyebut ini Padahal

54:49kanudnya target ini aja berarti ya Kita kasih kelas lainah selektor lain yang lebih eh apa efisien akurat Kayaknya

54:59dulu lighth tuh ada warningnya deh kalau misalnya ada selektor yang terlalu panjang gituul kalauor terlalu panjang itu

55:07pengaruh ke ini e k karena travers terlalu dalam kan traving I maksimal kedalamannya kita belum tahu juga Mas

55:23Maulid engak ya deh belum coba Silakan dicoba masudnya enggak ada tapi kan setiap ini kita harus ingat kalau bukan

55:33webdve itu kan Eh usernya bisa membuka dari laptop dari HP HP paling kentang sampai HP paling canggih ya mungkin eh

55:44apa Kalau kebetulan dibuka dari HP yang low end banget butut mungkin bisa aja enggak kuat eh apa renderingnya jadi

55:56J yaak ada standarisasinya juga sih ya soalnya intinya e jangan apa jangan terlalu mengabuse si Nest ini ya kalau

56:09kayak properti dalam properti di dalam properti kayaknya untuk parsingnya juga lebih rumit kan secara otomatis kalkulasinya jug eh feature

56:20Green nulnya juga pusingh iya jadi ya Dipakai seperlunya aja kalau bisa enggak ada n lebih bagus kayaknya ya kayaknya

56:31maksudnya sebelum sampai ke level yang beneran significantly mempengaruhi performance dari dx-nya Kayaknya udah eh maksudnya pasti enggak tahan kan Emang

56:40kita mau nulis eh 20 apa urut 20 gitu kan kayaknya enggak mungkin kan eh pasti kita yang kita yang nulis pusing

56:53duluan y nah terus lanjut oke kita lanjut lanjut ke Saya suka nih sub sub nah ini Asik ini enggak menjawab

57:07Ya kan kalau kita Grid itu kan kita bisa mendefinisikan Grid LINE kan eh Grid Line eh Grid template kolom Grid

57:16template row Tapi itu kan sebelumnya sebelum ada subgrate itu ngaruhnya kan cuma ke direct child-nya kan ke eh

57:24elemen yang eh pas di dalam eh elemen parent yang ada Grid template-nya itu Nah kalau misalnya ada dalamnya lagi itu

57:33kan Ya kita harus ngedefinisiin grip template sekali lagi di apa di immediate parentnya kalau ini enggak jadi eh apa

57:43parent eh terus ini Child Element terus jadi parent misalnya orang tua anak cucu jadi Cucunya juga bisa ngikutin eh apa G

57:52linnya template atau oke oke oke contohnya ini ya Ini si grade ini display kan ya subade Iya

58:02display Grid oh oh iya e bawahnya display subgrid ya Kalau enggak salah iya deh serius live demo dong Hah live

58:15demo ada live dem Enggak itu itu demo Iya udah mana gak ada grade semua gak ada Oh ini

58:31subgrade mana harusnya adaecilan ya ini kanade iya berartiate gitu berti bisa

58:47template juga juga Iya jadi buat kolomnya I lihat html-nya deh html-nya mah biasa ya artikel artikel itu kan pernya

59:05eah terus head header ini header terus ada horizontal LINE terus ada paragraf terakhir ada footer terus diatur sama si grid-nya itu

59:22gapnya Du aturan di lihat CSS turun

59:37turunkr nahate blainisikan aturannya di terus kan biasanya itu cuma bisa dipak di di ini kelihatannya si apa title

59:58title sama konten di masing-masing e card masing-masing artikel jadi bisa ngikutnya juga kihatannya gak ya header juga displnya

1:00:15grd Oh di dalam Grid bisa kita defin lagi ya ber ya baruah ielat ter ikut apa Grid template row atau Grid

1:00:26template colom kayak inherit gitu deh kelihatannya H Oke kalau yang di body itu dia repeat autoill min max 30 CH

1:00:381fr kalau di layer demo ni ada layer lagi nih Iya dia ada layer demo support di sini ada

1:00:52layer-layer enggak enggak ada kan definisiin layernya yang kayak tadi enggak ada juga Ya enggak enggak harus itu

1:01:04optional berarti kita harus ada episode CSS layer iya ya enggak kita eh Apa lanjutan remedial rep 2023 edisi remedial eh

1:01:17hal-hal yang kita bingung pas sekarang Iya nanti kita bahas lagi iya i bagus bagus setuju setuju subgr is especially ful

1:01:28lagi for aligning siblings to each other Dynamic content This is free copyriters UX writer and Translator from attendting to

1:01:39create a project copy that fits into the layout with subgrid the layout can be adjusted to fit the

1:01:49content itu use cas-nya use cas-nya beda lagi cas-nya Enggak itu tadi use case-nya Coba matiin apa turn off dulu

1:02:00css-nya ee biar result-nya doang yang muncul He nah kan itu ee kata-katanya bisa teksnya bisa empat baris bisa dua baris tapi si yang paling

1:02:15bawah itu heeh ee apa Otomatis ke stretch set apa itu yang paling bawah tuh yang tulisan kecilnya kayak tulisan

1:02:23tanggal atau apa ini ini sebaris nih ya ini sebaris Heeh ke bawah hm Jadi kayak Flex dong Iya tapi

1:02:33berlaku buat semua jadi enggak harus masing-masing dikasih Flex kelihatannya oke oke oke kita masuk ke bagian berikutnyaografi masih banyak loh ini

1:02:47kita k tipografi ada berarti ya baru tipografi kita baru masuk segmen kedua tipografi ini keren banget nih teksnya ya iya iya

1:03:00bagus ya bagus-bagus pilihannya Gimana caranya punya sens kayak gituah itu udah off topic lanjut Tex wap inial letter nah dulu kalau di

1:03:12koran ee majalah biasanya ada yang model kayak gini nih Huruf pertamanya bayangin novel engak sih kayak pada suatu

1:03:21ketika nah tuh kan yang huruf Apa jenis font-nya yang kayak cerita-cerita dongeng gitu Heeh betul ternyata hampir

1:03:30semua browser udah karena Firefox belum firx belum jadi eh foldback-nya gimana huruf biasa a pakai javascript lah

1:03:38dilice aja udah kalau kalau css-nya kita pakai yang gini terus nanti di Firefox tampilannya gimana ya enggak apaek bias teks biasa ya teks

1:03:50biasa tapi kalau itu penting ya udah kita Slice itu first SL Oh ini t spasi Du apa tig itu apa spasi itu apa ada

1:04:04ininya enggak Iya itu tadi atas atas atas atas atas Scroll atas Initial letter property is a BL styling for the

1:04:16placement you can position tuh argumen pertama How Deeply to drop letter Wow canggih banget oh bisaai berapa baris berapa baris kita

1:04:33gak harus ngitung manual he The Second How the letter ini sangatantu kalau kita mau bikin

1:04:48blok artikel gitu ya Oke next t ini Balance and pry kalau sebelumnya Tex wap itu apa aja

1:05:02adanya enggak ada belum ada kan ada ah white Space tu yang ada untuk wpping white Space wap no wap Terus apa

1:05:16fre Heeh kalau ini Bukan soal itu kayaknya itu sudah ada Tex W No wap Stable e bukan itu properti dulu

1:05:26propertinya adalah white Space Oh iya ni ni nih Ni ni tuh ya ini baru iniu baru turun lagi turun lagi ada

1:05:38tulisannya tuh eh Wi tadi kok gua beda bacanya eh oke salah ke atas Mas R itu ada not-nya yang warna biru not

1:05:53the Oh space itu shnya berarti ini berarti tnya udah ada tapi yang ditambahkan hanya balance dan pretty balance dan

1:06:08pretty apaginya gitu ya Iya jadi kadang kan eh kadang misalnya kita gak tahu nih panjang teksnya berapa terus e di baris

1:06:18terakhir tuh kayak ngrapnya engak enak kayak cuma sisa du dua kata atau satu kata nah nah tuh tuh tuh kelihatan

1:06:27kelihatan kan secara visual kan jelek tuh kayak ee yang baris keduanya tuh kayak jomplang banget sama yang baris

1:06:33ketiga Nah kalau ini otomatis kayak dibalance aja yang pry apa mousnya Siapa sih eh video Oh video itu yang pretty

1:06:44yang pretty yang lebih rata yang lebih rata Oh rata iya i rata kanannya I iya I ngerti ngerti ngerti berarti dia secara

1:06:55algoritm nyari sendiri ya kita enggak perlu pas-pasin gitu ya Iya dia ngitung kayaknya dia ngitung spasinya di mana

1:07:02kan Kalau tulisannya not yang unicode bukan latin gimana ya kan tetap ada spasinya kan ya harusnya enggak tahu Chinese character

1:07:16Chinese kalau Thailand enggak ada spasi kan Iya cny eh sori Sarah Chinese Japanese Korea kan itu enggak ada spasi

1:07:26oh Thailand juga enggak ada spasi Iya nah di saat kayak gini Gua bersyukur gua bukan developer tukang bikin browser

1:07:34enggak harus mikir itu tapi Somewhere ada orang yang berarti kan mereka mempertimbangkan itu Coba ya klien gua ada satu yang

1:07:45Jepang gua coba dulu oke kita lanjut Wah topografi cuman dua ya color itu berguna banget sih karena biasanya

1:07:56kalau di figma kan Eh kayak desainer itu visual desainer mereka kalau lihat enggak Balance gitu kan Ya maksudnya

1:08:04secara estetik kurang bagus ya jadi dienter giliran kita yang bikin kita yang coding ya kan kita gak bisa kita

1:08:10enggak bisa tiba-tiba ngatur eh bikin line Break di sembarang tempat kan Apalagi kalau sumber datanya damic Nah

1:08:17kan bisa aja Tuh kita sering diprotes loh kok enggak sesuai fikma nah ini ngatasin masalah itu nah ini ada ada

1:08:26pertanyaan bagus nih dari Damar nih dulu pernah baca ee itu support beberapa baris aja karena berat Apakah sekarang

1:08:33masih terbatas coba itu lihat semua semua browser sudah support atau belum aja enggak yakin sih belum tuh belum ya

1:08:41belum semua tapi Firefox doang kan dan bahkan enggak ada tulisan browser apa aja yang support mencurigakan oke ya kelihatannya Emang

1:08:52belum ready ya oke Ya itu mungkin karena berat mencurigakan sih daftar eh list browser-nya aja belum ada

1:09:04edit on COD pen Nah bisa diedit enggak ya udah kita tambahin aja nih tulisannya yang mana yang

1:09:19Balance terus h tuh panjang eror bisah Eh bisa enggak berat aman Bisa jadi keren lah cuma ini di laptop

1:09:32bagus kan Coba di HP kentang bet betul HP kentang betul betul terus juga ada ini nih Abdul Malik

1:09:41Dia pakai react wap balancer W javascript adalah solusi sampai sana Ya maksudnya ada yang bikinin berarti memang ada kebutuhan

1:09:53yang sangat itu lagi ya itu tadi maksudnya Eh kita figmanya bagus atau ya figma atau apalah pokoknya ee visualnya

1:10:03bagus karena secara manual desainer kita ngasih eh pokoknya e di mana yang kelihatan enggak enak banget di line

1:10:11Break secara manual lah kita kan enggak bisa pas coding jadi ya itu use case-nya ya oke lanjut lanjut

1:10:24lanjut color color ini lumahan banyak ya banyak banget nih kita pernah bahas kan di episode kapan tahu pas e bahas warna

1:10:32HD color Space yang pertama HD color Space from the hardware to software CSS to blinking Lights Apa ini

1:10:40maksudnya color user hardware capable of White gamut HDR colors Ha eh hai sulit didemoin ini gimana kan Ius kan tergantung device-nya

1:10:57juga iya pas kita bahas warna kan Oke lab Oke lab Oke CH Iya klch terus hwb rec

1:11:092020 ada xcz lagi apa ini xcz Hah xcz Enggak tahu mix color nah ini juga salah satu yang menarik nih color mix

1:11:22kalauor dulu kan bingung ya Hah udah stabil semua wow wow wow senang banget misalkan kita mau campur warna merah

1:11:30sama warna kuning gitu gimana caranya ini ada Kal sekarang bisa ternyata bisa sekarang kayak lagi beli chat di toko

1:11:37chat aja heeh di campur dulu harus pakai javascript pun harus pakai library ya agak susah kalau hand roll Coba gimana caranya hex

1:11:49ffcc dicampur 00 ccff I tapi ini susah dilihat ya kan itu kenapa kenapa muncul Ok lch

1:12:04segala macam itu kan karena supaya gampang dibaca kan heeh menyesuaian logik logik kita yang apa he saturation kayak gitu kan jadi

1:12:15dari green dikasih saturation apa gitu ya silakan nonton video kita sebelumnya Iya ini contoh ee apa color

1:12:24mix color mix nah ini jadi kita bisa gabungin warna hijau dengan warna til ya ini ya hijau hijau hijau agak biru apa

1:12:35tuh istilah tengah-engah Oh dia pakai okab Ya iya bisa macam-macam kan tuh tuh ada dropdownnya Oh iya jadi kayak algoritma

1:12:47buat ngegabungin warnanya kayaknya agak sedikit beda E masing-masing itu deh okch XZ ini x wahunya berat sama semua

1:13:04di hsl mata gua belenger dihatnya kalau gak salah ini ini ada yang kayak itu kan ya kayakya kan ada kayak apa yang he

1:13:18gradien terus biasanya ada garis-garisnya gitu kan yang nunjukin area apa as a moment in time from a

1:13:29gradientadi from BL to Oh Col mix oh pintar ya Maksudnya E kan kita udah punya kan mereka maksudnya

1:13:39browser udah punya algoritma untuk gradien jadi dia ngambil satu titik di gradien itu hijau ke biru hijau ke biru gradi

1:13:49kan semua nih hijau hijau hijau agak biru hijau agak biru biru banget sampai terakhir biru Nah sekarang nih dengan

1:13:56color mix kita bisa kayak men-select satu poin eh somewere antara hijau ke biru ini kayaknya akan bermanfaat untuk

1:14:08eh generate enggak tahu ya E koreksi kalau salah generate bukan generate gradasi yang enggak loncat loncat Biasanya kan kalau misalkan kita pilih

1:14:19gradasi nih merah sama hijau itu kan kayak ada perbedaannya terlalu kontras kan terlalu jauh He Oh terus gradiennya

1:14:26jadi jelek ya kalau ini jadi kayak bisa dipilih dicustom Iya kayaknya itu ya bisa dipakai untuk itu salah satu

1:14:34cas-nya kali ya untuk desain sistem juga bisa banget kan Kayak misalnya kalau diilwin nih kita kan ada blue Dash 100

1:14:41gitu blue Dash 200 Nah itu kan milih warnanya kalau harus manual capek juga kan kita milih biru tua sampai biru agak

1:14:50muda biru sedang sampai biru muda kalau milh manual cap Heeh kalau ini kan bisa di tapi variabel bisa dimasukin situ

1:15:00enggak ya Nah Harusnya bisa harusnya bisa relative color syntax berikutnya ya rsc RCS RCS eh RCS rsc rea server

1:15:13komponen Pasti lagi bayangin rsc ya Nah mamp ada RCS ada rsc RCS bisa dipakai di rsc eh apa complary method to color mix

1:15:31foruk variasi-ariasi warna slightly more powerful than color mix but also a strategy for Working with color color mix May mix in the color

1:15:44white to lightning a color lighten a color jadi bisa memilih cuma eh apa lightness

1:16:03atau darknessnya doang ya warnanya tetap G warnanya sama Iya lightness betul betul cuma dibikin lebih gelap dibikin

1:16:09lebih terang Oh bisa pakai brightness ya Bisa ngatur-ngatur brightness-nya ya berarti ya oke kok pakai Bubble nih warna-warnanya berbeda I

1:16:24analog triadik triadik berarti ini ada warna yang disesuai dicari triatnya kan segitiga kan merah sama hijau itu pakai

1:16:34CSS juga bukan janjan itu Custom bukan Iya custom kayaknya opacity desat Oke Enggak l beneran apa Eh kalau di css-nya coba deh nah eh

1:16:51warnanya cuma didefine color ue doang iya 1 2 3 e blue e Black sama greay 555 kan greay tengah-tengah

1:17:02kan Nah ini yang monokrom analog triat itu semua di apa dikalkulasinya pakai pakai apa itu si SS color gila ini

1:17:14mah udahage banget ini l l Oh itu inherit kayaknya deh kalau enggak salah itu inherit lightness aslinya jadi kita enggak harus eh

1:17:29menspesify semua satu persatu cuma yang mau kita ganti aja yang mau kita rubah kan ok l CH kan l c l lch l-nya inherit

1:17:42Heeh Hnya yang berubah ya berarti ya hanya h-nya yang berubah ya hiu berubah h h nah ini

1:17:49hsl ini dan lain-lain oke Pusing pusing belum pusing kalau pusing kita berhenti dulu kita lanjut lagi minggu depan ini responsif lumayan

1:18:04ya ini baru setengah nih responsif banyak gak sih banyak banyak responsif Oh iya banyak jangan ah Nanti malah

1:18:10kentang iya k kita sudah bahas tiga section kita bahas tiga section lagi minggu depan ini bisa jadi empat episode

1:18:19Ini asik teman gue ada nanti 5 tahun dari sekarang 10 tahun dari sekarang jadi obsol ini kan

1:18:34sebenarnya apa ya bukan CSS sih tapi buat frontend 10 mungkin 7 tahun lalu kan perannya kayak yaudnyau

1:18:46interaksi interaksi elemelemen itu ribet jadi dipermudah Pak terus lama-lama satu persatu e mulai gampang dibikin pakquerynya makin lama makinid lah Kita

1:19:02udah gak perlu lagi kan Ya mungkin 5 tahun 10 tahun lagi cssnya udah canggih banget kita udah gak perluin

1:19:09lagi Iya tapi yang menarik kan si Apa Adam Arnya sendiri dia bikin bikin ohnya openprs.style kalau engak salah ya Nah

1:19:27ini ala-ala berbasis CSS e variabel variabel i ala-ala e Twin tapi berbasis CSS variabel dan ini sama

1:19:40denganwinnya bisa juga Twin tapi custom custom variabel gitu kayak kita ngdefine sendiri ada jadi kan kalau kalau di n kan kita

1:19:53pakai kelas kan kita ngisi kelas ee Mar terus ee background color border dan lain-lain kan kalau di sini pakai kelas

1:20:07Eem ihak enggakak kayak Jadi bukan di html tapi di CSS file-nya yang kita ubah-ubah Iya cuman pakai variabel variabelnya sudah

1:20:21siapin Oh I kalau variabelnya sih ngerti sih maksudnya gradien EMP gitu ya kita pakai variabelnya di sini tapi kita

1:20:28tetap kita bisa bikin teams Jadi pakai maksudnya teamsnya jadi kayak kita sudah bisa define per desain patternnya kita

1:20:36sudah dibikin tuh per komponen eh jadi komponennya Sudah ada Kita hanya tinggal define eh CSS variabelnya dan CSS variabelnya

1:20:46tinggal bisa dibuat jadi kayak tim S tim du tim 3 dan sedangkannya sama gitu sebenarnya eh si openprs ini bisa

1:20:56digunakan untuk membuat library seperti Twin yes oh eh Jadi kayak primitifnya ya Iya kalau kalau dengar penjelasannya si

1:21:07ee Abang e Adam arjal sih ya Iya jadi dia e bilang ya Ini bukan bukan kompetitornya telwin justru Ini bisa

1:21:17dibikin untuk bikin telwin bikin kompetitor telwin Iya bikin kompetitor iya ya atau kalau suatu hari Twin obsolid ya kita pakai basisnya e pakai

1:21:28pattern yang kayak ginilah ini lebih ini murniical appro hanya saja yang si openps yang kita instal adalah eh

1:21:41variabel-variabel yang sudahudah buildinsnya kan buildin variabelnya Edo misalkan spek rasio spek rasio juga sudahah ada bisa juga begini kalau

1:21:51misalnya kalau kalau digabung ya Saya pernah punya ide pakai openprs itu bisa di ee Coba buka mas Riza kayak

1:21:58patternnya komponen dari webd untuk best practice jadi si webd ini juga sudah memberikan best practice untuk animation

1:22:09componen segala macam jadi html structur-nya sudah ada nih contohnya karusel Diah buka karusel kusel ya atau apapunlah sama aja sih karusel menjadi

1:22:20Nah kan si karusel ini sudah ada html maksudnya secara best practice bentuk html struurnya gimana gitu Nah dari kita

1:22:31bisa bikin komponen-komponen ini e di desain patternnya kita atau di kita punya biasanya eh Project kita kita sudahah define Oke

1:22:41kusel begini dialog begini E setting atau form button paling utama tu button t segala macam sudah ada

1:22:50patternnya dan pakai open props untuk ng-define Tem 1 tem 2 tem 3 Tem 4 jadi itu yang diubah variabelnya kan kayak

1:23:00di Yes jadi markup-nya kan ya e markupnya tetap sama masa kita ganti tim ganti markup kan repot Iya betul betul

1:23:09jadi itu dan sangat terbantu sekali untuk eh menhandle Project yang skalanya enterprise karena ee ininya banyak komponennya banyak oke

1:23:23k Build in helper kan tuh is is apa Shadow itu gimana fade in itu Gimana wah nice sampai animasi segala ada size-nya

1:23:32jadi kita enggak perlu mikirin Wah saya mau size berapa gitu Pakai aja yang ada di sini ini cuman kayak preset semacam

1:23:39preset gitu Heeh betul Kalau mau yang kompetitornya si telwin Uno kan Oh Uno CSS ya Iya buatannya sih Babang siapa nam namanya

1:23:52bukan bukan bukan Mak UN bukan beliau engak bikinu anu anu anu Oh manusia Manusia Sejuta Project open source ya

1:24:05Iya kalau ini ya Iya ini Eh bisa dibilang Eh head to head lah sama si kan baru

1:24:16kita saya programmer saya juga program oh bukan Twitternya undefine lah coba contohnya mana contohnya contoh Why Uno atau Why

1:24:34eh getting started Iya sama sama kan sama kayak Twin Twin itu kan sebetulnya mengimplementasi e filosofi atau

1:24:48pendekatan Atomic CSS kan punya satu properti satu Class name Oh I ada yang baru nih style X ya

1:24:59style x-nya Meta Meta Facebook dipakai juga buat Bas sty apa yang dipakai buat open open ya w keren

1:25:11jugaoba mungkin tadi soalnya pas kita lagi bahas opens I Bens ini ya benar ya sty XS

1:25:26ya Oh Ben kitaat contonya di mana lear sty using style oh sangat re sekali ya

1:25:52kapan-kapan Yuk kita bikin episode e battle battle CSS Framework bikin mark up yang sama cuma pakai CSS Framework a b c terus lomba

1:26:05siapa yang menang gim gimanaitung ya doang cuma lihat aja bentuknya kayak gimana Eh mana ininya e dependensinya Wah banyak sekali ada gak

1:26:18opens Gak adaak ada tuh enggak ada Prof ada ini jadi base infonya dari mana Wah kalau Damar dia memang

1:26:33penggemarnya next ya Eh penggemarnya view ya dan teman-teman ya engak perlu bracket misalkan h88 VH menjadi Oh kalau

1:26:46di Pak kurung ya pakai kurung ya Ben itu tujuannya kan Force token namanya eh di luar tailwin pun ada kan kayak design

1:26:55token jadi tokennya itu misalnya du eh 0,25 remem 0,5 jadi Biar enggak banyak Eh arbitrary value tiba-tiba di sini

1:27:06marginnya 14 pikel gitu kan sebetul kan jadi kayak kita udah mendefinisikan eh itunya Kayak value-value misalnya huruf

1:27:14cuma bisa 14 16 18 20 bla bla bla Kalau di luar itu eh Escape hatch-nya Twin ya

1:27:21itu pakai tek tek bracket ya pertanyaan Uno CSS umumnya adalah Uno CSS apakah EE apa Eh teams-nya udah banyak apa kayak eh

1:27:35UI library-nya seperti flowbite atau da UI atau Heeh kalau Tin Enaknya kan ya teluin UI kalau punya duit ya yang

1:27:45berbayar yang gratis itu isi yang gratis Ada banyak ada flowbite ada DAC ada macam-macam flow iya dan masing-masing

1:27:52juga kayaknya itu ya premium ya bukan bukan gratis benar-benar gratis ya premium ya Ada ada premium teamsnya juga nah kalau

1:28:04gratis Uno kayaknya belum sebesar itu ya gratis sekarang kayaknya dia jualan template jualan template ada ada Uno tu

1:28:14ada Ada Ya ada tapi mungkin sedikit kan belum sebanyak minimal ada satu atau dua gitu Buat apa Buat kita memudahkan kita untuk

1:28:25ee menggunakan daripada kita gunain langsung gitu ya itu udah kalau Tin kan saking banyaknya kita bisa comot sana

1:28:34sini kan atau kalau kita lagi buru-buru atau misalnya kita nunjukin nih ada butuh bikin protottipe kilat kita sama

1:28:41orang produk gitu kayak gini ya kayak gini ininya ganti jadi gini Oh ya langsung comot langsung langsung iya i

1:28:49Maksudnya enggak pakai proses e UI desain yang proper Ya maksudnya kalau buat Prototype kan belum maksudnya belum

1:28:56sampai situ misalnya he he benar benar ben comut sana sini nah I kita udah udah dulu ini kita otaknya udah kayak curly

1:29:06bracket CSS kan udah sudah next ini masih mikirin layer itu apa Kayaknya habis jangan sampai ke bawah mimpi deh entar malamimpi mau baca

1:29:19baca soal layer layer tuh bikin demo loh dulu tapi bikin demonya ya simpel doang cuma ini harusnya menang tapi ee karena

1:29:28ada layer ini jadi enggak menang cuma jadi penasaran sih mau revisit lagi ya Oke deh kalau begitu kita udahan dulu ya

1:29:38Kita istirahat dulu ya capek ya kita ketemu lagi minggu depan untuk bahas mungkin kita akan bahas ee kayaknya

1:29:46lanjutkan yang lain dulu biar enggak pusing oh yang lain dulu oke boleh yang lain dulu nanti dulu nanti kita bahas eh

1:29:53berikutnya eh di bagian responsive Interaction dan componen mungkin di beberapa ya diseling-seling lah biar enggak CSS terus nanti jadi ngobr CS

1:30:05betul karena kita juga kompetensinya bukan di CSS Ya sudah bisa ee kalian nilai sendiri bagaimana skill CSS kita

1:30:15yang paling jago kayaknya Eka doang di sini ya mencari pembenaran Maaf saya anak backend gitu ya kalau begitu kita e

1:30:29udahan dulu terima kasih buat teman-teman semua eh seperti biasa diskusi saran dan topik bisa kirim ke kesana.in/ngobrolin eh di github-nya

1:30:40ngobrolin web kalau mau ikut kontribusi belum bisa karena kita belum bikin proeknya kita mau bikin website-nya tapi

1:30:48belum jadi-jadi tapi masih wacana masih wacana mudah-mudahan nanti eh kita bikin terus teman-teman juga bisa kontribusi untuk sekaligus Cobain prakkin Apa yang

1:30:59kita obrolin Jangan cuman ngobrol doang ya Oke kalau gitu e udahan dulu untuk malam ini Terima kasih banyak Sampai

1:31:06jumpa minggu depan Bye bye