Ngobrolin CSS Wrapped - Ngobrolin WEB

2:36yang bisa saya cuma satu ini belumnya pembahasan sama sekali biasanya link

2:46dan kan ini belum ya ini masih kosong soalnya salah satu yang di-highlight

2:54ada fitur transition yang sering bahas ya Jadi itu juga menarik Halo Ari selamat

3:03Halo Halo ya Jadi malam hari ini kita akan coba mereview selama 2023 itu fitur out CSS apa aja

3:12sih yang muncul dan yang menarik juga ya nah cuma ngomong-ngomong apa kalian tahu-tahu apa aja apa

3:19yang kalian tahu apa aja Oh ini nanya ke penonton nih ya penonton kalian juga kalau Eka sama Mas

3:27ada yang tahu sebelum nyontek view transition sama nesting nesting nesting juga ya has ya has

3:37has kayaknya itu yang paling di highlight ya salah satu yang paling di highlight ya soalnya kayaknya

3:42karena stable iya karena keren banget dan Firefox sudah sudah mensupport nah itu sebenarnya yang

3:53tahun-tahun itu di akhir tahun kejutan rakyatnya ada dari senterkelas Desember itu kuingat antara

4:01tanggal 9-9 Desember deh dia nice Nah kalau gue sih udah tahu hampir semua kenapa alasannya karena

4:10jadi pertama kali apa speaking apa jadi pembicara di event io extended yang in person sebagai jadi

4:19Itu topiknya kayaknya 2 tahun lalu deh topiknya itu topiknya fitur CSS yang di present itu itunya talknya Mas Adam Ergel itu loh yang di IO Extended

4:37nah cuma itu kan sebagian besar waktu itu masih ya Chrome only

4:41cuma yang di present emang yang browser lain vendor lain udah kayak ngasih approval lah

4:49jadi emang udah besar kan sebakal di approve

4:51jadi kelihatannya sebagian besar yang disini sih udah pernah ketemu lah

4:56Oh udah pernah semua ya kepake-kepake has kepake banget hasware nanti deh pas lagi

5:06bahas bakal ada use case nya dimana gitu ya sama ini penasaran sebelumnya web itu tahun-tahun ini

5:14kan di awal 2024 ada kayak rubrik rubrik fitur ada konten prep yang kebahas panjang 2023 ada

5:24aja tahun lalu ada enggak sih tahun-tahun lalu kayaknya pertama kali ya Hai apa gara-gara interop

5:302023 juga ngaruh gak ke situ mungkin Iya kan enggak harus ada interop juga Iya sih mungkin

5:40gara-gara itu ada salah satu komiknya coba ya cc surab 2022 kayaknya enggak ada deh ada kayaknya

5:50mulai ada yang ada itu cuma setiap I o Google I o emang ada Biasanya ada satu talk besar yang

6:02meng-cover semua fitur UI atau front-end related sih cuma CSS web yang kayak gini presentasinya

6:09kayaknya baru tahun ini seru juga kan biasanya ada itu kan kalau yang almanakan ya biasanya

6:16kalau almanac review review tahun lagi eh udah hanya statistik ya eh sorry almanac ya almanac

6:27user statistik semua tentang web tapi ya emang kan masing-masing bidang ada yang di highlight

6:33kalau CSS tren yang menarik apa kecenderungannya user kayak gimana ya bukan tentang fiturnya sendiri

6:41berguna ya buat kita yang jarang update ya bukan jarang update buat kita yang punya kerjaan yang

6:53berbeda yang lain tapi mau ngikutin ini semua tuh kagak bisa gitu Iya iya iya biasanya cuma

7:02nyuruh orang frontend doang ya berarti alasannya ya ya ya ini topik-topik besarnya ada arsitektural

7:11foundation ada type tipografi ada color harus lumayan banyak ya ya banyak banget kita pernah

7:19bahas banyak nih waktu bahas warna dulu ada responsif design disini termasuk konten masuk

7:26gak masuk ya ada yang masuk ya apa stablenya di 2023 mungkin vendor browser lain itu yang

7:37itu yang bikin kita ngobrol pertama kali soalnya ya container query dan itu 2022 ya

7:432022 interaction termasuk view transition ada komponen ya ada itu ya Oke kita langsung bahas

7:50kali ya seru-seru nih nah ini ini kesimpulannya pertama langsung atas-atas dulu deh itu apa catetan

8:01tentang nah ini interop sama baseline baseline itu project kerjasama antar vendor browser dan

8:11pihak-pihak lainnya jadi kayak bikin apa ya cara yang gampang untuk tahu fitur ini udah aman dipakai

8:21di semua browser atau belum nah semua browser itu ya cuma major browser only ya jadi intinya

8:27Chromium, WebKit atau Safari

8:30Sama

8:31Firefox

8:32Itu di dua

8:34Versi major terakhir

8:37Nah kadang kan ya itu tadi

8:39Kayak misalnya kalian yang sehari-hari

8:41Nggak ngerjain frontend

8:43Sebetulnya tahu misalnya ada fitur

8:46CSS

8:47Pseudo selector has atau where

8:49Tahu sih tahu, cuma kayaknya

8:51Cuma pernah beces kilas

8:53Terus mikir, ah paling Chrome doang nih

8:55jadikan gak pernah pakai kan gak pernah adopsi developer banyak yang enggak pernah adopsi fitur baru karena mikir ah paling masih belum belum di support browser lain nah jadi terus ya kalau ngecek can I use bisa cuma kan nggak semua

9:10orang mau dan sempat jadi ada inisiatif baseline batch nah itu batchnya ada centang kalau centang

9:19udah aman bisa dipakai kalau apa sih tuh eksil masih partial kontrasi jelek ya Nah itu berarti

9:28belum semua tapi ininya bagus-bagus ya grafik Oh lucu banget NN bisanya keren Oke kita masuk

9:38ke foundational arsitektur foundation architectural apa itu core CSS language and capabilities

9:46conditional berarti mendasar ya jadi sebelumnya kita nulis CSS nya kayak ya udah important important

9:54important aja atau ditaruh di bawahnya pokoknya sekarang ternyata ada cara baru untuk biasanya

10:01developer yang bukan frontend bahkan developer yang frontend juga pada males nulis CSS kan

10:07karena itu kan karena maksudnya apa spesifik spesifikasi lah terus takut ngubah satu kelas

10:16takut berubah semua atau ada hal yang nggak pengen diubah, ikut berubah.

10:21Nah terus jadi suka banyak hack-hack atau workaround yang aneh-aneh.

10:25Nah ini semoga bisa.

10:27Menurut saya architectural affirmation ini maksudnya kapabilitas CSS yang bertambah.

10:33Contohnya, ingat nggak dulu kalau sebelumnya di CSS berapa mungkin nggak ada math.

10:43kalkulasi sebelumnya enggak ada sekarang sudah ada maksudnya foundation adalah

10:53capabilities CSS yang nambah fungsinya contohnya trigonometrik function tuh nah tapi yang scope

11:01dan nesting nanti juga ngaruh ke itu gimana kita meng-arrange apa jadi lebih enak aja sih nulis CSS

11:08cara langsung ya kalau dibilang arsitektur kan kayak misalkan zaman dulu kan ada yang namanya

11:14apa Oh object-oriented CSS ada yang BEM ya OCS SAB BEM itu apa elemen-elemen modifier ya itu

11:30kan kayak arsitektur kan Bagaimana cara kita menuliskan rumpung organisasi kode cc-nya

11:35asen pattern sih itu pattern oh iya juga juga termasuk juga nested kan nested yang sebelumnya

11:43nesting nesting itu sebelumnya hanya bisa dilakukan di scss preprocessor lah ya

11:52ssas slash dan lain-lain sekarang udah bisa native gitu tapi trigonometri eh sambar dong sambar

12:03sambar tepuk tangan Oh sambar tepuk tangan oke trigonometris ini jadi kayaknya semakin kesini

12:13semakin saya semakin menjadi bahasa language ya jadi semakin kompleksnya bukannya dia memang

12:21language ya nah itu kan nggak tahu styling language cuma ini bahan debat kayaknya orang

12:29seperti Twitter tiap dua minggu sekali ada yang nebet is CSS programing language HTML aja nggak

12:36dianggap lenjus padahal belakangnya el itu lejus lupa enggak kan bukan Iya bukan programing

12:43programming language styling language kan enggak itu kan resket install shit enggak ada lenjusnya

12:53coba skrong ke atas dikit coba skrong styling language nah yang didebatin apakah styling itu CSS language

13:02iya apakah CSS adalah styling language coba teman-teman nah apakah styling bisa dianggap pemrograman kan logik udah ada kan

13:11udah ada variable ada logic ada kan media query kan sebenarnya logic tapi looping belum ada looping belum

13:19belum-belum pinggang yang belum sekarang nih matematika bisa apa bikin apa bisa kondisional

13:28bisa kalau nanti ayo ping sedang looping batu bisa jadi harusnya turing turing komplit konon CSS turing komplit cuma yang tekan depan lah kita bahas kita

13:44bedah Bagaimana CSS adalah turing komplit udah dicari-cari aja biar ada materi ya kan

13:50Iya ini oke trigonometrik fungsi trigonometrik itu kira-kira bisa buat apa ya yang standar itu

14:01bulutan apa kitung sudut Oh oke bisa jadi begini ya jadi ngitung sudut bisa muter gitu ya enggak

14:13enggak dua dimensi lagi ya ini kan dua di sini kalau begini Wow terus tahu nggak sih kalau menu

14:22lupa dulu namanya apa di material design yang kanan bawah itu loh kalau kayak Oh F abing and

14:29rohani kadang kalau kita pencet itu tuk tuk muncul di apa Oh kayaknya besok sekitarnya kan

14:38kayak angka jam lah, kayak angka jam analog

14:40nah kalau dulu kan masih pakai javascript buat ngitung sudut-sudut itunya ikon-ikon

14:46kalau ini gak perlu lagi ya?

14:48masih pakai javascript, javascriptnya apa nih?

14:52oh itu kalau gak support

14:56oh ini fallback nya

15:01caranya gimana? angle

15:03angle

15:05ini kan inflyable ya

15:08terus wiki frame buat animasinya itu kan cuma variabel variabel salah CSS property

15:17atau variabel tuh properti nah jadi nama resminya ini nyebelin deh nama resminya CSS property tapi

15:24panggilnya dengan far-far tanda kurung waaih kok nggak prop ya Iya hahaha pakai satu istilah gitu

15:36ngapain pasti ada yang aneh sih maksudnya alasan yang make sense cuma ternyata Oh gitu tapi tetep

15:44aja nyebelin jadi dikalplasi ya ini ini buat buat dapetin dapetin value dari sebuah variable

15:53kan ini kan varian ya ya bisa diprokrasi pakai kos di dalamnya ada variabel lagi ditambah variabel

16:01lagi dikali variabel jadi ribet ya ya Bu ya Maaf ya saya dulu anak IPS pas SMA kalau dapat

16:12matematika sih tapi simposen udah lupa semua oke ya kita yang anak kita aja nggak inget belum ngerti

16:22belum ngerti nih kontra lojiknya kenapa dia bisa jadi gimana ya intinya sekarang udah ada fungsi

16:28untuk trigonometri jadi kita nggak perlu nulis itu di javascript dulu untuk dikirim ke CSS bisa

16:34langsung gitu ya kira-kira kalau misalkan teman-teman mau bikin kayak bikin apa ya bikin

16:39grafik mungkin charting library tapi visual apa data face udah ada kan si siapa itu mas

16:50Weld Rich Harris Iya dia bikin jadi enggak pakai JavaScript bisa bikin charting library ini juga

17:01bisa misalkan mau representasi matematika belajar apa buat mungkin website untuk membuat kita belajar

17:09perhitungan simposan kota itu dan misalkan bisa tanpa javascript Oke lanjut ya kompleks nth

17:21selection ini apa nih mcl-ncl kan selama ini kita punya calc sama of type kalau calon ada

17:31first time adalah style ya Jadi apa buat apa kalau misalnya elemen pertama dalam dari suatu

17:40perutkan first child elemen terakhir last child nah mth child dalam kurung tiga berarti anak

17:48anak ketiga dari parent elemennya. Nah yang baru apa? Bisa dibikin out event juga kan ya? Iya bisa.

17:56Oh iya ini kita kalau misalkan mau bikin table row yang apa ganjil, belang-belang gitu bisa langsung

18:07tanpa harus menggunakan JavaScript atau bahasa pemulgaman lain ya

18:12kira-kira ini dari dulu?

18:15enggak dulu enggak ada dulu kita buat bikin manual

18:18ya dulunya misalnya

18:20dulunya di PHP

18:222-3 tahun

18:22oh ya

18:24di PHP doang

18:27JavaScript juga bisa

18:28nanti dikasih kelasnya event all

18:32event all aja

18:33kelasnya apa?

18:34pake mod ya

18:36modul modul modul modul modul moderator

18:47oke ini apa sih hasilnya gimana lihat lihat oke

18:59halo halo aku masih pemula Iya sama kita juga masih pemula

19:02output element that match the build sector will pulsate maksudnya Oh Oh yang baru ada offnya

19:16jadi kalau yang pakai n itu emang udah dari dulu ya mau saya dari ya lima tahun terakhirlah tapi

19:22jadi ada dua lapis kondisionalnya dua tapis

19:29kalau ada big big big big maksudnya di sini kan ada big ada small jadi bisa yang kita targetkan

19:39wow keren ini kira-kira use case nya buat apa ya blog post yang gak harus blog media

19:50punya konten post misalnya post type-nya macam-macam ada yang video post ada yang

19:55galeri post ada yang apalah terus kita pengen pos paling atas untuk masing-masing tipe itu

20:03ya kayak ada highlightnya lah atau ada apa penanda sendiri tapi kan mungkin stylenya lain

20:09ya peningnya lain atau apa jadi emang kita mau custom berdasarkan masing-masing post type

20:15Oke make sense apalagi ya enggak tahu sehenggaknya scope-scope masih belum ya belum ya Firefox sama

20:30Safari tuh Safari mata tandanya apa masih lihat-lihat lihat kondisi minat-minat sekon

20:40Oh udah itu kan ada itu request for position jadi buat temen-temen yang belum tahu jadi ada namanya

20:46RFP buat fitur-fitur web platform jadi misalnya kalau dalam hal ini Chrome team Chrome yang namang

20:54inisiasi boleh bikin kebuka isu buka isu di repo request for positionnya webkit misalnya atau di

21:05Firefox jadi kayak pitching gitu lah kayak mempresentasikan API ini cara kerjanya begini

21:12gini gini use case gini gini gini terus bisa aja siapapun orang webkitnya atau maintainer atau

21:18kontributor atau siapalah misalnya ada keberatan di bagian apalah ke kalau gini gimana atau misalnya

21:25faktor keamanannya gimana jadi yang yang mempropos harus dijelasin dan ngasih contoh jadi ada kalanya

21:34ya bisa dicuekin aja, bisa ditolak, ditolak tuh maksudnya kami tidak tertarik, not interested, bisa menyatakan interested.

21:45Nah, itu kan happy path-nya ya si browser vendor lain ini juga tertarik.

21:51Nah, tapi tertarik itu bukan berarti langsung ada kan, cuma menggambarkan bahwa, oh oke mereka setuju, secara konsep setuju,

21:58suatu saat mereka kemungkinan akan mendevelop fitur itu juga masukin di browser.

22:05Tapi ya nggak janji kapan.

22:07Nah nggak tahu cuma tanda mata itu betul untuk menyatakan soal request for position

22:12atau bukan nanti kita lihat-lihat lagi ya.

22:15Oh kemana dia? Hilang.

22:17Preview.

22:18Preview.

22:20Oh berarti udah.

22:21Udah mau launching.

22:25Teknologi preview berarti.

22:26Oh berarti itu ya Safari yang preview version ya

22:30Oh malah udah bukan request for position lagi ini Emang udah mau masuk ya Iya udah mau masuk Udah masuk deh channel teknologi preview Firefox X

22:44Ya, sedih.

22:46Nah, scope ini adalah, dengan scope kita bisa sangat spesifik,

22:54mau menunjuk elemen yang kita pilih tanpa harus menulis

22:59apa ya

23:02specific selector

23:03jadi kan misalkan

23:05ada kita mau select

23:08image di dalam

23:09H1 gitu ya jadi harus dari

23:11body

23:12header H1 image gitu

23:15gitu gak sih

23:17atau gimana nih

23:18iya jadi kan biasanya kita takut nih

23:21misalnya ada

23:22kelas namanya card content

23:24oke lah pertama card content

23:27itu awalnya emang

23:28ya simple ini kan pattern

23:31ini juga contoh yang pakai pattern

23:33BEM kan, block element modifier

23:35jadi blocknya adalah card

23:37elementnya

23:38secara logik sebuah

23:41parentnya atau containernya

23:43adalah card, kelas card

23:44dalam card ada misalnya card content

23:47card ada contentnya

23:49jadi card underscore

23:50dua kali content

23:52nah cuma ternyata misalnya bukan cuma

23:55card, misalnya ada

23:56slide, ya ini ngarang lah

23:58misalnya tiba-tiba orang produk atau tim lead kita

24:02turuh bikin slide.

24:04Tapi slide itu ada kontennya juga

24:06dan persis banget isinya sama card content.

24:10Jadi dalam slide kita pakai card content aja

24:13biar nggak ngulang-ngulang kan misalnya.

24:16Nah, ke depannya jadi udah,

24:18habis itu kita udah ngerjain lain, kita lupa semua.

24:20Nah, terus kalau kita mentargetkan card content,

24:25jadi takut nih karena tiba-tiba misalnya kita disuruh

24:28ngubah warna background atau ngilangin

24:30padding, kirain kan cuma di card

24:32kan namanya card content ya

24:33slide-nya rusak semua

24:36orang jadi takut

24:38pakai CSS, jadi kan

24:39solusinya selama ini, orang pakai

24:42CSS in JS kan, banyak

24:43pakai kayak, apalah style components

24:46atau emotion, atau yang lebih baru

24:48lagi ya, beda pendekatan

24:50pakai approach-nya tailwind

24:52yang atomic, satu property

24:54satu kelas sendiri, biar

24:56Kalau itu kan malah nggak bakal rancu kan

24:58MTM 4 ya margin top 4

25:00Udah beneran nggak bakal ada yang lain

25:02Cuma ini ada

25:04Alternatif yang bikin kita lebih

25:06Apa?

25:08Yang bikin CSS lebih powerful

25:10Jadi nggak perlu CSS in JS lagi

25:12Nah kalau kasus card content tadi kan

25:14Contoh baris kedua tuh scope card

25:16To card content

25:17Jadi card content

25:20Hanya yang berada di dalam card

25:23Kalau kebetulan

25:24entah gimana kelas kartu konten itu dipakai di hal-hal lain juga,

25:29ya nggak apa-apa, nggak akan ngaruh ke situ.

25:32Kasih skop lah ya, skop itu kan kayak kasih ruang lingkup,

25:36supaya jangan kontaminasi.

25:39Cuma ini sintaksnya menarik sih, jadi kita tetap ya,

25:43tetap aja sih nggak mecahin semua masalah juga,

25:46kalau misalnya kita pakai selektor kartunya di berbagai tempat,

25:51ya tetap bisa ada kemungkinan.

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

26:00kalau pendekatannya CSS JS style components dan lain-lain itu kan biasanya pakai itu kan randomize

26:05telok karakter random gitu jadi class namenya kan Oh iya iya iya generate auto generate dari

26:14DHS dari library nya kalau ini enggak kita tetap harus pakai selektor cuma kita mentargetkan selektor

26:21parentnya dan card parentnya tuh terus yang pengen kita targetin card content harus berada

26:27di dalam parent yang ada kelas card itu oke oke masih belum ngerti banget sih gua harus

26:37lihat contohnya sih harus ini contohnya coba apa tuh in this following demo the image elements in

26:48the carousel component are not match because of the applied scoping limit

26:56jadi? maksudnya kita ada?

26:58nested carousel itu kan ada carousel itu di dalam

27:01oh di dalam ini

27:03itu kalau misalnya kalau kena stylingnya jadi ada bordernya di image oh berarti cuma karena itu border yang di luarnya aja tapi image yang di dalam dan itu karusel nggak kena

27:16nggak kena border oh iya ngerti live demo aja scroll kan nggak kena another child image

27:27ada border nya image-nya enggak ada border karena enggak di dalam kartu Oh kalau coba lihat itunya

27:39sih kode lihat CSS nya itu cuma ini ada card content terus ya scope-scope oh scope-card

27:51data component ini apa?

27:53only match the element in the card component

27:55but don't target those in the nested component

27:58nested component itu sih carousel itu tadi ya?

28:01iya

28:03oh ini data component sama dengan carousel

28:06ada ini nya, ada property nya, props nya

28:09tambahin card component

28:12jadi scope card to data component

28:15image nya

28:170,25 ini 0,25 yang mana ini Iya boda radius kangen boda radius Iya kita kasih aja ganti

28:28nggak bisa ya oke diedit Oh ya nggak bisa harus obin review doang nah kalau eh bentar data

28:38komponen itu yang carousel kan ini bukan data komponen kan yang atas tapi ada ini kan div

28:45itu div class card data komponen kartu ya kan Oh iya data komponen kartu Oke Oh walaupun sama-sama

28:55ada data komponennya kalau enggak berada di dalam kartu kalau enggak berada di dalam kartu oh gitu

29:03ya nice itu ya scope kartu data komponen kok agak ya karena bahasa masih baru kali ya sintaksnya

29:12sintaksinya agak awkward ya. Karena kita belum pernah, kan belum pernah ada kayak gini, belum pernah ada sama sekali kan interlineal.

29:21Betul-betul. Kalau mungkin kalau solusi sebelumnya, mungkin kalau web component pakai itu kan, pakai Shadow DOM kan.

29:32Jadi dia scope-nya di satu komponen kan.

29:35Tapi nggak mesti pakai data komponen juga nggak apa-apa.

29:38yang nge-harm is selektor apapun selektor apapun yang ingin kita targetin kan cuma perkara data

29:45komponen yang ada di dalam kartu kayaknya eh terus bentar oh maksudnya gini daripada kita

29:56menuliskan menulisnya spesifik misalnya dari body.card.apa.apa.apa sampai target image

30:04tentu kita bisa mentargetkan hanya dengan pakai scope jadi semuanya gitu kali ya maksudnya

30:15coba kita bisa

30:20buka-buka tempe lebih lumayan head helpful sih Hai coba buka temelnya terus search data

30:33komponen ini data komponen ada di atas satu yang iya Nah itu kan ada card khasnya card

30:40jadi itu kena ya kalau nggak salah itu image-nya ada bordernya kan ini kartu juga kan sebenarnya

30:48Iya kartu betul kartu di dalam kartu kan ini kartu juga kan ini karusel ya bukan kartu ya

30:56Oh iya kartu konten ini dalamnya ini kartu semuanya dikanin tapi di dalam kartu ada

31:04karusel harusnya pakai div itu enggak ada kelas enggak ada kelas kartu

31:10jadi

31:20dan image-nya berarti sebenarnya sebelumnya dot kalau kita kasih dot card

31:29dot card image maka semua image di dalam dot card itu kena ya kan sedangkan kalau kita kasih

31:35kita kasih scope scope nya apa dan dalamnya berarti hanya cuma cuma direct charge doang direct charge si card itu iya itu tuh maksudnya

31:49logic-nya lumayan itu ya maksudnya kayaknya kita nggak expect CSS untuk punya logic sedetail ini kan

31:58biasanya kalau kita harus gini ya pasti pakai jelasin bukan yang dulu tinggal dikasih panah panah eh atau kurung siku gitu ya apa apa namanya itu

32:05lebih besar bisa kan jadi direct cahaya. Oh itu sibling. Oh iya direct cahaya.

32:12Tapi kan direct cahaya terus image kan kayaknya cuma bisa satu lapis ya? Iya. Bisa gak sih

32:21begini-gini sampai banyak gitu? Bisa banyak, cuma ya harus di-define semua kalau pakai

32:28harus berapa lapis kalau sedangkan kalau kita target kan semuanya.id ini dalam karusel kena

32:36itu tuh maksudnya kan berarti kita harus ngitung tuh kalau mau pas image yang ini doang berarti

32:43anak keberapa biar kita nyesuaiin jumlah sih apa tanda lebih besarnya itu kan Oh ya gitu deh

32:53seperti saya saya tambah bingung

33:03bingung lagi kalau lihat apa komentarnya kan penasaran nih musila bakal adopsi atau

33:12enggak udah baca sampai bawah walaupun ia skimming doang tetap nggak ngerti sih ini

33:18maksudnya Mozilla berniat adopsi atau enggak?

33:23Ya, tadi request.

33:24Oh, request.

33:26Mereka request posisinya Mozilla.

33:30Ada keberatan atau enggak?

33:32Kalau keberatan, keberatannya di mana?

33:34Diskusinya sampai panjang banget.

33:37Tetap enggak jelas.

33:39Ya, mungkin harus dibaca dengan lebih teliti ya.

33:48anyway ya Scroll aja udah sampai bawah yang paling bawah cuma update bahwa Safari has enabled scope

34:00lapor-lapor doang ini ya belum lama ini mah baru bulan lalu coba Mas Diza komen kapan

34:10di marahin

34:16ketahuan nggak baca gitu

34:22ketahuan nggak baca atas-atasnya

34:25cuma sebenarnya menarik sih

34:28jangan hapus-hapus

34:35menarik baca pertimbangan-pertimbangannya

34:37terus jadi

34:38jadi kerasa banget

34:40Oh ribet ya saya banyak hal yang harus dipikir ribet bikin-bikin browser itu ribet banget mudah-mudahan

34:51Eh siapa ya yang bisa kita undang ya yang tukang bikin browser dulu ada tapi sekarang dia posisinya

34:57di Google masih masih di Google atau gimana kita enggak tahu ya ada Oh iya dulu ini Google Chrome

35:06tapi kan banyak apa banyak reshuffling kan pada pindah ada yang ke Edge ada yang kemana karena

35:15kalau menurut mereka yang biasa develop browser itu orang-orang yang kerjanya engineer untuk

35:24bikin browser itu larinya enggak jauh-jauh tetap ke ranah browser juga jadi paling larinya antara

35:30Iya karena kan udah familiar sama cara kerjanya.

35:34Iya ke Safari, ke Firefox, atau ke Edge, ke Microsoft sekarang gitu.

35:40Atau udah nggak jadi IC lagi, ya maksudnya masuk lead atau manager atau apa semacamnya.

35:49Flexbrew, otakku masih berproses.

35:52Sama.

35:53Sama.

35:54Ini salah satu fitur CSS juga ya, Flexbrew.

35:58Flexbrew.

36:00nesting nesting ini yang yang membuat salah satu apa ya salah satu fitur yang

36:08yang menarik di apa asas itu adalah nesting ini preprocessing

36:14processor killer ya dan apa maksudnya entah preprocessor atau CSS in JS pokoknya CSS

36:20library killer lah kalau udah udah diadopsi semua browser lagi udah ya sudah mencapai

36:28baseline bisa jadi Tailwind Killer nggak sih nggak beda fungsi kan

36:34jadi tuh kita bisa nulis ya nesting ya jadi di satu properti di dalamnya kita mau select

36:46DT DL DT apa ya detail kayak key value untuk mempresent key value ya terus di

36:56dalamnya kita mau tulis lagi nestingnya bisa sampai unlimited nih

36:59kalau dulu kan kita tulis kayak gini ya DT dulu semuanya terus habis itu kok DL di depannya Oh

37:11ya emang DL di depannya DL terus kemudian ini asumsinya bahwa DT itu adalah anak dari DL kan

37:20Iya DL itu definition list nah eh terus satu list itu ini untuk kayak tabular gitu loh key value

37:29misalnya nama Eka hobi tidur ya Iya ya enggak harus table sih apapun yang key value nah terus

37:38dt itu definition eh detail term pokoknya t-nya term denya apa enggak enggak inget sih t-nya term

37:45Terus DD itu definition.

37:50Hmm, oke.

37:52Intinya gitu, jadi kalau misalkan dulu kita harus definisi dulu DT-nya,

37:56terus DL-DT-nya apa, terus DL-DD-nya apa.

38:00Karena ini adalah chart dari si DL.

38:02Karena bisa aja kalau kita tulis DD doang,

38:06siapa tahu di bagian yang lain ada DD yang lain jadi kena gitu kan.

38:11PD Yusuf.

38:12Iya jadinya ini termasuk bagian dari nesting eh sorry scoping juga sebenarnya kan jadi di dalam

38:21dl kita bisa styling apa gitu kemudian di dalamnya ada anaknya anaknya ada dua nih kayaknya lebih

38:30seru kalau bisa kayak ampersand gitu enggak sih kalau di esas itu kan bisa n apa gitu jadi bisa

38:37di taruh tengahnya iya pernya ditaruh tengah enggak tahu belum belum di nah ini nih contoh

38:45yang paling sering mungkin ul atau l di dalam OL itu pasti ada Eli kan Nah misalnya mesin seperti

38:52ini ini contohnya terlalu itu ya terlalu terlalu anjur selalu nah akan Eli kan uleskan OL itu order

39:04klis pakai nomor 123 kalau ul-an order klis biasanya pakai bulet atau strip atau apalah

39:11nabung sekalian stylingnya Bu kadang butuh customization yang berbeda mungkin pendingnya

39:18beda karena kan mau saya kalau angka mungkin lebih besar atau apalah bentuknya lain dibanding

39:24bulet jadi kadang repot ya kalau harus olle ulle sekarang bisa nesting keunggulan lain yang penting

39:33penting bisa di itu loh bisa di kolaps apa expand collapse kalau di fiascode kan enakan

39:39Oh jadi untuk kegiatan itu bisa di holding ditutup ya kalau layer itu apa sih add layer

39:47nah lupa mas Doni mas Deni nah mth calc dalam kurung 1 mth calc dalam kurung 2 mth calc dalam

40:03123 terus kasih animation ya ini 123 ini ini balap-balap capres bukan

40:14bahaya-bahaya udah kemarin kan ya apa namanya kemarin itu debat capres ya

40:25coba Cawapres kan kalau hari ini kita debat CSS aja CSS iya layer ini apa ya

40:36ya fitur baru juga itu untuk mengakalin spesifikasi pokoknya penjelasannya apa ya misalnya kan ada satu elemen namanya kartu kelasnya kartu bisa

41:01ditarget div itu alamanya div

41:03kelasnya

41:04bisa ditarget pakai

41:07CSS selector.card

41:09bisa ditarget pakai

41:11selector div

41:12bisa misalnya parentnya

41:15container gitu, bisa ditarget

41:17dengan selector.container

41:20terus bintang

41:21nah itu kan semua men-target

41:23ke elemen yang sama kan

41:24tapi kan misalnya

41:27masing-masing style tuh

41:28meng-assign warna yang

41:30beda harus ada salah satu yang menang kan Nah itu makin makin tinggi spesifikasinya itu masing-masing

41:39ada itungannya ada poin-poinnya siapa yang menang siapa siapa yang ke style-nya beneran diterapin di

41:47elemen itu nah layer itu kalau nggak salah untuk ngakalin itu cuma exactly gimana nggak inget

41:52karena kelihatan belum semua browser bisa deh jadi nggak pernah pakai juga baru tahu ini layar

42:00untuk animation bukan itu keyframe animation layar buat taruh di atas gitu kan paling enggak

42:11bukan demo ini apa demo ini demo mana demo Coba CSS player tuh apa sih demo penasaran

42:20kita cari enggak ada di sini ada demo di sini bukan mau saya penjelasan si layer

42:28Hai pada sudah ada di baseline 2022 2222 lo player awal ya

42:43Hai karena enggak diorep 2022 kita jadi enggak tahu nih

42:47nah seperti biasa seperti biasa mbn kayaknya

42:55gue tahu dan pernah present naponya apa cuma inget buat kayak gitu buat nge-set jadi kayak

43:06mengelompokkan masing-masing styling jadi Oh ya kalau zaman pakai SAS dulu kan suka ada

43:13convention yang pertama

43:16itu untuk yang

43:17kayak global level tuh

43:19kayak yang buat base element doang

43:22habis itu ada

43:23utility misalnya tau kan yang

43:25import-importnya tuh ada urutannya

43:28kan nah biasanya kan komponen

43:30terus paling bawah

43:31diming yang soal warna

43:33nah itu kayak buat ngurutin kayak gitu

43:35masih bingung

43:41masih bingung

43:42harus lihat demo sih emang emang mau saya kalau baca kalau kalau baca doang itu emang

43:52emang enggak masuk tapi kalau lihat demo lebih helpful sih ya Nah ini ada demonya enggak

43:58masalahnya ini ada demonya yang lain layer Oh berarti layer itu juga termasuk salah satu

44:09dari nesting kali ya ini ada nesting beda lagi lain-lain konsep itu kan framework.reset jadi

44:17kayaknya mungkin dalam framework ada urutan prioritas apa prioritas itu tadi siapa yang

44:24menang kayak style mana yang menang nih contoh-contoh in this following example the simple H2 elements

44:31itu blue Nah itu jadikan sama-sama mentadget H2 nih gua yang lu to the

44:45team layer order appearance being after the base layer sebentar

44:51disini ada layar base sama layer team Oke terus

45:00jadi kesimpulannya artikel H2 itu warnanya apa Tolong tolong Ya tolong jelasin mana Oh ini ada udah berhenti ini udah habis

45:23enggak ada tuh ada tulisannya white mana tadi blue hadua-hadua

45:34spesifikasi rules apply ifness layer specificity

45:48by default

45:56jadi kan kalau by default

46:00spesifikasi ada poin-poinnya

46:03ada kayak artikel H2

46:06itu kan

46:08lebih spesifik daripada

46:10selektor H2 doang

46:12jadi by default

46:14yang menang adalah

46:15si artikel H2

46:17jadi

46:19H2 warnanya akan ungu

46:21nah tapi kan

46:23sebetulnya kalau yang kita tahu

46:26sekilas kalau yang lebih bawah

46:27di bawahnya kan bakal menang

46:29H2 warnanya biru

46:31ini anggap aja belum ada fitur layer ya

46:33Nah kita kan bakal bingung kan, maksudnya kayak gambling lah, kita gak tau mana yang menang, jadi kayak bingung, sulit lah buat memprediksi behaviornya.

46:47Nah, kalau di sini kita bisa ngelompokin pakai layer.

46:52Jadi, ngitung spesifisitinya itu berdasarkan kelompok layer.

46:58Kelompok layer base di atas.

47:01Nah, terus bawahnya ada kelompok layer dim.

47:04Nah, di sini walaupun selektor H2-nya itu kalah.

47:08Maksudnya kalah kan?

47:09Sebenarnya kan by default itu behavior-nya harusnya kalah.

47:12Karena kurang spesifik cuma H2 doang.

47:14tapi disini indis kis haduanya jadi menang menang ke masa haduanya jadi warna biru itu kenapa karena

47:22layarnya ini karena hadua itu bagian dari kelompok layer yang berada di bawah kan makin bawah yang

47:30bawah akan meng-override yang atas Oke skating ya saya saya tadi baca paling bawah ada contohnya

47:39keren banget contohnya sih kalau mau nanti teman-teman bisa baca Nah eh stop eh bawa lagi

47:48bawa lagi ada hotpan nya nah ini dia CSS ke CSS aja Nah kalau dilihat dari ininya itu layernya

48:00di-define ya ada reset secara spesifik ya dari kiri ke kanan reset base theme component sama

48:07dan ini pattern dari SAS dulu orang SAS tuh pasti pernah lihat deh urutan ini reset base

48:14kalau kita lihat ya itu kan H2 warnanya biru ya sedangkan si base mengatakan

48:23color purple dia kenanya di teams karena di layer team itu mengatakan H2 color blue

48:31nah terus kemudian dotlet dotlet itu warnanya green dan important dan dia dalam layar tim

48:42maka dia menang secara spesifik meskipun utilities Hai Utilities mengatakan ui red

48:52red Iya kenapa dia enggak red adalah di itu sepaling ujung nih sedangkan

48:59besama tim menengan tim Baji harus baca kena kalau dia ada tadi mengatakan

49:04kalau dari komen sama important paling bawah paling ada ini paling bawah kalau tanpa kena

49:16air itu sebenarnya colornya orange impor orange tapi kenapa dia bisa kenanya ke tim saya enggak

49:23tahu kalau yang yang paragraf yang blue yang dibawah aslinya adalah red p color ini red jadi

49:35biru bener ya kan kalau asumsi kita ya yang ini yang blue yang blue itu apa coba yang blue dot ini kan P kelas dia P ya P kelas blue ya

49:55P kelas blue

49:57yang ini

49:59sebelum kena layer

50:01ini setelah

50:03setelah layer bukan bukan

50:05terus terus itu kan colornya blue

50:07kalau utilities

50:08kalau bawah lagi

50:12ada gak yang .blue

50:13ini dia red harusnya

50:17kena red

50:18A2 blue

50:20ini blue

50:22P red

50:24ini apa

50:27dot lead

50:29P juga

50:31P tapi dia jadinya

50:34hijau

50:35sedangkan disini merah

50:37gimana tuh

50:38dot leadnya kan kalau kena yang diatas kan

50:42Green disini red harusnya dia secara urutan base-base green-green

50:58Hai utilities paling terakhir ya specific Iya base dulu kan Iya base berarti timkan masuknya

51:06tim ini kan Iya tim disini komponen terus itu ditik kalau P yang red dia ambil yang disini

51:17Hai ini yang terakhir karena Oh kayaknya paling kuat lebih kuat yang diluar layar enggak ini H2

51:26sama lead orange jadi hijau ya padahal dia paling bawah karena important karena important important

51:37is everything bisa diri koknya mungkin gara-gara ada important Nah kalau yang apa kombinasinya ini

51:47sih nggak ngerti ya cuma inget baca bahwa eh apa yang enggak di dalam player itu lebih kuat daripada

51:55yang di dalam kelompok player coba lihat ke atas dikit layer son order with important ada ini ya

52:09penjelasannya atas-atas-atas Yap stop-stop-stop itu ini short ordernya

52:18masih enggak ngerti layar tim color green important layer utilities elemen color red

52:35nah kita nggak lihat kita nggak lihat HTML nya kalau ini bingung Iya color itu kan

52:44Hai teks color kan bukan background color kan Kenapa di sini background yang berbeda ini

52:50short ordernya dia kalau pakai important layer kalau pakai important itu ininya berbeda efeknya

52:59itu loh maksudnya Oh oke Jadi kalau yang tanpa layer yang orange yang yang dibawa.

53:09element color orange itu anlayer style tapi mana ya hahaha yang orange yang mana aja nggak

53:19tahu itu yang paling bawah tuh maksudnya orange kirain merah itu pink salmone orange putih warna

53:29Oke, baiklah teman-teman.

53:32Next dulu.

53:33Mari kita bingung bertemu.

53:37Ini ada pertanyaan bagus nih, tentang performa.

53:41Apakah pemilihan sektor berpengaruh ke performance?

53:45Terus juga ini, nested itu akan pengaruh ke performance nggak?

53:50Kalau banyak banget ya, theoretically ngaruh.

53:52tapi sebetulnya in real life secara praktek belum pernah ngerasain sampai

53:59ngaruh sih. Coba aja nesting 100. Pertanyaan gini, kalau misalkan kita bikin awalnya

54:08eh maksudnya performance ini kan kita bikin nested nih terus ada yang bilang performanya

54:14kurang bagus gimana cara kita improve? Ada solusi nggak selain nested? Kita bikin jadi satu

54:21semua gitu ya

54:21jadi kelas aja yang mau kita target

54:25kenapa harus nested

54:27banyak-banyak

54:27kita planning

54:30planning seleknya ya

54:32harus lebih baik

54:34kalau nested itu kan karena kita harus

54:36target secara spesifik banget

54:38parent

54:39nenek moyangnya bukan parent malah

54:42kakek neneknya ini

54:45childnya banyak banget

54:46jadi kita harus nyebut ini

54:48sama nyebut ini

54:49Padahal kan target ini aja

54:51Berarti ya kita kasih

54:52Kelas lain lah selektor lain yang lebih

54:55Apa

54:56Efisien akurat

54:58Kayaknya dulu lighthouse tuh ada warningnya deh

55:01Kalau misalnya ada selektor yang

55:03Terlalu panjang gitu

55:04Kalau selektor yang terlalu panjang tuh

55:07Pengaruh ke ini

55:09Performance

55:11Karena traverse-nya

55:15Terlalu dalam kan

55:16maksimal kedalamannya kita belum tahu juga Mas Maulidan

55:22enggak ada

55:25silahkan dicoba

55:28maksudnya enggak ada tapi kan setiap ini kita harus ingat

55:32bukan webdev itu kan usernya bisa membuka dari laptop dari HP

55:39HP paling kentang sampai HP paling canggih

55:42ya mungkin apa kalau kebetulan dibuka dari HP yang low-end banget butut mungkin bisa aja nggak

55:52kuat apa renderingnya jadi jengkih nggak ada standarisasinya juga sih ya soalnya

55:59intinya jangan apa jangan terlalu mengabuse si nested ini ya kalau kayak properti dalam

56:10seperti di dalam properti kayaknya untuk parsing nya juga lebih rumit kan secara otomatis kalkulasi

56:16lgp ke fitur Green hahaha kita nulisnya juga pusing sih Iya jadi ya dipakai seperlunya aja

56:27kalau bisa ada nistet lebih bagus kayaknya ya kayaknya maksudnya sebelum sampai ke level yang

56:33beneran signifikan krim pengaruhi performance dari DX kayaknya udah

56:38maksudnya pasti nggak tahan kan emang kita mau nulis 20 urut 20 gitu kan

56:46mungkin kan pasti kita yang kita yang nulis pusing duluan

56:52terus Oke kita lanjut lanjut ke subgrid

57:01asik nggak menjawab ya kan kalau kita grid itu kan kita bisa mendefinisikan gridline

57:13kan gridline grid template kolom grid template row tapi itu kan sebelumnya sebelum ada subgrid

57:20itu ngaruhnya kan cuma ke direct childnya kan ke elemen yang pas di dalam elemen parent yang

57:29ada grid templatenya itu Nah kalau misalnya ada dalamnya lagi itu kan ya kita harus ngedefinisiin

57:36grid template sekali lagi di apa di immediate parentnya kalau ini enggak jadi apa parent

57:43terus ini child element terus jadi parent misalnya orang tua anak cucu jadi cucunya juga bisa

57:50ikutin apa grid lines nya gede template kalau atau gede template rohnya Oke oke contohnya

57:58ini display-nya display Oh ya bawa displei-splei kalau nggak salah Iya deh serius live demo dong

58:13Hah? Live demo?

58:16Boleh boleh

58:17Live demo

58:18Gimana live demo?

58:21Ini kan live demo

58:22Udah

58:23Gimana? Gak ada subgrid

58:27Grid semua

58:28Gak ada

58:29Oh ini subgrid

58:31Harusnya ada

58:33Woi, cek dulu

58:35Kecilan ya

58:37Ini kan subgrid

58:41iya berarti get template row sub grid gitu berarti bisa get grid template column sub grid juga sub grid juga iya jadi buat kolom ya lihat HTML nya deh

58:59Hai HTML 5 biasa artikel-artikel itu kan pernya terus ini header terus ada horizontal line terus

59:14paragraf terakhir ada footer terus diatur sama segretnya itu gapnya aturan grupnya

59:25apa styling styling grupnya itu di bodi lihat CSS ya bodi ya lihat CSS turun turun dikit

59:37Scroll, scroll, nah, grid template columns, bla bla bla.

59:43Jadi kita mendefinisikan aturannya di body.

59:46Terus kan biasanya kalau body hold itu cuma bisa dipakai di direct child-nya tuh, di artikel doang.

59:54Ini kelihatannya si title sama konten di masing-masing card, masing-masing artikel,

1:00:03jadi bisa ngikut grid lainnya juga.

1:00:05lihatnya loh

1:00:07nggak ya

1:00:09grid

1:00:10header juga display-nya grid

1:00:14oh di dalam grid bisa kita

1:00:18definisiin grid lagi ya berarti ya

1:00:20baru tau nih

1:00:21terus ngikut

1:00:23grid template row atau grid template

1:00:26column kayak inherit gitu deh

1:00:28kelihatannya

1:00:29oke

1:00:32kalau yang di body itu dia repeat

1:00:35autofill min max 30 ch1 fr kalau di layer demo nih ada layer lagi nih dia

1:00:46subgrid ada lihat demo support sini ada layer-layer enggak enggak ada kan

1:00:54definisi layarnya yang kayak tadi enggak ada juga ya

1:01:00enggak enggak harus itu option berarti kita harus ada episode CSS layer ya ya enggak kita apa

1:01:13selanjutnya remedial prep 2023 hal-hal yang kita bingung pas sekarang nanti boleh kita bahas lagi

1:01:22ya bagus bagus

1:01:24subgrid is especially useful

1:01:28for aligning

1:01:30siblings to each other dynamic

1:01:32content

1:01:33this is free copywriter

1:01:36UX writer and translator for

1:01:38attending to create a project copy

1:01:40that fits into the layout

1:01:41with subgrid the layout can be

1:01:44adjusted to fit the content

1:01:50itu use case nya

1:01:51iskisnya untuk beda itu iskisnya itu tadi iskisnya coba ematiin apa turn off dulu CSS nya buk biar

1:02:01risetnya doang yang muncul nah kan itu kata-katanya bisa teksnya bisa 4 baris bisa 2

1:02:13tapi sih yang paling bawah itu apa otomatis ke stretch set apa itu yang paling bawah tuh

1:02:21yang tulisan kecilnya ke tulisan tanggal atau apa ini itu sebaris Nia sebaris kebawah

1:02:29Hai jadi kayak flex dong Oh iya tapi berlaku buat semua jadi enggak harus masing-masing dikasih flex

1:02:36kelihatannya Oke oke oke kita masuk ke bagian berikutnya masih banyak kalau ini kita kedua

1:02:49segmen kedua tipografi ini keren banget nih teksnya Iya bagus bagus-bagus pilihannya

1:03:02gimana caranya punya sense kayak gitu, itu udah off topic, lanjut, text wrap

1:03:08initial letter, nah dulu kalau di ujung koran, majalah biasanya ada yang model kayak gini nih

1:03:16huruf pertamanya tuh

1:03:17bayangin ongsel gak sih kayak pada suatu ketikan nah itu kan yang apa jenis fontnya yang kayak cerita dongeng gitu betul

1:03:29tapi karena firefox belum

1:03:34jadi fallbacknya gimana?

1:03:36huruf biasa aja

1:03:38pake javascript lah, di slice aja

1:03:40kalau CSSnya kita pake yang gini

1:03:44terus nanti di firefox tampilannya gimana

1:03:46ya nggak papa teks biasa teks biasa tapi kalau itu penting ya udah kita slice

1:03:53itu first letter initial letter 3 2 oh ini 3 spasi 2 apa 3 itu apa spasi itu apa ada

1:04:04ininya nggak iya itu tadi atas atas atas atas atas scroll atas initial letter property is a

1:04:13berstatus styling for the placement you can position letters in drop or face property

1:04:21accept to argument nah dua argumen argumen pertama how deeply to drop letter Wow canggih

1:04:29banget Oh bisa berapa baris kita harus itu manual the second how much to face the letter above it

1:04:39kalau kita mau bikin blog artikel gitu ya

1:04:50atau apapun yang visualnya

1:04:54text wrap ini

1:04:55balance and pretty

1:04:58kalau sebelumnya text wrap itu apa aja adanya?

1:05:03gak ada, belum ada kan?

1:05:05eh?

1:05:05white space dulu yang ada untuk rapping white space rap no rap terus apa free line kalau ini

1:05:18bukan soal itu kayaknya deh teks-teks itu sudah ada teks rap no rap stable bukan itu

1:05:26property dulu propertinya adalah white space Oh iya enggak ini ini ini ini Oh ya ini baru ini

1:05:37baru turun lagi turun lagi ada tulisannya tuh eh woi tadi kok beda bacanya Oke salah ke atas

1:05:47Mas Riza opsa pop itu ada notenya yang warna biru not the white space klointex web properties can

1:05:55Oh white space itu shorthandnya berarti ini berarti text wrapnya udah ada tapi yang ditambahkan hanya balance dan pretty

1:06:06Balance dan pretty

1:06:07Apa lagi maksudnya gitu ya?

1:06:11Ya jadi kadang kan kadang misalnya kita gak tau nih panjang textnya berapa terus di baris terakhir tuh kayak ngewrapnya gak enak kayak cuma sisa dua kata atau satu kata

1:06:24nah nah tetep tuh kelihatan kelihatan kan secara visual kan jelek tuh kayak yang baris keduanya

1:06:32tuh kayak jomblang banget sama yang berisik tiga Nah kalau ini otomatis kayak di balance aja

1:06:38Hai yang pretty apa siapa sih video-video itu yang pretty yang lebih rata yang lebih rata

1:06:48Oh rata ya rata kanannya ya ngerti-ngerti berarti dia secara algoritm nyari sendiri ya kita nggak

1:06:57perlu pas-pasin gitu ya Iya dia hitungnya dengan itu spasinya dimana kan kalau tulisannya not

1:07:07Hai yang unicode bukan Latin gimana ya kan tetap ada spasinya kan ya harusnya nggak tahu

1:07:14jenis karakter kalau jenis kalau Thailand ada spasi cnw cara-cara Chinese Japanese

1:07:23Korean itu enggak ada spasi Oh Thailand juga enggak ada spasi Nah di saat kayak gini gue

1:07:31bersyukur gue bukan developer tukang bikin browser gak harus mikir itu tapi somewhere

1:07:38ada orang yang berarti kan mereka mempertimbangkan itu coba ya klien gua

1:07:45ada satu yang Jepang gua coba dulu oke kita lanjut wah tepuk grafik cuma dua ya color itu berguna banget sih Karena biasanya kalau di Figma Kan kayak designer itu Visual designer Mereka kalau lihat gak balance gitu kan

1:08:03Ya maksudnya secara estetik kurang bagus ya

1:08:05Jadi di enter

1:08:06Giliran kita yang bikin, kita yang coding

1:08:09Ya kan kita gak bisa

1:08:11Tiba-tiba ngatur

1:08:12Bikin line break di sumber yang tempat kan

1:08:15Apalagi kalau sumber datanya dynamic

1:08:17Nah kan bisa aja tuh kita sering

1:08:19Di protest loh

1:08:20kok gak sesuai Figma?

1:08:22Nah, ini ngatasin masalah itu.

1:08:25Nah, ini ada

1:08:26pertanyaan bagus nih dari Damar.

1:08:28Dulu pernah baca

1:08:29itu support beberapa baris

1:08:32aja karena berat. Apakah sekarang masih terbatas?

1:08:35Coba, itu

1:08:36lihat semua browser

1:08:38udah support atau belum aja? Gak yakin sih?

1:08:40Belum tuh? Belum ya, belum semua.

1:08:42Tapi Firefox doang kan?

1:08:45Dan bahkan gak ada tulisan

1:08:46browser apa aja yang support.

1:08:48Mencurigakan.

1:08:50Oke. Ya kelihatannya emang belum ready ya.

1:08:56Ya itu mungkin karena berat.

1:08:59Mencurigakan sih daftar list browsernya aja belum ada.

1:09:04Edit on CodePen. Nah bisa diedit gak?

1:09:07Yaudah kita tambahin aja nih.

1:09:10Tulisannya yang mana? Yang balance.

1:09:20terus hang

1:09:22oh panjang

1:09:24bisa tuh

1:09:26bisa, gak berat

1:09:28aman

1:09:30lah cuma ini di laptop bagus kan

1:09:32coba di

1:09:34hp kentang

1:09:36hp kentang

1:09:38betul betul

1:09:40terus juga ada ini nih Abdul Malik

1:09:42dia pakai React

1:09:44Wrap Balancer

1:09:46javascript adalah solusi

1:09:48sampai sana ya maksudnya ada yang bikinin berarti memang ada kebutuhan yang sangat itu

1:09:54kemanusiaan segi yaitu tadi mau saya kita fitnahnya bagus atau ia fitnah atau apalah

1:10:01ponnya visual desainnya bagus karena secara manual desainer kita ngasih poinnya dimana

1:10:10yang kelihatan enggak enak banget di lain break secara manual lah kita kan nggak bisa pascode

1:10:14Jadi ya itu use case-nya.

1:10:20Oke, lanjut?

1:10:22Lanjut.

1:10:24Color, color ini lumayan banyak ya.

1:10:26Banyak banget nih, kita pernah bahas kan di episode kapan tau pas bahas warna.

1:10:32Yang pertama HD color space, from the hardware to software, CSS to blinking lights, apa ini maksudnya?

1:10:40sesuai dengan bahas now tapi user hardware capable of white gamut HDR colors Hai eh Hai

1:10:49sulit di demo ini gimana kan harusnya juga Iya pas kita bahas warna kan oke oke oke oke oke

1:11:04EH terus HWB Rek 2020 ada XJZ lagi apa ini XJZ Hah XJZ gak tahu mix color nah ini juga salah

1:11:20satu yang menarik nih color mix kalau dulu kan bingung ya ha udah stabil semua Wow wow

1:11:26seneng banget misalkan kita mau campur warna merah sama warna kuning gitu gimana caranya

1:11:32ini ada kalau bisa sekarang ternyata bisa sekarang kayak lagi beli chat di toko chat aja dicampur

1:11:39dulu harus pakai javascript pun harus pakai library ya agak susah kalau hand roll bagaimana

1:11:47caranya hex ffcc00 dicampur nolol ccff ya tapi ini susah dilihat ya

1:11:58kenapa muncul oke LCH segala macam dengan karena supaya gampang dibaca kan

1:12:06apa-apa

1:12:10saturation kayak gitu kan dari Green kasih saturation apa gitu ya silahkan

1:12:19ini contoh kita sebelumnya ya ini contoh apa color mix color mix nah ini jadi kita

1:12:28bisa gabungin warna hijau dengan warna teal ya ini ya hijau hijau juga hijau agak biru apa tuh

1:12:35istilah ilmiah kita bahas nah Oh dia pakai oke lab ya bisa macem-macem kan tuh tuh ada drop

1:12:44down nya Oh iya jadi kayak algoritma buat ngegabungin warnanya kayaknya agak sedikit

1:12:50beda masing-masing itu deh oke oke lch XZ

1:12:56woi woi berat sama-sama semua demikian

1:13:03HSL mata gua belenger dia nih salah ini ini ada yang kayak itu kayaknya kayaknya

1:13:12kan ada kayak apa yang ke gradien terus biasanya ada garis-garisnya gitu kan yang tunjukin area

1:13:22apa esomon in time from a gradient where gradient soal step go from blue to white

1:13:31show begin just one step Oh color mix Oh pinter ya maksudnya kan kita udah punya kan mereka

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

1:13:44hijau ke biru hijau ke biru gradien kan semuanya hijau-hijau hijau agak biru hijau agak biru

1:13:53hijau biru banget sampai terakhir biru Nah sekarang nih dengan color mix kita bisa kayak

1:13:58select satu poin

1:13:59somewhere antara

1:14:02hijau ke biru.

1:14:04Ini kayaknya akan

1:14:06bermanfaat untuk

1:14:08generate,

1:14:09nggak tahu ya, koreksi kalau salah.

1:14:11Untuk generate,

1:14:12bukan, generate gradasi

1:14:15yang nggak loncat-loncat.

1:14:17Biasanya kan kalau misalkan kita pilih gradasi

1:14:19merah sama hijau, itu kan

1:14:21kayak ada perbedaannya terlalu kontras

1:14:23kan, terlalu jauh.

1:14:25Oh, terus gradienya hijau-hijauan ya?

1:14:27kalau ini jadi kayak bisa dipilih di custom Iya kayaknya itu ya bisa dipakai untuk itu salah satu

1:14:34isinya kali ya untuk desain sistem juga bisa banget kan kayak misalnya kalau detail win nih

1:14:39kita kan ada blue-100 gitu blue-200 itu kan milih warnanya kalau harus manual capek juga kan kita

1:14:49milih biru tua sampai biru agak muda biru sedang sampai biru muda ya kalau milih manual capek kalau

1:14:56kan bisa di tapi variabel bisa dimasukin situ ya Nah bisa masih bisa relatif color syntax berikutnya

1:15:08ya RSC RCS RCS RCS RCS RCS bisa dipakai RSC

1:15:22komplementari metode to color mix for creating color varian

1:15:34slightly more powerful than color mix but also a different strategy for working with color

1:15:41color mix may mix in the color white to lighten a color where RCS give precise access to lightness

1:15:50channel and the ability to use car on the channel to reduce increase lightness

1:15:57programmatic Lee jadi bisa memilih cuma eh apa lightness atau darkness nya doang

1:16:04ya warnanya tetap itu cuma dibikin lebih gelap dibikin lebih terang bisa pakai

1:16:11brightness ya bisa ngatur-ngatur brightness nya ya berarti ya oke kok pakai

1:16:18ini warna-warna yang berbeda di play menopong analog triadik triadik berarti ini ada warna

1:16:29yang disesuaikan dicari try-outnya kan segitiga kan merah sama itu bukan jenjan itu custom bukan

1:16:38custom kayaknya

1:16:40opacity

1:16:42desaturate oke

1:16:44enggak loh beneran apa

1:16:46kalau di CSS nya

1:16:48coba deh nah

1:16:50warnanya cuma di define

1:16:52color 1 2 3

1:16:54iya 1 2 3 blue black sama grey 555 kan grey Nah ini yang monochrome analog

1:17:06triad, itu semua di

1:17:07kalkulasinya pakai

1:17:09pakai apa?

1:17:12Itu sih, SS color.

1:17:13Gila, ini mah udah

1:17:14menganggis banget ini.

1:17:18L.

1:17:18Ini udah function.

1:17:20L, C,

1:17:22calculate.

1:17:23Oh itu inherit kayaknya deh

1:17:25Kalau nggak salah itu inherit lightness aslinya

1:17:27Jadi kita nggak harus

1:17:28Men-specify semua satu-per-satu

1:17:31Cuma yang mau kita ganti aja

1:17:33Yang mau kita rubah

1:17:35Oke LCH kan L

1:17:37Oke L

1:17:39LCH

1:17:41Lnya inherit

1:17:42Hanya yang berubah ya berarti ya

1:17:44Hanya yang berubah

1:17:45Nah ini HSL

1:17:50Lain lagi

1:17:51dan lain-lain Oke pusing lanjut pusing belum udah pusing kita berhenti dulu kita lanjut lagi minggu

1:18:01depan ya lumayan ya ini baru setengah nih banyak-banyak respon banyak jangan nanti malah

1:18:10hentan ya kita udah bahas tiga seksien kita bahas tiga seksien lagi minggu depan ini bisa

1:18:18asyik temen gue

1:18:21ada nanti ini 5 tahun dari sekarang 10 tahun dari sekarang ke telwin jadi obsolete ini kan

1:18:34sebenarnya apa ya bukan CSS sih tapi buat front-end 10 tak ya mungkin tujuh tahun lalu

1:18:41jQuery kan perannya kayak tailwind ya, maksudnya dulu interaksi elemen-elemen itu ribet jadi dipermudah pakai jQuery.

1:18:53Terus lama-lama satu persatu mulai gampang dibikin pakai web platform, jQuerynya makin lama makin off-solid lah, kita udah gak perlu lagi.

1:19:03lagi apa nih mungkin lima tahun 10 tahun lagi CSS nya udah canggih banget kita udah nggak perlu

1:19:08telwin lagi Iya tapi menarikkan siapa Adam argel nya sendiri dia bikin bikin Oh ya mungkin library

1:19:18yang apa ya Open ya ada propernya lah Open props.com nggak salah ya Nah ini ala-ala basis

1:19:30CSS variable ya ala-ala telwin tapi berbasis CSS variable dan ini sama dengan berbeda

1:19:39telwini bisa juga telwin tapi custom-custom variable gitu kayak kita ngedefine sendiri

1:19:48jadi kan kalau kalau di Tailwind kan kita pakai kelas kan kita ngisi kelas

1:19:55background color border dan lain-lain kan kalau di sini

1:20:03tapi di CSS file-nya yang kita ubah-ubah cuman pakai variabel-variabelnya udah siapin Oh ya

1:20:22kalau variabelnya sih ngerti sih maksudnya kita pakai variabelnya di sini tapi kita tetap

1:20:28kita bisa bikin themes jadi pake themesnya jadi kayak kita sudah bisa define per design patternnya kita

1:20:36sudah dibikin tuh per komponen jadi komponennya sudah ada kita hanya tinggal define CSS variable nya

1:20:45dan CSS variable nya tinggal bisa dibuat jadi kayak theme 1 theme 2 theme 3 dan sedangkan sama

1:20:52Sebenarnya Open Props ini bisa digunakan untuk membuat library seperti Tailwind.

1:21:00Jadi kayak primitifnya ya?

1:21:04Iya, kalau dengar penjelasannya si Abang Adam Arjal, dia bilang ini bukan kompetitornya Tailwind, justru ini bisa dibikin untuk bikin Tailwind.

1:21:20atau kalau suatu hari

1:21:25Tewin dah obsolete ya kita pakai basisnya pakai pattern yang kayak ginilah ini lebih murni hanya saja yang si openprox yang kita install adalah variable yang udah

1:21:43build-in props nya kan build-in variable nya

1:21:45spek ratio juga ada

1:21:50bisa juga begini kalau misalnya kalau digabung ya saya pernah punya ide pakai open props itu bisa

1:21:56digabung coba buka Mas Riza kayak patternnya komponen dari webdev untuk best practice jadi

1:22:04si webdev ini juga sudah memberikan best practice untuk animation komponen segala macam jadi

1:22:11HTML structure nya sudah ada nih, contohnya carousel ya buka carousel.

1:22:14Carousel.

1:22:16Ya atau apapun lah, sama aja sih carouselnya jadi.

1:22:20Kan si carousel ini sudah ada HTML, maksudnya secara best practice bentuk HTML structure nya gimana gitu.

1:22:29Nah dari, kita bisa bikin komponen-komponen ini di design pattern nya kita atau di kita punya biasanya project kita,

1:22:40kita udah define, oke carousel begini, dialog begini

1:22:43setting atau form, button paling utama tuh button, text segala macam sudah ada patternnya

1:22:51dan pake open props untuk ngedefine theme 1, theme 2, theme 3, theme 4, jadi

1:22:56itu yang diubah variablenya kan? kayak the override variablenya

1:23:01jadi markupnya kan ya, markupnya tetep sama, masa kita ganti theme ganti markup kan? repot

1:23:07ya betul jadi itu dan berbantu sekali untuk menghandle project yang skalanya enterprise

1:23:16karena ininya banyak komponennya banyak Oke persiapkan banyak banget ya ada

1:23:23ini helper kantong is-is apa shadow itu gimana fade-in itu gimana ya animasi segala ada size-nya

1:23:32jadi kita nggak perlu mikirin Oh saya mau size berapa gitu pakai aja yang ada di sini ini cuman

1:23:38kayak preset semacam preset gitu makin kalau mau yang kompetitornya si telwin Uno kan Oh Uno CSS

1:23:49ya Iya buatannya sih babang siapa namanya bukan bukan bukan Bauna bukan bukan beliau nggak bikin

1:23:57Oh, Anto di Fu.

1:23:59Oh, Anto di Fu. Manusia sejuta project open source ya.

1:24:04Iya, kalau ini ya, ini bisa dibilang head to head lah sama si Terwin.

1:24:14Ini kan baru kita ukin.

1:24:17Saya programmer.

1:24:19Wah, saya juga programmer.

1:24:21Wah, bukan. Twitternya undefined.

1:24:26Coba, contohnya mana?

1:24:28Contoh.

1:24:31Why Uno?

1:24:32Why?

1:24:35Getting Started.

1:24:39Iya, sama.

1:24:40Sama kan?

1:24:42Sama kayak Tailwind.

1:24:43Tailwind itu kan sebetulnya mengimplementasi filosofi atau pendekatan atau Mix CSS kan?

1:24:50Punya satu property, satu class name.

1:24:56Oh ya ada yang baru nih StyleX ya StyleX nya Meta ya

1:25:02Meta Meta

1:25:03Facebook dipakai juga buat base StyleX apa yang dipakai buat

1:25:08Open Props

1:25:09Open Props ya

1:25:10Oh keren juga

1:25:11mungkin tadi soalnya pas kita lagi bahas Open Props

1:25:15ya benar-benar

1:25:17service aja StyleX Open Props

1:25:20StyleX JS ini ya

1:25:22benar ya StyleX JS ya

1:25:26Oh iya benar. Kita mulai contohnya di mana? Learn. Styles. Using style.

1:25:40Oh sangat react sekali ya. Defining style.

1:25:46Emotion, self-components banget lah.

1:25:49webnya Oke kapan yuk kita bikin episode eh betul CSS framework M bikin mata yang sama cuma pakai CSS framework A B C Terus lomba siapa yang menang Gimana ngomong aja

1:26:09Gimana ngitung?

1:26:11Demo doang, cuma lihat aja bentuknya kayak gimana.

1:26:14Eh mana ini nya, dependensinya? Wah banyak sekali. Ada nggak open props? Nggak ada.

1:26:20Nggak ada tuh.

1:26:21Open? Nggak ada.

1:26:23Props?

1:26:24Ini jadi base.

1:26:27Infonya dari mana?

1:26:31Wah, kalau Damar dia memang

1:26:33penggemarnya

1:26:34view ya

1:26:36dan teman-teman ya.

1:26:38Nggak perlu break cut. Misalkan H88VH

1:26:41menjadi

1:26:41oh kalau di

1:26:44H-

1:26:45kurung ya.

1:26:48Pakai kurung ya.

1:26:49Itu tujuannya kan meng-enforce

1:26:52token namanya di luar Tailwind pun ada kan kayak desain token jadi tokennya itu misalnya 0,25 REM 0,5

1:27:02jadi biar nggak banyak arbitrary value tiba-tiba disini marginnya 14 pixel gitu kan sebelum kan

1:27:08jadi kayak kita udah mendefinisikan itunya kayak value-value misalnya huruf cuma bisa 14, 16, 18, 20, bla bla bla

1:27:18Kalau di luar itu, escape hatch-nya Tailwind yaitu pakai bracket.

1:27:24Ya, pertanyaan umumnya adalah UNOS CSS, apakah teams-nya sudah banyak?

1:27:33Apa kayak UI library-nya?

1:27:37Seperti Flowbyte atau Dicey UI?

1:27:40Kalau Tailwind enaknya kan, ya Tailwind UI.

1:27:42Kalau punya duit ya, yang berbayar yang gratis itu udah isi.

1:27:47yang gratis ada banyak, ada Flowbyte, ada DAISY, ada macam-macam

1:27:50dan masing-masing juga kayaknya itu ya freemium ya bukan gratis bener-bener gratis ya

1:27:57ada premium themes-nya juga

1:28:01DAISY gratis beneran?

1:28:03UNO kayaknya belum sebesar itu ya?

1:28:06DAISY gratis

1:28:08DAISY sekarang kayaknya dia jualan template

1:28:11ada, UNO tuh ada theme

1:28:15ada ya tapi mungkin sedikit kan belum sebanyak selwin minimal ada satu atau dua gitu buat apa

1:28:23buat kita memudahkan kita untuk menggunakan di daripada kita gunain langsung gitu ya

1:28:30Hai sudah kalau teori kan Saking banyaknya kita bisa comot sana sini kan atau kalau lagi buru-buru

1:28:37atau misalnya kita nunjukin nih ada butuh bikin prototipe kilat kita sama orang produk gitu kayak

1:28:43ini ya kayak gini ininya ganti jadi gini Oh ya langsung comot langsung ya ya ya

1:28:49masih enggak pakai proses UI design yang proper ya Mas saya kalau buat prototipe

1:28:54kan belum Mas saya belum sampai situ misalnya benar-benar sana sini kita udah

1:29:03menarik dulu ini kita otaknya udah kayak curly bracket CSS kan udah sudah mesin ini masih mikirin

1:29:12layer itu apa hahaha habis kok jangan sampai ke bawah mimpi deh ntar malam mimpi baca-baca soal

1:29:20layer layer bikin demo dulu tapi bikin demonya ya simple doang cuma ini harusnya menang tapi

1:29:27karena ada layer ini jadi gak menang

1:29:30cuma jadi penasaran

1:29:31mau revisit lagi

1:29:33oke deh

1:29:36kalau begitu kita udahan dulu ya

1:29:38kita istirahat dulu ya capek ya

1:29:40kita ketemu lagi minggu depan

1:29:42untuk bahas mungkin kita akan

1:29:44bahas kayaknya lanjut

1:29:46yang lain dulu biar gak pusing

1:29:48yang lain dulu oke boleh

1:29:50nanti kita lihat saja

1:29:52nanti kita bahas berikutnya

1:29:54di bagian

1:29:56responsif interaction dan komponen mungkin di beberapa ya di seling-seling lah biar gak CSS terus nanti jadi ngobrolin CSS

1:30:04betul karena kita juga kompetensinya bukan di CSS ya sudah bisa kalian nilai sendiri bagaimana skill CSS kita

1:30:14yang paling jago kayaknya Eka doang disini ya mencari pembenaran maaf saya anak back end gitu ya

1:30:26Kalau begitu kita

1:30:29Udahan dulu terima kasih buat teman-teman semua seperti biasa diskusi saran dan topik

1:30:35bisa kirim ke kesana.in slash ngobrolin di githubnya ngobrolin web.

1:30:41Kalau mau ikut kontribusi belum bisa karena kita belum bikin proyeknya.

1:30:46Kita mau bikin website-nya tapi belum jadi-jadi.

1:30:49Tapi masih wacana.

1:30:50Masih wacana. Mudah-mudahan nanti kita bikin terus teman-teman juga bisa kontribusi

1:30:56untuk sekaligus cobain, praktekin apa yang kita obrolin.

1:31:00Jangan cuma ngobrol doang ya.

1:31:01Oke, kalau gitu

1:31:03Udahan dulu untuk malam ini, terima kasih banyak

1:31:06Sampai jumpa minggu depan

1:31:08Bye-bye