Ngobrolin Format Warna - Ngobrolin WEB ep28
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
0:10[Menelefon]
0:13Hai, hai, hai. Selamat malam.
0:18Halo, halo. Selamat hari Rabu.
0:22Biasanya selamat hari Stasa.
0:24Ini spesial karena satu dan hal, jadi kemarin kita nggak bisa live.
0:29Jadi kita undur, jadi kayak apa ya, kayak ini ya.
0:34Susulan. Susulan. Remedial.
0:38Bukan, kalau kuliah itu apa ya?
0:41Kuliah pengganti. Remedial.
0:44Kuliah pengganti, jadi di hari Rabu ya.
0:47Khusus minggu ini, minggu depan kita balik lagi.
0:49Waktunya berlewat.
0:51Minggu depan selesa lagi.
0:53Mudah-mudahan selesa lagi, dan berhubung kita udah lama ya.
0:58Nggak kenal-kenalan, mungkin ada penonton yang baru,
1:02atau penonton yang lama juga mungkin belum tahu.
1:05Salam kenal semuanya, di sini kita bertiga.
1:08Ada saya Riza, co-founder Heik Tiewit.
1:12Kemudian ada Ivan.
1:14Saya Ivan.
1:16Gue bukan co-founder, gue apa ya?
1:18Kerjanya apa, kerjanya?
1:19Oh kerjanya.
1:21Kalau sehari-harinya sebagai senior engineer di HumanMate.
1:25HumanMate.
1:27Terus ada Eka.
1:29Halo, Eka bukan founder juga.
1:33Apa, sehari-hari web developer.
1:36Aku jadi tidak enak.
1:39Satu-satunya bukan developer, di sini adalah saya.
Lihat transkrip lengkap
1:43Mantan developer.
1:47Dan kita adalah tiga dari GDE,
1:52yang fokusnya ke web teknologi di Indonesia.
1:56Jadi jangan ngobrol-ngobrol.
1:59Trio GDE.
2:02Belum nambah lagi.
2:05Dan tujuan kita bikin acara ini selain mau diskusi sama teman-teman
2:11yang ada di rumah, di YouTube masing-masing,
2:15kita juga pengen diskusi di antara kita bertiga.
2:18Karena ternyata kita mengalami kesulitan yang sama,
2:24terus sekarang sudah sulit menentukan topik.
2:30Kalau misalkan kita diminta jadi pembicara di mana,
2:34kita kayaknya mulai kebingungan mencari topik.
2:38- Mulai kehabisan ide. - Kehabisan ide.
2:41Jadi harapannya dengan ngobrol,
2:45kita sebenarnya bisa aja ngobrolnya privat, misalkan pakai Google Meet atau apa,
2:50tapi kan hanya terbatas ke kita bertiga, nggak sama teman-teman.
2:55- Lebih seru ngobrol rame-rame juga sih.
2:58- Lebih seru ngobrol rame-rame.
3:00Kayak kemarin tuh ada ide topik yang keren banget
3:03yang kita nggak kepikiran ya, web jadul itu ya.
3:07Teknologi jadul yang kita bahas lagi itu,
3:10itu adalah ide dari salah satu penonton.
3:13Dan itu ide-nya sangat bagus sekali.
3:15Dan langsung kita eksekusi.
3:17Jadi teman-teman di sini yang mau diskusi,
3:21yang punya ide, silahkan disampaikan aja.
3:24Baik di chat, di kolom chat seperti Rahul.
3:27Halo, Rahul.
3:29Atau juga di bit.ly/ngobrolinweb.
3:34Nah, bisa sampaikan ide-nya di situ ya.
3:37Oke, malam hari ini kita akan membahas tentang topik yang cukup nis,
3:44karena ini berhubungan dengan CSS dan lebih dalam lagi.
3:49Lebih nis lagi, ya itu adalah kewarnaan.
3:52- Tapi kalau kita bikin web, kayaknya nggak mungkin lepas dari ini.
3:57- Betul. - Sesedikit apapun,
3:59se-nggak-suka apapun, semalus apapun kita sama aspek visual,
4:04kan kita tetap harus tentuin warna ya.
4:06- Betul.
4:08Dan biasanya juga, kalau buat saya ya, nggak tahu ya teman-teman ya,
4:14warna ini kadang-kadang dipakai untuk dibaging juga.
4:18- Nah, kalau menurut-menurut warnanya apa, warna kesukaan?
4:24- Oh, warna kesukaan. - Oh, warna kesukaan.
4:26- Warnanya merah. - Tomato ya.
4:28- Kalau buat dibaging. - Buat dibaging, oh tomato.
4:31Iya, tomato juga bagus.
4:33Warnanya rupanya tomato, soalnya lucu aja.
4:38- Gimana sih warna tomato? Belum pernah pakai warna tomato.
4:41- Nah, kalau saya warnanya ini. - Merah tapi soft gitu, bagus.
4:45- Ini, ini, ini tomato. Ada nggak disini warnanya?
4:48Warnanya merah, merah-tomat gitu lah.
4:50- Yang merah. Nah, terus kalau mau nge-compare dua hal,
4:55misalnya nge-check box mana yang keren gitu, biasanya sih red sama green sih.
5:01- Di screenshot tuh jelek banget. - Iya, mencolok sekali ya.
5:06- Tapi itu fungsi dibaging. - Jaman dulu, jaman dulu
5:10kalau gue nyari overflow itu gue bikin kayak itu loh, kayak apa itu?
5:13Yang border supaya semuanya. - Gradient.
5:15- Bukan border, jadi semua elemen itu kayak gue kasih asterisk,
5:20terus kasih border dan satu pixel, warnanya merah.
5:24Jadi semua elemen itu kelihatan tuh line-nya.
5:28Jadi ketahuan yang overflow. - Yang overflow.
5:31Nah, itu ya biasanya dibagingnya ke arah situ ya.
5:34Ini kok pixelnya segini tapi kok lewat ya gitu kan.
5:39Nah, itu dibaging CSS-nya begitu ya, triknya ya, salah satu triknya.
5:44- Tapi kenapa selalu merah ya? Gak pernah ada yang pakai warna biru atau ungu atau apa?
5:50- Pauzan. Mungkin karena merah mencolok. - Merah mencolok.
5:55- Kalau kita bikin aplikasi pakai React Native dulu ya,
6:00kalau sekarang mungkin udah merahnya udah agak-agak diredukkan ya.
6:03Kalau dulu error-nya itu merah, merah darah gitu.
6:06Text-nya putih, ini menyeramkan sekali gitu kan.
6:10Sekarang sih udah agak-agak ke arah tomato warnanya, jadi udah lumayan.
6:16Ada pauzan, ada damar juga, halo damar.
6:19- Tinggal tunggu Mas Danang, dia datang. - Kalau disembut muncul.
6:28- Oh, kalau Tailwind ya, Tailwind juga ada pewarnaan ya.
6:34Begera 300, udah hapal sekali ya, luar biasa.
6:39Oke, kita mulai dari mana? Kita mulai dari yang paling dasar.
6:42Paling dasar adalah menggunakan pewarnaan di CSS dengan menggunakan nama warnanya.
6:48Ya, seperti tadi yang kita gunakan untuk debugging ya,
6:55biasanya pakai orange atau red, yang paling sering.
6:58Karena red itu karakternya cuma 3, gampang diketik gitu ya.
7:02Saya baru tahu juga ada 10, ini juga bisa dipakai nih.
7:05Kalau misalkan kita mau pakai Rebecca Purple, panjang banget nulisnya.
7:09Nah ini ada ceritanya nih, jadi dulu kan gue lihat ada nama warna Rebecca Purple,
7:17terus gue ngetawain, anjir itu aneh banget sih, frek banget sih.
7:21Kirain di helloper-nya mereka saling nge-prank gitu, kirain bercandaan kan.
7:27Nah terus diketik, loh kok beneran ada warna ungu?
7:30Terus iseng kan, bubuk, kenapa? Terus ternyata ceritanya tragis gitu,
7:35yang ya engineer yang bikin anaknya umur 6 tahun atau umur berapa,
7:40pokoknya anaknya masih kecil, anak perempuannya namanya Rebecca meninggal.
7:44Pas lagi proses apalah rilis warna atau apa, anaknya namanya Rebecca.
7:49Cuma ceritanya panjang, sedih gitu, terus jadi gak enak sendiri,
7:52tadinya udah ngetawain sambil ngetengatain.
7:55Ya ampun, maaf.
7:57- Semoga tenang. - Ada ceritanya ya?
7:59Namanya dia, jadi si anaknya itu sebelum dulunya suka warna ungu,
8:07jadi kayak diabadikan gitu deh, ketribut.
8:10Wow, luar biasa.
8:12Kalau Alice Blue gimana, Alice Blue?
8:15Gak tau, gak ada orang tahu.
8:19Itu dari Alice in Wonderland, kayak warna asin, kayak kostumnya atau dress-nya atau apa,
8:26pokoknya gak tragis, yang tragis itu satu doang kok.
8:29Coba kan tragisnya itu doang.
8:31- Banyak yang ada. - Kok gak Chelsea Blue atau MU Red gitu ya?
8:37- AC Milan Red. - Mereka sebenernya bukan penggemar bola.
8:42Kalau yang buat penggemar bola begitu ya.
8:47Tapi ada beberapa yang namanya aneh atau unik lah ya.
8:51Misalkan saya pernah dapet namanya Papaya Whip.
8:57Yang namanya kayak Popaya apa?
9:01Popaya itu kan diatasnya ada batang popaya, gitu kali ya warnanya.
9:07- Batang popaya. - Batang popaya udah putih juga sih padahal.
9:13- Peru, ada peru. - Peru kan nama negara padahal ya.
9:18- Iya, warnanya cokelat. - Tapi kita masih,
9:22ini warna yang kita kan masih Red Green Blue ya di sini ya.
9:26Yang kita pakai ini RGB ya, itu kan ada 6 karakter ya.
9:30Jadi contohnya Red FF 0000.
9:35Berarti Rednya full, yang lain gak ada.
9:42Greennya sama bluenya gak ada.
9:44- 255 kan? - Iya, 255 karakter.
9:48Jadi cuma ada berapa, intinya gabungan ini 256 ya.
9:54Kalau untuk cat rumah, itu lebih parah lagi.
10:01Pakainya namanya Pantone.
10:06Itu soalnya mereka di patentin kalau warna cep.
10:12Penamaan warnanya itu lebih aneh-aneh lagi.
10:16Putih aja ada macem-macem.
10:19Masa si user-nya yang mau cat rumah harus nyebut hexcode F35996?
10:27Nggak mungkin kan harus dikasih nama yang user-friend.
10:30Nah, ini nih penamaan HTML, CSS juga menarik sih.
10:34Yang paling atas deh, coba scroll ke paling atas awalnya.
10:38Itu ternyata cuma 16, cuma ada 16 variasi warna.
10:42Dan itu yang bikin, nah ini ya kayaknya.
10:46Nah ini cuma ada 16 warna, terus itu yang bikin adalah sistem yang namanya X.
10:52Punya Windows dulu punya Microsoft gak salah.
10:55Jadi X.org.
10:57Nah dulu itu cuma ada...
10:59X.org, sort.
11:02Sort, apa gimana sih bacanya gue lupa.
11:05- Sort itu. - Nggak ngerti bacanya gimana.
11:08Itu punya Windows, punya Windows ya?
11:11Windows mungkin ya, gak tahu apa.
11:14Oh punya Windows.
11:17Nah terus kan RGB-nya rapih gitu semua.
11:20RGB-nya gak ada yang random, gak ada yang arbitrary gitu kan.
11:25Semua kayak simetris.
11:27Nah, gak ngerti itu. Apa karena di monitor jaman dulu tuh kayak masih simple?
11:32Atau gimana? Atau biar gampang?
11:35Ya mungkin ya.
11:37Karena masih 16 bit kan?
11:39CGA, VGA, SPGA.
11:43Ya.
11:45Nah terus abis itu di release selanjutnya baru yang ditambahin 150 warna yang sembarangan itu.
11:53Nah terus kan dulu belum ada warna orange.
11:57Jadi gemiknya tuh ada si SS2 atau apa ya kalau gak salah.
12:02Wow ada warna orange. Sekarang bisa pakai warna orange.
12:06Oh jadi inilah sebabnya kenapa ada yang ngalamin gak? Ini jadi web jadul juga.
12:14Geocities.
12:16Geocities itu warnanya warna ini loh.
12:19Warna biru, ini kan warna link kan.
12:22Kalau link di hover yang udah dikulik dia jadi Navy ya kan.
12:26Kalau ngeliat di apa? Ada CSS-nya.
12:30Geocities kita jangan nunggu.
12:32Ada CSS-nya, CSS framework-nya sekarang ada yang iseng buat.
12:37Nah ini.
12:38Oh ya ampun.
12:40Nah ini kan warnanya warna-warna ini kan.
12:43Cuma original.
12:45Cuma dulu ya cuma ada 16 mungkin ya waktu awal ada CSS kan.
12:51Dan biar compatible sama semua device.
12:54Semua device ya betul.
12:59Nah terus juga ini nih Rahul benar sekali kita mau bahas tentang ini nih.
13:05Penulisan warna ya ada banyak ya ada HEX yang barusan kita bahas.
13:10Kemudian ada RGB, ada RGBA, ada alphanya.
13:14Sekarang nambah lagi banyak malah LCH.
13:17Ada HSL.
13:19HSL, LCH.
13:21OKLH.
13:23Selamat pusing.
13:25Ada Lab.
13:27Oh iya.
13:29Yang Lab itu kalau gak salah yang itu ya yang bisa mengakses warna yang sebelumnya sama sekali belum bisa diakses.
13:36Itu bukan sih.
13:37Yang color space baru itu.
13:39Gue ada ini.
13:41Kita bahas bersama.
13:43Gue belum baca total.
13:45Inilah gunanya.
13:46Oke kalau buka sendiri cuma skimming, skimming wait bentar yang menarik apa ditutup lupa lagi.
13:51Nah sebenernya ini cara maksa kita baca.
13:55Iya.
13:57Nah ini ada pertanyaan yang relevan nih.
13:59Pemakaian format tersebut sejak kapan adanya?
14:01Kalau RGB kayaknya dari awal ya?
14:03Iya kayaknya di luar standard web pun RGB udah.
14:07Format digital awalnya RGB kan emang ya?
14:11Betul.
14:13RGB format.
14:15Siapa nih?
14:17Malexibra.
14:19Enggak telat baru mulai.
14:21Masih panjang.
14:23Selamat datang.
14:25Baru mulai.
14:27Oke.
14:29Tadi kan awalnya kan sengaja dipakai keyword jadi penamaan lebih gampang gitu kan.
14:35Easy to remember names.
14:37Tujuannya itu kan.
14:39Walaupun dia bisa direpresentasikan juga dengan RGB atau dengan HSL atau dengan yang lain.
14:43Termasuk juga untuk tadi kebutuhan dibagiin.
14:47Kalau kita mulai seret harus pager F000 pun panjang sekali ya.
14:53Capek.
14:55Singletik red, pom atau green.
14:57Oh.
14:59Kemudian bertambah lagi ditambahin 150.
15:03Walaupun kayaknya kalau udah ada misalkan tim di kantornya udah cukup lengkap.
15:09Ada designer dan lain-lain.
15:11Biasanya udah langsung pakai format RGB atau HSL atau yang lain ya.
15:15Tidak pakai keyword lagi ya biasanya.
15:17Biasanya kalau sudah dari Figma udah ada.
15:19Udah ditranslate CSS-nya sudah ada gitu tinggal pakai.
15:23Dari kursus ya atau dari desain-desain tools yang lain kan itu udah pakai formatnya.
15:29Apakah itu RGB atau HSL atau apapun.
15:31Kayaknya kalau designer sekarang itu sudah supaya colornya konsisten sudah pakai color palette kan ya.
15:39Sudah ada paletnya mau range warnanya cuma ini doang gitu.
15:45Jadi nggak ada keluar dari aturan.
15:47Karena itu mungkin warna itu kan sudah berkaitan sama identiti ya.
15:53Identiti dari perusahaan atau situsnya.
15:57Desain sistem ya.
15:59Ya basic bagian dari desain sistem udah ada ya semacam tailwind itu lah.
16:05Dari shape-nya kan. Dulu misalnya yang paling terang sampai paling gelap.
16:09Nah loncat-loncat step-nya itu sudah di auto-generate bisa.
16:13Nah ngomongin kewarnaan tadi Eka juga udah ngomongin tentang salah satu sejarah Rebecca Parple itu dari mana.
16:25Nah kalau tomato itu gimana tuh ceritanya?
16:27Tomato? Gak tau ya semuanya tragis sih.
16:29Kayaknya ya warna tomato aja itu.
16:31Iya warnanya sih keren sih warnanya.
16:35Tomato.
16:37Ini ada hubungannya dengan ini ya ex-org tadi ya.
16:39Nah itu tadi.
16:41Oke.
16:43Jadi ternyata warna yang awal yang 16 pertama itu ya dari tang 80-an itu.
16:47Ternyata name color itu section dari ada juga di module CSS module level 4 juga ya berarti speknya ya.
16:57Iya.
17:01CSS WG.
17:03Karena itu kan di render-nya dari CSS kan di define-nya.
17:09Oke.
17:13Ini adalah spesifikasinya ya.
17:15Itu yang color keyway itu Bob 6 coba di sebelah kiri ada Bob 6.
17:19Nah color keyway.
17:21Nah.
17:22Mau ditambahin nama gitu? Oh tetap. Gak berubah kan.
17:26Maksudnya sudah di spek kan.
17:30Sudah di spesifikasikan.
17:32Jadi browser waktu ngeimplementasi udah jelas nih.
17:34Jadi kalau ada yang pakai CSS light green ya udah light green itu ya 9.0.
17:40Ya tinggal masukin itu.
17:42Dan disini udah keliatannya ada.
17:46Lime sama lime green itu warnanya sama ya.
17:48Gak penting banget sih sampai ada dua gitu.
17:50Lime sama lime green.
17:52Beda nih warnanya.
17:54Oh beda ya?
17:56Oh iya dia yang beda.
17:58Maksudnya sih? Beda gimana?
18:00Beda.
18:02Kalau coba pelotorin lihat yang deket keliatan beda.
18:04Tapi kalau sekilas kayaknya sama.
18:06Beda ini ya hexnya beda.
18:08Hexnya aja beda berarti kan logically warnanya beda.
18:12Warnanya beda.
18:14Emang sama?
18:16Mata gue bilang sama.
18:18Oke.
18:20Persepsinya gitu.
18:22Berbeda, tiap orang berbeda.
18:24Persepsi.
18:26Persepsi tiap orang itu berbeda.
18:28Makanya nanti kita harus ngomongin tentang accessibility dengan warna.
18:32Nanti itu.
18:34Kalau di mata saya itu lime green itu lebih gelap daripada lime.
18:38Gue gak bisa bedain.
18:42Ada gray atau gray?
18:48Ini pakai A.
18:50Ini pakai gray.
18:52Light gray dan light gray.
18:54Menarik itu.
18:56Ini sama, ini sama.
18:58Karena hexnya sama.
19:00Satu UK Inggris, satu US Inggris.
19:04Dulu juga sempet apa?
19:06Si Tailwind kalau gak salah versi-versi sebelumnya.
19:08Itu sempet ada gray pakai A.
19:12Pakai A ya gray.
19:14Terus kemudian diganti jadi pakai A sekarang.
19:18Atau kebalikannya saya lupa.
19:20Kita gantung bahasa Inggrisnya yang mana.
19:24Gantung UK atau USA.
19:26Test, test.
19:28Nah di spesifikasi ini juga kita bisa lihat nih.
19:32Ada format warna HSL.
19:34Ada HAWB.
19:36HAWB itu apa?
19:38Hue.
19:40Hue, whiteness sama blackness.
19:42Blackness.
19:46B nya apa tuh?
19:48Ada, B nya blackness.
19:50Ada Cie.
19:52Cie.
19:54Cie.
19:56Cie orang.
19:58Itu itu lab.
20:00Lab LAB kan.
20:02LAB sama LCH.
20:04LAB sama LCH.
20:06Nah buat temen-temen yang bingung seperti apa.
20:08Gimana sih maksudnya.
20:10Kalau RGB itu red, green, blue.
20:12Kita bisa langsung pakai.
20:14Di CSS nya tuh fungsinya nanti.
20:16Langsung pakai RGB.
20:18Itu ya di CSS.
20:20Sorry di property color.
20:22Kita pakai RGB.
20:240, 255, 0.
20:26Seperti itu contohnya.
20:28Kalau HSL sama.
20:30Bisa pakai HSL.
20:32Gue gak tau formatnya karena jarang pakai.
20:34Tapi ya itu.
20:36HSL 120 degree, 100% 50%.
20:42Kemudian HWB juga hue.
20:44Wideness dan blackness.
20:46Caranya juga sama.
20:52HSL.
20:54Di bawah kayaknya.
21:00Di bawah.
21:02Example of HWB color.
21:04Itu doang tuh.
21:06Jadi.
21:08Ya pakai berapa persen.
21:12Terus berapa white nya berapa black nya.
21:14Itu kayaknya memudahkan kita.
21:16Dari perspektif apa.
21:18Human kali ya.
21:20Kalau misalnya kita pakai RGB.
21:22Atau hex.
21:24Misalnya kita pengen pakai warna ini.
21:26Shade warna biru yang ini.
21:28Tapi terangin sedikit.
21:30Terangin sedikit itu kan.
21:32Ya kita harus pakai color picker ya.
21:34Nah kalau ini kan secara logis.
21:36Berarti tambahin white nya.
21:38Kalau dua pin sedikit.
21:40Berarti tambahin kadar black nya.
21:42Perspektif human language kayaknya.
21:46Makanya ada helper dari CSS kan.
21:52Yang ada lighter ya.
21:54Darker.
21:58Ada lighter dan darker.
22:00Ada kayaknya ya.
22:02Itu SESS apa CSS?
22:04Kayaknya dulu SESS.
22:06Yang udah jadi SESS itu.
22:10Color mix sama color contrast.
22:12Berarti itu masih SAS ya.
22:16Lighten sama darken.
22:18Ya darken.
22:20Ya lighten sama darken itu.
22:22Sekarang kita gak perlu.
22:24Pakai SAS atau SESS.
22:26Atau CSS in JS lagi.
22:28Yaitu kita pakai HWB aja.
22:30Pakai apa.
22:32Pakai CSS variable, CSS property.
22:36Masukin aja value nya.
22:38Di tambahin kadar white nya atau black nya.
22:42Variable nya kita sudah ada warnanya.
22:44Mungkin RGB.
22:46Terus kita pasangin pakai HWB.
22:48Kita mau gelapin atau terangin.
22:50Tinggal kita atur gitu saja ya.
22:52Jadinya lebih mudah.
22:54Nah ini nih ada contohnya.
22:58Ini kayaknya di linknya Ivan juga deh.
23:00Cuma karena nyambung ada demo nya.
23:04Yang HWB penggunaannya.
23:08Jadi udah gak usah pakai SAS lagi.
23:12SAS, SESS, atau library CSS in JS.
23:16Jadinya itu di atas itu tinggal define aja.
23:20Kita kasih argumen value berapa persen.
23:24Sesuai kebutuhan.
23:26200 itu berarti degree nya ya.
23:30Tinggal whiteness sama blackness nya ditambah.
23:34Itu dikurangi.
23:36Menarik.
23:38Gila, CSS ini luar biasa.
23:42Kayak bertahun-tahun gak ngapa-ngapain.
23:46Tiba-tiba dua tahun terakhir.
23:48Langsung cuma pikir lagi banyak banget.
23:50Gak, hatam-hatam sih.
23:52Kalau CSS ada terus.
23:54Ini kan bagus juga buat performance nya.
23:58Ada pertanyaan dari Tom.
24:00Kalau ANSI color code gimana?
24:02Apa itu ANSI color code?
24:04ANSI?
24:06ANSI itu apa sih?
24:08ANSI itu kan karakter ANSI.
24:10Oh itu yang di terminal.
24:12Yang di terminal.
24:14Bener gak maksudnya itu?
24:16Atau jangan-jangan yang lain?
24:18Ini ya.
24:20Itu 31 program color code.
24:24Kalau background nya 41 gitu ya maksudnya.
24:26Ini beda lagi ya betul ya?
24:28Bukan web ya?
24:30Bukan web ya.
24:32Ini buat CLA ya berarti?
24:34Buat CLA betul.
24:36Beda apa namanya?
24:38Beda media?
24:40Beda standard juga.
24:42Tapi RGB nya kan
24:44Prinsipnya berdasarkan algoritmanya.
24:46RGB tetep ya?
24:48Iya.
24:50Kayaknya masih ada hubungan sih.
24:52Yang export tadi kayaknya
24:54ada hubungan sama ini kayaknya ya.
24:56Gak tau juga.
24:58Aku tidak bisa menemukan
25:06hubungannya dimana.
25:08Antara ANSI
25:10color code ini.
25:12Mungkin bisa dielaborasi
25:14lebih lanjut.
25:16Apa?
25:18Kira-kira
25:20ada hubungannya sama
25:22CSS color apa?
25:24Oke.
25:26Oh
25:28kalau tellur ini udah ada ini ya?
25:30Ada brightness
25:32baru tau.
25:34Cuma dia pakai property
25:36filter.
25:38Filter brightness.
25:40Oh.
25:42Itu fitur barunya CSS juga ya?
25:44Filter mah
25:46dari dulu ada.
25:48Cuma ini kan
25:50cocoknya buat
25:52image sih.
25:54Kalau buat warna ya.
25:56Kurang cocok aja.
25:58Nah kalau CMYK
26:00terkenal dimana ya?
26:02Printing.
26:04Printing.
26:06Bisa gak di web?
26:08Range nya juga gak sebanyak RGB
26:10kalau gak salah deh CMYK.
26:12Brightness kayak apa?
26:14warna ngejrengnya.
26:16Itu lebih kuat RGB.
26:18Oh.
26:20Dulu kayaknya kalau misalnya Photoshop nih
26:22pakai Adobe Photoshop dalam kurung bajakan.
26:24Itu kan apa?
26:26Pas kita lagi edit bisa switch mode.
26:28Kayak ada shortcutnya malah.
26:30Switch mode antara RGB dan CMYK.
26:32Oh.
26:34Loh.
26:36Ika hilang.
26:38Kita dihubung dulu.
26:40Iya.
26:42Gantung.
26:44Iya.
26:46Namun setau gue CMYK itu gak bisa
26:48ada alpha mode
26:50branding gitu ya.
26:52Oh iya benar.
26:54Kalau di webcam
26:56bisa transparansi bisa diatur.
26:58Iya.
27:00Itu lebih
27:02sering dipakainya di
27:04apa namanya?
27:06Media.
27:08Iya media print ya.
27:10Karena tinta itu
27:12tinta printing
27:14gue gak tau kenapa standardnya
27:16bukan RGB.
27:18Itu CMYK.
27:20Tapi
27:22kalau media digital
27:24kayak pixel
27:26monitor itu RGB kan.
27:28Masih sampai sekarang masih RGB.
27:30Masih.
27:32Oke.
27:34Nah kalau sRGB.
27:36Kenapa ya?
27:38Pertanyaan dari Jason.
27:40S-RGB.
27:42Gue sering dengar
27:44standard RGB.
27:46Standard RGB.
27:48Menarik.
27:50Yang kita ngomongin tadi gak standard ya?
27:52Gak standard. Atau kenapa sih sebetulnya?
27:54S-RGB.
27:56Jangan-jangan ini ada
27:58perkembangan.
28:00Itu bagian dari color space yang baru.
28:02Color level yang baru.
28:04Kalau disini
28:06sekilas dia menyebutkan bahwa
28:08S-RGB ini standard.
28:10Sedangkan RGB yang biasa itu
28:12punya yang Adobe.
28:14Katanya.
28:16Ada-ada aja.
28:18Iya.
28:20The range of S-RGB
28:22lebih narrow.
28:24Ternyata ada
28:26politik warna ya.
28:28Politik korporat. Warna aja dipatenin.
28:30Iya. Karena kan
28:32si Adobe ini kan punya banyak
28:34produk yang berhubungan dengan
28:36warna kan.
28:38Jadi mungkin dia punya standard sendiri.
28:40Samalah kayak perang
28:42media. Perang bukan
28:44perang media. Perang
28:46dulu DVD.
28:48Format DVD ada apa gitu kan.
28:50Beda-beda kan. Kayak Kodek pun
28:52perang kan sebenernya kan. Dalam tanda kutip kan.
28:54Google dengan
28:56AV1-nya
28:58terus ada
29:00MP4 apa
29:02MPEG. Ada macem-macem gitu kan.
29:04Ada 3GP.
29:06Sekarang udah gak ada ya. Sony ya
29:083GP.
29:10Nokia kan.
29:12Gue gak tau deh jaman siapa.
29:14Jadi semakin kesini ya semakin
29:16ada pemenangnya
29:18jadi monopoli dan jadi standard akhirnya.
29:20Biasanya kan gitu kan.
29:22Jadi masing-masing awalnya bikin sendiri semua.
29:24Terus ada yang
29:26merging. Oh ini kayaknya kita masih
29:28sejalan nih. Masih satu PC.
29:30Bergabung, bergabung, bergabung.
29:32Kayak koalisi gitu kan lama-lama.
29:34Jadi yang ininya cuma
29:36dua pilihannya. Misalkan ya tadi
29:38sRGB sama sRGB si Adobe.
29:40Atau misalkan format
29:44image juga sama kan. Image juga sama.
29:46Ada JPEG, ada
29:48PNG, ada
29:50WP. Sekarang ada baru WP.
29:52Afif ya Afif. Ya ada Afif.
29:54Ada banyak kan. Dan itu juga
29:56masing-masing. Perusahaan pegang
29:58peranan masing-masing kan. Kalo kayak misalkan
30:00Adobe mungkin dia lebih prefer ke
30:02JPEG, JPEG 2000. Sedangkan
30:04di Chrome malah JPEG 2000nya
30:06dihilangkan ininya, supportnya.
30:08Gitu-gitulah.
30:10Politik semua jadinya.
30:12Tapi ada
30:14biasanya ada alasan
30:16tertentu kan. Mungkin gak
30:18kompresinya kurang bagus
30:20atau color
30:22correction atau gimana lah.
30:24Terlalu dalam.
30:26Atau feature yang pengen dia
30:28bikin. Yang menukun
30:30feature yang dibikin oleh
30:32pengusahaan itu.
30:34Itu ada artikel
30:36untuk sekilas ngebandingin
30:38macem-macem CSS
30:40color space. Coba deh bukain
30:42Lambda Test.
30:54Ini RGB.
30:56Kemudian ke
30:58mana nih? Nah itu ada RGB.
31:00Nah liat daftar isinya aja.
31:02Ada RGB, Hex,
31:04sRGB, DisplayP3,
31:06HSL,
31:08HSL,
31:10dan seterusnya.
31:12Jadi kalo
31:14RGB ini 3
31:16parameter.
31:18Kalo RGBA tentu ditambahin
31:201 ya.
31:22Ada alphanya.
31:240 sampai 1.
31:260,1, 0,2 sampai
31:281.0.
31:30Nah ini yang paling aman ya
31:32browser supportnya. Semua dijemput
31:34support.
31:36Semua hudai hijau, kemudian ada
31:38hexadecimal. Itu
31:40ada 6
31:42karakter ya. Ditambah pager.
31:44Terus ada 2 karakter.
31:46A, B, C, D, E, F.
31:48Jadi ini red-red,
31:50green-green, blue-blue.
31:52Untuk campuran
31:54warnanya.
31:56Kok IE gak bisa sih?
31:58IE gak bisa. RGBA.
32:00Oh iya.
32:02Udah bukan jamannya. Untung
32:04udah minggal.
32:06Garip.
32:08Ini masih ada merah-merah, tapi
32:10untuk latest kayaknya udah aman ya.
32:12Ya.
32:14sRGB. Oh sRGB
32:16juga ada ya. Ini tadi ada
32:18penyelesaian. Yang tadi itu
32:20you might hear the term sRGB
32:22standard RGB.
32:24Oh.
32:26Photoshop
32:28pakai Adobe RGB
32:30sedangkan sRGB
32:32berbeda gitu ya. Oh pantesan.
32:34Kadang-kadang bisa berbeda ini ya.
32:36Berbeda warna. Kalo buat designer
32:38yang bisa membedakan
32:40warna antara. Gak kayak kita.
32:42Tadi lang sama lime green.
32:44Terima jadi.
32:46Terus tiba-tiba begitu web
32:48yang muncul. Warnanya beda ya?
32:50Warnanya salah.
32:52Ya gak tau. Nah itu pentingnya
32:54komunikasi dengan UI designer
32:56kita. Apa handovernya
32:58pakai apa? RGB atau sRGB?
33:00Detail banget.
33:02Itu pentingnya
33:04design system. Harus disepakatin.
33:06Nah ini nih display P3 yang seru.
33:08Ini masuk di spesifikasi
33:10CSS color
33:12baru ya. Yang CSS4
33:14ya tadi.
33:16Nah display P3 ini
33:18konon bisa mengakses
33:20warna yang paling besar itu yang paling luas.
33:22Banyak lagi warnanya.
33:26Jadi konon bisa mengakses
33:28warna yang sebelumnya
33:30gak bisa diakses.
33:32Exactly. Maksudnya
33:34in reality penerapannya
33:36kayak gimana gak kebayang sih. Cuma
33:38yang jelas bisa mengakses
33:40spektrum warna yang lebih
33:42large dan lebih luas.
33:44Oke.
33:46Tetep belum kebayang
33:48penerapannya kayak gimana.
33:50Tapi mungkin ngaruh banget ke
33:52reach application kali ya.
33:54Kalo misalnya game atau apa lah
33:56factor gitu
33:58itu bakal ngaruh banget.
34:00Tapi kalo buat dokumen, text gitu
34:02sebenernya pengaruh ya.
34:04Rasanya tidak terlalu berpengaruh ya.
34:06Tapi kan ya web kan
34:08sekarang juga udah dipake buat
34:10media yang macam-macam lah.
34:12Bisa convert ke
34:14DisplayP3? Iya ini.
34:16Pakai apa nih?
34:18Kayaknya Chrome.
34:20Belum pernah coba.
34:24Mari kita coba.
34:26Inspect.
34:28Ada gak warna disini?
34:30Enggak, itu pakai parkisi Lambda
34:32test itu dia jualan produk.
34:34Ininya dia extension deh.
34:36Convert to
34:38oh iya bener.
34:40Gak ada.
34:42Jadi ya itu semacam
34:44extensionnya dia.
34:46Tapi ini bentuknya mirip banget
34:50sama ini ya.
34:52Inspect elementnya Chrome ya.
34:54Kan ada
34:56extension yang
34:58integrate sama DevTools kayak buat
35:00itu loh. Yang buat
35:02ngecek accessibility kan.
35:04Itu kan juga integrate sama
35:06Chrome DevTools.
35:08Oke lanjut.
35:14HSL.
35:16Iya ini menggunakan degree ya.
35:18Menggunakan sudut.
35:20Sudutnya seperti ini
35:22jadi bisa diputuskan.
35:24Dari 0 itu dari mana?
35:26Oh 0 itu merah.
35:28Iya itu yang merah di kanan.
35:30Jadi cara bacanya
35:32gimana sih?
35:34Dari 0?
35:36Ini berarti counter clockwise ya?
35:38Counter clockwise, jadi
35:40kalau 30 itu mungkin agak orange.
35:42Kalau 60, kuning.
35:44Yellow.
35:46Oh gitu. Oh iya.
35:48Berarti dari sini.
35:50360, balik lagi merah ya.
35:52Kalau 90, 90.
35:54Ya itu sebelum
35:56120 lah. Antara kuning
35:58ke hijau-hijau. Lime, lime.
36:00Oh berarti dari kayak gini ya?
36:02Isang belum matang.
36:04Isang belum matang.
36:06Kalau warna apa?
36:08Biru telur asin.
36:12Emang ada.
36:14Oh iya ada ya.
36:16Itu 180
36:18kurang. Kurang
36:20dikit gitu.
36:22Itu kalau orang Indonesia yang namain
36:24CSXN itu jadi apa itu?
36:26Telur asin nggak ada di sana.
36:32Kuning durian gitu.
36:34Durian kuning nggak sih?
36:36Buahnya, dua
36:38dalamnya.
36:40Kuning beige.
36:42Beige.
36:44Ini sintaksnya.
36:46ASL,
36:48kemudian persen-persen ya.
36:50Saturation sama lightness ya.
36:52Saturation.
36:54Saturation itu apa sih?
36:56Saturation itu kadar
36:58warnanya. Jadi kalau saturationnya
37:000 itu greyscale.
37:02Terus kejreng.
37:04Kayak alpha juga ya.
37:06Ada sedikit kemiripan dengan
37:08alpha ya. Beda. Kalau alpha itu
37:10transparansi. Oh ini putih ya
37:12dari putih atau dari gelap ya.
37:14Greyscale ke
37:16warna.
37:18Lightness baru ke putih kan?
37:22Dulu kan sempat tuh web itu atau
37:24desain-desain tuh warnanya sempat
37:26ngetrend itu warna-warna yang pastel.
37:28Ingat nggak sih? Pastel itu
37:30kan tengah-tengah saturation itu di tengah-tengah.
37:32Jadi kayak dia kuning
37:34tapi soft. Kuningnya soft itu.
37:36Terus semua textnya nggak kebaca.
37:38Oh, saturation berarti mainnya ya.
37:44Oke.
37:46Punya saturation 100 persen tuh ngejreng
37:48kayak apa? Kartun Asturo itu.
37:50Kayak Stabilo, kayak Stabilo.
37:52Kalau saturation itu
37:54greyscale.
37:56Oh, oke.
37:58Kalau gelap terang
38:00berarti lightnessnya berarti makin
38:02kebawah. Dari hitam kan?
38:04Enggak ya dari gelap.
38:06Dari gelap.
38:08Lanjut. Browser support aman?
38:10Aman.
38:12HSL. HSV
38:14atau HSB?
38:16Apaan lagi ini?
38:18Nanti coba tanya
38:20audience.
38:22Kalau sudah belajar ini, sukanya yang mana sih?
38:24Selain RGB.
38:26Ya, karena RGB terlalu umum sudah.
38:28Dan RGB dan selain Halloween.
38:30Coba, sukanya apa?
38:32Kalau mau belajar selanjutnya, apa?
38:34Oke. Ini HSB.
38:38Ini apa sih?
38:40Belum pernah pakai aslinya.
38:42Saturation.
38:44Tapi ini.
38:46Mirip ya sama lightness.
38:48Lightness, brightness
38:50bedanya apa?
38:52Gak tau ini
38:54sengaja kali.
38:56HSV.
39:00Oke, kita lanjut.
39:02HWB.
39:04Nah, ini kan yang tadi.
39:06Yang tadi kita coba.
39:08Ya, ya, ya.
39:10HWB.
39:12Ini lumayan lah ya.
39:14Tapi belum bisa.
39:16Opera gak bisa. Oh, no.
39:18Langsung gak bisa.
39:20Kok opera gak bisa sih?
39:22Gak tau.
39:24Opera mobile.
39:26Engga, itu opera biasa.
39:28Gak bisa semua.
39:30Opera ini gak bisa, opera mobile juga gak bisa.
39:32Oh iya.
39:34Padahal dia Chromium based kan?
39:36Iya.
39:38Nah, mungkin dia gak nge-update versi Chromium nya?
39:40Belum, belum?
39:42Ada sih, kalau opera itu kan biasa ngasih tau.
39:44Dia versi
39:46berapa.
39:48Dan Chromium versi nya
39:50versi berapa.
39:52Ini relatif baru sih.
39:54Soalnya HWB, jadi ya
39:56masih eksperimental
39:58anggap aja.
40:00Tapi ini udah lama sih.
40:02Ini udah lama. Karena ini 87.
40:04Sekarang aja opera udah 97.
40:06Dan base-nya
40:08aja dia sudah Chrom 111.
40:10Berarti sudah dapat.
40:12Nah coba cek aja tuh source.
40:142022.
40:16Tahun lalu sih.
40:18Belum lama-lama amat juga.
40:20Cuma ya itu CSS cepet banget ya.
40:22Iya.
40:24Nah itu kan bawah ada link nya tuh source.
40:26Coba klik open in new tab.
40:28Sekarang ya? Sekarang status nya gimana?
40:30Gak terima, gue opera gak bisa lho.
40:32Oh kasihan.
40:34Tuh udah bisa.
40:36Eh udah bisa, sudah 5.
40:38Tuh bener kan?
40:40Opera fanboy ya.
40:42Iya.
40:44Ini browser yang aneh-aneh.
40:46Yang di kanan tuh pada gak support sih.
40:48Ya udah.
40:50Kayak Baidu, UC, Kai.
40:52Itu yang kemarin browser apa
40:56yang baru itu jenis yang baru?
40:58Yang baru banget?
41:00Arc.
41:02Oh gak masalah.
41:04Kalau podipain Arc itu aman sih.
41:06Karena itu kan buat developer sama designer ya.
41:08Sama 4K nya Chromium.
41:10Udah pasti dia region update kok.
41:12Chromium pasti aman.
41:14Karena semua yang Chromium aman sih.
41:16Belum ada yang bikin browser engine
41:20baru ya?
41:22Sebetulnya kalian dari segi inovasi
41:26bagus. Cuma kalau dari perspektif
41:28sebagai developer jangan ya tolong.
41:30Jangan bikin ya.
41:32Tolong jangan iseng bikin browser engine.
41:34Kan mau ubah status ko.
41:36Gak cuma 3.
41:38Nanti aja deh
41:40kalau gue udah jadi apa ya?
41:42Udah jadi founder, udah gak jadi developer.
41:44Udah sana pada bikin browser engine baru
41:46yang banyak tuh gue.
41:48Lab, nah ini yang mau dapet.
41:52Lab, break nya Lab.
41:54L.A.B.
41:56Apa ini?
41:58Cylindrical.
42:06Susah amat.
42:08Lab, you must be lightness system.
42:10Oke. Nah yang di tengah itu
42:14tues nya lightness.
42:16L nya lightness.
42:18L ngerti lightness, gelap, keterang.
42:20Green
42:22to red, yellow to blue gitu.
42:24Gimana sih?
42:26Jadi kalau tadi buatan
42:28ini jadi kayak setir
42:30hue nya, gantinya hue ya sih.
42:32Lab, lightness.
42:34A nya kalau makin
42:36makin minus
42:38makin ke arah green.
42:40Oh.
42:42Gitu berarti ya.
42:44Untungannya apa sih?
42:48Untungannya, benefit nya apa?
42:50Gak tau.
42:52Mungkin lebih
42:54intuitive pun
42:56gak ya. Kayaknya tetep lebih intuitive.
42:58Yang apa?
43:00Circle, yang lingkaran kayak tadi.
43:02Karena degree kan, lebih gampang
43:04ingetnya.
43:06Ngebayangnya lebih gampang. Kayak tadi kita bisa
43:08nyari warna pisang belum mateng,
43:10warna tur asin, tinggal liat
43:12lingkarannya.
43:14Karena belum familiar aja mungkin.
43:16Nanti kita liat lagi. Siapa tau besok-besok
43:18ketemu lagi.
43:20Berusurnya belum ada yang support kok.
43:2240% 100-100. Berarti ini
43:24makin ke arah bawang.
43:28Lightness ya? Lightness.
43:30A itu apa?
43:32Green, kalau
43:34100 berarti ke arah green.
43:36Ke arah green, ke arah red
43:38berarti ya. Terus ke arah
43:40blue-yellow.
43:42Ok, browser support.
43:44Ternyata ini
43:46ternyata tidak hanya Apple doang.
43:48Budo amat.
43:50Budo amat.
43:52Safari duluan, jangan-jangan ini
43:58produknya Apple. Emang ini punya nya
44:00kayaknya.
44:02Pantes.
44:04Ini bawa nya Apple.
44:06Lucu gak sih kalau misalnya
44:10yang propose safari
44:12tim, tapi mereka
44:14belum support, bisa
44:16Firefox duluan.
44:18Ada gak sih?
44:20Gak ada. Gak ada ya.
44:22Jadi buatnya sendiri sih
44:24kayaknya internal.
44:26Tapi jangan salah. Interop
44:28yang baru, si apa?
44:30Kemarin kan safari baru
44:32rilis yang versi barunya.
44:34Itu interop nya udah menang. Nomor satu dia sekarang.
44:36Iya buat feature yang bersama. Cuma kalau yang
44:40tadi yang setir aneh itu
44:42kayaknya dia cuma buat apa ya
44:44mungkin dia punya graphic processor
44:46atau apalah, nyambung sama hardwarenya dia yang
44:48paling optimal. Lebih optimize mungkin ya.
44:50Ya udah suka-suka dia aja.
44:52Suka-suka dia.
44:54LHC.
44:56LCH.
44:58Lightness, Chroma, and Hue.
45:00Chroma.
45:02Chroma ini LCH.
45:04Chroma ini konsep baru.
45:06Konsep baru cuma gak tau apa nih.
45:10Udah baca berapa kali tetap
45:12gak ngerti sih.
45:14LCH uses Chroma instead
45:16of lightness defined
45:18as the amount of color used in the
45:20final render. It's give a uniform
45:22color even though you use
45:24lightness with varying
45:26values in various scenario.
45:28Nggak ngerti.
45:30Nggak ngerti kan?
45:32Nah kalau temen-temen ngerti
45:34tolong dijelasin di cep
45:36pakai bahasa yang kita ngerti.
45:38Tapi intinya ini bagian dari
45:40color space CSS yang baru juga
45:42dan katanya sih itu yang
45:44paling, itu tuh tadi tuh, closest
45:46to the human vision.
45:48Perspektif warna yang
45:50paling dekat dengan perspektif manusia.
45:52Jadi kayak lebih user-friendly lah
45:54gitu intinya.
45:56Ceritanya.
45:58Ceritanya.
46:00Oke. Ada lagi?
46:02Abis lab?
46:04Browser support, safari lagi.
46:06Kayaknya
46:08satu ini tuh 11-12.
46:10Iya kayaknya.
46:12Cuma kalau LCH ini
46:14masa depannya cerah sih.
46:16Karena banyak
46:18pihak yang diluar.
46:20Apple juga banyak yang
46:22pakai dan
46:24bikin artikel
46:26tentang itu. Yang propose juga
46:28Mbak, siapa itu? Lea Vero
46:30yang aktif
46:32di algoritma
46:34warna dan CSS sebelumnya.
46:36Jadi ya ini masa depannya
46:38lumayan cerah lah.
46:40Coba balik ke
46:42itu CSS API?
46:44CSS API?
46:46Apa yang
46:48belum kita bahas?
46:50Oke Lab, Oke LCH?
46:52Kita udah bahas
46:54Lab sama LCH tadi tuh.
46:56Oke LCH apa lagi?
46:58Oke Lab.
47:00Oke Lab.
47:02Sama kita
47:04lebih oke.
47:06Ini gak ada keterangannya gitu
47:08Oke Lab apa?
47:10Gak tahu.
47:12Oke lah.
47:14Oke lah.
47:16Oke lah.
47:18Oke lah.
47:20Kalo masalah ada
47:22ide nya kemaren
47:24tuh gue dapet situsnya yang oke
47:26LCH itu apa sih gitu
47:28gue pernah
47:30Oh ada di artikel state of CSS
47:32nih. Mana nih? Bentar.
47:34Oh CSS ini.
47:36Oh bukan.
47:38Ini bukan. State of CSS
47:40ini.
47:42Nah itu di search aja
47:44Comment F
47:46Oke LCH ada tuh.
47:48Oke.
47:50Somewhere disana.
47:52Oke LCH. Ini dia?
47:54Ini?
47:56Nah iya diklik.
47:58Nah tuh tuh tuh tuh.
48:00Apa tadi apa tadi?
48:02Oke. Ini.
48:04Nah
48:06are specialized color spaces
48:08that account for various
48:10drift.
48:12Like this one into purple
48:14making them especially
48:16Oh behavior gradient nya
48:18beda. Itu ada
48:20lingkukasih kenapa dia
48:22jelasin oke LCH
48:24keren. Kenapa? Maksudnya
48:26alasannya. Oh iya alasannya ya.
48:28Nah ini penting ya.
48:30Kita baca sama-sama
48:32why I quit RGB
48:34and HSL.
48:36En banget ini animasinya.
48:38Cuma animasinya
48:40aja sih. Cuma kalau pakai
48:42oke LCH masih gak minat.
48:44Tuh. The CSS
48:46encoded color lgb oke.
48:48Extremely short version. Ini jelasannya.
48:50Iya lch. Ini fitnya.
48:52New way to define
48:54CSS color.
48:56Oke LCH is human
48:58readable.
49:00Oke. And easily
49:02understand what color
49:04what color on oke LCH.
49:06Jadi katanya kalau kita
49:08definisikan seperti ini kita bisa
49:10membaca bahwa ini blue.
49:12Saya gak bisa.
49:14Tapi.
49:16Yang white itu
49:18yang white itu bisa tuh.
49:20Kan 100% 0-0 tuh.
49:22Iya. Iya.
49:24Color space yang lain
49:26kita bisa ngerti.
49:28Tunggu kalau misalnya
49:30LCH itu kan L yang depannya
49:32itu L. Berarti terang gelap.
49:34Persif color nya. Persif lightness nya.
49:36C is chroma.
49:38H is hue angle.
49:40Berarti sama yang kayak tadi
49:42hue nya itu. Oh hue sama kayak tadi.
49:44Terus terakhirnya
49:46kalau ada
49:48itu bisa opacity.
49:50Oke.
49:52Tapi masih gak ngerti gue tetep.
49:54Mungkin ini karena
49:56masih baru kan kita gak.
49:58Oke tetep ada chroma nya.
50:00LCH.
50:02Lightness, Chroma, Hue.
50:04Kita udah bahas kan Darken kan.
50:06Ternyata katanya
50:08OK LCH ini lebih mudah untuk dimodifikasi.
50:10Untuk menambah lightness
50:12atau mengumurkan lightness.
50:14Jadi gak perlu pake Darken, kita bisa pake OK LCH.
50:16Dari sini nanti bisa diganti
50:18yang darkness nya yang mana nih.
50:20Lightness nya yang mana. Ini ya.
50:22Yang pertama. Yang pertama.
50:24Itu chroma. 40%.
50:26Itu bisa diturunnya atau dinaikin untuk
50:28mencapatkan. Naikin lebih terang, turunin lebih gelap.
50:30Ya lebih terang atau lebih gelap.
50:32C nya itu
50:34Chroma dari
50:36Grey dari Saturated K.
50:38Dari Grey ke
50:40Most Saturated K.
50:42Yang tengah itu untuk ngatur
50:44kekuatan warnanya.
50:46Mirip Saturation ya.
50:48Itu Saturation.
50:50Chroma itu
50:52Saturation.
50:54Kenapa bukan S? Kenapa
50:56C kan pasti ada konsepnya kan?
50:58Coba.
51:00Untuk antar Chroma dengan Saturation.
51:02Walaupun mungkin behavior nya mirip
51:04dari Grey Scale ke
51:06warna yang kuat. Tapi maksud saya kenapa
51:08ada konsep Saturation, kenapa ada
51:10konsep Chroma. Silahkan temen-temen
51:12dicat, kasih jawaban.
51:14Kita mau tinggal iya-iya aja nanti.
51:16Ya.
51:18Disini keunggulan ketiga
51:20itu katanya better
51:22accessibility.
51:24Karena
51:26Oh mudah untuk generate
51:28yang tadi kita bahas itu kayak
51:30kalau tailwind ada rate 100,
51:32rate 200, 300.
51:34Berarti untuk step kayak gitu
51:36friendly ya, user friendly.
51:38Developer friendly deh.
51:40Bisa pake White Jamut Petri Color.
51:42Nah yang empat yang tadi kita bahas itu
51:44Oh dipakai petri ya.
51:46Yang mengakses warna yang sebelumnya
51:48belum bisa dipakai.
51:50Sebelumnya nggak pernah bisa dipakai.
51:52Sekarang jadi bisa.
51:56Oke.
51:58Keberangannya, challenge-nya.
52:00Challenge-nya mana?
52:02Tapi jadinya untuk
52:04untuk ngatur yang untuk
52:06ngasih warnanya itu cuman yang parameter
52:08ketiga doang tuh yang ngasih warnanya.
52:10Jadi dari 70%
52:12itu lightness, 0,1
52:14itu saturation.
52:16Chroma dan hue.
52:18Dan yang 145 itu
52:20ini ya hue-nya.
52:22Chroma dan hue.
52:24Dan yang ngasih warnanya.
52:26Jadi kalau kita udah
52:28pahami yang lingkaran tadi itu
52:30dari 0 itu merah.
52:32Sampai 180 itu
52:34hijau.
52:36Kayaknya.
52:38Iya nggak sih? Atau biru ya?
52:40Ijo-ijo-ijo.
52:42Jadi ujungnya red, green kan?
52:44180 green.
52:46Berarti kalau 145 ya kira-kira
52:48kalau disini sih
52:50ijo pastel. Menurut gue line.
52:52Itu betul.
52:54Betul.
52:56Nah ini tuh sebenernya kayak HSL dibalik
52:58nggak sih? Iya bener.
53:00HSL tapi versi
53:02fancy.
53:04Jadi ibaratnya nih kalau kita makan di Warung
53:06lor chiplok
53:08itu harganya 4000 atau 3000
53:10dan nggak menarik lah nggak ada yang pengen liat.
53:12Tapi giliran kita masuk cafe yang keren
53:14sunny side up.
53:16Terus ada platingnya dihias.
53:18Instagram mobile.
53:20Harganya 30 ribu.
53:22Tapi sebenernya
53:24resepnya sama aja ya?
53:26Telur sama
53:28garam sama merica.
53:30Ada sentuhan apalah.
53:32Maksudnya ada keunggulannya
53:34apa nggak tahu ini kalau balik ke
53:36color space ini.
53:38Oke.
53:40Nah teman-teman suka yang mana?
53:42Sekarang kita lihat ini ya.
53:44Koment ya.
53:46Em Razak.
53:48Bapak Riza bisa nggak manusia menemukan
53:50warna baru? Bisa aja.
53:52Tadi kan kita menemukan warna baru.
53:54Yang nemu?
53:56Biru telur asin.
53:58Biru telur asin.
54:00Itu kalau ada
54:06warna yang sama juga.
54:08Warna warteg bahari.
54:10Kuning hijau ya.
54:12Kuning hijau bahari.
54:16HSL ini warm versus
54:18cool bukan?
54:20Waduh.
54:22Itu roda warnanya.
54:24Hue, saturation,
54:26lightness kan HSL itu?
54:28Saturation itu gray scale ke
54:30full warna, lightness
54:32terang ke bluap.
54:34Bukan ya kayanya?
54:36Warm itu
54:38apa?
54:40Warung itu lebih banyak merah.
54:42Pader merahnya lebih banyak kalau di RGB.
54:44Kalau cool, kan
54:46sebaliknya ya. B-nya, bluenya lebih banyak.
54:48Kemudian ada
54:54kira ini cuma RGB sama
54:56CMYK, ternyata banyak ya.
54:58Banyak.
55:00CMYK kan untuk
55:04fisik ya, untuk printing.
55:06Ini nggak dipakai ya?
55:08Nggak bisa.
55:10Untuk CSS nggak bisa ya.
55:12Cie Eka bikin
55:14standar baru.
55:16Cie Eka.
55:18Enggak lah, Oke Eka lah.
55:30Oke Eka.
55:32Oke Eka.
55:36Oke Eka.
55:42Ini bener nggak sih?
55:44Yang masih pakai Donate, masih pakai IAEA.
55:46Disini maksudnya yang sebelum
55:48Edge ya.
55:50Rasanya udah nggak.
55:52Udah beralih ke Edge semua kan.
55:54Walaupun di Windows kayaknya masih ada.
55:56Internet Explorer.
55:58Ada.
56:00Ada kan itu nggak bisa
56:02dihilangin, cuma nggak dikasih update baru.
56:04Pasti pakai Visual Studio.
56:08Studio, iya.
56:10Nggak bisa diganti gitu.
56:12Open in Chrome.
56:14Pasti bisa sih.
56:16Gua udah lama banget nggak pakai itu.
56:18Udah versi berapa sekarang?
56:20Udah ada yang open source-nya juga tuh.
56:22Visual Code.
56:24VS Code.
56:26ISP.net-nya.
56:28Bukan Visual Studio-nya.
56:30Maksudnya yang .net-nya.
56:32.net core, sorry. .net core namanya.
56:34Jadi bisa dijalankan di server
56:36Linux juga sekarang.
56:384 kan.
56:40Terus 4 setengah.
56:42Wah nggak ngikutin.
56:44Udah, next.
56:46Nggak ngikutin.
56:48Banyak sekali.
56:50Ada yang pakai angka,
56:52ada yang pakai persen, ada yang pakai
56:54angkanya desimal.
56:560,1, 0,2.
56:58Tapi mudah diprediksi daripada Hex-nya.
57:00Keubulan utamanya sih itu ya.
57:02Ya semua, sisanya.
57:04Apapun yang bukan Hex sih.
57:06Relatif, gampang ya.
57:08Tapi sebenarnya kalau pikir-pikirin,
57:10tadi OKLH itu
57:12lebih mudah dibaca daripada
57:14kita kayak 0 sampai 255.
57:16Kayak 255, 255, 255.
57:18Itu susah kan.
57:20Terus Hex juga lebih susah kan.
57:22Paling taunya FF000 ya.
57:24Udah itu pasti red.
57:26Asal bukan Hex ya.
57:28Asal bukan Hex, sisanya aman.
57:30Cuma tergantung kita udah terbiasa.
57:32Yang penting tau lingkaran Hue-nya udah kebayang tuh.
57:44Kira-kira kalau di ujung mana,
57:46di negri mana,
57:48tinggal atur saturation
57:50dan lightness
57:52sama dark-nya.
57:54Lebih menarik sih memang.
57:58Kan setengah 2N7 juga sama DevTools ya.
58:00Walaupun kita sulit ngebayangin,
58:02di DevTools kan semua
58:04sekarang mau pake Chrome,
58:06mau pake Firefox,
58:08kurang-kurang seperti gimana.
58:10Pasti udah ada Windows-nya,
58:12udah ada gambarnya, color picker.
58:14Kita pake VS Code juga
58:16udah ada itu-nya kan,
58:18swatch-nya.
58:20Kalau kita pake Tailwind,
58:22asal pake plugin-nya,
58:24plugin Tailwind itu
58:26juga bg-rate 300
58:28juga udah muncul.
58:30Bahkan kita pake custom, custom dimming
58:32pun bisa muncul.
58:34Kalau mau nge-check rumah,
58:36sudah ada pantonnya.
58:38Iya, pantonnya.
58:42Warna Tailwind.
58:44Ini favoritnya Jason
58:46ternyata HSL sama kayak Damar ya,
58:48berarti ya. Ini juga HSL kan maksudnya ya.
58:50HSL.
58:52Karena mirip pas lagi mirip foto.
58:54Nah, ini menarik.
58:56Apakah
58:58teman-teman melakukan
59:00misalkan pake HSL
59:02sekian-sekian,
59:04kok warnanya kurang oke ya, langsung di-edit,
59:06mungkin di DevTools
59:08atau di Figma,
59:10saya nggak tahu dia pake HSL atau nggak,
59:12kayaknya pake ya, ada ya.
59:14Kalau saya sih nggak,
59:16karena bukan
59:18naturali bukan orang front-end,
59:20jadi biasanya yang saya lakukan adalah
59:22color palette generator,
59:24cari dulu.
59:26Tinggal pake,
59:28tinggal pake,
59:30nggak nyari-nyari, wah ini kurang gelap,
59:32ini kurang terang, nggak.
59:34Generator aja,
59:36kalau saya sih. Itu juga
59:38udah pake color generator,
59:40begitu hasilnya,
59:42kok jelek ya, gitu.
59:44Kadang-kadang nggak sesuai.
59:46Kalau nggak, pemenaranya,
59:50bahkan saya orang front-end,
59:52bukan orang UI,
59:54bukan orang visual,
59:56bukan orang visual design,
59:58apa concern orang front-end,
1:00:00yang penting kontrasnya bagus,
1:00:02aksesibilitas bagus, ya udah,
1:00:04mau warnanya fanas.
1:00:06Kalau dulu,
1:00:08saya waktu masih masanya
1:00:10jadi co-founder,
1:00:12celek,
1:00:14saya tinggal panggil,
1:00:16sini dulu,
1:00:18desainernya gitu,
1:00:20"Ayo,
1:00:22kasih tahu warnanya apa."
1:00:24Nanti dia pake kutip-kutip pake laptopnya dia,
1:00:26"Oke, Pak, ini kasih warna ini di sini."
1:00:28Kata-kata lagi, "Kasi warna ini."
1:00:30Jadi saya pake DevTool, nganti-ganti warna,
1:00:32cocok nggak? "Oke, nanti kita atur-atur dikit-dikit sana-sana."
1:00:34Jadi bagus, ternyata.
1:00:36Nah, tapi itu pentingnya established kan,
1:00:40ya itu orang kan lain-lain kan,
1:00:42si visual designer,
1:00:44yang pinter
1:00:46dan sense of aesthetic
1:00:48yang bagus, dia kan bener-bener tuh bisa coding.
1:00:50Jadi semua orang kan punya
1:00:52spesialisasi sendiri-sendiri,
1:00:54kita harus sepakat kayak format apa
1:00:56yang paling oke buat
1:00:58kerja sama, jadi nggak usah,
1:01:00nggak usah bingung lah. Misalnya,
1:01:02kalau sekarang lah,
1:01:04pake storybook kan enak tuh.
1:01:06Udah ada, klagin, otomatis
1:01:08ngecek color contrast.
1:01:10Nah, misalnya kita
1:01:12sepakat dulu format apa yang mau dipake,
1:01:14misalnya mungkin desainernya
1:01:16dari Figma atau dari apapun,
1:01:18kan bisa copy-paste juga kan,
1:01:20tuh, copy-paste jadi JSON atau apalah.
1:01:22Nah, terus kita bikin
1:01:24apalah kayak buat
1:01:26view swatch-nya, termasuk kalau ada
1:01:28palette yang generate palette
1:01:30custom misalnya dari shade 100,
1:01:32200, 300. Yaudah, tinggal
1:01:34masukin semua kan, kalau misalnya ada yang
1:01:36diubah, mau diubah sama desainernya,
1:01:38tinggal di-copas value-nya,
1:01:40kita tinggal lihat, pastikan semua
1:01:42udah contrast-nya oke.
1:01:44Yaudah, nggak usah mikir-mikir
1:01:46warnanya halus atau nggak lagi.
1:01:48Oh, iya, ini juga
1:01:50jadi pertanyaan ya, kalau
1:01:52apa, yang tadi ya, di garis bawahnya adalah
1:01:54format-nya harus
1:01:58disepakati dulu, apakah
1:02:00HSL, RGB, atau apapun
1:02:02gitu ya. Karena
1:02:04bisa aja kan, kalau kita
1:02:06yang develop, mungkin
1:02:08sederhana
1:02:10dikasih
1:02:12mock-up, dikasih value kita
1:02:14masukin. Itu mending
1:02:16dikasih value, nggak dikasih, jadi kita
1:02:18pakai color picker itu.
1:02:20Oh, color picker.
1:02:22Pakai color picker
1:02:24di eye dropper.
1:02:26Iya, eye dropper,
1:02:28gitu kan,
1:02:30ada tools-nya kan, bisa aja
1:02:32kemungkinan itu nggak akurat.
1:02:34Iya. Jadi
1:02:36harus disediakan
1:02:38value-nya, jadi misalkan dari
1:02:40mana, dikasih value-nya ini
1:02:42RGB-kah, HSL-kah,
1:02:44atau apa. Karena kalau misalkan pakai itu, ada
1:02:46kemungkinan berbeda.
1:02:48Jadi begitu udah masuk ke web,
1:02:50design-nya begini,
1:02:52tapi warnanya kok agak
1:02:54sedikit
1:02:56terang atau sedikit gelap, gitu.
1:02:58Mungkin gara-gara kita pakai color
1:03:00picker itu, atau ya itu
1:03:02ya color picker sih. Nah, itu susah nggak
1:03:04enak sih, itu agak terang, agak gelap,
1:03:06itu kan hal yang
1:03:08subjektif dan sulit
1:03:10di, apa ya, sulit
1:03:12di-streamline, sulit
1:03:14di-reproduce, jangan lah.
1:03:16Iya, desain-nya
1:03:18desain-nya
1:03:20dia di retina
1:03:22display, kan. Sementara kita
1:03:24develop-nya di handphone.
1:03:26Nggak ya, jauh banget.
1:03:28Nah, coba
1:03:30kalau soal color swatch
1:03:32sama agak terang, agak gelap itu,
1:03:34material design 3,
1:03:36apa, desain
1:03:38sistem punya-nya Google,
1:03:40bagus sih, menurut gue itu oke,
1:03:42enak banget, express
1:03:44apa, nekspresiin
1:03:46kombinasi
1:03:48warna dan
1:03:50palette-nya, dan mereka juga
1:03:52ternyata punya library
1:03:54untuk ke comfort warna.
1:03:56Jadi kita nggak harus pakai material
1:03:58desain secara full,
1:04:00kita bisa pakai
1:04:02library-nya doang.
1:04:04Yang color tones.
1:04:06Coba mana ya?
1:04:08Nah, itu, scroll ke bawah.
1:04:10Nah, itu, apa,
1:04:12udah ada perhitungannya sendiri, yang
1:04:14accent kayak gimana,
1:04:16yang natural kayak gimana, primary,
1:04:18secondary,
1:04:20terus penggunaannya juga,
1:04:22contrast-nya juga udah dihitung.
1:04:24Iya, ini udah terima jadi ya,
1:04:26sama kayak tadi yang saya
1:04:28lakukan, kan.
1:04:30Kita masukin, tapi kita harus masukin, kita
1:04:32ngedefine primary color-nya,
1:04:34misalnya, terus di generate sisanya.
1:04:36Oke. Berarti,
1:04:38ini juga mirip sama tailwind ya,
1:04:40tailwind, tapi tailwind udah
1:04:42terdefinisi ya, kalau ini masih...
1:04:44Kalau tailwind handpicked dan bawaan
1:04:46dari sana, kan, tapi kan kita
1:04:48bakal pengen custom sesuai
1:04:50brand color kita, nih.
1:04:52Ini bagus sih, bahkan palette-nya itu,
1:04:54kayak misalnya kita mau bikin tailwind, tapi
1:04:56custom ya, customize, itu
1:04:58udah ada tuh, nanti dikasih
1:05:00gitu.
1:05:02Bisa ya.
1:05:04Oke, kan.
1:05:08Teman-teman, punya ini nggak sih?
1:05:10Terus menarik yang kayak gini, nih, buat
1:05:12misalkan kita bikin app,
1:05:14tapi kita nggak punya kemampuan untuk
1:05:16memilih warna atau
1:05:18tentunya belum punya design system, gitu.
1:05:20Pakai apa, ya?
1:05:22Ini salah satunya, ya.
1:05:24Kalau nggak, biasanya carinya
1:05:28designnya udah jadi.
1:05:30Ya, cari design systemnya.
1:05:32Cari color palette banyak.
1:05:34Banyak, banyak, banyak.
1:05:36Cari aja online. Tapi kan, maksudnya
1:05:38kita harus sesuaiin, kalau kita punya brand
1:05:40color kan, harus sesuaiin tuh, ya
1:05:42nama kerjaan lagi.
1:05:44Tapi sebetulnya, kalau nggak ada
1:05:46restriction harus brand color tentu, ya
1:05:48cari color palette yang udah jadi
1:05:50juga banyak, kok, online.
1:05:52Ya, color palette yang udah jadi, atau bahkan
1:05:54design system yang udah jadi juga.
1:05:56Misalkan, kayak Tailwind tadi kan, itu kan
1:05:58design system kan. Udah,
1:06:00aku tip ya, semi lah, semi design system
1:06:02masih belum jadi full.
1:06:04Warnanya juga bisa kita pilih lagi, kan.
1:06:06Terus juga, misalkan kayak Boostrap
1:06:08atau kayak Bulma, itu kan
1:06:10warnanya udah spesifik, kan.
1:06:12Udah, udah apa ya,
1:06:14udah...
1:06:16sudah disediain,
1:06:18sudah disediain, gitu.
1:06:20Tengah lo tapen aja.
1:06:22Kalau, apa, yang
1:06:24terlalu-lalu saya temukan, ya ada nih namanya
1:06:26Hue, Happy Hues.
1:06:28Jadi, selain color palette,
1:06:30dia juga, apa ya,
1:06:32mencobohkan gunaannya.
1:06:34Dicontohin.
1:06:36Biasanya kan, kalau color palette
1:06:38kan, cuma dikasih warna doang, kan.
1:06:40Ini cocok banget.
1:06:42Pake nya yang peks mana,
1:06:44yang ring mana, yang accent mana.
1:06:46Kalau ini, tinggal paken.
1:06:48Nah, ini solusi nih buat
1:06:50kita.
1:06:52Happy Hues, boleh.
1:06:54Sense of estetiknya direbukan,
1:06:56udah tinggal pake aja, tinggal pilih.
1:06:58Oh iya,
1:07:00Tailwind color palette
1:07:02juga ada, ini apa.
1:07:04Tailwind palette.
1:07:06Tinggal, betul.
1:07:08Tinggal kita mau pilih-pilih kan,
1:07:10gak harus semuanya, kan.
1:07:12Gak harus semua warna kita pakai, kan.
1:07:14Untuk latihan, kalau temen-temen mau latihan CSS,
1:07:16kita pake CSS, apa,
1:07:18CSS Zen Garden, gitu.
1:07:20Zen Garden.
1:07:22Masih ada.
1:07:24Kalau mau,
1:07:26CSS.
1:07:28Jadi bisa latihan
1:07:30untuk beneran kayak nge-styling,
1:07:32biar bagus.
1:07:34Itu yang lama banget,
1:07:36sekarang yang versi baru ada versi modernnya
1:07:38stylestage.dev, buka deh.
1:07:40Ini inspired by
1:07:42Zen Garden juga.
1:07:44Stylestage.dev.
1:07:46Kalau temen-temen mau latihan
1:07:48front-end, mau bagus,
1:07:50mau coba-coba.
1:07:52Lucu nih.
1:07:56Itu inspired by CSS Zen Garden,
1:07:58cuma versi modernnya.
1:08:00Next time kalau ada yang nanya,
1:08:04kalau saya mau belajar CSS, atau mau belajar
1:08:06jadi front-end gimana, kasih aja ini.
1:08:08Udah, coba
1:08:10ubah warnanya, gitu.
1:08:12Ubah estetikanya.
1:08:14Kalau gue di sini malah nyontek
1:08:16malah nyontek warnanya sih.
1:08:18CSS-nya udah bisa milih
1:08:20warnanya, bukan nulis CSS
1:08:22buat warna ya, tapi milih warna apa
1:08:24yang bagus, nggak bisa. Yaudah nyontek dari situ.
1:08:26Material Design Palette Generator.
1:08:30Wah, ada juga ya material design-nya.
1:08:32Design
1:08:38Palette
1:08:40Palette Generator.
1:08:46Wow
1:08:48anak siapa tuh nangis?
1:08:50Anak gue, mau tidur
1:08:52ntar lagi, ntar lagi udah hanyuh.
1:08:54Oh ini ya, kita bisa
1:08:58pilih, pilih, pilih, gitu ya.
1:09:00Oh, ada ini juga.
1:09:02Keren juga nih. Sambah ini.
1:09:04Oh nggak. Ini based on material, cuma belum
1:09:06auto contrast nih, kan
1:09:08background-nya kuning, text-nya putih.
1:09:10Wah, surem bos. Surem, surem.
1:09:14Tapi ya, tapi bagus sih, maksudnya
1:09:16minimal milih warna yang enak di matalah.
1:09:18Shade ungunya bagus.
1:09:20Nah iya.
1:09:22Contrast kita harus handle sendiri.
1:09:24Iya.
1:09:26Oke.
1:09:28Ada lagi yang mau dibahas?
1:09:30Udah ya.
1:09:32Cukup? Cukup.
1:09:34Cukup.
1:09:36Warna doang banyak ya?
1:09:38Tenang, tenang, tenang.
1:09:40Oke.
1:09:42Sebelum kita, sambil kita
1:09:44apa, kalau temen-temen masih ada yang mau
1:09:46disusukan, silahkan di kolom komentar.
1:09:48Kalau nggak, bisa bantu kita isi
1:09:50ini.
1:09:52bit.ly/
1:09:54tiga kata ngobrol inward.
1:09:56Kira-kira apa gitu.
1:09:58bit.ly
1:10:00tiga kata ngobrol inward.
1:10:02Buat feedback buat kita.
1:10:04Saya kira...
1:10:063 kata, mkh, hsl,
1:10:08rgba.
1:10:10mkh,
1:10:12informatif,
1:10:14tes,
1:10:16inside pool.
1:10:18Belum, belum. Mana hasilnya
1:10:22kelihatan?
1:10:24Oh iya, belum ada.
1:10:26Woh.
1:10:30Loh, mantap.
1:10:32Kita nggak apa,
1:10:36nggak ada yang bilang kita ganteng.
1:10:38Jangan.
1:10:40Semua disusulnya.
1:10:42Jangan.
1:10:44Saya telah join.
1:10:48Saya telah join.
1:10:50Bedanya nih sama Ravel.
1:10:52Nggak pelit ilmu.
1:10:56Terima kasih. Readable.
1:10:58Objek-objek.
1:11:00Ini lupa...
1:11:02Lupa diparse.
1:11:06Oh iya, lupa diparse ya.
1:11:08Stingify ya. Itulah salah satu ini.
1:11:10Belum distingify.
1:11:12Belum distingify.
1:11:14Waduh, seru-seru-seru.
1:11:18Ini nambah banyak.
1:11:203 participants typing.
1:11:22Oke.
1:11:24Baiklah. Kalau begitu,
1:11:26untuk malam ini, terima kasih banyak
1:11:28semuanya yang sudah menemani
1:11:30dari jam 9 sampai jam
1:11:3210 lewat.
1:11:34Lewat-lewat sedikit.
1:11:36Minggu depan, Selasa jam 9.
1:11:38Berhubung Minggu depan kita
1:11:40akan balik lagi ke
1:11:42waktu yang normal. Jadi ditunggu
1:11:44hari Selasa jam 9 malam.
1:11:46Bukan jam 8, seperti malam ini.
1:11:48Tadi kemarin salah skejul.
1:11:50Jadi untuk malam ini, udahan dulu.
1:11:54Terima kasih banyak buat semuanya.
1:11:56Kita ketemu lagi Minggu depan.
1:11:58Minggu depan, hari Selasa.
1:12:00Bye bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
3 Des 2024
Persiapan DevFest Surabaya - Ngobrolin WEB
Tim Ngobrolin WEB bakal hadir di DevFest Surabaya! Teman-teman yang domisili Surabaya dan sekitarnya boleh yuk ikutan ha...
19 Des 2023
Rahasia Dibalik Konfigurasi File: INI, XML, JSON, YAML, TOML - Mana yang Terbaik? - Ngobrolin WEB
Video ini akan membawa Anda dalam petualangan menjelajahi berbagai format file konfigurasi yang populer di dunia teknolo...
10 Des 2024
Ngobrolin Pengalaman Frontend @imrenagi - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...