🔥 UI Component Library: Pakai atau Gak?! Untung Rugi, Tips Memilih, & Pengalaman Developer!

4:42Iya benar juga ya.

4:45Spotify biar bisa download didengerin naik pesawat atau naik kereta ya Nah sekarang kita lanjut ke

4:59bahas semua yang video-video streaming atau yang kayak tadi tuh kan itu ada UI nya ya mereka pakai

5:07ada search barnya inget nggak kalau mereka itu punya desain kayak desain sistem gitu ya Nah

5:18bagaimana caranya supaya konsisten Nah itulah topik akan kita bahas kali ini itu dengan UI

5:26komponen-komponen library tradisius bagus-bagus-bagus ya lumayan masih masuk kapal

5:37apa itu yuk komponen library Mari kita bahas komponen-komponen adalah ini yuk komponen

5:51itu ada library yang bikin pusing untuk setup bagi saya bentar ini kan sebetulnya bukan istilah

6:00teknis ya maksudnya bukan spesifikasi jadi ya maksudnya ada orang bilang nyebut itu misalnya

6:07pakai istilah lain ya nggak masalah misalnya UI library gitu ya component library framework nah

6:14itu kan overlap dengan beberapa konsep terkait kayak misalnya yaitu CSS framework CSS library

6:20belum nanti desain sistem kalau desain sistem itu kan superset ya jauh lebih luas ya nanti

6:26di atas lagi aja cuma maksudnya ya ini kan bukan kalau spesifikasi kan itu saklet maksudnya misalnya

6:34kita bilang apa ya API International API ya istilahnya harus kayak gitu scope-nya jelas

6:41apa yang di cekup di situ nah cuma kalau UI component library ya suka-suka lah konvensi

6:48kita ngerti apa yang dimaksud

6:51tapi bisa aja orang pakai istilah

6:53lain atau punya skop yang

6:55sedikit berbeda

6:57lanjut, itu kalau menurut

6:59artikel itu apa tuh?

7:01ini ngomongnya

7:03CTO ya

7:04jadi dia di CTO

7:07terus dia ditanya

7:09apakah kita perlu menggunakan

7:11desain sistem seperti

7:13komponen library

7:14dan

7:15what a component library is

7:18mana dia kok nggak ada keterangannya ini nah itu dia tuh nah berarti kan collection of itu yang

7:28dibuat ria pasnya atasnya collection of remade UI UI elements nah seberikan intinya itu atasnya

7:36tuh paragraf sebelumnya ini yang dibuat ini kan one of the biggest perks iya berarti isa

7:43term is a collection of materials or component that you can reduce or modify to meet your needs

7:50tapi sebenarnya apa yang definisi yang di atas juga masuk situ kan collection of readymade

8:00UI elements ya udah sama sih ada collection materials juga kan or components jadi nah bisa

8:09komponen kecil kadat kode Riza katanya kecil belum dibuat lagi nih suaranya bisa berupa

8:17komponen bisa berupa materi lain kayak utility kan biasanya ada utility atau helper atau apalah

8:23misalnya buat apa responsif screen atau loading loading skeleton dan lain-lain kalau sekarang

8:32saya gimana sudah kekecilan atau lebih besar betul sudah ya lihat Moko mohon info ya temen kalau suara saya kekecilan atau Eka atau Ivan ya Thank you gimana tadi sorry kepotong cekwiri berarti salah satu ya UI

8:48itu udah lama ya itu bisa dipakai untuk mobile mobile apps mobile web itu dari

9:02dari UI Iya di sini siapa yang lulusan UI pasti pada lulusan-lulusan teluin

9:11mana ininya apa namanya nah oh ya hal pertama yang kalau teman-teman buka ya CSS library

9:24atau UI komponen yang pertama dicari komponen apa biasanya yang susah dibuat button-button sama

9:33button sama kartu kalau aku yang itu yang susah dibuat kayak drop apa Mega menu atau drop down

9:41atau aksi berdaun yang auto populate gitu karena kalau yang lain kan gampang ya kopas-kopas aja

9:47yang aneh-aneh lah yang udah ke zaman dulu kan harus bikin kan kalau sekarang kan udah ada ya

9:57walaupun biasa ya tapi udah ada udah use able kan kalau sekarang salah satu yang salah satu

10:05yang apa? Shadow DOM? Web Component? Web Component bawaan. Nah ini yang agak

10:17obsolete kalau aku sebelumnya tuh dari dialog atau model karena ngetes apa CUI

10:23Component Library itu aksesibel atau enggak kan sebetulnya bikin sendiri juga bisa nih

10:28cuma kan agak ribet jadi aksesibilitas itu kan kalau misalnya kita ngebuka model itu

10:35fokusnya harus diatur langsung masuk ke isi pop-up model dialog itu.

10:41Terus fokusnya itu yang pertama.

10:43Kedua, fokusnya harus fokus trapping.

10:45Kalau misalnya user nge-tap, pindah fokus, itu nggak boleh.

10:50Fokusnya nggak boleh pergi ke yang di bawah, yang ketutup.

10:53Harus trapping di dalam modelnya itu juga.

10:56Terus ada overlay-nya kan, isi halaman sisanya harus ketutup, bisa di-scrolling.

11:02terus kalau misal user keklus dialog itu fokusnya harus balik ke tempat yang tadi

11:08si button yang nge-trigger dialog itu bayangin itu kalau misalnya ngebikin sendiri satu persatu kan

11:14ya agak capek juga ya jadi biasanya kalau UI component library cari yang ada itu

11:20dan itu harus bagus maksudnya harus berfungsi dengan baik ya sama juga bohong

11:25kalau pakai UI component library tapi maksudnya nggak berfungsi dengan baik ya

11:29karena apa native yang bawaan web mustahil yang webstandar juga udah mulai udah diadakan dialog

11:39sudah ada modal udah ada ada cuma udah mulai widespread ya ya minimal perakhir 2023 inilah

11:53bahas setiap UI ya nanti kita akan bahas pelan-pelan ya nanti ya sabar udah ada

12:03n-design itu salah satu n-design ini juga dulu terkenal

12:10segala umat material UI

12:12beda loh MUI sama materialize CSS atau materialize design itu sebenarnya kan Google

12:25desain sistem material desain-desain ya terus ada mentasinya banyak open-sourcenya Iya dia

12:34spesifikasi kan material design itu spesifikasi kan sama seperti Apple design guideline kan sama

12:41juga itu cuman kalau Apple kan dia lingkupnya lebih kecil makanya dia enggak mungkin belum

12:47ada library yang pakai eh guideline mereka indesign nanti lama banget itu headnya sama material material ya Iya sama MUI MUI Majelis Ulama Indonesia

13:07ada pricing punya dia premium produknya ada core ada X template design kit dan

13:24ini by Oke yang koron aja ya material UI ada joy-ui bedanya apa open-source react-component

13:33Oh semua lihat besi uang in Oh iya ya rekomendasi muay ini khusus react ya Iya ini enggak ada yang

13:45material material CSS ada kan yang ya ekivalen sama material material material material material

14:08desain namanya material yang mana gitu nah tuh ada komen yang paling bawah jadi sebenarnya apa

14:16Google bikin standar ke apa andar spesifikasi aja prinsip-prinsipnya hanya material design

14:26Nah itu maksudnya kayak tokennya kayak kalau button itu minimal berapa bentuknya terus

14:33behaviornya kalau di hover itu lebih gelap berapa persen bisa diklik dulu pertama kan

14:40ngetrend ngetrend banget kan ripple ya ripple nya biaya ripple efek ya pasti klik ya ada

14:49zeng-zeng nya itu kan bikinnya gimana misalnya kalau CSS beneran kalau pakai react nah dari

14:55Google enggak ngatur implementasi exact kayak gimana dikoyanya nah makanya muncul banyak

15:01banyak itu banyak library semua pakai nama material blablabla

15:06bingung deh

15:07bukan bukan gak diimplementasi

15:09dia implementasinya di android

15:10oh iya ya

15:12kemudian diadaptasi ke web

15:14banyak orang yang

15:16banyak orang yang mengadaptasi ke web

15:19karena mungkin make sense juga gitu

15:20sama halnya seperti

15:22yang tadi apple design guideline

15:25itu kan untuk aplikasi

15:27native nya kan buat ios

15:28dan

15:30belum ada atau mungkin kita

15:32nggak tahu yang mengadopsi

15:35ke web gitu

15:36jadi yang materialize

15:39material UI itu

15:40semua pakai nama material

15:41material UI itu

15:43UI library yang

15:45menggunakan prinsip-prinsip yang diadopsi

15:48dari material itu

15:49ada juga kok

15:51UI component library yang

15:54namanya nggak ada materialnya

15:56nggak ada unsur materialnya

15:58tapi ada

15:59dia menggunakan prinsip-prinsip material UI, ada seperti itu.

16:03Saya lupa ada namanya.

16:05Banyak soalnya.

16:07Nah, teman-teman disini favoritnya yang mana nih?

16:09Kita juga belum mendefinisikan kan masuk kategori apa gitu kan.

16:14Kalau Bootstrap, itu masuk mana?

16:19Nah, itu semua kan sebetulnya...

16:21Awalnya CSS Framework, tapi akhirnya CSS Framework.

16:24Nah, ini overlap.

16:26UI component library kan macam-macam ada yang beneran ngasih komponen doang ada yang combine

16:33sama yaitu kayak framework ya kayak si bootstrap dulu ada foundation foundation foundation Iya

16:40kalau nggak salah kalau si bootstrap tuh ya bootstrap satu ya Twitter bootstrap tuh

16:48namanya dulu tuh itu cuma dari CSS nya doang CSS nggak ada jelas scriptnya ya utility classnya dulu

16:56kalau misalnya mau bikin dua kolom tiga kolom ya class name nya apa gitu kan setelah itu kan harus

17:02bikin contoh ya kan contoh-contohnya lama-lama jadi jadi ini jadi komponen jadi strategi komponen yang

17:10kita bikin sendiri itu oke sempet ngetrend banget ya pas pertama belajar tuh eh semua orang

17:20udah pakai ini zaman dulu semua website itu mirip-mirip banget sama apa kayak di

17:27tempores gitu-gitu kayaknya udah sama semua tampilannya cuman beda warna doang cuma ini

17:34kan apa helpful banget ya apalagi dulu kayak misalnya drop-down nih coba buka komponen yang

17:41down nah ini kan dulu bikinnya susah ya mau saya dulu itu 67 tahun lalu ya kan mau saya

17:49kayak browser supportnya belum sementara merata sekarang masih banyak apalah javascript work yang

17:57aneh-aneh nah ini membantu banget kan jadi ini kan udah keluar dari ranas ssutility only kan

18:04walaupun ya emang pakai CSS kelasnya dia juga kan ada javascriptnya juga nih dia ngebawa javascript

18:12ya bikinan mereka sendiri terus saya suka pakai jumbo Tron di Twitter di buset ini

18:20yang hero hero hero nah makanya si apa bootstrap ini karena ada javascriptnya agak susah mau di

18:34convert ke komponen rie komponen view gitu kan ada lagi yang bikin kan ada lagi yang bikin khusus

18:43untuk react-react bootstrap ada yang buat view saya nggak tahu ada panggak ya pokoknya untuk

18:51semua framework dia ada karena dia ada mengandung javascript nya di sana nah ini sudah jelas paling

18:58yang paling uji ya kayaknya yang paling pertama ya kenapanya ya kayak yang tadi itu di artikel

19:04pertama biar cepat ya kan pastilah itu faktor yang paling pengalaman saya justru bikin lambat

19:10tahu nggak sih Iya tergantung semua tergantung jadi pusing gitu kayak karena kalau sudah jadi

19:17gitu mau dirubah-rubah itu kalau atau ada behavior yang mau berbeda dan dia nggak bisa itu contohnya

19:24ini pernah tahu enggak kalau drop-down tapi bisa search drop-down tapi ada seksinya bahasanya itu

19:34ya ya ngerti kebayang-kebayang apa ya namanya drop-down udah kalau-kalau di jqd namanya jqd

19:42kalau dulu saya suka pakai nama jeky selek

19:48bukannya jikuli apa ya select to select to udah itu dia

19:59select to nah itu drop down tapi bisa di-search nanti ke bahkan yang lebih

20:09maksudnya dia kalau kita set dia bisa kayak callback ke Fax ngambilnya hasil set terus ditampilin

20:15itu kan untuk datanya ratusan ribu tuh cocok banget ya buat jadi drop down daripada diisi

20:22semua ke dalam drop down at some point kalau misalnya contohnya komponen seperti kalau misal

20:31kita mau ngerubah tetapi ya ternyata dia nggak bisa tetapi maunya komponen itu yang dipakai

20:37Itulah yang bagi saya jadi ribet.

20:41Tapi itu permasalahan semua framework ya.

20:43Mau pakai framework apapun, kalau kita mau maksa di luar kaedah,

20:47pasti akan jadi ribet.

20:50Lagi kan sebetulnya requirement kita makin spesifik,

20:56makin ribet meng-customize yang sudah ada.

20:59Karena orang bikin kan belum tentu dengan use case kita in mind.

21:02Nah, tapi dibagi dua aja nih.

21:04pertama perunya ngose pertimbangan kenapa kita pakai yuk komponen library yang kedua kontennya

21:11kenapa kita misalnya kenapa enggak usah atau kapan kita enggak usah pakai nah perunya dulu

21:17aja yang jelas kan cepet deh tinggal kopas terutama kalau prototyping yang minimal ada

21:23yuk anginnya lah pertama cepat terus kedua ya misalnya enggak ada enggak ada yuk ID signernya

21:32atau UI desainernya masih occupied

21:34masih belum bisa bantu di tim kita yang minimal kan apa kalau kita pakai sejelek nggak jelek ya maksudnya standar seplain jemput

21:49run bootstrap lah itu tadi minimal kan eh apa dari kontrasnya terus dari ukurannya itu kan

21:57Udah tersusun dengan baik ya. Jadi maksudnya nggak usah di link dengan itu semua.

22:05Ada sesuatu yang minimal jelas bisa di print lah. Jadi kalau nggak ada UI designer.

22:13Terus apa lagi ya? Kalau misalnya kita pilih UI library yang aksesibilitasnya bagus

22:20atau mungkin ada juga yang secara estetika bagus juga ada kan.

22:25kayak misalnya apalah material UI tadi atau indesign atau radix kalau ada kalau kita nemu

22:33yang style estetiknya cocok aksesibilitasnya bagus ini kayak menang besar maksudnya menguntungkan

22:41banget karena udah sesuai yang kita mau ada lagi enggak pertimbangannya kos kalau kos gimana

22:50kos kan cepet tadi maksudnya menawarnya jokosnya devournya lebih sedikit terus itu tadi devour

23:00kita sendiri kalau kerjanya lebih cepat kedua orang yuk kita nggak usah hayal lingkur nah itu

23:07memang lebih tinggi itu kontranya tapi kontranya berarti kan ya tapi yang pronya di sini adalah

23:15aplikasi web kita jadi konsisten

23:18oh iya konsisten sih

23:20itu

23:21konsisten, karena masing-masing

23:24mungkin masing-masing orang punya preferensi

23:26sendiri, kalau gak ada

23:28guideline-nya, kita misalkan

23:30kita pakai bulma, kita pakai

23:31bootstrap atau apapun

23:33dia tinggal lihat di

23:35kitchen sink, copy paste, jadi gitu kan

23:38tapi kalau misalkan gak ada sama sekali

23:40oh ini gak ada guideline-nya

23:42yaudahlah buat sesuka-suka kita gitu

23:43akhirnya masing-masing selera

23:45apa yang nge-stop

23:47project yang sudah pakai

23:50UI component library A

23:51nggak nambah sesuatu dari

23:54UI library B

23:55gimana-gimana?

23:59saya pernah nemu loh

24:00sudah pakai material

24:04design, tapi tiba-tiba pakai

24:06select 2 di satu sisi lain

24:08karena ada yang

24:10itu kan sebetulnya

24:11karena nggak ada

24:13enggak enggak enggak selengkap itu jadi itu poin bagus juga sih menarik kan sebetulnya yuk komponen

24:21library tuh kayak memudahkan kita aja tapi kan bukan berarti saklek banget kayak kita beneran

24:28harus hanya pakai itu doang ya kalau kita punya kebutuhan lain yang si library itu enggak support

24:33ya kita kalau bisa sih bahkan misalnya gini nih butuh selek atau apa cuma si komponen library

24:42itu nyediain yang lebih ke low level lah misalnya nyediain input ya mungkin input atau button kan

24:50itu bisa kita susun kita pakai buat bikin mengkustomize yang lebih kompleks kan yang

24:57kita perlu ya atau pakai komponen library lain atau kadang kan ada library UI yang bukan bukan

25:05menyeluruh bukan design system atau komponen tapi ketinggan ya kayak misalnya Airbnb tuh pernah punya

25:10the picker yang oke banget kita cuma perlu the pickernya aja karena mungkin the picker bawaan

25:17komponen library enggak ada atau kurang cocok musik kurang advance kita perlu the picker yang

25:23mantap banget ya udah kita ambil aja dari tempat lain yaitu sasar ya sih cuma pertimbangannya itu

25:31javascript ya pasti mau saya ada kodenya yang dari segi performance kan itu gimana kita nyajakan

25:38Apakah library tambahan itu harus di eagerload duluan di semua halaman?

25:44Kan belum tentu. Nah, itu kan gimana kita ngelisih load tergantung kebutuhannya.

25:50Itu juga pernah jadi sebuah nightmare buat saya karena kliennya beli admin themes di Time Forest Nah itu agak cemakan agak cakep tuh ya kan jaman itu masih pakai sudah

26:05pakai itu booster tiga lah ya tuh admin tim sudah pakai booster tiga itu semuanya

26:10aduh cakep contoh aplikasinya contohnya cakep data implementasi kok saya mau rubah ini nggak

26:27bisa ngelupai itu nggak bisa hasilnya gimana akhirnya banyak maksa banyak maksa maksa akal

26:32akalan montir segala macam yang penting jadi hasilnya juga bagus jadi justru jadi nggak

26:39konsisten kan ya yang awalnya diharap konsisten terus karena terpaksa melanggar

26:45seri-seri terus kita enggak tahu cara utak-atiknya akhirnya menjadi malah jadi

26:52enggak bagus gitu karena kurang konsisten gitu nah ngomongin apa komponen library yang cukup

27:02lengkap salah satu yang cukup lengkap adalah yang carbon design ini juga menarik sekali

27:06ya punya IBM sebelumnya di-release nomornya flash ready enterprise ready ya karena emang

27:13bikinan IBM ya dan ini contoh itu kan tadi overlap ada beberapa ya misalnya kayak tadi

27:19ya buat subscribe mereka sebetulnya mainnya core-nya adalah CSS utility CSS utility library

27:28tapi mereka input komponen juga atau kalau contoh yang agak lebih modern tailwind tailwind CSS kan

27:34Sebenarnya library stand alone. Kita pakai CSS kelasnya doang aja ya nggak apa-apa.

27:38Tapi kalau kita perlu komponen, mereka pakai branding-nya Tailwind UI.

27:43Secara ofisial itu dari pihak yang sama.

27:46Itu kan kombo antara CSS utility dengan CSS framework dengan UI komponen library.

27:54Kalau IBM ini, Carbon Design System ini, design system yang menyeluruh.

27:59bisa jadi kayak apa sih pendekatan kayak apa filsafat ya filosofinya bla bla bla terus secara

28:06secara umum lah kayak pendekatan yang menyeluruh banget desain jadi kayak ini ini bukan kodinganya

28:14doang cuma kayak cara mengkomunikasikan konten bla bla bla yang kita developer kegengerti mungkin

28:20nah desain sistem termasuk salah satu diantaranya komponen library bahkan sampai fontnya juga udah

28:28lengkap sekali ini salah satu yang menarik kalau teman-teman mau bikin aplikasi yang istilahnya

28:34yang apa ya buat enterprise gitu ya buat perkantoran hal kayaknya cocok sekali kelihatan

28:41apa nggak mesti memang nggak mesti servicing juga nggak papa maksudnya enggak masalah nah coba eh

28:48ini mungkin ini sekali kivalennya adalah dengan ini ya dengan tadi kita udah ngomongin material

28:54desain desain sistemnya dengan material UI atau material kalau ini diborong ada UI komponennya

29:03kalau ini diborong satu tempat kalau enggak salah ada beberapa juga yang melakukan ini kan

29:07github kalau nggak salah ada terus ada Polaris apa tuh mobil Uber Uber Shopify Polaris apa yang

29:19banyak polaris makasih Iya kayaknya nih base design system nih uber uber punya dia ada juga

29:27ininya apa komponen lebih ada Iya tapi ini yang salah satu yang paling lengkap memang ini nyampe

29:35apa dan websitenya itu nyenengin banget sih kayak sampai ada tutorial ada code sandbox nya coba deh

29:40buka aja

29:41apa?

29:44develop, getting started, react

29:47step 1

29:48review, landing page

29:50ini framework juga menarik sih

29:53yang mereka support secara resmi

29:54itu ada plain

29:56plain HTML

29:58CSS JavaScript

29:59bisa ada kodenya

30:02ada contohnya ya

30:03frameworknya juga ada 3

30:05frameworknya ada angular, view

30:08kalau swell itu

30:10itu unofficial jadi kayak sangking orang pada suka banget sama si desain sistem dan komponen library ini ada yang bikin Tapi kayak diakuin lah di acknowledge sama IBM

30:25Cuma gak di maintain, yang maintainernya oleh komunitas, community

30:31Oh bagus juga ya

30:33Bagus-bagus

30:35Cuman kayaknya dia hanya react ya kalau gak salah

30:38Karena mereka hanya menggunakan react kan

30:41Eh gak tau ya

30:44Tapi kalau nggak salah, ya buat mereka sendiri. Kalau nggak salah ya ini pakai React.

30:52Uber Design. Oh ini intinya websitenya ya.

30:55Ya ini, ini sampai, sampai, Charting Library kayaknya ada deh data visualization tuh.

31:01Ada tuh. Lengkap sekali. Ini super lengkap.

31:05− Pakai D3, D3. − Hmm, I don't know. Ya, maybe.

31:10coba aja lihat nggak bisa ya inspect itu klik aja bawahnya react angular view Vanilla nah itu ngebuka

31:23kot sandbox itu bagus banget sih emang Oh seru-seru-seru dan udah ada contohnya kita tinggal

31:33dan Microsoft merek-merek carbon Iya juga yang kotak-kotak ala-ala Windows 11 gitu kan

31:4311th Windows 11 fnt ini itu apa ya elefantian eh statusnya mereka punya Oh iya elefantik setnya

32:00kayaknya mereka bikin sendiri apa gimana gitu ya oke komponen Coba lihat deh komponennya di kiri

32:09komponen baton-baton dulu enggak ada kartu-kartu ada aksesibilitas komponennya statusnya mungkin

32:23mana Oh ini Oh iya ini penting semua punya ada infonya terus di atas tuh di paling atas

32:30you stage style code accessibility kayak apa lengkap semua kalau kita mau pakai Vanilla itu

32:38nama kelasnya apa ya contoh-contoh state-nya terus tahu di masing-masing framework kayak gimana Wah

32:46bener sebelum kita review satu persatu ke komponen library tadi kan kita udah ada pro-nya kontra-nya

32:52kontranya

32:54susah dipelajari

32:57kemudian

32:58learning curve gantung

33:01ini tergantung UI library-nya juga kan

33:03misalnya nih kita pakai yang

33:05punya IBM tadi, Carbon Design

33:07ya mungkin lebih mudah ya karena lengkap

33:09dan hal-hal yang perlu dipertimbangin

33:12udah ada

33:14detail-detailnya juga

33:15jadi maksudnya kita lebih gampang

33:17mempelajarinya, tapi kayak misalnya dulu

33:19kayaknya end design tuh yang suka dikatain

33:22apalah kayak mungkin dokumentasinya kurang jelas accessibility statusnya juga jelas nah itu berarti

33:32kemungkinan kan learning curve nya bisa lama maksudnya apa developer nggak bisa dengan gampang

33:38langsung mengadopsi kedua belum tentu si desainernya suka karena dipagerin ya kan kalau misalnya terkekang

33:49terkekang atau jika misalnya ternyata designernya yang menang jadi sesuka hatinya membuat desain

34:00tanpa desain sistem yang sudah disepakati kalah nih misalnya developernya nggak bisa ngomong apa-apa

34:08karena pemilik designer desainernya itu pemilik akhirnya terjadilah premoknya dibelok-belokin

34:18itu jadi nightmare Oh cuma ini konsep kalau masanya balik ke topik si UI komponen librarynya trendnya

34:25juga kayaknya makin berubah deh kalau kayak yang dulu yang agak lama kayak material UI and design

34:33dan lain-lain itu kan saklek banget ya kayak belum tentu semua warna bisa di customize bisa dimodif

34:40Walaupun bisa, belum tentu semua.

34:42Cuma kan sekarang banyak yang approach baru yang kayak Radix itu juga,

34:49Radix UI, Shad CN, itu stylingnya lebih minimalis dan relatif,

34:56jauh lebih mudah di-override sih.

34:58Maksudnya lebih banyak yang bisa kita customize.

35:00Jadi itu juga pertimbangannya.

35:02Kalau kita terhancur pilih UI component library yang strict, restriktif,

35:07agak sulit di-override,

35:09nah terus kasusnya kayak tadi Ivan bilang

35:11desainernya konsepnya beda banget

35:14yaudah selamat pusing

35:16tapi kalau misalnya kita kebetulan pilih yang lebih

35:18fleksibel dan gampang di override

35:20ya masih gak apa-apalah

35:22relatif gak apa-apa

35:24ketiga gak bisa keluar

35:27gak bisa keluar

35:28strap

35:29kekunci ya

35:30selamanya

35:32jadi misalnya udah pakai

35:36udah pakai

35:38senca XTJS ya kalau mau ganti ke kalau mau ganti nih misalnya mau ganti ke carbon design ya selamat

35:48aja selamat berjuang riwet semuanya semuanya berarti itu kayak invest waktu yang besar juga

35:57jadi kan tadi balik ke pronya kita pilih kita ambil yuai library untuk menghemat waktu tapi

36:04itu juga sebetulnya di sisi lain menyita waktu ya kan karena kita habis itu maksudnya untuk itu kita

36:11bikin hal-hal lainnya kedepannya kan bergantung itu. Evolusi sebuah produk kan ada. Iya maksudnya gini evolusi sebuah produk kan ada jadi

36:19dan satu-satu saat produk itu bisa terjadi yang namanya rebranding atau redesign. Nah kalau sudah

36:27desain atau di branding terjadi dan ternyata komponen library-nya tidak bisa dia terpaksa

36:35semuanya harus di rewrite komponen-komponen itu di rewrite ulang contohnya ternyata secara

36:43desain sistemnya atau ownernya bilang ih button-nya si material design bagus deh bisa ada gelombang-gelombangnya

36:51pengen dong dibikin juga ternyata didesain si adik UI komponen abadi kita pakai enggak ada seperti itu

36:57Nah akhirnya kalau dipaksa enggak bisa masuk jelek terpaksa ya bongkar riwayat semuanya

37:06Hai tuh contohnya salah satu faktor lain gini bisa di depan kita menghemat waktu karena udah

37:11ada komponen yang udah tinggal dipakai tapi kan setiap kita bikin halaman baru kayak misal

37:16Section lah, section misalnya ada blog post, ya itu kan terdiri dari card, terdiri dari button, terdiri dari macam-macam bagian lah.

37:25Ada alertnya, itu kan sebenarnya makin lama, makin banyak isinya setelah beberapa bulan, setelah sekian tahun lah misalnya.

37:34Kan jadi banyak banget. Nah itu cost buat ngubah semua kan jadi itu numpuk banget.

37:40jadi di awal menghemat waktu

37:41tapi makin lama waktu berjalan

37:43kayak itu makin

37:45makin kekunci kita dengan

37:48si UI komponen library

37:50itu kan

37:50kalau udah terangkat

37:54dibikin

37:54kelemahan berikutnya

37:57aplikasi atau website

38:00kita jadi pasaran

38:01desainnya mirip-mirip dengan

38:05berbeda warna

38:07dulu ingat banget kan waktu

38:09beberapa tahun yang lalu

38:12kerja di startup baru mau launching

38:15kita bikin landing page

38:16beli dari tim forest

38:17besoknya ada yang launching

38:21juga dengan

38:22tema yang sama

38:24belinya sama

38:27di barengan

38:28itu kan zaman dulu bootstrap

38:29itu sangat ini kan

38:31bukan dipulih

38:33atau sebenarnya

38:35program apa developernya

38:37Udah nih copy zip file dikasih aja

38:40Pakai aja

38:41Ya pokoknya antara beli

38:44Atau ambil di tema

38:45Tema

38:47Website

38:48Yang gratis atau yang berbayar

38:51Minjam teman

38:53Habis itu Implementasi Headline nya beda Tulisan copywriting beda tapi ternyata button sama Bahkan ketika sebuah website bootstrap meskipun warnanya berbeda tetap aja feelnya sama

39:11Ya kan bentuknya sama, cuma kayak skin-nya aja beda skin-nya.

39:17Itulah yang terjadi, yang kayaknya mungkin sekarang udah lebih banyak opsi,

39:22Tapi yang terjadi kalau misalkan teman-teman menggunakan Tailwind UI

39:27Apalagi kan di Kopas

39:28Yang ori, maksudnya tanpa di custom

39:31Itu kan jadi kalau dari hasil Kopas dari web gitu yang dicontohkan

39:37Ya udah, sebegitu aja

39:38Jadi semuanya mirip-mirip

39:40Oh warnanya jangan warna ini deh, warna zinc 100 gitu

39:44Ya udah, tapi kan bentuknya mirip kan

39:47Tetap sama gitu

39:48Itu yang membuat

39:49Wah ini nggak profesional banget

39:52kok apa istilahnya enggak ada jiwanya ini aplikasi webnya cuman kopas dari telwin atau telwin UI atau

39:59daisy atau yang lain gitu dan kita karena kita developer ya maksudnya kita bukan fokus di orang

40:05UI UX kita nggak sadar kayak buat kita lah nggak papa accessibility kontras maksudnya apa kontras

40:11warnanya lolos-lolos aja ke semua chat yang maksudnya link ada warnanya ya warna standar

40:17laluin lah blue text dash blue dash 500 lah bagus apa salahnya kita kan nggak sadar ya cuma

40:25kalau misalnya produk kita udah terutama ya kalau buat baru prototipe banget kan ya nggak

40:32apa-apa ya sebenarnya tidak masalah tapi kalau misalnya udah di launching untuk publik kan ada

40:36pertimbangan lain di luar pertimbangan teknis nah cuma kalau misalnya produk kita udah sampai

40:41salah itu ya Gimanapun waktunya ambil expertise orang yuai sih maksudnya kita berarti pertimbangan

40:50pilih UI komponen library dari awal yang harus bisa di cukup fleksibel buat dimodif nah ini

40:57mungkin bedanya evolusi dari zaman bootstrap sampai zaman tailwind kalau zaman tailwind

41:02itu kelebihannya kalau menurutku sih jauh lebih gampang di-customize ya maksudnya kalau mau

41:08yang unik dan punya karakter punya jiwa blablabla masih bisa bisa tapi harus ada expertise orang

41:15yukainya cuma mau saya karena itu beneran apa token utility utility nya konfigurasinya tuh

41:23detail banget jadi semua tuh bisa diubah dan di-customize sebagai semakin detail semakin

41:31tinggi learning curve-nya, semakin mudah dikustomisasi.

41:35Semakin banyak kustomisasinya,

41:38semakin tinggi learning curve-nya,

41:41semakin berat aplikasinya.

41:44Ya tadi kan Ivan bilang produk itu kan ada evolusinya kan.

41:47Mulai dari MVP, kemudian first iteration, second iteration, blablabla.

41:52Makanya unicorn-unicorn kayak Gojic akhirnya menerbitkan

41:57desain sistem sendiri kan. Grab juga sama.

41:59Itu semua.

42:00Kalau di luar ada Uber.

42:01Uber bikin, IBM bikin.

42:03Bisa jadi coba pikirkan kayak di akuisisi.

42:07Di akuisisi sama grup company, mother company-nya.

42:10Tentu design system-nya harus ikut.

42:13Harus sama dong.

42:14Sama kan? Jadi itu kan merombak.

42:18Atau malah akuisisi yang punya design system.

42:22Itu kan kasusnya work OS itu loh.

42:25Radix UI kan dulunya pure open source-nya.

42:28individu mau saya apa apa projek pure open source work apa work OS itu sebegini kurang tahu sih

42:38produk inti mereka apa ya pokoknya mereka parent company jadi mereka akuisisi sana-sini lah kayak

42:43butuh out system ngambil nyaplok project open source yang emang spesifik spesialisasinya di

42:51out nah kelihatannya kasusnya work OS mengakuisisi radix ini kelihatan mereka butuh yaitu butuh

42:58konsisten sistem yang konsisten streamline ya Mas yang yang emang fokus disitu mereka acquire radix

43:05UI deh ngomongin radix ini ya ngomongin radix saya punya pertanyaan ada kan istilah akhir listrik headless UI itu maksudnya apa ya Itu yang kelihatannya gak tau loh nanti serba gue buka aja Ada ada sering denger sih

43:26Radix apa Asyad CN itu ya yang Headless UI

43:29Tailwind juga punya Headless UI?

43:33Nah kelihatannya nih, tebakan sekilas

43:35Unstyled UI Component Library

43:38Jadi sebetulnya ada basic styling

43:42stylingnya cuma yang kita bahas tadi itu kan ribet ya berat kalau misalnya opinionated banget

43:48stylingnya dan belum tentu semua bisa di-override ini sebaliknya jadi filosofinya adalah sangat

43:55mudah dan emang kita expected men-styling sendiri kita bawa styling kita ke komponen

44:01jadi antara UI library dengan utility antara telwin dengan telwin UI di tengah-tengahnya

44:13ada headless UI bener nggak jadi salah ya jadi tetap ngasih komponen pikirin

44:21pikirnya adalah komponen tapi melistel pikirnya kayak itu yang dari si Martin

44:29Fowler ada linknya dari Martin Fowler buka-buka pikirin kayak eh

44:36Hai apa tadi ya apa yang sudah UI komponen pikir kayak and design tetapi enggak ada style ya basic

44:47ada untuk supaya supaya bentuknya gimana tetapi kayak gede-gede nyala kosong ya kosong cos plane

44:55itu headless UI yang di ini a completely and style full tapi fully accessible UI component

45:06library decide to integrate beautiful with tailwind siap what blacklist ini kan produknya

45:15Halloween leps kan ya Iya kalau pilih apa yang lain ada react area dari table eh bukan ya re area

45:23yang ini yang sisibel juga ya mungkin approachnya Masai apa cara pikir headless nya itu headless

45:30disini kan kan tadi pertanyaan headless itu maksudnya apa yaitu maksudnya relatif mudah

45:36distyling jadi Masai ini kan biasa developer kan bikin solusi ternyata ngerak kena masalah dari

45:44solusi itu bikin solusi baru untuk mengatasi masalah yang muncul dari solusi sebelumnya

45:49ini kayaknya kasus kayak gitu jadi UI komponen library yang generasi dulu kan yaitu kelebihannya

45:56gampang dipakai cuma sulit di customize stylingnya terutama kalau misalnya kita punya desainer yang

46:03punya karakter sendiri dan itu emang penting kan buat biar produk kita punya karakter lah punya

46:09apa karakter brand sendiri Nah dari masalah itu muncul ya gini ini yang generasi UI komponen

46:16library baru dan ini emang gampang banget di stylingnya apa kayak openprox gitu ya openprox

46:23pernah tahu kan Oh kalau open beda openprox itu utility utility dia yang bikin ini kayak

46:33Iya, satu level sama Tailwind. Uno, Tailwind, dan teman-temannya.

46:38Itu yang Adam Erjel buat itu kan ya?

46:41Iya, Open Props. Radix termasuk Headless juga.

46:45Enggak tahu sih, maksudnya apa istilah Headless-nya kurang…

46:51Low level kali ya, low level ya.

46:53Low level UI Component Library. Nah, yang menarik di sini itu fokusnya adalah accessibility customization.

47:01Jadi yang kayak contoh aku di awal tadi, kan buat buka model itu kan, bikin model dialog itu kan yang ribet adalah salah satunya ngatur kayak perkara fokus trapping,

47:15mana yang bisa, fokusnya harus kemana, harus kemana, itu kan ada standarnya sendiri.

47:20Dan itu ribet banget kalau misalnya kita harus bikin sendiri.

47:23Nah, ini udah diurus sama si komponen library-nya.

47:27nah perkara padingnya gimana warnanya apa itu semua kita yang kita yang styling sendiri mau pakai telwin mau pakai apalah style components atau vanilla CSS atau apa bebas Oh jadi kita bisa bikin temps di atas ininya ya di atas komponen ya

47:49betul dia emang di desain menerima gaming dari parentnya kosongan ii kosongan bener-bener

47:56tepatkan bahasanya kosongan di kosongan habis bikin-bikin paletnya sendiri bikin palet bikin

48:05theme color nya terus tinggal di implement jadi mungkin lebih dari variable jadinya CSS variable

48:12ya kita tinggal ngasih CSS variablenya itu semuanya sama gitu Oh cuma kalau si Radix ini

48:19Radix UI mereka bikin kayak related cuma terpisah opsional Radix colors jadi ya itu sebenarnya itu

48:27mirip kayak telwin ya ada misalnya blue 500 blue 600 itu kan ada ikutannya Iya nah kalau kita

48:36kita kita belum punya nih kasusnya kita belum punya sistem warna sendiri pengen gampang lah

48:42pengen cepet banget pakai aja dari sini cuma kalau misalnya kita udah punya sendiri dari

48:47desainer kita Oh ya kita bisa pakai punya kita sendiri

48:52batik kayak ini dong yang kayak kita kembali tadi kayak nanya itu seksi di

49:00n-set set-set si N7 set-set si DN set-set si edit juga sebenarnya kosongan mirip-mirip

49:10Oh itu malah lebih matep itu lebih ekstrim lagi sih itu kan kodenya kita kepas sendiri komponennya

49:18Coba deh buka sebentar eh ini ada set CN.com ada yuidot set CN.com kalau set CN ini udah ada itu

49:29nama dia sexy and projectnya ya jadi ini ini tinggal pakai ke nggak bisa dibaca yang

49:42siap sekalian itu manusia itu manusia ini udah bikin unit komponen kecil-kecil ini generator

49:50kita generate habis itu kode-kode komponennya sendiri kita kopas buat jadi coba deh ya Oh itu

50:03dikasih kode kita bikin aja button komponen sendiri bikin button komponen sendiri Oh ininya

50:10maksudnya Iya itu imporin button from coba lihat lihat deh impornya dari mana dari dari

50:17itu sendiri

50:18ini dari mana?

50:24install kan? install dulu kan?

50:26iya

50:26itu kayak generator

50:29ntx blablabla

50:31jadi itu bakal nge-generate

50:32file button.tsx

50:35oh gitu

50:37oh jadi dia akan menambahkan

50:40kode di project kita

50:41bukan di node modules

50:43iya jadi dia bukan

50:45punya

50:46Iya, ada source-nya kan, ada source-nya, ada generator-nya.

50:49Tapi komponennya taruh ke tempat kita.

50:51Jadi, mungkin kalau skala, kayak bootstrap, mungkin kayak material UI yang versi lama,

50:58itu kan beneran sulit buat di-override.

51:00Nah, makin ke sini nih, makin mudah buat di-override dan customize,

51:04kayak misalnya Radix UI tadi, tapi kan tadi masih komponen,

51:08cuma komponennya di-breakdown ke banyak primitive yang lebih gampang dipindah-pindahin.

51:12Nah, kalau ini lebih ekstrim lagi, lebih ke sini lagi.

51:15jadi kayak ya udah komponennya beneran taruh

51:17berarti ini adalah tools

51:19buat kita ngebuat komponen library

51:21yang kita sendiri

51:22berdasarkan opini nya dia

51:25kan dia tetap punya opini

51:27bahwa apa yang dimaksud

51:28dengan button, sebuah button tuh harus

51:31bisa ada children nya

51:33harus bisa di klik ya tetap

51:35ada lah, tapi di taruh

51:36sudah accessible nya sudah ada

51:38opini nya sudah ada

51:40aturan main nya sudah ada

51:43Dan yang keren lagi, sudah pernah tau itu yang V0

51:50V0, tau kan kita udah pernah demo juga kan

51:54Iya itu pake seccdn

52:00set-sen yuk gimana bacanya coba cari mungkin ada tulisannya set-sen

52:10peron-peron penting-penting landing page for ngobrol webcube

52:21landing page for for video podcast about web technology

52:31kayaknya sudah terdiri autentik iyalah makan compute seberapa banyak itu kita poni enggak

52:44enggak connect ke sini pakai browser yang lain baru apa saya tuh udah cukup tahu lama set CN

52:52ini baru sekarang mengerti maksudnya dan bedanya apa sama sama UI library lain ya jadi ya luar

53:03biasa ya namanya program ini program ini jadi baru ngerti sekarang lu baru ngerti malam ini

53:10sebelum-sebelumnya tuh nggak ngerti apa sih set CN ini maksudnya gimana gitu karena nggak pernah

53:15pakai kan cuman lihat-lihat doang obatannya kayak gini Oh kartunya kayak gini kayaknya biasa aja

53:21ya udahlah gitu ngapain pakai pas lihat gini kan enggak enggak kalau ini ada at science

53:26les kirain dia akan Iya Iya kirain tadinya ini dari dari not modul segitu makanya nggak nyadar

53:37coba lagi jadi menghilangkan masalah mikir overwrite apa gimana caranya misal kita mau

53:44udah cuma card description nya doang nih karena beneran gak sesuai sama yang use case kebutuhan

53:50nah nggak usah pusing-pusing kodenya di kita ya udah mau dibongkar mau diganti mau dikustomize

53:55tiap lain bebas nah ini baru mengerti malam ini jadi ya mantap mantap mantap oke kita coba ya stop

54:03screen screen lagi Oh kok jadi bertiga begini nah share screen Windows V0 ini udah login belum ya

54:14kayaknya sih belum sudah tuh ada fotonya Oh sudah Oh iya udah dibikinin juga lagi dibikinin kayaknya

54:26sih set sing-in nya itu direkrut semua versi oleh kalau nggak salah gosip gitu gosip web gosip gosip

54:35web ngetik atau cuma inggo doang you are in kiwi kamu gratisan jangan minta yang jangan minta cepet

54:46official wuih wuih wuih tuh kan jumbo tron kan jumbo tron kan ini kan ini

54:57selwin sekali ya itu ketelwin-telwinan Wuih letes episode ini juga loh keren

55:07deh kita bikin aja beneran episode kita kita beneran ngoding bareng sejam gitu

55:13ada ada sidebar nya gitu floating bar nya gitu popular category

55:24weh sudah selesai ya?

55:28udah ada tiga opsi lagi itu ada tiga opsi di bawah

55:33opsi kedua Oh dia generate lagi ya?

55:37Iya meet the host weh Jeng lu is a season developer yang ketiga Oh yang ketiga kayaknya

55:48ini apa nih gambar kali ya gambarnya ya gambar Wah ini sederhana tapi bagus-bagus ya yang kedua

55:56bagus ya lebih cakep ya Iya ya coba kode apa hasil kodenya kalau code kode kanan atas next.js

56:04pasti ya Iya nggak ini ini ya oh iya itu

56:11yes nah mungkin karena langsung nih modular dan dan primitif kayak dipotong jadi basic gampang diintegrate buat generator kayak gini ya

56:30Si chat CNUI-nya.

56:32Aku menangis melihat ini panjang sekali.

56:36ini apa ya link Oling yang ini ya kali ya subscribe dibawah ini watch latest episode

56:46watch latest episode aja yang putih begini panjangnya begini ya tapi kan ada yang ada

56:53yang apa yang untuk mobile gitu ya udah iya udah bisa dark mode juga ada dark mode coba caranya

57:04mana itu yang di atas ya itu tutupin ya ini coba klik enggak konten Oh bisa dikustomize fontnya

57:14juga ya Iya Oh gitu Libri Franklin pakai Jetson pasti nggak cocok udah cocok tadi ada lobster

57:25Gak ada. Gak ada.

57:28Lora.

57:30Gak. Tetap Libre.

57:31Udah paling bagus.

57:33Paling cocok, bukan paling bagus.

57:36Eh, ada pastinya.

57:37Gak ada. Star.

57:39Flag. Oh, ini

57:41kalau tablet. Kalau

57:43mobile.

57:43Mobile.

57:45Ford. Ini

57:47disininya gak ada ya.

57:50Gak ada.

57:51Tapi keren ini.

57:53Eden ya.

57:55gimana dong kita?

57:59ya kan tetap butuh di-customize

58:01ya, desainer akan tergantikan

58:03developer masih aman

58:05eh, kalau kasusnya ini

58:07lebih gak aman developer sih

58:09daripada desainer

58:11kalau buat branding kan butuh desainer

58:13iya, iya

58:15untuk ada soulnya gitu ya

58:17ini mungkin buat developer aja

58:19yang enggan

58:21meng-hire designer

58:23meng-hire designer ya pakainya begini ya Oke kita balik lagi tapi hasil-hasilnya juga gitu-gitu

58:30doang jadinya Iya jadi pasaran juga kan ujung-ujungnya kan sama kita kembali ke

58:36sisa CN ini dia adalah design engineer pantesan ya engineering bisa design namanya siapa nama

58:47serius-serius sekarang bener tuh nggak dia ada nama aslinya emang saja namanya ya nggak mau

59:02ngasih nama aslinya gimana enggak ngeboyong di stalking sehat ya orangnya privacy namanya

59:12ya coba aja buka Twitternya set-ex and lagi set-ex and apalagi set-ex and itu kemarin ya

59:24Hai itu ada set-ex and the dia eh iya komponen coba klik apaan tuh

59:31apa lagi sama ya ininya ini kayak ini nih apa namanya set XN is work from set CN UI working

59:44annya workingannya Kenapa di forking alasannya apa ya itu karena iya kecil dulu keterangannya

59:52nama nya pansos pansos pansos design to experimental foundation udah bikin ininya

1:00:02CLI toolnya bisa pakai komponen custom komponen registris kalau tadi kan NPX at

1:00:10set CN button buttonnya cuma dari ya tempat si set bikinan di set CN itu kan Nah kalau ini bisa pakai

1:00:19Apa? Komponen registrisnya bisa dipakai custom registris

1:00:24for personalized or public sharing of components.

1:00:28Prinsipnya sama tapi kayak source apa sumber registri yang dipakai buat kodenya bisa di Iya Saya masih mencari nih seksiannya ngobrolin web itu yang di tadi

1:00:46V0 tadi

1:00:47emang ada

1:00:51tulisan ngobrolin web?

1:00:53enggak, ya maksudnya diganti

1:00:54aja nama seksiannya

1:00:56oh kirain dia udah bisa

1:00:58nebak bahwa saya mau bikin

1:01:00landing page untuk ngobrolin web

1:01:02belum secanggih itu

1:01:04sekali kalau bisa begitu enggak ya oke oke balik-balik set XN Oh enggak kita tadi mau

1:01:11cari namanya ya ya udahlah lupakan lah ya stoking namanya masli set CN iya oke oke

1:01:20next apalagi ini kita bahas apa lagi apa ya yuk komponen library yang favorit atau

1:01:28sudah bahas lainnya Oh ya mantin mantin mantin mantin mantin sama Cakra itu yang cakong Cakra

1:01:36mantin dan Cakra itu dari segi apa filosofi pendekatan sih enggak semodern reddix dan

1:01:43chat CN ya cuma apa ya lumayanlah aksesibel nya udah lumayan oke customisable nya stylingnya juga

1:01:51Oh udah lumayan oke juga banyak yang pakai dan banyak-banyak contohnya kalau Cakra Cakra sama

1:02:00mantin itu kalau nggak tahu kalau opini ku pribadi adalah secara estetik tuh kayak lebih Polish aja

1:02:07sih modern maksudnya apa kalau Bu kalau bootstrap kan stylenya kayak ketahuan agak-agak kuno lah

1:02:16agak audit ya dari segi tren kalau bootstrap tampilannya Nah kalau si cakra sama Martin

1:02:22nih ya lebih modern lah cakra pada bahasa krayu itu Iya cakra bukan cakrak atlas momen

1:02:31cakra UI ini khusus react ya Iya sih nggak tahu kalau ada for communication

1:02:41Oh inget kontennya sih tentang ada view tentang cakra Oh ada di sini apa tuh Anda sih bikin

1:02:53Panda juga kan nih cakra yuifu Oh berarti udah ada itu katanya aslinya designer jadi makanya

1:03:04itu tadi kenapa estetikanya secara yuk ayo mungkin lebih polish jadi dulunya aslinya dia

1:03:10UI designer bukan developer cuma nggak inget kenapa lah mau saya pengen bikin apa ya kalau

1:03:18developer bikin developer yang asli bikin kan kadang set of desainnya rada fales ya nah terus

1:03:23sih yang bikin cakra UI ini pengen mewujudkan ya kayak visinya dia jadi dengan apa ya sensibility

1:03:32nya dia sebagai UI designer tapi dia pengen wujudin ya dalam bentuk apa komponen library

1:03:38buat akhirnya belajar-belajar sendiri jadi developer belajar sendiri dan bikin ini wow

1:03:47OOT ini pakai dokusaurus itu ada ada apa namanya ada itu apa utang kita mau bahas dokumentasi kan

1:04:02itu juga komponen abadi enggak sih atau framework ya untuk dokumen website dokumentasi yaitu menarik

1:04:16tuh Astro juga bikin kan namanya Starlight Starlight Iya enggak ada Yes Chakra Wah menarik

1:04:28background story-nya ini yang sempat ada ada drama sama telwin bukannya yang saling mengkopi-kopi

1:04:36Iya gitu baru tahu kalau nggak salah jadi antara cakra apa ya pokoknya yang ini kan dia bikin

1:04:44panda kan Nah itu ya kalau salah ada entah siapa yang mengkopi copyright siapa copyright

1:04:50Maksudnya tulisan yang di landing page siapa itu saya nggak tahu pasti tapi sempat ada percakapan di Twitter ya Biasalah ya ngajak perang itu yang ngasih tunjuk bahwa Tailwind sempat mencatut misalkan kayak gini nih dicatut sama Tailwind di dokumentasinya atau di mana gitu

1:05:07Begitu juga sebaliknya.

1:05:08Kayak dikopas mentah-mentah.

1:05:11Iya.

1:05:11Oh bukan, coba di komen dulu.

1:05:13Windy ya?

1:05:13Bukan, namanya Windy.

1:05:17Namanya aja mirip.

1:05:18Saya salah ya.

1:05:19Kalau Windy CSS emang dia dari Tailwind.

1:05:21Terus juga sempat kan yang bikin siapa?

1:05:26Yang si, aduh lupa

1:05:28Yang salah satu kontributornya Vue

1:05:31Dan Nux

1:05:32Siapa tuh yang, Anfu

1:05:34Dia juga sempat

1:05:35Anfu, dia sempat ini juga kan

1:05:39Sempat bilang kalau Telwin sempat ngopi tulisan yang ada di dokumentasinya

1:05:44Dekopas mentah-mentah dan ketahuan

1:05:48Oh Uno CSS

1:05:49seru ya tidak hari tanpa drama sayangnya udah ngeri terang sekarang ada ini aja apa namanya

1:06:01yang baru ngetrend kemarin jurnal aja di copy dimasukin cgpt terus di di publish jurnalnya

1:06:08Jurnal?

1:06:10Sekarang banyak. Jadi kalau ngomongin AI ChatGPT, banyak sekarang orang-orang memanfaatkan buku.

1:06:21Jadi dia menghasilkan buku.

1:06:23Summary?

1:06:25Bukan summary, buku. Jadi si ChatGPT-nya suruh bikin buku.

1:06:29Tolong bikin buku tentang mindfulness. Bikinlah banyak.

1:06:33satu banyak habis itu dia mencatut nama autor-autor yang lain yang udah terkenal jadi di apa ya di

1:06:40jebak kego surat terhubung kita Iya kita ini di jebak Oh ini yang yang apa yang bikin buku ternyata

1:06:47Ivan nih gua kenal Ivan beliah ternyata bukan ternyata itu hasil generasi dari AI Wah itu

1:06:54marah banget itu salahnya berarti dua macam kan Masai itu bikin apa jualan yang buka hasil

1:07:01generate GPT dan kedua impersonation kan mau saya ngaku betul mengataskan si pengarangnya

1:07:08padahal bukan itu dia betul-betul jadi dua dan kan sekarang apa istilahnya udah lebih

1:07:15demokrasikan Jadi kalau kita mau publish buku kita bisa taruh di Amazon yang ibook gitulah

1:07:22ibu kita bisa publish di Amazon kita bisa tulis siapa aja kan misalkan kita sampai

1:07:27apa penulis internal siapa ya misalkan Adi Osmani gitu tahunnya bukunya bahasa Indonesia

1:07:33kita daftar sebagai Adi Osmani emang enggak ada verifikasinya sama sekali ya berarti misalnya

1:07:42tiba-tiba ada yang bikin cara beternak lele gitu terus atas nama Risa Fahmi gitu dan wajahnya

1:07:49ya jangan-jangan ya

1:07:50ya berarti kita

1:07:53semua harus sering ngecek

1:07:55nama kita sendiri gitu ya di platform

1:07:58kalau terkenal

1:08:00kalau gak terkenal ya mungkin gak ada yang

1:08:02mau mencetak juga karena

1:08:03kalau pasti saya bikin buku ternak lele

1:08:05dengan menggunakan eleksi

1:08:07IoT

1:08:07nah balik ke web

1:08:16biar gak keterusan ngobrolin

1:08:18ternak lele

1:08:18ini wih ada adek-adek ini nih menarik opencakrab.com buka deh tadi kayaknya di komen

1:08:26ada yang bilang pusing nih pengen pengen drag and drop tadi kan ada yang komen

1:08:31kalau sambil di up ada yang berhenti enggak luanya telwin juga ada yang drag and drop

1:08:36udah mulai banyak kan ya Nah ini ada yang bikin buat drag and drop based on caprayu

1:08:43gimana cara pakainya ya di drag and drop dari kiri itu yang yang ada alert gitu Oh ya

1:08:54ini dulu kontainer dulu kontainer kontainer kontainer dulu kan baru

1:09:06sebelahnya mau ada button lagi ini bisa di LG bisa di

1:09:20reverse ini CSS di CSS di di ini di sidebar in bingung ya color wuih Oh ini color ya bukan

1:09:41background color maksudnya ini background nah itu udah tuh saya background cuma ini

1:09:47cool sih buat orang yang bukan developer ya mau saya apa mau bikin proof of concept atau apalah

1:09:53atau bikin wireframe atau bikin apa cuma kebetulan aja pakainya cakra UI Oh dia bisa

1:10:03mau pakai JSX JSX JSX

1:10:11wow bagus ya eh apa yuk se-developer experience when you

1:10:21the XO user-nya adalah developer the X

1:10:28devs disini kita sebagai user produknya Open Chakra color Twitter 500 jelek Oh dia mau

1:10:40mewarnai ini tadi adalah problem saya ya Jadi kalau kalau apa biasanya kan kalau apa UI

1:10:49library itu kan keren-keren ya apalagi ada contohnya gitu kan entah kenapa setiap saya pakai

1:10:55yang dibayangkan keren banget begitu digabungin jadi biasa aja kok jadi aneh ya kok jadi lebih

1:11:02jelek daripada contoh ya itu sering terjadi kalau ngelihat di sini bagus karena dia yang bikin juga

1:11:10developer problem developer ya standar ya kalau pengen bikin kan dia jadi dia tahu caranya kan

1:11:17kalau pengen yang lebih fleshy harus yang pilih yang opinionated eh itu fungsinya DCU ID kalau

1:11:27aku masalah itu baru terpecahkan mau saya pengen yang ya misalnya pengen quick prototyping ya cuma

1:11:33pengen yang kalau orang lihat Wow bagus ya pengen pengen kayak gitu pokoknya tujuan-tujuannya

1:11:38termasuk itu Wow bagus ya itu pakai DC UI cuma ya opinionated kayak apa tapi gampang cukup gampang

1:11:48di overwrite kok cuma karena ini based on tailwind ya apa ekspektasinya adalah harus pakai tailwind

1:11:56akan lebih repot overwrite nya kalau kita enggak pakai tailwind cuma mau saya apa eh dari tingkat

1:12:03apa ya flashiness polish dan flashiness yang orang lihat Oh bagus ya ya ya ini keren ini keren dan

1:12:14kita bisa nambahin telwin juga tetap ya walaupun jadi dia itu ke konflik telwin jadi enggak enggak

1:12:23bakal flashing Oh jadi jadi kayak jadi kayak plugin gitu ya seolah-olah ya ya literally plugin

1:12:30win-win itu sebagai plugin Halloween tapi nggak butuh JavaScript kan ya bisa dipakai semua framework

1:12:38dong ya bisa bisa kalau mau oke mantap-mantap Oh ini keren kalau mau teman-teman mau main-main

1:12:48terus butuh chatbot ya bisa langsung pakai ini aja udah ada warna udah ada kiri-kanan ya kan

1:12:56tinggal pikirin yang ininya kontainernya gimana mau sebesar apa atau sekecil apa ini nih pamer

1:13:04project pribadi kemarin pas apa Gemini Gemini sprint itu loh nah keren punya satu demo demo

1:13:13demo ini pakai desi iya desi lumayan enak dilihatkan dan itu beneran apa yuk ayo

1:13:26last-minute kayak beneran cuma satu jam lah buatnya karena yang berhenti kan

1:13:32sebesar panjang weekend Jumat Sabtu Minggu ya apa diseling makan Jumat malam Sabtu seharian diseling makan diseling dan lain Minggu juga seharian tapi kan sebenarnya waktunya kepaka bikin ya bikin aplikasinya dan bikin apa Gemini

1:13:50interaksi Gemini enya nah pas udah terakhir-terakhir nih udah last minute udah injuri time pengen-pengen

1:13:59terusin yukannya itu pakai DC coba at your own at your own at your own dong at your own apa

1:14:09fine fine soulmate Coba coba coba ketik siapa tahu finding soulmate finding soulmate finding

1:14:19coba get diagram diagram bisa bisa nggak ah terlalu save ini Gemini nya bisa bahasa

1:14:35Indonesia enggak eh eh ininya hilang at your own harus refresh ya Oh iya cari jodoh cari jodoh

1:14:45Oke, kita...

1:14:48Gak bisa.

1:14:50Ah, dia gak bisa.

1:14:52Jangan-jangan gak bisa semua, jangan-jangan error nih.

1:14:55Jangan-jangan ya.

1:14:56Create website.

1:14:58Create

1:14:58how

1:15:01state

1:15:03works.

1:15:06State lagi.

1:15:08React.

1:15:10US. Use state.

1:15:13Coba.

1:15:14Oke ini udah niche gemini Wah ada nih create website bisa sih create website relatif normal sih

1:15:29Hai get coba apa create website create website Oke how to create website create website aja website

1:15:39website

1:15:40wuih

1:15:47nah itu

1:15:48relatif normal lah, cuma finding

1:15:50solomate kok dia gak bisa ya

1:15:52Jim ini API nya open kah?

1:15:57sekarang

1:15:58premium, jadi ada batasan

1:16:00query per hari ya

1:16:03teman-teman bisa

1:16:04cek di AI studio

1:16:06bisa

1:16:08bisa dapetin key apa akses kisama secret di sana Oh cuma mulai mulai 2 Mei besok itu harus

1:16:20disambungin ke Google Cloud Project Cloud Iya nah itu sebetulnya sih Oh ya udah harus ya Google

1:16:28Cloud itu kan ada free credit nya ya maksudnya ada kriteria nah udah cuma mau saya apa masuk

1:16:35limitnya itu jadi kalau buat nyoba ya bisa gratis cuma kalau udah banyak pakai nggak bisa nah soul

1:16:42bisa coba di refresh soulmate doang tapi soulmate gimana diagramnya

1:16:53gampang banget teori gampang ya betul sih tapi kayak gitu enggak usah pakai nanya eh

1:17:10ya itu mau saya apa biar kelihatan polish dan ya apa acceptable lah secara sense of

1:17:21nggak Fals Fals banget ini membantu buat DC UI akordeonnya juga dari DC coba deh learn more

1:17:27klik learn more learn ah tep apa kanan-kanan kanan-kanan atas kanan atas atas ini bawahnya

1:17:37akan akordeon Nah itu beneran apa no effort beneran drop apa tinggal pakai apa dari DC

1:17:44Idol so it's good day and how to find yours ada itunya instruksinya tuh the science of

1:17:52soulmates itu kalau mulia sesuatu yang kompleks webpaste betul Oke details mitokondria ya coba masukin di itu ya tadi

1:18:05404 nah masalahnya jika menanggung ini suka halus kalau suruh ngasih apa link

1:18:13resource yang eksternal kadang-kadang ketutup ya diagram-diagram blablabla

1:18:19diagramify

1:18:23oh ini ada nih

1:18:24baik aja

1:18:25nah

1:18:27gitu

1:18:28details

1:18:31gak bisa di zoom ya

1:18:42gak bisa

1:18:43fiturnya belum nyampe situ

1:18:45kita segitiga mungkin akan rumit ya kita segitiga bisa bisa love triangle

1:18:56segitiga doang nanti hasilnya anyway ini udah kemana-mana loh topiknya

1:19:05buat apa Valeria yang penasaran sama Jim ini ada apa ada tutorialnya saya bikin

1:19:15tutorial tertulisnya Jadi kalau mau cek bisa juga punya ininya demo-demo saya pribadinya silahkan

1:19:23silahkan ah di mendang mending mending nah ini bedanya bedanya Eka sama saya kalau saya buatnya

1:19:33pakai Vanilla CSS kalau developer bikin enggak pakai ui library jadinya begini Nah kalau jadi

1:19:42ini lebih parah malah jadi begini ya kan itu terima kasih DC UI ini

1:19:53semuanya Vanilla enggak ada pakai framework kasih tantangan buat penonton for ini terus

1:20:01bikin pakai UI component lebih jadi keren terus puri kalau buat orang yang punya skillnya ya

1:20:08kan nggak perlu framework apa-apa sih di fix dari CSS sudah bisa nah cuma masalahnya kita fokusnya

1:20:14bukan expertise utamanya kan bukan di UI design ya bukan di visual UI ya Nah ini kan ini saya

1:20:27pakainya server create server enggak pakai Express rootingnya begini pakai iflo enggak perlu cuma

1:20:37cuma halaman berapa komentar mau bisa belakang enggak pakai routing macem-macem juga routingnya

1:20:45enggak banyak betul-betul rotenya sedikit jadi enggak pakai framework cuma perlu form aja cuma

1:20:52perlu target formnya jangan saya kopasnya dari Happy Hughes kita bikin buku ini udah templatenya

1:21:01Nah saya ngambil desainnya dari sini nih tuh kelihatan kan mirip kan cuman diganti ini aja

1:21:10kalau salah ini ini nah ini nih dari sini ngambil ininya doang iya ngambil ininya doang warna-warnanya

1:21:17ya habis itu di convert ke CSS cuma ini pet peeve sih kalau kita lihat contoh gini kayaknya wow

1:21:26bagus dan profesional pas kita bikin sendiri jadi jadinya mendang-mending tadi coba bandingkan

1:21:33bandingkan dari contoh coba sampai ini mending DC UI atau Vanilla CSS apa nih CSS framework

1:21:46atau library Oh di aplikasi Oh iya lupa mending apa tadi desain

1:21:57atau desi UI ini ngeri error sih

1:22:07lebih cepat dan mudah digunakan menyediakan banyak komponen yang sudah jadi konsisten dan terdokumentasi mendukung mode gelap lalu bisa mode gelap cuma bikin sendiri bikin sendiri jadi lambat Oke ada lagi mau dibahas

1:22:30ini udah terlalu jauh kita dan waktunya juga sudah terlalu jauh kemana-mana itu aja ya

1:22:40chat CN ada kalau untuk spell spell kit ada yang namanya skeleton skeleton.tv ya ini juga cukup

1:22:47menarik buat Oh ya itu lengkap lagi ngulik-ngulik apa namanya ngulik-ngulik spelt kok spelt ini

1:22:54jarang banget ya ada yuai library nya kan pengen deh chat CN ada atau mantin atau tadi chat-chat

1:23:03emang itu agnostik energi-energi ya Sorry gimana bisa pake wind chakra yang ada di

1:23:12reaktornya itu reaksenter Iya kalau gue sih selama Pak kalau lagi pakai suatu andal-andalanya

1:23:19yaitu kalau kebetulan pakai telwin ya antara telwin UI atau DC UI desain itu karbon karbon

1:23:28Oke.

1:23:29Karbon adalah solusi.

1:23:30Udah cukup banget.

1:23:32Satu lagi, ada yang menarik selain Open UI.

1:23:35Kita bahas Open UI dulu kali ya.

1:23:37Terakhir ya.

1:23:37Dua terakhir.

1:23:39Open UI.

1:23:40Teman-teman ada yang tahu Open UI?

1:23:43Ini dia.

1:23:44Open UI adalah inisiatif baru ya.

1:23:47Itu sih bre, W3C Community Group.

1:23:50Yang mendiskusikan UI komponen apa sih.

1:23:54Kayak mereka tuh memetakan.

1:23:55Kan tadi kita banyak banget tuh bahas UI komponen library.

1:23:58dari semua pasti punya button ada yang punya jumbo tron ada yang punya apa alert ada pasti

1:24:06semua punya kartu terus ada yang punya itu tadi yang Ivan bilang select apa textbox drop down

1:24:12Open UI ini adalah komunitas komunitas di bawah W3C yang memetakan macam-macam pengguna kayak

1:24:25Jadi mereka menganalisa macam-macam desain sistem yang terkenal, terus yaitu memetakan komponen apa sih yang paling banyak dipakai dan dibutuhkan user, contoh-contoh penggunaannya, gimana concernnya, apa.

1:24:38Ini undesign semua?

1:24:42Im-o-ndesign.

1:24:44At-fascid, oh iya beda-beda.

1:24:46beda nah karena mereka komunitas w3c ada kemungkinan misalnya kalau misalnya banyak

1:24:53dipakai nih kedepannya bakal dipropos buat jadi web komponen misalnya atau minimal jadi

1:25:02inspirasi jadi referensi misalnya ya kayak dialog model itu kan sekarang udah ada di

1:25:08browser ya dibikin native web API Nah itu kan inspirasinya dari pola-pola yang ada di UI

1:25:17komponen library yang sudah ada sebelumnya nah ini bisa jadi referensi sih dan sebenarnya seru

1:25:24aja sih kalau kita lagi lupa namanya apa cari aja di situ Oh ya contoh-contoh ini ya contoh-contoh

1:25:31UI yang sering digunakan yang kebayang pengen bikin gini kita atau kita pengen nunjukin orang

1:25:36jadi kayak repository ya kali ya

1:25:39koleksi

1:25:41koleksi

1:25:43oke menarik menarik

1:25:45ngomongin web component mungkin kalau

1:25:47menurut saya justru web component ini

1:25:50cocok sekali dibikin untuk

1:25:51component library supaya

1:25:53bisa dipakai di semua framework

1:25:55ada

1:25:56salah satunya adalah shoelace

1:25:59shoelace ini sekarang

1:26:01dia berubah menjadi namanya web awesome

1:26:03web awesome adalah

1:26:06dari tim phone awesome

1:26:07mereka bikin framework baru

1:26:10web awesome

1:26:13bukan framework, UI library baru

1:26:16jadi kayak bikinnya pakai

1:26:18web komponen seperti ini

1:26:19button, card

1:26:22ada alert, pages

1:26:25dan lain-lain

1:26:26hasilnya jadi

1:26:30shadow domka atau

1:26:32hasilnya tinggal kita pakai

1:26:35Nah, kayak gini aja. Iya, jadi sederom.

1:26:40Iya kayak nggak tahu ya kalau dia bilang turunannya shoeless ya kita lihat shoelessnya

1:26:46Ya web component sih

1:26:48Style ya

1:26:48Shadow dub

1:26:49Web component sih kayaknya

1:26:50Shoeless with style

1:26:51Oh itu

1:26:54Hasilnya apa?

1:26:56Nah cuma kalau web component itu agak males di stylingnya sih kan apa kalau nggak dibuka nggak bisa di styling dari luar

1:27:06Oh iya

1:27:07Gak tau ya, gak tau kalau ini udah punya mekanisme sendiri, cuma gak bisa di-override, ditumpuk segampang itu kan stylenya.

1:27:16Kalau udah ngomongin browser berarti ya web component jadinya jadi Shadow DOM.

1:27:22Kalau jadi HTML gak mungkin dia nampilin ini kan ya.

1:27:28Nah ini, ini dia baru buka Kickstarter.

1:27:31Oh jadi belum ada produknya belum selesai belum baru coming soon kayaknya tapi ada yang free ada

1:27:39yang free tenang aja tenang aja seperti biasa ya tapi kickstarternya udah selesai udah selesai

1:27:45udah selesai udah udah jauh banget tercapai terus ntar drama lagi orangnya kabur atau apa pecah perpecahan Ayo perpecahan

1:28:01Oke nah udah cukup cukup ya cukup panjang lebar Oke banyak nih tadi ada masukan dari watasi

1:28:12watashi wa watashi

1:28:15bahas deno, kita udah sempat bahas

1:28:18belum ya, udah kan ya

1:28:19sedikit-sedikit sih ya, gak detail

1:28:21kita bahas

1:28:22node, deno, sama

1:28:25boon kan

1:28:27javascript engine, gak salah ya

1:28:29javascript runtime

1:28:31tapi gak bahas deno

1:28:33secara spesifik

1:28:35karena kita belum ada yang pake deno

1:28:37jadi kita gak tau juga ekosistemnya ya

1:28:39mungkin kalau ada

1:28:41ada teman-teman ada yang pakai deno atau pakai deno boleh ya kita interview kita ajak ngobrol

1:28:48kita ajak ngobrol karena kita penasaran juga sama denonya ini terutama kalau di production

1:28:54ya kalau mau saya kalau cuma buat Hello world Maya ya udah ya udah apa as expected tapi maksudnya

1:29:01lebih ke kalau udah diranah praktek kan kayak suka ada hal yang Oh ternyata nggak bisa ini perlu gini atau mungkin ada behavior yang beda yang ngusai yang perlu kita tahu nah pengen penasaran sama itu sih ya pengalaman pangan

1:29:20ingat Deno jadi ingat baru apa sih Ryan dalnya baru launching produk baru bikin lagi GSR buka

1:29:29menemani npm menemani npm dalam tanda kutip jadi kompetitor meet for typescript nism karena kan

1:29:43kalau npm kan ada apa ada macam-macam yang nyampur-nyampur ya ada yes em ada apa tergantung

1:29:52kalau ini dia spesifik buat di SM dan typescript jadi enggak ada lagi itu ya yang apa bandler bandler

1:30:06biasa Iya tapi dia tetap ngambilnya dari npm enggak apa namanya bukan cuma dipakai entry

1:30:15yang ya apapun itulah si typescript typescript nya siapin internet kencang internet kencang buat apa oke mungkin untuk malam ini

1:30:34sekian dulu sebelum kita makan kantor

1:30:36kita ketemu lagi

1:30:38minggu depan di topik-topik yang berbeda

1:30:40jangan lupa kalau teman-teman punya

1:30:42saran topik bisa ke

1:30:44kesanain.ngobrolinweb

1:30:46tadi ada yang menyarankan

1:30:49bahas deno, ada yang menyarankan

1:30:51bahas elixir, silahkan

1:30:52kita diskusi di sana

1:30:55kalau teman-teman punya pertanyaan

1:30:56seputar misalkan

1:30:58ini mau UI library yang mana ya

1:31:01yang keren ya kita bahas setelah acara ini

1:31:03selesai bisa di situ juga

1:31:04nggak mesti harus bahas topik ya

1:31:07bisa bahas juga misalkan

1:31:08ada library yang bagus

1:31:10yang mungkin

1:31:12bisa kita jajal

1:31:15kita coba ya bisa di suggest

1:31:17di sana oke

1:31:18untuk malam ini sekian dulu terima kasih banyak

1:31:20Buat semuanya yang sudah menemani

1:31:23Kita ngobrol-ngobrol dan belajar bareng

1:31:25Malam hari ini

1:31:25Today I learn-nya banyak sekali ya malam ini ya

1:31:28Dan lantur juga kemana-mana

1:31:31Oke ketemu lagi minggu depan

1:31:33Selamat malam

1:31:35Bye-bye