Ngobrolin CSS Unit - Ngobrolin WEB

0:00[musik]

0:17Dapatkan hanya di Dominesia

0:19[musik]

0:29[musik]

0:33Halo, selamat malam

0:35Halo-halo

0:37Kenapa musiknya gini?

0:39Ini apa? Star Wars?

0:41Apa ya? Spiderman, Spiderman

0:45Agak-agak horror juga ya

0:47Iya soalnya kemarin senen kan itu

0:49Apa?

0:51AWS Tumbang ya kemarin ya

0:53Itu horror juga tuh

0:55Eh bisa juga

0:57Menyenangkan sih

0:59Kan jadi nggak bisa kerja

1:01Jadi nggak bisa kerja

1:03Kira-kira nyadaun

1:05Iya kanva

1:07Ya itu lah ya

1:09Kibat terlalu bergantung pada cloud ya

1:11Apa tools-tools yang cloud ya

1:15Nggak bisa, bukan lokal versi ya

1:17Bukan lokal versi ya

1:19Nah terus kalau lagi gitu jadi sadar

1:21Oh iya ternyata kan

1:23Ada, mau saya ada

1:25Kayak industri bisnis

1:27Atau bidang tertentu yang saklek banget

1:29Harus on-prem atau

1:31Ya apa?

1:33Lokal versi atau apa lah pokoknya

1:35Nggak bergantung pada serverless

1:37Kalau lagi biasa gini kan kayak nggak kerasa ya

1:39Kenapa sih

1:41Serverless, enak

1:43Internet itu udah kayak ini ya

1:45Kayak udara aja ya, nggak berasa kalau itu

1:47Begitu internet mati

1:49Atau server mati

1:51Baru berasa ya

1:53Yang internetnya mati juga sih

1:55Sama servernya yang mati

1:57Kalau internet mati kan

1:59Maksudnya user tertentu doang kan

2:01Nggak semua mati juga

2:03Nah kalau kemarin service-nya yang mati

2:05Halo-halo

2:09Halo-halo

2:11Lagi sibuk apa

2:13Abis macul ya

2:15Dari bikin RCA biasa

2:21Abis meeting

2:23Root cause analysis

2:25Root cause analysis

2:29Ya incident kemarin itu loh

2:31Oh iya kita baru omongin nih

2:35Cerita horor

2:37Incident AWS

2:39Tapi kan mereka yang down

2:41Kita kan juga bertanggung jawab

2:43Nggak bisa dikontrol ya

2:45Iya hal kayak gitu nggak bisa dikontrol ya

2:47Kalau AISI seneng-seneng aja

2:49Individual contributor

2:51Ya udah nggak bisa kerja kan ya udah nggak kerja

2:53Gak bisa juga kalau kliennya

2:57Complain

2:59Harus dissolve

3:01Ini

3:05Skenario-nya ini

3:07Yang nggak ngadepin klien dong

3:11Yang cuma tugasnya ngoding lah

3:13Dijira semua

3:15Itunya di confluenza

3:17Terus gimana ya udah

3:19Istirahat dulu

3:21Istirahat dulu

3:23Plus minusnya ya

3:25Tools apa

3:27Tools di cloud ya

3:29Kayak

3:31Figma gitu bisa offline nggak sih

3:33Misalkan nggak ada internet atau servernya mati

3:35Kita tetap bisa gambar-gambar

3:37Atau masih tetap bisa desain nggak sih

3:39Kayaknya bisa deh

3:41Cuma limited ya ada service worker-nya kan

3:43Maksudnya itunya tetap nyala

3:45Ya kayak

3:47Aplikasinya tetap nyala tapi nggak nge-save

3:49Sama nggak tahu mungkin kalau pakai

3:53Terus kalau pakai pelagin-pelagin yang

3:57Manggil ke service

3:59Gak bisa

4:01Tapi serunya si DHH

4:03Kan ada bikin itu kan

4:05Meetup

4:07Oh dia bikin meetup

4:09Iya meetup ini ya

4:11Meetup internalnya mereka

4:13Tidak kemarin itu menghapus akun

4:15EWSnya mereka

4:17Pas down itu ya

4:21Pas lagi down

4:23Maksudnya setelah down kan

4:25Pas down nggak bisa karena dashboard-nya

4:27AWS nggak bisa

4:29Ya nggak bisa quit lah

4:31Setelah up mereka

4:33Bikin meetup di apus

4:35Disusut pakai video

4:37Celebration menghapus

4:39Akun AWS

4:41Pakai jari tengah

4:43Ngapusnya

4:45Itu agak-agak

4:49Gimik sih

4:51Karena kan beberapa tahun

4:53Yang lalu kan dia yang

4:55Menggencarkan ini kan

4:57Cloud exit

4:59Kampanye cloud exit kan

5:01Habis itu tiba-tiba dia ngeluarin produk

5:03Produk dia

5:05Maksudnya dia yang ini sebagai gantinya

5:07Kita punya nih ya itu

5:09Kejualan aja sebenarnya

5:11Iya dia bikin

5:13Hei itu kan bukan

5:15Bukan hei

5:17Once

5:19Oh gitu

5:21Bukan punya sih

5:23Dia kerja sama-sama perusahaan

5:25Sama on-prem provider

5:27Kaya official provider lah

5:31Sama kayak kita berpartner

5:33Sama dominisia ya

5:35Betul sekali

5:37Terima kasih sudah di get kan

5:39Karena episode ini

5:41Disponsori oleh dominisia

5:43Jadi kalau temen-temen mau beli

5:45Hosting

5:47Mau beli VPS

5:49Itu bisa pakai promo code nya

5:51Ngobrolin web ya

5:53Kalau yang hosting itu ngobrolin web DN

5:55Dapat diskon nya 10%

5:57Yang hosting

5:59Kalau VPS

6:01Itu diskon nya 50%

6:0550%

6:07Seharga

6:09Terus pakai promo code nya

6:11Ngobrolin VPS DN

6:13Itu berlaku

6:15Untuk semua paket dan semua siklus

6:17Gak semua paket ya

6:19Cuman cloud VPS turbo aja

6:21Dan bisa dipakai

6:23Lebih dari satu kali

6:25Jadi kalau temen-temen udah punya account

6:27Udah pernah pakai

6:29Terus mau dipakai lagi bisa

6:31Code promo nya

6:33Kalau cloud exit

6:35Ya pakai VPS begini

6:37Kayaknya cocok banget deh

6:39So hosting VPS

6:41Cloud juga sih

6:43Cuma bukan bayanan serverless

6:45VPS nya kan ada mesin nya

6:49Mereka kan gak titip di data center nya sih

6:51Bukan cloud ya

6:53On-prem ya berarti ya

6:55On-prem

6:57Ya setau saya mereka tidak

6:59Bukan reseller dari

7:01Punya orang

7:03Mereka on-prem, mereka punya

7:05Dedicated fisiknya

7:07Terus ya kan dedicated fisik

7:11Dedicated fisiknya

7:13Terus abis itu dalamnya kan

7:15Mungkin cluster ya

7:17Terus abis itu di dalamnya dia dipasangin

7:19VM

7:21Yang gak tau pakai apa

7:23Vmware tapi mereka gak tau pakai apa

7:25Jamalulah VPS nya itu di reseller

7:27Resale

7:29Compute power nya

7:31Tapi bukannya termasuk cloud company juga

7:35Kalo gitu ya? Enggak ya? Beda ya?

7:37Definisi cloud

7:39Berarti

7:41Tergantung definisi cloud

7:43Kita harus mengundang teman-teman domenisia

7:45Biar lebih dimaham

7:47Ini kan topik menarik

7:49Antara trend cloud itu gimana

7:51Serverless itu apa

7:53Terus gimana kalau

7:55Gps, beneran ada itunya kan

7:57Coba cek domenisia punya

7:59Dedicated co-location

8:01Gitu gak sih?

8:03Oh pilih lokasinya

8:05Ya langsung kayak sewa fisik

8:07Servernya

8:09Sewa server ya

8:11Tapi ada fisiknya

8:13Keliatan, kita bisa

8:15Kalo mau dateng bisa

8:17Kita ngelus-ngelus servernya

8:19Ngelus-ngelus ya

8:21Apa nyemba-nyemba? Jangan down ya

8:25Nggak, kalau down diketok atau nggak

8:27Ditiup kayak kaset seger

8:29Ditendang

8:31Ya, jadi teman-teman

8:33Yang ada di youtube

8:35Maupun ada di LinkedIn

8:37Silahkan kalo ada yang mau berkomentar

8:41Halo-halo

8:43Kalian gak ada yang nonton ya?

8:45Padahal udah gak ada international break

8:47Siap-siap nonton champions

8:49Nanti malam

8:51Jangan-jangan padahal

8:53Jadi malam ini

8:55Rencananya kita mau

8:57Ngomongin tentang CSS

8:59Awalnya tuh ngomongin tentang

9:01CSS container

9:03Tapi ternyata setelah

9:05Topiknya dikumpulkan

9:07Terutama oleh Erika

9:09Salah paham, ternyata

9:11Ternyata malah banyak

9:13Bahasnya CSS unit

9:15Teranjur ngerasa, oh ini menarik juga

9:17Kayak teranjur pengen bahas CSS

9:19Unit aja

9:21Bisa diganti gak sih

9:23Kalo yang di youtube bisa

9:25Bisa berubah

9:27Bisa

9:29Tapi yang di LinkedIn gak bisa

9:31CSS unit

9:33Teman-teman mana ya

9:35Ada yang nonton

9:37Ada yang tau gak, unit di CSS itu

9:39Ada pas aja, biasanya kan TX ya

9:41Pixel, yang paling

9:43Sering

9:45Dulu digunakan, terus ada

9:47AM, ada rem

9:49Ada apa lagi ya

9:51Banyak ternyata ya

9:53Point juga ada

9:55Point

9:57Yang aneh-aneh aja kayak yang jarang dipake

9:59Pika

10:01Apa itu

10:03PC, yang gak tau itu

10:05Apa unit esoteric

10:07Nah

10:09Sebenernya yang paling standar kan

10:11Pixel ya, karena pixel itu kan

10:13Standard satuan

10:15Yang gak cuma web doang

10:17Gak cuma CSS doang

10:19Tapi apapun yang digital kan

10:21Satuan unitnya

10:23Pixel

10:25Tapi ternyata masih banyak lagi tuh

10:27Banyak tuh, ada integer

10:29Itu tadi overviewnya tuh

10:31Di atas

10:33Di paling atas, nah itu kan

10:35Yang di kanan, intinya sih

10:37Ada absolute unit

10:39Cuma kalo disini, penggunaan istilahnya

10:41Apa

10:43Kalo

10:45Yang selain absolute

10:47Itu yang lain sebetulnya sering disebut

10:49Relative length atau relative unit

10:51Cuma ini dibagi lagi

10:53Jadi macem-macem

10:55Nah itu tuh yang aneh-aneh

10:57Ternyata sebetulnya kan

10:59Baru tau kan

11:01Pake centimeter pun kalo mau bisa

11:03Dan misalnya dipake buat

11:05Print style sheet

11:07Bisa pake media

11:09Pake, gue pake inches

11:11Pake point

11:13Gue pake inches, pake point

11:15Cuma gatau kalo ada quarter millimeter

11:17Quarter millimeter gue gatau

11:19Tapi CM, MM, EN

11:21PT

11:23Pake

11:25Pixel, bisa diumumin lah ya

11:27Saya paling

11:29Saya cuma pake PX, yang lain belum pernah

11:31Mana baru tau

11:33Ternyata ada ya

11:35Ada, kalo mau dipake bisa

11:37Cuma kalo gak ada keperluan khusus

11:39Yang mengharuskan

11:41Kita harus

11:43Nyebut centimeter ya gak perlu

11:45Cuma asal tau bahwa itu bisa

11:47Iya karena gak ngeprint ya

11:49Kapan-kapan coba battle CSS wah

11:51Gak bisa

11:53Skillish saya skillish

11:55Saya pake CM, MM, EN itu

11:57Sama point itu karena css

11:59Di pdf

12:01Iya kan gue ngeprint kan

12:03Kan pdf biasanya

12:05Printing

12:07Battle CSS aja

12:09Kayak Crystal Report ya

12:11Battle CSS, Battle CSS itu apa sih

12:13Gatau

12:15Battle menulis CSS itu

12:17Kayaknya syntax FM

12:19Pernah ya bikin

12:21Aduh itu ya

12:23Aduh skill ya

12:25Aduh mekanik ya

12:27Aduh bikin sesuatu ya

12:29Kayak apa

12:31Aduh bikin layout atau bikin UI

12:33Saya bikin diff di tengah aja masih harus googling

12:35Gimana dong mau menang battle

12:37Ketinggalan banget

12:39Pake google, pake itu dong

12:41Build in AI kan

12:43Ada udah

12:45Di google ada AI mode

12:47Tapi kalau di

12:49debug tool sudah ada AI nya

12:51Kan tinggal minta dia

12:53Yang kerjain

12:55Fight coding

12:57Buatlah kode

12:59CSS untuk

13:01Naro text ini di tengah

13:03Terus dia langsung install tailwind

13:05Install apa

13:07Langsung install macem-macem

13:09Trailwind

13:11Nggak aci dong

13:13Mas Rudi, aku suka pakai

13:15Am, am, am

13:17Buat font ya

13:19Nah itu salah satu yang

13:21Paling terkenal juga ya

13:23Tidak relatif, font unit ya

13:25Ini dia kecil amat

13:27Font size element

13:29Jadi am itu

13:31Ternyata singkatan dari

13:33Element

13:35Singkat, nanti ada tuh

13:37Am itu element ya

13:39Am itu element dan rem

13:41Bukan nama ben, rem itu

13:43Relatif element

13:45Nah yang dimaksud element apa

13:47Terus relatifnya gimana

13:49Nanti bakal ada apa sih artiklenya

13:51Yang khusus buat tipografi

13:53Ada ex juga

13:55Ada cap

13:57Cap, cap

13:59Ada ch, character

14:01Jadi banyak, sebenarnya banyak yang

14:03Aneh-aneh sih, nanti liat packnya

14:05Juga aja

14:07Individual contributor bukannya

14:09Itu khusus buat, maksudnya

14:11Itu orientasinya buat

14:13Character tertentu

14:15Pakai character itu

14:17Kucil banget

14:19Cjk, cjk

14:21Cjk itu apa

14:23Cainis, japanis, korea

14:25Nah pokoknya

14:27Ke asia timur

14:29Soalnya kalau yang western

14:31Latin orientate itu kan

14:33Ex, tadi ada kan ex atau apa ya

14:35Jadi patokannya

14:37Ini sebetulnya

14:39Kayak carry over dari

14:41Tipografi tradisional, tipografi

14:43Pas masih fisik, jadi

14:45Ternyata dulu kalau apa, kayak mesin cetak

14:47Atau apa tuh, Gutenberg, blablabla

14:49Itu dulu tuh beneran

14:51Dibikin cetakannya, hurufnya satu

14:53Satu persatu, a, b, c

14:55Nah yang paling apa, yang bisa

14:57Dijadiin patokan ukuran, yang paling

14:59Proporsional kan, ex kan, cetakan

15:01Buat ex, nah itu

15:03Dijadiin, kalau mau saya itu carry over

15:05Dari tradisi apa, printing

15:07Analog, printing

15:09Fisik, nah ini ke bawah

15:11Sampai CSS, sampai digital

15:13Nah itu kan huruf

15:15Western-nya latin, nah untuk

15:17Aksara asia timur

15:19Ada sendiri standarnya, ya mungkin

15:21Itu dianggap yang ukurannya paling

15:23Representatif, bisa buat

15:25Apa, kayak bikin orang bayangin

15:27Oh, berarti huruf-huruf lain

15:29Kira-kira ukurannya sekian

15:31Nah itu

15:33R-E-M

15:35Apa bedanya R-E-M

15:37Sama E-M, can you

15:39Jelas, maksudnya

15:41Bisa gak dijelasin dalam bahasa

15:43Bahasa bahasa, sampai sekarang gue gak ngerti

15:45TLDR-nya adalah

15:47E-M, element, itu

15:49Kayak bisa punya

15:51Misalnya

15:53Suatu element

15:55Itu

15:5716 pixel

15:59Berarti 1 E-M

16:01Itu 16 pixel, tapi di dalamnya

16:03Nested

16:05Kan sekarang berarti status-nya

16:0716x1, 1 E-M-nya

16:09Itu kan 16

16:11Berdasarkan root-nya kan

16:13Terus kemudian bawahnya ngambil

16:1516 pixel, 1 E-M

16:17Nah terus dalamnya

16:19Misalnya ada selektor lagi

16:21Jadi 1,25 E-M

16:23Nah sekarang berarti

16:251,25x1

16:27X16 kan, jadi berapa tuh

16:2920, berarti nested

16:31Ya, betul

16:33Nah dalamnya lagi, misalnya ada dalamnya lagi

16:35Terus di setting

16:371,5 E-M

16:391x1,25

16:41X1,5

16:43X16

16:4516-nya tuh yang tadi ya, yang parent yang

16:47Nah padahal

16:49CSS-nya itu

16:51C-nya itu kan cascading ya, kita sulit

16:53Atau ga bisa mencegah

16:55Ya pasti di parent di paling atas

16:57Ada size-nya

16:59Makin ke dalam, makin ke dalam, makin ke dalam

17:01Kalau pake E-M

17:03Terus itu, kebayang kan, kalau misalnya komponennya udah banyak

17:05Ada misalnya

17:07Ada layout, ada sidebar, ada main

17:09Main area, ada

17:11Di dalam kart, ada section kayak

17:13Title, body

17:15Terus footer, dan lain-lain

17:17Nah, itu tuh kalau misalnya

17:19Komponen base, misalnya bikin

17:21Satu komponen yang dipake di macem-macem tempat

17:23Bayangin ribetnya kalau pake E-M

17:25Maksudnya, bisa tiba-tiba

17:27Besar banget, bisa tiba-tiba kecil

17:29Karena apa, pokoknya itu

17:31Mengikuti bapaknya

17:33Cascade, jadi cascade

17:35Yang dimaksud cascade itu kan

17:37Cascade ada kegunaannya, jadi kalau misalnya

17:39Color gitu, di parent paling atas

17:41Color-nya, background-nya apa

17:43Dan color-nya misalnya

17:45Warnanya hitam

17:47Kan ke anak-anaknya semua

17:49Bakal warna text-nya hitam, maksudnya itu cascade

17:51Yang expected ya

17:53Emang sesuai kegunaan

17:55Nah, cuma cascade-nya ini, kalau casusnya

17:57E-M, jadi dikali terus

17:59Jadi kayak apa

18:01Makin ke bawah

18:03Makin relatifnya ke

18:05Parent-nya semua

18:07Nah, kalau R-E-M

18:09Yang ada R-nya, R-nya tuh root

18:11Relatif ke root

18:13Relatif ke atas malah

18:15Relatif ke root

18:17Malah lebih

18:19Lebih, tepatnya itu

18:21Absolute ke root, bukan

18:23Relatif ke root

18:25Oh enggak, root-nya bisa diganti

18:27Iya kan, jadi relate

18:29How does it relate, maksudnya relate-nya

18:31Di kalinya ke siapa

18:33Kalau root, titik

18:352 root-nya itu diganti, misalnya

18:37Jadi nggak 16 pixel, jadi 18 pixel

18:39Ya semua, pokoknya ngali ke itu

18:41Jadi nggak absolute juga sih

18:43Nah, pertanyaannya

18:45Kalau memang segitu bikin pusingnya

18:47Kenapa EM diciptakan

18:49Pasti ada kegunaannya dong

18:51Ada fungsinya

18:53Nah, dulu-nya

18:55Nah, CS salah satu ini

18:57Sebetulnya, apa

18:59Lebih ke filosofi CSS juga sih

19:01Kenapa sih ada unit macem-macem

19:03Nah, nanti kan kita bakal lihat tuh

19:05Ada artikel yang, wow, tahun 2022 sih

19:07Wow, tiba-tiba ada puluhan

19:09Unit CSS baru

19:11Nah, itu kenapa, jawaban kenapanya

19:13Itu, ya karena CSS itu kan

19:15Kayak bahasa untuk styling visualnya

19:17Web, nah web itu berubah-ubah

19:19Terus, apa

19:21Penggunaannya makin lama, makin kompleksi

19:23Lagi-lagi sih, ini lebih kayak faktor

19:25Opini pribadi ya

19:27Kayak terlanjur aja, jadi yang ada

19:29Dulu-an, yang muncul dulu-an itu

19:31EM, dan dulu-dulu

19:33Banget, maksudnya sekian

19:35Puluh tahun lalu, bisa

19:37Bikin ukuran relative

19:39Element ke

19:41Apa, ke parent-nya atau

19:43Kesuatu element, juga udah

19:45Kayak itu udah breakthrough banget

19:47Udah oke, udah bagus, ya standard lah

19:49Biasa kan

19:51Ternyata, lama-lama makin

19:53Layout, makin kompleks

19:55Terus, kalau dulu kan satu dokumen

19:57Satu halaman, CSS-nya

19:59Ya, di situ, maksudnya CSS untuk satu halaman

20:01Komponen, belum ngetrend kan

20:03Maksudnya, apa, mix and match

20:05Pattern-pattern yang bikin

20:07UI, komponen yang bisa dipakai

20:09Di macam-macam tempat, juga

20:11Kalau percentage

20:13Kalau percentage itu, ke parent

20:15Atau ke root

20:17Kayaknya ke parent deh, belum

20:19Jujur, belum pernah, belum pernah nge-set font size

20:21Pake percent, nah

20:23Tapi tadi tuh, lanjutannya si EM lawan

20:25REM, nah waktu REM

20:27Dirilis, itu kayak breakthrough banget

20:29Kayak, wow, sekarang bisa

20:31Jadi semudah ini

20:33Kalau sekarang, karena udah lama juga

20:35Kita udah take it for granted

20:37Tapi, maksudnya dulu itu breakthrough

20:39Nah, kalau percent

20:41Jujur, nggak tahu sih, belum pernah pake

20:43Belum pernah pake buat font size

20:45Jadi, EM itu relatif ke parent

20:49REM itu relatif ke root element

20:51Gitu ya, maksudnya ya, bener nggak

20:53Iya, iya dan

20:55Nah, apa, maksudnya kalau relatif ke parent

20:57Kan kita mikir cuma immediate parent ya

20:59Parent yang diatasnya

21:01Bisa nggak, pokoknya dari paling atas

21:03Apa

21:05Bisa cascading ke bawah

21:07Jadi kalau misalnya nestednya

21:09Ada 5 level

21:11Itung semua tuh, maksudnya apa

21:13Yang paling bawah

21:15Yang paling si anak yang paling kecil ini

21:17Di set 1,5 EM

21:19Nah, atas-atasnya

21:21Semua, apa, bukan cuma parent

21:23Tapi grandparent, kayak

21:25Orang tua, kakek, buyut

21:27Dan seterusnya

21:29Bisa jadi kalau saya buat 1 class

21:31Dia pake EM

21:33Tetapi misalnya

21:35Di home page dia

21:37Mungkin immediate

21:39Langsung ke root, tetapi

21:41Di single page

21:43Dia sebenarnya

21:45Masih masuk jadi grandchildren dari root

21:47Bisa jadi hasilnya

21:49Berbeda ya, class, meskipun

21:51Class yang sama, EM yang sama

21:53Tetapi font size-nya

21:55Bisa berbeda di home page sama di

21:57Ya dia inherit

21:59Dia inherit semua

22:01Semua orang tua, kakek nenek

22:03Apa, kakek buyut dan seterusnya

22:05TIL katanya, bahasa orang

22:13TIL

22:15Today I Learn

22:17Today I Learn, ya

22:19Jadi, ini dia

22:21Beberapa, ini

22:23Ini beberapa ya

22:25Semua ya, enggak

22:27Yang umum

22:29Angka

22:31Ini konteksnya bukan cuma font size ya

22:33Kalau ini macem-macem

22:35Ada integer yang angka polosan

22:37Ada pixel, tadi kita udah bahas

22:41EM sama REM

22:43Ada percent, udah dibahas juga tadi

22:45Character

22:47Keyboard

22:49Vertical width, vertical height

22:51Vertical width

22:53Biasanya yang buat height 100% ya

22:55No, no

22:57It's not 100%

22:59Bukan, memang, bukan

23:01100% dari viewport-nya

23:03Ya, dari viewport

23:05Viewport dibagi 100, nah itu

23:07Full screen gitu, maksudnya height-nya full

23:09Ini gunanya saat di mobile

23:11Karena

23:13Ingat ya, kalau di mobile itu

23:15Ada

23:17Ada site, apa namanya itu namanya

23:19Address bar ya, dynamic toolbar

23:21Nah itu nanti ada artiklenya juga

23:23Iya

23:25Jadi kalau

23:27Safari

23:29La contohnya ya

23:31Dia, kalau kita baru buka

23:33Toolbar-nya muncul

23:35Entara dibawah atau di atas, tapi kalau begitu kita scroll

23:37Dia langsung full screen

23:39Nah, yang full screen itu

23:41Waktu dia 100vw

23:43Kalau ada toolbar-nya

23:45Oh sorry, vh

23:47100vh, tapi kalau misalnya

23:49Toolbar-nya ilang, eh sorry

23:51Toolbar-nya ada, dia nggak 100vh

23:53Nah itu salah satu contoh

23:55Kasus kayak CSS itu

23:57Harus ngikutin kebutuhan

23:59Itu kan sebetulnya awalnya

24:01Dulu kan nggak ada sama sekali ya

24:03Konsep kayak gitu, cuma Apple aja

24:05Bikin apa

24:07Maksudnya dia mendesain

24:09Safari browser

24:11Dengan toolbar yang bisa

24:13Muncul dan ilang, dan mungkin

24:15Apparently jadi populer, jadi

24:17Ngetrend, terus lama-lama browser lain

24:19OS lain juga bikin kayak gitu kan

24:21Nah itu kan hal yang dulunya

24:23Nggak ada konsep kayak gitu, maksudnya nggak ada yang

24:25Unforseen lah

24:27Nah gara-gara itu ngetrend, dan

24:29Apa? Sebelumnya kan

24:31Developer jadi workaround akal-akalan

24:33Mountain pake JS kan, apa

24:35Buat ngecek

24:37Misalnya, buat ngecek viewport-nya

24:39Berubah atau nggak, atau

24:41Mungkin ngecek apa

24:43Scroll-nya nyampe mana, kalau misalnya

24:45Masih di atas, itu berarti

24:47Masih ada toolbar-nya

24:49Begitu scroll ke bawah, jadi turun

24:51Nah itu kan repot, dan itu

24:53Bisa fatal juga kan, kalau misalnya

24:55Kita pakai 100 ph

24:57Tapi ada toolbar-nya

24:59Bayangin kalau ada menu atau call to action

25:01Di bawah ketutupan toolbar

25:03Kan, nah makanya

25:05Unit-unit baru

25:07Nanti bakal ada artikelnya sendiri tuh

25:09Yang depannya D, punya dynamic

25:11Yang ini ya

25:13Ada, jadi bisa

25:15Ngecek yang larger

25:17Larger itu kalau si toolbar-nya lagi

25:19Mumpet, smaller

25:21Kalau ada toolbar-nya

25:23Day dynamic, jadi

25:25Apanya ngikutin aja, entah ada atau nggak

25:27Iya, ini kenapa

25:31Banyak banget juga

25:33Salah satu alasannya adalah, ketika

25:35Sudah di

25:37Misalkan, apa ya

25:39EM tadi ya, EM

25:41Sudah diintroduce

25:43Mau dihilangkan kan sulit ya

25:45Karena udah banyak yang pakai, nggak boleh

25:47Jadi nambah, bisa cuma nambah

25:49Semua web API itu

25:51Harus, apa itu namanya, punya backwards

25:53Compatible

25:55Bisa deprecated juga lho

25:57Bisa

25:59Bisa dan kayaknya

26:01Maksudnya pertimbangannya harus kuat banget

26:03Untuk mendeprecated itu kan

26:05Bahkan center

26:07Tech center aja, HTML tech center aja

26:09Masih aja sekarang

26:11Markie juga masih

26:13Misalnya EM itu tadi

26:15Kalau EM, walaupun

26:17Dianggap ngerepotin oleh

26:19Designer atau developer

26:21Ya kayak nggak bisa

26:23Semerta-merta kayak, oh

26:25Udah kan udah dari EM tuh

26:27EM-nya ilangin aja, nah

26:29Sayangnya, sayangnya atau untungnya

26:31Gak bisa

26:33Jadi nggak bisa

26:35Kalau emang nggak ini, ya nggak usah dipake

26:37Ya pake yang cocok aja

26:39Oke, ini contoh ya

26:43Untuk pixel itu

26:45Berarti di absolute ya

26:47Absolute, karena ukurannya

26:49Sesuai ukuran pixel

26:51Smallest building block of

26:53Graphical display

26:55Based on

26:57Resolution of screen

26:59Resolution of screen, ya

27:03Nah ini juga kan, apa

27:05Teknologi baru kan

27:07Dulu belum ada retina ya

27:09Belum ada retina display

27:11Atau high resolution display

27:13Itu kan tadi kayak TLR-nya

27:15Makin high resolution

27:17Graphical display-nya

27:19Makin high resolution monitor-nya

27:211 pixel tuh kayak makin kecil

27:23Setengahnya misalnya

27:25Misalnya kalau 2 DPI ya

27:27Itu kan berarti

27:29Pixel-nya setengahnya di

27:31Monitor jadul yang

27:33Ukuran fisiknya sama

27:35Monitor jadul tuh kayak apa sih?

27:41Pengguna marquee

27:43Yang maksudnya monitor yang belum

27:45Si arti

27:47Yang masih pake tabung itu ya

27:49Yang belum retina lah

27:51Enggak lah

27:53Si arti mah itu jadul banget

27:55Yang belum retina itu jadul

27:57Ya maksudnya yang belum

28:01Yang nggak sebaru

28:03Retina display, gimana tuh

28:05Oh ya kalau misalkan yang 10

28:0910 80 pixel gitu

28:11Yang layar 10 80 gitu

28:13Nah itu juga saya membingungkan loh

28:15Retina display itu kan

28:17Konsepnya kan dia

28:19Misalnya 4x4

28:21Tetapi di kondensi jadi

28:232x2 kan

28:25Sebenarnya

28:27Nah itu saya suka banget ke

28:29Belongan ini pixel-nya

28:31Berapa sih gitu sebenarnya

28:33Itu paling pusing kalau nggak handle image ya

28:35Apa ini di luar

28:37Apalagi source set ya

28:39Source set ini kenapa

28:41Kenapa dia selalu nge-load yang lebih

28:43Besar gitu

28:45Itu serba salah sih

28:47Kalau nge-load yang jauh lebih kecil

28:49Sudah pecah jadi jelek

28:51Iya baru ngerti

28:53Tapi ya sampe sekarang masih nggak ngerti

28:55Jadi konsepnya

28:57Ya ngikut aja lah apa yang dibikin

28:59Browser yang penting jadinya bagus

29:01Dan sayang masih sampe sekarang

29:03Tidak mengerti 100% bagaimana

29:05Source set saat Retina display

29:07Sampe sekarang

29:09Jadi nerimo aja

29:11Belum mendalami

29:13Sampe iseng bikin

29:15Source set yang karena beneran

29:17Penasaran warnanya lain-lain

29:19Kayak merah biru

29:21Ijo sambil ada tulisannya

29:23Resolusinya

29:25Buat ngecek understanding yang

29:27Kalau misalnya segini itu yang ke trigger

29:29Yang muncul gambar yang mana

29:31Ya balik ke topik

29:33Absolute values

29:35Nah absolute values

29:37Predictable

29:39Predictable

29:41Ini ada yang menarik nih

29:43Why you should never use

29:45PX to set font size in CSS

29:47Like BAT

29:49Like BAT

29:51Tapi emang betul

29:53Tapi apa yang

29:55Kayak untuk use case yang

29:57Secara umum itu

29:59Sekarang yang direkomendasikan adalah

30:01RAM, jangan pakai font size

30:03TLDR-nya adalah

30:05Accessibility, accessibility-nya

30:07Dalam hal apa? Dalam hal

30:09By default, satu RAM

30:11Itu kan 16 pixel, maksudnya kita pake

30:13Bayangan pixelnya

30:15Kita nganggep

30:17Semua orang

30:19Ukuran dan kayak

30:21Proporsi layout di layar itu

30:23Selalu sama segitu

30:25Tapi by default, misalnya kalau

30:27User yang pandangannya

30:29Ada low-vision atau masalah

30:31Di penglihatan, itu kayak bisa di custom

30:33Jadi by default itu

30:35Hurufnya besar banget

30:37Semua

30:39Itu proporsinya

30:41Mempengaruhi root

30:43Jadi kalau kita

30:45Nggak custom setting itu

30:47Sama sekali, di kita semua ini by default

30:49Root itu 16 pixel

30:51Nah, buat user yang

30:53Customize itu, root-nya nggak 16 pixel

30:55Ya bisa entah

30:573-2 pixel atau berapa

30:59Nah, jadi kalau misalnya

31:01Pake, kebayangkan kalau

31:03Absolute, kita nge-set ukuran

31:05Hurufnya pakai pixel, itu nggak bisa

31:07Ngikut, nggak bisa ngikut

31:09Setting user yang emang misalnya

31:11Pengen nampilin huruf

31:13Besar-besar banget, sedangkan kalau kita

31:15Pake RAM, ya kan otomatis

31:17Menyesuaikan, relatif ke

31:19Root-nya

31:21Sama ada fitur, tau nggak sih kayak

31:23Typography, misalnya kita

31:25Kasih kayak

31:27Bisa besarin font size-nya, bisa diatur

31:29Web-nya ada fitur, bisa diatur

31:31Sama si

31:33User

31:35Dia mau bikin font

31:37Ya, dia mau bikin font size-nya

31:39Gedean dikit, gitu ya, kasih kayak

31:41Accessibility tool-nya

31:43Jadi, yang kita ubah itu cuma satu

31:45Ini doang, kayak

31:47CSS variable di root-nya doang

31:49CSS variable di root-nya kita ganti

31:51Dari 16 jadi 18, nanti semuanya

31:53Ngikut

31:55Karena satu halaman atau

31:57Satu potongan UI, kan bisa misalnya

31:59Ada title, title ya

32:01Heading gitu, ada heading

32:03Ada sub-heading, mungkin

32:05Ada footer atau footnotes, kan itu

32:07Standard ya, tapi ada ilmunya

32:09sendiri di typography, kayak

32:11Proporsinya, umumnya, seberapa

32:13Nah, itu semua, kalau kayak

32:15Pakai fitur yang disebut Ivan tadi

32:17Kalau pakai relative

32:19Unit, kalau nggak pakai

32:21Hard-coded pixel, ya

32:23Sekali di plus atau minus

32:25Judulnya nama besar juga, bodinya

32:27Nama besar, sub-heading-nya juga, ya pokoknya

32:29Kita nggak harus manualnya

32:31Set satu bersatu

32:33Makanya, pakailah tailwind, sudah diatur

32:35Semua

32:37Komosi sekali

32:39Loh, pakai CSS

32:41Polosan juga bisa

32:43Ujung-ujungnya

32:45Ini, di kelasnya

32:47Font-16

32:49Hard-coded juga

32:55Hard-coded juga ujung-ujungnya

32:57Terus karena, terus orang lain

32:59Ngedit kodingan kita, udah pusing

33:01Font-16 ini dari CSS yang mana

33:03Karena kan dari tailwind ya, nggak

33:05Kelihatan, terus hard-coded

33:07Style sama dengan

33:09Font-size, titik 2

33:1124 pixel, tanda seru, important

33:13Important

33:15Masih pada pakenya

33:19Tanda seru, important

33:21Masih

33:23Kalau pakai, kalau kepepet

33:25Kalau udah bingung, harus simpen sekarang

33:27Oke, tadi kita udah bahas ya

33:33Ini ada centimeter, inci

33:35Dan lain-lain

33:37Terus degree

33:39Gradient

33:41Khususnya buat ini kan

33:45Buat rotet-rotet ini

33:47CSS

33:49Animate

33:51Kalau nggak itu warna gradasi kan

33:53Oh iya, iya, iya, iya, betul

33:55Nah, bisa pakai turn tuh

33:59T-U-R-N, turn

34:01Satu putaran

34:05Satu putaran gitu

34:07Kenapa nggak 180 degree aja

34:09Lebih gampang diitungnya ya

34:13Itu kan

34:15Ya contohnya aja deh

34:17Gampangnya aja ya, kenapa di

34:19Ukuran

34:21Ukuran

34:23Di US deh, ukuran

34:27Bensin, pakenya gallon

34:29Ukuran susu, gallon

34:31Ukuran wine, pakenya liter

34:35Karena diimpor dari Eropa wine-nya

34:37Enggak ya, kok ngarang sih

34:39Enggak tahu juga

34:41Ya pokoknya alkohol

34:43Ditungnya pake liter, atau mili liter

34:45Tapi muli bensin sama mili susu

34:47Galon

34:49Jarang orang beli wine

34:51Pakai gallon, dia pakai literan

34:53Betul juga

34:57Nanti isi ulang

34:59Biasa isi ulang gallon, air mineral

35:01Ini isi ulang wine, pakai gallon

35:05Aduh ya kita punya ada alternative turn

35:07Kalau nggak mau pakai degree

35:09Nah ini time untuk animasi

35:11Time ini buat animasi ya

35:13Biasanya ya

35:15Ada second dan millisecond

35:17Frequency unit

35:19Hertz

35:21Baru tahu, baru tahu ini

35:23Ada kilohertz, ada hertz

35:27Ini kan bukan CS, CS ini

35:29Attributed ML

35:31Iya juga ya

35:33Bener juga

35:35Ya cuma dia merasa perlu

35:37Dibuat ke sini

35:39Resolution

35:41Resolution berarti yang tadi dong

35:43Pixel, bukan?

35:45Itu dpx

35:47Dppx

35:49How many dots are packed into a screen?

35:51Oh ya dpi

35:53Dot per inch

35:55Dot per pixel

35:57Ini konteksnya untuk media query

35:59Jadi kalau kita

36:01Yang menargetkan buat

36:03Yaitu retina

36:05Retina itu sebetulnya term gimmicknya Apple ya

36:07Jadi maksudnya

36:09High density

36:11Dan ada kok

36:13Masih ada di atas retina kok

36:15Contohnya si Samsung

36:17Sekarang kan jadi berlomba-lomba semua

36:19Dulu kan cuma 2 ya

36:21Setandarnya 1 pixel

36:23Punya 1 unit

36:251 dot di layar itu

36:271 pixel retina itu 2 kali

36:294 nya kan 2 banding 1

36:31Jadi 1 dot itu represented oleh

36:332 pixel, 2 kali 2

36:35Terus jadi 4 sekarang kan

36:37Ada yang bikin

36:393, 4, ya maksudnya ke depannya

36:41Bisa 100

36:43Pixel

36:45Infinite value tuh

36:47Infinite value

36:49Infinite value

36:51Ada dots per centimeter lah

36:53Gak pernah pape kalau ini

36:55Iya

36:57Selanjutnya relatif kini

36:59Tadi absolut kan

37:01Kalau relatif ini berarti dia lebih ke

37:03Definisi relatif adalah

37:05Depends on something else

37:07Itu tuh di atas

37:09Tergantung ya

37:11It depends ya

37:13Relatif, semua itu relatif

37:15Ada yang

37:17Pakai percent

37:19Kayak gini kan

37:21Ya ini ukurannya 50 percent

37:23Dari total segini kan

37:25Kalau misalkan kita expand

37:27Dia akan membesar

37:29Ini 50 percent dari total

37:31Cuma gotcha nya adalah

37:33CSS itu

37:35Hanya bisa ngitung percentase

37:37Kalau elemennya adalah

37:39Block element

37:41Jadi di CSS itu ada yang block

37:43Ada yang inline kan

37:45Kalau misalnya

37:47Statusnya apa

37:49Display nya bukan

37:51Block atau semacamnya

37:53Itu dia gak bisa

37:55Pakai percent

37:57Keliatnya semua orang pas

37:59Pertama kali banget belajar CSS

38:01Pernah kesandung

38:03Di apa

38:05Kita pengen elemen itu full

38:07Full screen, full viewport

38:09Hit titik 2 100 percent

38:11Kalau belum pakai reset atau ponnya

38:13By default belum diapapain

38:15Gak bisa, terus bingung

38:17Karena

38:19Prustrasinya belajar CSS

38:21Itu tuh banyak gochanya

38:23Banyak perangkapnya

38:25Harus ini, caranya itu

38:27Internal joke saya dulu sama

38:29Tim saya

38:31Waktu saya lagi pusing dengan CSS itu adalah

38:33Kita bilangnya

38:35CSS itu ilmu tidak pasti

38:37Karena semuanya

38:41Relatif

38:43Absolute pun ada relatifnya

38:49Ada yang important

38:51Tau-taunya ada yang important

38:53Position absolute pun

38:55Harus ada diatasnya

38:57Ada position

38:59Relatif diatasnya

39:01Parentnya

39:03Kalau gak dia absolute terhadap

39:05Screen

39:07HTML

39:09HTML tag

39:11Ini ada percent

39:15Ada relative unit

39:17Em, rem, karakter

39:19Root karakter

39:21Ini sama kayak em, rem ya

39:23Ya

39:25Line head, root line head

39:29Capital letter

39:31Root capital letter

39:33International character

39:35Root international character

39:37Ex dan rex

39:39Itu tadi yang karakter

39:41Kanji atau apalah

39:43International character

39:45Di depan

39:47Di depan

39:49Sekarang udah bisa meletakkan item.center

39:51Ya, sekarang semuanya sudah

39:55Membuat lebih masuk ke typography nerds

39:57Daripada yang lain

39:59Jadi kayak ini emang istilah

40:01Aneh-aneh yang

40:03Relevant buat typography nerds

40:05Nah itu tuh

40:07Grafiknya

40:09Dan jujur

40:11Sampai sekarang belum pernah

40:13Ada keperluan pake unit yang

40:15Aneh-aneh gitu sih

40:17Kayak x height atau apa itu

40:19Yang kanji atau apa ya selama ini

40:21Beneran pake rem

40:23Oh gitu

40:27X nya itu satu ch

40:29Satu ex

40:31Ch itu widthnya, ex itu

40:33Heightnya

40:35Iya

40:37Height yang huruf kecil yang

40:39Gak panjang

40:41Normal

40:43Nah yang cuma masalahnya

40:45Gak masalah sih maksudnya expected

40:47Kalau kita udah tau apa

40:49Asal-mualsalnya expected

40:51Yang paling simetri memang huruf x ya

40:53Yang paling simetri dia terus sama huruf

40:55Bisa buat patokan

40:57Kita kadang kalau misalnya width 10 ch

40:59Kita mikir kalau ada kata

41:01Kata-kata yang 10

41:03Karakter 10 huruf

41:05Atau di jumlah pokoknya 10 huruf

41:07Ya berarti bakal segitu

41:09Bisa dilihatkan disitu huruf l

41:11Kan lebih kecil, lebih sempit daripada x

41:13Kecuali monospace kan

41:15Kalau monospace ya

41:17Nah cuma ya emang itu expected

41:19Jadi walaupun kita

41:21Set width titik 2 10 ch

41:23Kita masukin sebarang kata-kata

41:25Yang totalnya 10 karakter

41:27Belum tentu widthnya sama maksudnya

41:29Bisa lebih besar bisa lebih kecil tergantung

41:31Hurufnya kan

41:33Dan spasi juga, liat aja disitu

41:35Spasi kan gak selebar huruf x kan

41:37Cuma yang dipakai adalah

41:39Huruf x sebagai patokan

41:41Yang kayak leber yang standar lah

41:43Yang standarnya segitu ya

41:45Viewport, tadi udah kita bahas ya

41:53VH, terus

41:55Ada Vmin Vmax

41:57Minimum Maximum

41:59Ada Dynamic Viewport

42:01Height and Width

42:05Small Viewport Height

42:07Nah itu tadi yang ada Large

42:09Ada Small, Small itu maksudnya

42:11Kalau si Dynamic Toolbar nya lagi muncul

42:13Nah sisanya berarti yang muncul itu

42:15Kalau lagi itu dianggap Small

42:17Kalau si Dynamic Toolbar nya lagi ilang

42:21Itu Large

42:23Kalau apalagi ada Keyboard nya muncul ya

42:27Viewport Units

42:35That's because a percentage units

42:37Always relative to the parent element

42:39But a viewport unit is always

42:41Relative to size of viewport

42:43Or browser window

42:45Jadi kan walaupun 100%

42:47Tetap relative to

42:49Parent elements

42:51Kalau mau

42:53Bergantung kepada

42:55Seberapa besar

42:57Window

42:59Menggunakan viewport ya

43:01Nah cuma itu tadi tuh

43:03Itu

43:05Nah yang paling

43:07Gotcha nya itu

43:09Body

43:11Element body

43:13HTML

43:15Gak punya implicit height

43:17Itu hal

43:19Yang bikin nyebelin misalnya

43:21Sumber masalah

43:23Semua web dev yang baru belajar CSS itu

43:25Karena gak ada

43:27Jadi kenapa gak bisa 100%

43:29Karena si parent nya itu body

43:31Relative ke sesuatu

43:33Kita kan by default mikir ya udah kenapa

43:35Body nya height nya gak

43:37Se-height viewport

43:39Ya gak tau, itu maksudnya kenapanya

43:41Kenapa body gak dikasih height

43:43Ya lagi-lagi

43:45Ya karena bisa overflow kan

43:47Dia bisa overflow ke bawah

43:49Terus

43:51Nah berarti

43:53Dulu sebelum ada

43:55Viewport

43:57Jadi akal-akal nya kan body

43:59Main height

44:01Titik 2 100%

44:03Kalo dikasih itu kan

44:05Jadi ada height nya

44:07Ya juga ya

44:09Nah itu workaround nya

44:11Nah ada satu lagi yang

44:13Yang mungkin gak ada

44:15Terlalu berhubungan sama

44:17Unit border box

44:19Itu

44:21Nah itu ngaruh ke

44:23Itu kan box model border

44:25Padding margin

44:27Ini juga

44:29Salah satu hal nyebelin dari

44:31Behavior default nya

44:33Harus dinyalain kayak gini

44:35Kalo gak ada

44:37Ada itu artikelnya

44:39Paul Iris kalo gak salah

44:41Ada penjelasannya

44:43Intinya margin nya jadi di luar

44:45Nah tuh

44:53Jadi pokoknya kita mau

44:55Pakai apapun sih ya

44:57Telwin kayak harus ada resetnya kan

44:59Nah salah satu bagian paling penting

45:01Dari reset ini sih

45:03Nah tuh

45:05Jadi

45:07Paragraf kedua

45:09If I say the width is 200px

45:11Kalo kita bilang

45:13Suatu block element

45:15Atau suatu box 200px

45:17200 itu ya ekspektasi kita udah

45:19Included sama

45:21Padding

45:23Udah sama padding kan

45:25Nah karena ini gak

45:27By default kalo gak dikasih border box

45:29Itu gak

45:31200 isinya doang sebel kan

45:33Nah sampe ada

45:35Historinya di wikipedia coba

45:37CSS box model

45:51Pokoknya intinya mirip kayak tadi

45:53Teranjur dari tahun

45:5598

45:57Baru ada box sizing

45:59Apply a natural box

46:09Like what model all elements

46:11Jeff Kaufman also dove into

46:13The history

46:21The revenge of IE box model

46:23Internet explorer

46:27Internet explorer

46:29CSS one

46:33CSS one

46:35Tahun 96

46:37Yang nonton nih udah pada layar gua

46:3996

46:41Belum

46:43Yung gak ditanya

46:47CSS

46:49Ivan udah kuliah

46:51Cuma kuliah sama 96

46:55When Microsoft release CSS one

46:59Support with their new Trident

47:01Layout engine

47:03Oh dia bikin sendiri Microsoft

47:05Oke

47:07Oh beda ini

47:09Tadinya element widthnya itu sampe

47:11Beda nya apa

47:13Margin border

47:15Padding content

47:17Element width itu sampe border

47:19Kok marginnya ikut

47:21Marginnya ikut

47:23Kalau gak masuk width

47:25Ini enggak

47:27Yang di atas gak margin

47:29Padding itu gak termasuk content width

47:31Yang di bawah termasuk

47:35Iya sampe border

47:37List of many CSS

47:43Welinks including this one

47:47Similar list

47:49Escape died

47:51Was reborn as fire box

47:53With a new rendering engine

47:55Oh jadi behavior nya IE dianggap salah

47:57Cuma

47:59Occasionally people would suggest

48:01Mendingan yang

48:03Kayak dibikin sama

48:05Mendingan yang dibikin IE

48:07Tadi judulnya ini

48:09The revenge of IE box model

48:11Sekarang box modelnya

48:13Menggunakan konsepsi IE

48:15Berarti dia ide nya benar

48:17Tapi di waktu yang salah

48:19Di waktu yang salah

48:21Ide nya udah tepat

48:23Cuma orang gak nangkep maksudnya apa

48:25Akhirnya dianggap salah

48:27Ternyata itu yang benar

48:29Sampai dijelasin

48:31Cuma gue salutnya sama orang-orang

48:33Yang membahas spek ini

48:35Kayak mereka harus

48:37Justru kalau di dunia spek itu

48:39Bukan technical implementation nya ya

48:41Cuma harus bisa ngejelasin

48:43Pake bahasa manusia

48:45Nah itu tuh dia kayak ngejelasin

48:47Logically box itu kan dari border ke border

48:49Bayangin aja kotak beneran

48:51Iya iya iya

48:55Kita sudah

48:57Dulu tantangannya

48:59Cross browser karena

49:01Engine nya banyak

49:03Sekarang cross device

49:05Karena device nya banyak

49:07Harus bisa yang namanya

49:09Responsive dan adaptive

49:11Responsive

49:13Responsive dan adaptive

49:15Contohnya ya

49:17Handphone nya bisa dibuka 3 nih sekarang

49:19Screen nya

49:21Folding, nah Janyan besok

49:23Ada yang bikin lipat ke 4

49:253 aduh

49:27Janyan bisa dilipat 2 arah

49:31Iya responsif aja udah

49:35Melelahkan ya

49:37Dulu saya ingat banget

49:39Pas lagi apa

49:41Masih bikin

49:43Mobile site terpisah

49:45Udah kita gak usah bikin aplikasi mobile

49:47Kita bikin aplikasi web

49:49Tapi responsif

49:51Bisa desktop sama mobile

49:53Dikira kerjanya 1 kali untuk semua

49:57Ternyata enggak malah 2 kali

49:592 kali lipat kerjaannya

50:01Atau malah 2,5 kali lipat ya

50:03Sama ini loh

50:05Mobile dev juga

50:07Baru menganggap

50:09Ternyata mereka juga punya masalah

50:11Dengan responsif juga loh

50:13Kalau misalnya kayak portrait

50:15Landscape

50:17Sama mobile device

50:19Beda ukuran handphone

50:21Beda ukuran screen

50:23Gak ada standarnya lagi

50:25Gak, tapi untungnya

50:29Kalau di

50:31IOS itu ada

50:33Auto

50:35Auto layout

50:37Jadi dia relatif ke kiri kanan

50:39Atas bawah, ada tuh

50:41Memudahkan, lumayan memudahkan

50:43Kan ada jetpack compost katanya

50:45Iya

50:47Itu kan frameworknya

50:49Harusnya ada juga sih auto layout

50:51Soalnya di Figma juga

50:53Ada kan auto layout kan

50:55Figma itu cuma masuk

50:59Langsung developer mode

51:01Langsung klik

51:03Berapa CSSnya pindahin

51:05Dah gitu doang

51:07Saya nggak ada tahu bagaimana dia

51:09Bisa jadi bentunya kayak gitu, nggak mau tahu

51:11Gak urusan

51:13Iya, tapi pernah lihat

51:15Ya

51:17Kalau saya kan kebutuhannya

51:19Buat yang lain kan

51:21Bukan cuma buat itu

51:23Buat bikin itu, bikin apa namanya

51:25Bikin banner

51:27Bikin poster

51:29Oke

51:31Ini apa nih, kita ada kelewatan banyak nih

51:33Ya itu tadi yang viewport

51:35Nah kalau yang container

51:37Diskip dulu lah

51:39Materi besok-besok

51:41Teranjur ngumpulin

51:43Soal unit aja

51:45Ya intinya ini ngikutin

51:47Ngikutin parent

51:49Elementnya, bukan ngikutin

51:51Apa

51:53Viewport

51:55Oh oke

51:57Bukan mengikutin

51:59Biar penasaran topengnya ditabung buat besok

52:01Enggak

52:03Minggu depan juga

52:05Besok-besok

52:07Besok kan, kita onan lagi besok

52:09Besok

52:11Ya kid

52:13Kalau AOS nggak down

52:15Ini juga deg-degan

52:21Streamnya pakai AOS nggak ya

52:23Streamnya pakai WS

52:25Nah ini

52:27Terus kalau mikir

52:29Angka di

52:31Angka di CSS kan orang mikir

52:33Pixel, rem, dan lain-lain

52:35Ada yang integer

52:37Ya integer aja yang mentahan

52:39Ini dari tahun kapan

52:41Cspec Ratio dulu susah banget

52:43Soalnya kalau terutama ngomongin

52:45Image ya

52:47Bayi image-nya nggak lonjong gitu kan

52:49Biasanya dulu work-down-nya kan

52:51Kayak apa sudu konten kan

52:53Dot-dot after

52:55Konten titik dua

52:57Tandai kutip

52:59Kalau nggak pakai itu

53:01Apa namanya

53:03Jadi jadiin background

53:05Nah iya

53:07Iya bener

53:09Background image ya

53:11Sekarang saya rasa

53:13Sama satu lagi

53:15Mumpung kita

53:17Lagi menjelaskan kayak

53:19Tadi yang ada viewport-viewport tadi

53:21Kita rollback sedikit

53:23Kan kita harus ada meta

53:25Menjelaskan kayak meta viewport itu

53:27Harus ada kan

53:29Konten width sama dengan device width

53:31Pernah dengar nggak itu

53:33Ini buat saya paste-nya

53:35Yang di atas ya

53:37Selalu ditaro ya

53:39Mana dia

53:41Saya sampai sekarang

53:43Ini nggak cuma

53:45Content width device width

53:47Masih ada scale-scale-nya

53:49Masih ada yang lain

53:51Kalau yang lain

53:53Kalau yang lain optional

53:55Cuma kalau yang meta viewport width device width

53:57Perlu karena

53:59Gak tau tergantung versi

54:01Kapannya intinya tldr-nya

54:03Nanti kalau dibuka di hp

54:05Tiba-tiba yang muncul adalah

54:07Gak tau kayak root-nya

54:09Kayak dianggap jadi kayak

54:11Malah jadi kayak layout desktop

54:13Tapi disempitin

54:15Gak bisa

54:17Itu pertama kali reload

54:19Kalau udah load

54:21Itu kan html ya

54:23Bukan css, bukan javascript

54:25Itu di dalam head

54:27Itu instruksi buat

54:29Itu instruksi buat layout engine-nya

54:31Nah intinya

54:33Jadi yang muncul di mobile

54:35Yang muncul adalah layout desktop

54:37Tapi diciukin

54:39Di kecil

54:41Ada vertical scroll ya

54:43Ada horizontal scroll ya

54:45Horizontal scroll ya

54:47Mungkin bisa lain-lain ya hasilnya

54:49Pokoknya intinya jadi

54:51Ngerusak behavior responsif

54:53Dan itu dianggap kayak

54:55Desktop

54:57Ukurannya bukan ukuran mobile

54:59Saya tuh

55:03Beneran jadi developer yang

55:05Pakai aja

55:07Gak mau tau belakangnya gimana

55:09Khusus entusiasi seperti ini

55:11Pakai aja sih

55:13Semua klipnya pakai semua template

55:15Sekarang berapa orang sih

55:17Handroll ngetik, beneran ngetik semua

55:19Metatek from scratch

55:21Gak ada kan

55:23Tapi kan penting banget

55:25Mengetahui hal seperti ini tuh loh

55:27Masanya

55:29Biar gue digimbulin AI ya

55:31Kalau kita pakai autocomplete

55:33Tep-tep doang pipe coding

55:35Itunya ilang, kita gak tau

55:37Benerannya dimana

55:39Jadi harus tau

55:41Kalau flex ini flexbox ya

55:45Grid

55:47Untuk layout ya

55:49Biasanya ya

55:51Untuk flex dan grid

55:53Display grid

55:55Untuk display grid kan

55:57Z-index

56:03Nah ini dulu sering jadi

56:05Saya suka bikin sembilan-sembilan

56:07Sembilan-sembilan

56:09Dan saya gak tau

56:11Tau gak sih maksimalnya berapa

56:13Maksimal, oh dulu pernah ada yang ngepost

56:15Tweet dia punya besar banget

56:17Dan gak perlu

56:19Gak penting itu

56:21Gak penting

56:23Ada berapa banyak element

56:25Mau ditimpa

56:27Nah

56:29Ada joke-nya nih, karena saya pernah bikin

56:31Di WordPress kan

56:33Ada hook dan ada priority

56:35Jadi kalau memang

56:37Prioritasnya itu mau dibikin yang super

56:39Late dan gak boleh

56:41Pokoknya harus jalan paling terakhir

56:43Akhirnya kita bikin

56:45php_int_max

56:47Itu adalah

56:49Itu konstan untuk maksimal

56:51Integer di php

56:53Tetapi ada

56:55Saya sampai ketawa

56:57Ada

56:59Ada

57:01Penekot yang saya

57:03Menemukan, karena ada yang bikin

57:05Php_int_max

57:07Terus dia pengen meng-overwrite yang

57:09Sebelumnya itu, di kodanya itu

57:11Dia bikin php_int_max +1

57:13Memang bisa

57:17Ini lucu sih

57:19Ini kocak sih

57:21Gak lalu stress logik

57:25Itu sampai, ini kenapa

57:29Dia bikin, ya

57:31Kalian error gak bisa

57:33Kenapa gak dikali

57:35100 ya

57:37Dikali aja, atau pangkat 2

57:39Aduh

57:41Kocak

57:43Kita gak jadi pembahas

57:45Gak jadi bahas container

57:47Kita bahasnya unit dulu

57:49Karena

57:51Eka terlalu semangat, jadi unitnya

57:53Terlalu banyak

57:55Terlalu banyak

57:59Ini ada

58:01Maximum z-index itu ada gak sih

58:05Coba

58:07Maximum z-index

58:09Ada, bentar nih

58:11Mana

58:13Fine aja

58:15Siapa tau ada

58:19Z-index +1

58:21Oh, berarti

58:23Maximum

58:25Integer ya

58:27Iya kayaknya

58:29Nah, cuma tadi ngomongin

58:31Maximum integer

58:33Jadi inget ada joke

58:35Coba deh buka di private chat

58:37Joke yang gak penting banget

58:39Cuma karena teranjur keingat

58:41Kalian juga semua harus lihat

58:43Joke ini

58:45Oke, lihat ke bawah

58:49Ini gak ada hubungannya sama

58:51CSS unit sama sekali sih

58:53Cuma

58:55Apa?

58:57Ini konteksnya apa?

59:01Yang ada security service ya

59:03Di mana sih? Di Amerika atau dimana?

59:05Di negara maju

59:07Social security service

59:09Social security number

59:11Iya, social security number

59:25Automatically to zero

59:27Now take back that dollar

59:29Baby now has a negative value

59:31Social security buffer

59:33Tidak bisa mengendal

59:35Negative number

59:37Jadi otomatis akan

59:39Flip around to the highest

59:4132 bit integer

59:43Jadi apa, bajimu

59:45Nomornya sama ya

59:47Itu kan ini

59:49PHP in max

59:51Maximum integer

59:53Ya, masalah integer itu

59:5532 bit kan

59:5732 apa?

59:59Is integer

1:00:0132 bit

1:00:03Ya itu pokoknya joke-nya adalah

1:00:05Ini kan gak bisa minus

1:00:07Jadi kalau misalnya minus

1:00:09Otomatis muter ke max int

1:00:11Value max integer

1:00:13Ini joke paling gak penting

1:00:19Kalau pernah ada

1:00:21Oke, kita kembali

1:00:23Ke CSS ya

1:00:2532 bit

1:00:2732 bit

1:00:29Benar

1:00:31Nah, terus khusus kalau

1:00:370, 0, gak usah dipake

1:00:39Apa, gak usah dipake unit apapun ya bisa

1:00:41Bisa

1:00:435 pixel

1:00:45Ini termasuk unit?

1:00:47Enggak ya, color ya

1:00:49Ada yang pernah bikin

1:00:51Null gak sih?

1:00:53Null, iya gak

1:00:55Gak diproses lah

1:00:57Iya

1:00:59Karena suka kebalik-balik

1:01:03Gue bikin kayak border null

1:01:05Otaknya

1:01:11Kebalik-balik sama PHP

1:01:13Atau sama bahasa JavaScript

1:01:19Ini ya?

1:01:21Nah, ini tuh

1:01:23Kita kan mikir

1:01:25Kita biasanya mikir typing itu

1:01:27Type cuma untuk kayak JavaScript

1:01:29TypeScript

1:01:31Kalau misalnya JavaScript kita bisa nge-force

1:01:33Jadi string atau number kan

1:01:35Pake class string dalam kurung

1:01:37Number dalam kurung

1:01:39Nah, kalau CSS

1:01:41Ini khusus

1:01:43Konteksnya CSS variable

1:01:45Atau custom property

1:01:47Custom property itu dianggap string intinya

1:01:49Nah, itu gak bisa tuh

1:01:51Kenapa gak bisa?

1:01:53Karena nullnya itu

1:01:55Pas udah dimasukin

1:01:57Ke dalam property

1:01:59Dianggap null

1:02:01Pantesan

1:02:03Gimana caranya nge-force

1:02:05Ada syntaxnya

1:02:07Di bawah

1:02:09Ini kita nanggapnya

1:02:13Kayak variable ya, padahal sebenernya

1:02:15Custom property ya, sebutannya

1:02:17Tapi emang

1:02:19Dari pihak orang-orangnya juga pada bilang

1:02:21CSS variable

1:02:23Cuma apa, nama teknisnya

1:02:25Nama resminya custom property

1:02:27Biar gampang

1:02:29Konsepnya dipahami

1:02:31Gak gampang juga sih

1:02:33Karena ada variable ada sendiri

1:02:35Ada sendiri

1:02:37CSS variable ada sendiri kan

1:02:39Ini kan CSS variable

1:02:41Bukan, itu CSS variable

1:02:43Itu ya custom property

1:02:45Custom property

1:02:47Kalo pakai sars ya

1:02:49Far

1:02:51Far

1:02:53Bukan kurung tutup kurung

1:02:55Itu untuk

1:02:57Mengambil nilainya

1:02:59Untuk value-nya

1:03:01Untuk definisinya pakai ini

1:03:03Definisinya pakai ini

1:03:05Oke

1:03:07Today I learn

1:03:09Today I learn

1:03:11Ilmu CSS saya itu

1:03:13Ilmu hanya siap pakai saja

1:03:15Ilmu yang sangat dangkal

1:03:21When to use one unit over another

1:03:23This is super tricky

1:03:25Because CSS is extremely

1:03:27Flexible ya

1:03:29Ini semua intinya depends

1:03:31Kayak jawaban sakti developer

1:03:33It depends

1:03:35Tapi sebenernya

1:03:37Tidak semua

1:03:39Unit bisa dipakai di semua property kan

1:03:41Iya yang mutlak

1:03:43Kayak kalimat bawahnya kan

1:03:45You absolutely

1:03:47Have to use a specific unit

1:03:49In some cases

1:03:51You absolutely have to use a specific unit

1:03:53Karena memang

1:03:55Spesifikasinya seperti itu

1:03:57Jadi kalo gradient

1:03:59Ya harus pakai angle

1:04:01Sudut kan, gak mungkin pakai

1:04:03REM

1:04:05Betul, kalo HSL kan pakai persenan

1:04:07Kalo RGBA

1:04:09Kan pakai angka ya

1:04:11Integer atau float ya

1:04:13Jadi beda-beda ini

1:04:15Ini bisa

1:04:17Belakang alpha

1:04:19Opacity

1:04:21Ini alpha ya, opacity ya

1:04:23Itu ada it depends kan

1:04:27Kembali lagi, it depends

1:04:35Ya, kalo untuk font

1:04:37Sebaiknya gunakan REM atau EM

1:04:39Kita udah bahas tadi

1:04:41Declare zero with that unit if you like

1:04:43Use container unit

1:04:45For responsive design where possible

1:04:47Container unit

1:04:49Container query ini

1:04:51Oh ini udah masuk

1:04:53Container query ya

1:04:55Itu container

1:04:57Parent container, my container

1:04:59Inline size

1:05:01Yang belum terjawab adalah

1:05:03At layer

1:05:05Dan udah tau belum at layer

1:05:07Udah, ya ditabung buat besok-besok

1:05:09Ya nantilah

1:05:11Ya pokoknya intinya buat

1:05:13Specificity apa

1:05:15Overwrite

1:05:17Kan biasanya specificity

1:05:19Itu ada aturan-aturannya sendiri kan

1:05:21Dari atas ke bawah

1:05:23Atau ID duluan, atau apa nya

1:05:25Urutan-urutan kelasnya

1:05:27Kalo kita undang mas Adam lagi

1:05:29Emang gak dia

1:05:31Udah gak di

1:05:33Gak bisa di

1:05:35Gak bisa dijadiin bagian dari

1:05:37Itu kerja kalian

1:05:39Bukan KPI dia lagi ya

1:05:41Di Shopify

1:05:43Kerjaannya udah bukan

1:05:45Ya gak bisa buat

1:05:47Jualan itu dia jualan baju live gitu dia

1:05:49Di TikTok

1:05:51Jualan TikTok

1:05:53Baju-baju swag developer gitu

1:06:01Use percentages

1:06:03When you are unsure

1:06:05Of the context

1:06:07Viewport units are great

1:06:09For laying out containers

1:06:11Contoh

1:06:13Oh ini contoh-contoh ya

1:06:15Kalo calc

1:06:21Nah itu ada

1:06:23Artikelnya nanti

1:06:25Ya itu untuk intinya

1:06:27Mengkombine

1:06:29Beberapa unit

1:06:31Menyumbahkan, terus ada

1:06:33Min max kan tuh nanti

1:06:35Gak bakal keburu sih itu

1:06:37Kalo bagi tuh

1:06:39Dia pake / doang, atau harus pake

1:06:41Math.div sekarang

1:06:43Belum pernah

1:06:45Harus ngebagi sih

1:06:47Ngebagi

1:06:49Yang tadi kan ada bagi tuh

1:06:5110% bagi

1:06:53Kayaknya cuma /

1:06:59Kalo

1:07:01Nilainya misalkan 5/2

1:07:03Dia jadi 2,5 gitu

1:07:05Oh math.div itu dari

1:07:07SCS, dari SAS

1:07:09Oh gak ada di CSS

1:07:11Kalo CSS

1:07:13Hanya langsung / aja

1:07:15Kan kalo ngomongin

1:07:21Warna kan

1:07:23Jadi topik sendiri sih

1:07:25Yang kayak ada darker, darken

1:07:27Lighten

1:07:29Untuk bikin supaya

1:07:31Warnanya lebih gelap atau lebih terang

1:07:33Gitu ya, sekarang udah ada kan

1:07:35Di vanilla ya, dulu di SAS doang tuh adanya

1:07:37Lama-lama semua fitur

1:07:39Dari SAS

1:07:41Diporting ke CSS biasa kali ya

1:07:43Kayaknya sih gitu / Yang banyak peminatnya

1:07:45Iya

1:07:47Jadi kayak playground dulu

1:07:49Dicobain di SAS, oh banyak yang pake

1:07:51Di adaptasi

1:07:53Masukin

1:07:57Habis topik kita

1:07:59Masih ada lagi

1:08:01Nggak sih

1:08:03Banyak ya / Banyak

1:08:05Justar

1:08:07Iya karena CSS

1:08:09Aku cinta CSS

1:08:11Coba buka speknya deh

1:08:13Yang

1:08:15Kalo penasaran / Aku cinta rupiah

1:08:17Spek yang mana / Tapi rupiah gak cinta

1:08:21Sama kita

1:08:23Karena dollar dimana-mana

1:08:25Terlalu giget

1:08:27Itu juga lagu dari

1:08:29Sebelum para penonton

1:08:31Channel ini lah ya

1:08:33Nah ini nih

1:08:35Kalo penasaran sama unit

1:08:37Lebih ke

1:08:39Itu sih tadi maksudnya X dari mana

1:08:41Kenapa ada X, CH

1:08:43Itu ukurannya, patokannya apa

1:08:45Lebih ke itu sih

1:08:47Ya kalo pengen iseng baca semua

1:08:49Speknya silahkan, cuma pasti malas

1:08:51Coba ini

1:08:53Nah ini kayak

1:08:55Detail spesifikasi

1:08:57Itu nya tuh

1:08:59CH unit

1:09:01Yang senang

1:09:03Membaca spesifikasinya ya

1:09:05Ada spesifikasinya dari W3A

1:09:07Organisasi ya

1:09:09Jadi silahkan dibaca

1:09:11Patokan ukurannya apa, itu nggak penting-penting

1:09:13Amat sih, nah cuma yang penting

1:09:15Ini nih, kan tadi bahas

1:09:17RAM sama EM

1:09:19Sama punya unit CSS

1:09:21Makan nya di tipografi

1:09:23Buka yang bawahnya deh

1:09:25Joshua Komyo

1:09:27Komo

1:09:29Joshua Komyo

1:09:31Nah apa nya semua tentang

1:09:37Ini

1:09:39Blockpost nya dia tuh selalu bagus-bagus

1:09:41Dan ada kayak apa

1:09:43Live playground nya, live demo nya

1:09:45Nah ini semua breakdown

1:09:47Yang tadi kita bahas ya

1:09:49Oh ini ya

1:09:51Yang dia ujung-ujungnya jualan core

1:09:53Ya emang

1:09:55Dia apa

1:09:57Creator, Core, Create sama CSS

1:09:59Core Creator

1:10:01Nah kalo block nya

1:10:03Jelek, orang kaga mau

1:10:05Beli core nya

1:10:07Pixel

1:10:09Ini pixel, pixel cukup jelas ya

1:10:11Tadi kita udah

1:10:13Terus ada hardware versus software

1:10:15Pixel

1:10:17Oh beda ya

1:10:19Kalo iPhone, susunan pixel nya beda tuh

1:10:21Satu

1:10:25That Great Blue

1:10:27EM

1:10:31Created based on

1:10:33Element calculated on size

1:10:35Kalo

1:10:37Gimana tadi

1:10:39Ini udah dibahas tadi ya

1:10:41Kan satu

1:10:45Ya

1:10:47Kalo RAM

1:10:49Bukan, ini masih EM

1:10:51Ini masih EM

1:10:53Nah ini contoh yang kita bahas tadi

1:10:55Di Sentence gets quieter and quieter

1:10:57Jadi kayak

1:10:59Makin lama makin

1:11:01Makin kecil makin kecil gitu ya

1:11:03Jadi ini adalah

1:11:070,8 dari

1:11:0916 pixel

1:11:11Kalo satu EM sama dengan 16 pixel kan

1:11:13Terus ini adalah

1:11:15Naik cascade ke atas

1:11:190,64 dari 0,8 dari satu EM

1:11:21Dua kali, berarti 16 pixel

1:11:27Dikali 0,8, dikali 0,64

1:11:29Tapi ini kan gak nested ya

1:11:31Kok bisa ngikut gitu sih ya

1:11:33Padahal kan gak nested

1:11:35Ko juga baru tau, selama ini taunya kalo nested

1:11:37Ternyata kebawah pun

1:11:39Ngikut

1:11:41Bukan 0,4

1:11:43Dikali 16 pixel, bukan ini

1:11:45Coba

1:11:491 kali 0,8 kali 0,64

1:11:51Kayaknya gak deh

1:11:53Coba aja rupa

1:11:550,8 nya

1:11:57Ubah 0,8 nya

1:11:59Ini bisa diketik ya

1:12:01Itu buat beautify

1:12:030,8 diganti

1:12:051

1:12:07Sama kan

1:12:09Gets nya itu gak makin kecil kan

1:12:11Ya kan

1:12:13Berarti tergantung kepada

1:12:151 rem

1:12:17Ini +1 layer

1:12:19Berarti 16 ya

1:12:2116 dikali 0,64 kan ya

1:12:23Iya

1:12:25It's old news now

1:12:37It's compound

1:12:39Sekarang kayaknya orang gak inget juga

1:12:43Kapan

1:12:45Kalo ini baru nested ya

1:12:47Nested ya

1:12:49Tuh

1:12:53Kalo nested baru dikali

1:12:5516 kali 1,125

1:13:01Dikali 0,9

1:13:03Dikali 1,25

1:13:05Jawabannya adalah 20,5 pixel

1:13:07Alasannya adalah

1:13:27Menggunakan pixel dibandingkan

1:13:29Pake EM atau rem

1:13:31Lebih bagus untuk accessibility ya

1:13:33Rem sama EM ya

1:13:35Jadi kalo kita

1:13:37Zoom

1:13:39Dia ikut besar

1:13:41Kalo font enggak ya, pixel enggak ya

1:13:43Kalo pixel enggak

1:13:45Ukurannya tetep ya

1:13:47Itu tuh sebenernya agak ribet juga

1:13:49Pixel, kalopun pakai pixel

1:13:51Itu lebih besar, cuma kayak

1:13:53Relativity nya

1:13:55Jadi kayak relative proportionnya

1:13:57Kayak gak

1:13:59Ketrigger gitu

1:14:01Oh jadi

1:14:03Gak bisa diprediksi ukurannya

1:14:05Jadi sebesar atau sekecil apa ya

1:14:07Ya pointnya jadi

1:14:09Pernah nyoba gitu, ada yang berubah ada yang enggak

1:14:11Ini default font size ya

1:14:21Jadi yang ada di setting

1:14:23Bukan control plus

1:14:25Atau command plus ya

1:14:31Nah itu tuh

1:14:33Apa, coba deh diganti kalo

1:14:35Pake pixel tadi

1:14:37Ini kan kalo pakai rem

1:14:39Kalo pakai pixel

1:14:41Gak berubah

1:14:43Oh

1:14:45Kalo pakai rem baru

1:14:47Jadi kalo orang kesulitan

1:14:49Baca dia zoom

1:14:51Gak nge zoom

1:14:53Tetep ukurannya tetep 16 pixel

1:14:55Atau berapa pixel ini

1:14:57Ya 16 pixel ya

1:14:59Ada bunyinya ya

1:15:01Strategic unit deployment

1:15:07Ada strateginya ya

1:15:09Itu behavior

1:15:13Kalo dipake buat padding

1:15:15Bukan font size

1:15:17Ada beda sedikit ya

1:15:21Loh tadi geser, enggak ya

1:15:27Oke

1:15:29Media query

1:15:39Kayak patokan yang menarik

1:15:41Itu di atas, atas sedikit

1:15:43Atas lagi

1:15:45Should this value scale up

1:15:47As the user

1:15:49Oh I see ngerti

1:15:51Jadi apa itu tadi

1:15:53Illustrasinya dia

1:15:55Kalo buat font size

1:15:57Pake pixel

1:15:59Pas user zoom in

1:16:01Fontnya

1:16:03Fontnya nggak nombor besar kan

1:16:05Segitu terus

1:16:07Padahal kita pengennya nombor besar doang

1:16:09Jadi pakenya rem

1:16:11Nah cuma kalo margin sama padding

1:16:13Kalo setiap di zoom in

1:16:15Marginnya incrementally

1:16:17Berkambah

1:16:19Kan textnya jadi ke squeeze tuh

1:16:21Jadi sempit banget

1:16:23Jadi ya udah

1:16:25Jadi pake pixel

1:16:27Oh gitu

1:16:29Cuma kan belum tentu ya

1:16:31If the value should increase with the default font size

1:16:33I use rem, jadi bukan berarti nggak boleh pake rem

1:16:35Cuma otherwise I use PX

1:16:37Tergantung kita mau ikut nge-fluid nggak

1:16:39Iya iya

1:16:41Kalo gue pribadi

1:16:43Yang kayak bego-bego-nya

1:16:45Kalo border selalu pake PX

1:16:47Sisanya rem semua

1:16:49Ya cuma lagi-lagi tergantung

1:16:51Apa, tergantung desainnya ya

1:16:53It depends, cuma kalo misalnya

1:16:55Yang standar, ya kan kita nggak perlu

1:16:57Di zoom in juga buat apa bordernya

1:16:59Jadi besar banget kan, jadi selama ini sih

1:17:01Kalo border pake pixel

1:17:03Tapi semua pake

1:17:05Rem

1:17:07Buat menjumlahkan

1:17:09Lebih dari satu unit

1:17:11Keren ya platformnya ya

1:17:15Course platformnya

1:17:17Ya terus kalo dia baru

1:17:19Launching course baru

1:17:21Ada open house-nya, jadi gratis

1:17:23Kaya gratis

1:17:25Untuk beberapa waktu gitu ya

1:17:27Kaya 2 chapter pertama

1:17:29Atau sekian lah

1:17:31Ya kayak gitu tuh demo

1:17:33Kita bisa nyobain

1:17:35I see, oh keren-keren

1:17:37Tapi course-nya mahal-mahal

1:17:39Jadi nggak pernah beli sampe sekarang

1:17:41Ya mahal buat standar kita

1:17:45Oh nggak ada

1:17:47Berarti apa namanya istilahnya

1:17:49Yang potongan harga karena dari Indonesia

1:17:51Mungkin ada ya

1:17:53Cuma karena kontennya CSS

1:17:55Yang yaudahlah belajar sendiri aja

1:17:57Karena oh seneng

1:17:59Seneng dan nggak bisa

1:18:01Jadi nggak beli malah

1:18:03Ya gitu

1:18:05Nah terus paling

1:18:07Terakhir itu sih buka skilas aja

1:18:09Yang web dev block

1:18:11Viewport units karena tadi udah

1:18:13Dibahas

1:18:17Viewport unit yang mana?

1:18:19Web.dev/block

1:18:21Sorry, sorry, sorry

1:18:29Ini

1:18:31Nah gitu

1:18:33Ya itu tadi yang udah kita bahas sih

1:18:35Cuma ada breakdown-nya

1:18:37Kalo dijelasin

1:18:39Pake kata-kata kan suka nggak kebayang ya

1:18:41Cuma kalau liat disitu jelas banget

1:18:43Lebih jelas aja

1:18:45Lebih langsung

1:18:47Nah tuh

1:18:51Mereka tuh sekarang pake inline sama

1:18:53Block itu sebenernya sama kayak width sama height

1:18:55Ini harus dibaca

1:19:01Dengan sangat seksama ini

1:19:03Nah itu tadi masalah

1:19:05Yang tadi kita bahas sih

1:19:07Masalahnya kalo 100vh

1:19:09Mau ada apa

1:19:11Mau ada

1:19:13Atau apalah yang muncul atau nggak

1:19:15Ketutupan kan

1:19:17Iya kalo ada toolbar

1:19:19Di atas jadi ada scroll ya

1:19:21Padahal kita pengennya 100% gitu ya

1:19:23Maksudnya nggak pake scroll

1:19:25Ini bisa nutupin

1:19:27Kayak menu-menu yang di paling bawah kan

1:19:29Padahal kalo di mobile itu kan paling

1:19:31Suka itu menu paling bawah buat

1:19:33Popular pattern

1:19:35Ada toolbar atau apalah

1:19:37Ya sekarang kan

1:19:39Jadi soft button kan

1:19:41Ada hard button kan

1:19:43Enggak ganggu kan

1:19:45Sekarang kan soft button itu kalo misalkan kita mau pencet home kan

1:19:47Susah kalo ada

1:19:49Berarti di atasnya soft button kita

1:19:51Atau dibawah jangan

1:19:53Maksudnya

1:19:55Tetep yang menang sih punya si

1:19:57Mobile

1:19:59Jadi ketutupan kita kalo pake vh

1:20:03Nah makanya sekarang ada itu

1:20:05Unit yang baru

1:20:07Gak baru-baru amat juga karena udah 3 tahun

1:20:11Nah itu

1:20:13Large viewport, small viewport

1:20:15Kalo small viewport ada

1:20:19Itu ya potongan dibawah sama di atas

1:20:21Yang sudah

1:20:23Yang udah dipotong apapun itu

1:20:25Element yang ditambahin oleh browser

1:20:27Useragent

1:20:29Di artikel inklo

1:20:31Desikatan UA berarti useragent

1:20:33Neto sama Bruto ya

1:20:37Neto sama Bruto

1:20:39Nah itu poinnya yang Large itu

1:20:41Semua yang depannya L

1:20:43Kayak permutasinya varian-variannya

1:20:45Ada di listnya itu

1:20:47Yang depannya S, small

1:20:49Nah gimana dengan D, dynamic ya itu ngikut

1:20:57Kalo pas lagi muncul

1:20:59Element-element

1:21:01Tambahan dari browser

1:21:03Ya 100% yang

1:21:05Yang muncul, yang lagi diliat

1:21:07Nah kalo misalnya usernya

1:21:09Nge-scroll down, terus apa

1:21:11Layarnya membesar, jadi apa

1:21:13Penuh, ya toolbar-tulbar

1:21:15Bawaan browsernya ilang

1:21:17Ya 100% itu ya 100

1:21:19Itu yang di viewport

1:21:21Dynamic, berubah-ubah

1:21:23Ini kan image ya

1:21:25Ini image ya

1:21:27Kalo timnya diubah

1:21:29Dia ikut berubah juga ya

1:21:31Tuh, terang

1:21:33Gak, itu karena

1:21:35Matanya Mas Riza

1:21:37Opacity

1:21:39Iya, kayaknya opacity deh

1:21:41Berubah, maksudnya kuningnya gak kuning terang kan

1:21:43Kalo yang Large kan kuningnya terang banget

1:21:45Iya

1:21:47Gak gelap

1:21:49Ini juga

1:21:51Tuh, kan

1:21:59S, size itu pasti ada caveatnya

1:22:01Betul

1:22:03Makanya gak pasti kan

1:22:05Iya bener

1:22:07It depends

1:22:09Nah, terus sebelumnya kalo misalnya kita kenapa

1:22:31Ya, karena spesifikasinya begitu

1:22:33Oh, kan ada scrollbar

1:22:35Scrollbar

1:22:37Di kanan, ya kan

1:22:39Iya

1:22:41Kan masing-masing OS itu

1:22:43Beda-beda ya scrollbarnya ya

1:22:45Ada yang tipis, ada yang tebel

1:22:47Belum lagi kalo usernya iseng

1:22:49Kan, teamsnya diganti-ganti, scrollbarnya

1:22:51Dianahin-anahin kan

1:22:53Nah, terus tadi dynamic

1:22:59Abit-abit

1:23:01Kalau user gak scroll ke bawah

1:23:03Oh

1:23:29Jengky, karena

1:23:31Dia gak ngejamin 60 fps

1:23:3360 fps itu kan kecepatan

1:23:35Layout engine

1:23:37Refresh rate

1:23:39Mererender pixel

1:23:41Berarti

1:23:43Jangan pake dynamic viewport

1:23:45Kalo mau bikin game ya

1:23:47Gak bisa 60 fps

1:23:49Jangan pake CSS, entahan juga

1:23:51Masa game pake CSS

1:23:53Game

1:23:55Game browser

1:23:57Game yang grafik banget

1:23:59Pake itu lah, apa namanya, GL ya

1:24:01SVG, ya OpenGL

1:24:03OpenGL

1:24:05OpenScreen, oke

1:24:07Nah, ini dulu jaman

1:24:11Mereka masih di Google

1:24:13Iya

1:24:15Oke

1:24:17Tapi bakal ada lagi kok, CSS

1:24:19Css Podcast

1:24:21Iya, Mbak Una

1:24:25Semoga awet

1:24:27Semoga awet, oke

1:24:29Jadi

1:24:33Sudah habis waktunya

1:24:35Oke

1:24:37Sebelum udahan

1:24:39Seperti biasa

1:24:41Kalau

1:24:43Semang-seman

1:24:45Minggu depan Halloween kan

1:24:47Edisi horror

1:24:49Kalau ada sumur di ladang

1:24:53Kita bahas Halloween

1:24:55Yang pertama bisa tuh

1:25:17Coba aja

1:25:23Ya cerita horornya ya

1:25:25Jangan lupa, ditunggu

1:25:27Tapi kok musiknya malah gak seru ya

1:25:31Itu malah musik sirkus

1:25:33Ya nanti pilih

1:25:41Pilih lagu dulu

1:25:43Gak usah pake sound effect

1:25:45Kayaknya udah cukup surround

1:25:47Harus belajar ketawa

1:25:49Ketawa ini dulu

1:25:51Ketawa setan gitu

1:25:53Setan

1:25:55Udah banyak

1:26:03Yang submit

1:26:05Di twitter juga lumayan rame

1:26:07Ada yang beneran horror

1:26:09Literal horror

1:26:11Kalau penasaran jangan lupa

1:26:17Minggu depan

1:26:19Styling juga horror

1:26:21Tiba-tiba harus

1:26:25Nge-benerin, nge-fix

1:26:27Layout pake bootstrap dan jQuery

1:26:29Yang rusak

1:26:31Itu horror juga

1:26:33Aos mati kemarin juga

1:26:35Horror

1:26:37Buat sebagian orang

1:26:39Buat sebagian yang lain

1:26:41Libur

1:26:43Ya udah gak bisa kerja

1:26:45Gak bisa kerja

1:26:47Gimana kalau

1:26:49Kan sempet ya

1:26:51Kayak cloud code

1:26:53AI gitu tiba-tiba servisnya mati

1:26:55Gak bisa kerja juga, alasan juga ya

1:26:57Gak ada AI gak bisa kerja

1:26:59Oh iya tuh kalau yang developer yang

1:27:01Vibecoder instant

1:27:03Terus tiba-tiba kerja

1:27:05Terus AI nya mati, gimana ya itu

1:27:07Ternyata gak bisa ngapa-ngapain

1:27:09Tau nya lupa di top up

1:27:17Kan ternyata lagi efficiency

1:27:19Jadi dimatiin, gak di top up lagi

1:27:21Oke

1:27:25Ya jadi kita ketemu

1:27:27Di depan

1:27:29Jangan lupa cerita horror yang menarik

1:27:31Yang kita bacain karena gak bakal semua

1:27:33Jadi kita simpan juga buat

1:27:35Mungkin malam

1:27:37Ya malam apa ya

1:27:39Jumat-Jumat

1:27:41Kita live stream selasa malam

1:27:43Gak bakalan ngomong-ngomong

1:27:45Yang selasa Q1 aja

1:27:47Ada gak selasa Q1

1:27:49Ada lah, harus dicari harus dilihat

1:27:51Ada

1:27:53Kita cari nanti ya malam selasa Q1

1:27:55Kita bacain lagi

1:27:57Tolong ceritanya

1:27:59Itu lengkap

1:28:01Ada konteksnya gitu ya, lengkap

1:28:03Jadi kita bacanya enak, kayak baca cerita gitu ya

1:28:05Oke untuk

1:28:07Hari ini sekian dulu, terima kasih banyak semuanya

1:28:09Kita ketemu lagi minggu depan, bye-bye

1:28:15Pertama kali melihat tayangan dan halaman ini?

1:28:17Atau mungkin telah kesekian kali

1:28:19Melihat untuk membandingkan kembali dengan lainnya?

1:28:21Jika Anda mencari tahu

1:28:23Mengenai layanan web hosting terbaik

1:28:25Kami pastikan Anda berada di tempat yang tepat

1:28:27Dengan Domainesia

1:28:29Dapatkan pengalaman

1:28:31Menggunakan layanan hosting yang lebih baik

1:28:33Dengan SSD berperforma tinggi

1:28:35Dalam infrastruktur cloud yang telah dioptimalkan

1:28:37Untuk kebutuhan personal maupun bisnis

1:28:39Teknologi ini

1:28:41Memungkinkan Anda memperoleh layanan

1:28:43Yang lebih stabil serta proteksi dari korupsi data

1:28:45Hosting Domainesia

1:28:47Juga telah mendukung Node.js

1:28:49Python, Ruby, Go, PHP

1:28:51Java, serta binary Linux

1:28:53Lebih dari

1:28:55200.000 pelanggan telah mempercayakan

1:28:57Layanan hosting di Domainesia

1:28:59Kepercayaan yang kami jaga dengan

1:29:01Garansi uptime 99,9%

1:29:03Serta garansi uang kembali 100%

1:29:05Buat website Anda lebih mendinginnya

1:29:07Segera berali web hosting Domainesia

1:29:13Terima kasih sudah menonton.