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

2:00Itu ada unsur webnya?

2:03Iya, jaring.

2:05Ada jaring ya, jaring.

2:07Badminton juga.

2:09Oh iya badminton juga bener.

2:11Oh iya lagi Thomas Cup sama Uber Cup juga ya.

2:13Kita fokusnya terlalu ke bola ya.

2:16Nggak tahu, nggak diikutin.

2:20Habis nontonnya harus di salah satu platform, kemudian harus bayar untuk platinum.

2:26Platinum.

2:28Paket yang Liga Inggris dapet ya?

2:31Dapet badminton juga nggak?

2:33Nggak.

2:35Ngomong-ngomong pada subscribe streaming apa nih teman-teman sekalian?

2:41Wah branding, jangan.

2:43Spotify biasanya.

2:46Spotify sama video doang.

2:48Spotify yang family walaupun subscribe-nya nggak sama family.

2:52Sama teman-teman.

2:54Loh kan kekeluargaan dengan printfix kekeluargaan.

2:58Kita semua kekeluarga.

3:01Banyak ya sekarang ya.

3:03Apple sama YouTube.

3:05Apple TV.

3:07YouTube.

3:09Sama Apple OneTone sudah dapet satu paket.

3:13Google One sekalian yang untuk family.

3:17Jadi dapet juga ke YouTube-nya.

3:20Oh kalau Google One tuh dapet ke YouTube juga?

3:23Kalau nggak salah sih dapet ya.

3:25Spotify dan video, flex bro.

3:29Sama persis.

3:31Kalau saya Disney Plus.

3:36Oh buat anak.

3:39Tapi ada tontonan buat apa sih?

3:41General yang buat.

3:43Kan Star Wars, Marvel dan lain-lain.

3:46Oh Marvel ya?

3:48Iya.

3:50Nah gua nggak punya tension span buat nonton film sebetulnya.

3:54Jadi nggak langganan.

3:56Terus juga ada film Indonesia sekarang.

3:58Cuma saya bisa ngasih tips nih.

4:01Ada baiknya kayak saya.

4:04Gak subscribe ke banyak kayak Disney, Netflix.

4:08Apalagi tuh video segala macem.

4:10Atau bahkan jarang nonton film di 21.

4:14Jarang.

4:16Saya jarang pergi nonton bioskop.

4:18Ada bagusnya.

4:20Jadi saat saya naik perjalanan naik pesawat yang jalan jauh.

4:22Banyak film ini saya potong.

4:24Ih ini apa?

4:26Wih ini apa?

4:28Saya bahkan belum nonton Captain Marvel.

4:30Jadi bisa nonton di pesawat, tenang-tenang.

4:34Kalau buat yang sering traveling sih.

4:37Kalau buat yang sudah sering, ya udah nonton, ya udah nonton, ya udah nonton.

4:41Iya benar juga ya.

4:44Potify biar bisa download.

4:48Didengerin naik pesawat.

4:51Atau naik kretanya, atau naik apa lah.

4:54Nah sekarang kita lanjut ke bahas

4:59semua yang video-video streaming, atau yang kayak tadi tuh.

5:04Kan itu ada UI-nya ya mereka pakai ya.

5:07Asik, nyambunginya oke ya.

5:10Ada UI-nya, ada search bar-nya.

5:13Ingat gak kalau mereka tuh punya desain kayak desain sistem gitu ya.

5:17Nah bagaimana caranya supaya konsisten.

5:21Nah itulah topik yang akan kita bahas kali ini.

5:25Yaitu dengan UI Component Library.

5:29Bagus gak nyambungnya?

5:33Bagus, bagus, ya lumayan.

5:36Masih masuk kapal.

5:39Apa itu UI Component Library?

5:43Mari kita bahas.

5:46UI Component Library adalah

5:49UI Component Library itu adalah library yang bikin pussy untuk setup.

5:54Bagi saya.

5:57Gak bentar, ini kan sebetulnya bukan istilah teknis ya.

6:01Maksudnya bukan spesifikasi.

6:03Jadi ya maksudnya ada orang bilang,

6:06nyebut itu misalnya pakai istilah lain.

6:08Ya gak masalah, UI Library atau Component Library Framework.

6:13Nah itu kan overlap dengan beberapa konsep terkait.

6:16Kayak misalnya yaitu CSS Framework, CSS Library,

6:20belum nanti desain sistem.

6:22Kalau desain sistem itu kan superset ya.

6:24Jauh lebih luas.

6:26Ya nanti kita bahas lagi aja.

6:28Cuma maksudnya ya ini kan bukan,

6:31kalau spesifikasi kan itu saklet.

6:33Maksudnya misalnya kita bilang apa ya,

6:36API, international API.

6:38Ya istilahnya harus kayak gitu.

6:40Skopnya jelas apa yang dicakup di situ.

6:44Cuma kalau UI Component Library ya,

6:46ya suka-suka lah konvensi lah.

6:49Maksudnya kita ngerti apa yang dimaksud,

6:51tapi bisa aja orang pakai istilah lain,

6:54atau punya skop yang sedikit berbeda.

6:56Nah lanjut, itu kalau menurut artikel itu apa tuh?

7:00Ini ngomongnya CTO ya.

7:04Ini backgroundnya.

7:07Terus dia ditanya apakah kita perlu menggunakan desain sistem

7:13seperti Component Library.

7:14Nah gimana tuh, biar cepet.

7:17What a Component Library is, mana dia?

7:22Nah itu dia.

7:25Nah berarti kan collection of itu yang dibulk.

7:29Atasnya, collection of remade UI elements.

7:34Sebenernya kan intinya itu,

7:36atasnya tuh paragraf sebelumnya.

7:38Yang dibulk.

7:39Ini kan one of the biggest perks.

7:42UI Library is the simplest term,

7:44is a collection of materials or component

7:46that you can readily use

7:48or modify to meet your needs.

7:50Iya kan?

7:52Component.

7:54Tapi sebenernya, definisi yang diatas juga masuk sih itu kan,

7:59collection of remade UI elements.

8:01Ya udah.

8:02Sama sih, ada collection materials juga kan.

8:04Or components.

8:06Nah bisa berupa component.

8:09Katanya kecil.

8:11Katanya kecil.

8:13Belum di-boost lagi nih suaranya.

8:16Bisa berupa component, bisa berupa material lain.

8:19Kayak utility kan.

8:20Biasa ada utility atau helper atau apalah.

8:23Misalnya buat responsive screen

8:27atau loading skeleton dan lain-lain.

8:30Kalau sekarang suara saya gimana?

8:32Sudah kekecilan atau?

8:34Nah kayaknya lebih besarnya.

8:35Better, better.

8:36Sudah ya?

8:37Terlihat moko.

8:38Mohon info ya kalau suara saya kekecilan

8:41atau Eka atau Irfan ya.

8:43Gimana tadi? Sorry, kepotong.

8:46JQuery UI berarti salah satu ya?

8:48JQuery UI.

8:49Ada emang jQuery UI?

8:51Ada, itu udah lama banget.

8:53JQuery UI itu dulu bisa dipakai untuk mobile.

8:58Mobile apps.

9:00Mobile web.

9:02JQuery UI.

9:04Di sini siapa yang lulusan UI?

9:07Lulusan teluin UI.

9:12Mana ini ya? Apa namanya?

9:17Oh iya.

9:19Hal pertama yang kalau teman-teman buka

9:21CSS library atau UI component,

9:25yang pertama dicari component apa biasanya?

9:28Yang susah dibuat.

9:30Terusnya button.

9:31Benar.

9:32Button sama card.

9:35Kalau aku ya, itu yang susah dibuat kayak drop, apa?

9:39Mega menu atau drop down atau aksi drop down yang auto populate gitu.

9:44Karena kalau yang lain kan gampang ya kopas-kopas aja.

9:47Dead beaker, man.

9:49Death beaker.

9:51Yang aneh-aneh lah.

9:53Ya kalau dead beaker kejaman dulu kan harus bikin kan.

9:56Kalau sekarang kan udah ada ya, walaupun biasa ya.

9:59Tapi udah ada, udah useable kan.

10:01Kalau sekarang kan sudah bisa bikin sendiri.

10:04Salah satu yang apa?

10:06Shadow DOM.

10:09Web component.

10:12Web component bawaan.

10:16Nah ini yang agak obsolete

10:18kalau aku sebelumnya tuh cari dialog atau model.

10:21Karena ngetes UI component library itu

10:25aksesibel atau nggak.

10:26Kan sebetulnya bikin sendiri juga bisa nih.

10:28Cuma kan agak ribet.

10:30Jadi aksesibilitas itu kan

10:32kalau 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 focus trapping.

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

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

10:54Harus trapping di dalam modelnya itu juga.

10:56Terus ada overlay-nya kan tuh.

10:59Isi halaman sisanya harus ketutup, bisa di-scrolling.

11:03Terus kalau misalnya user nge-close dialog itu

11:06fokusnya harus balik ke tempat yang tadi.

11:09Si button yang nge-trigger dialog itu, bayangin itu.

11:11Kalau misalnya ngebikin sendiri satu persatu kan

11:14ya agak cape juga ya.

11:16Jadi biasanya.

11:18Kalau UI component library, cari yang ada itu.

11:21Dan itu harus bagus.

11:23Maksudnya harus berfungsi dengan baik.

11:24Ya sama juga bohong kalau pakai UI component library.

11:27Tapi mau saya nggak berfungsi dengan baik ya.

11:29Cuma kayaknya sih buat kalau opsal ya.

11:31Karena native yang bahwa web,

11:34mau saya yang web standard juga udah mulai.

11:37- Udah ada dialog juga kan?

11:39- Dialog udah ada, model udah ada.

11:42- Kayaknya Firefox ada.

11:44Cuma mouse-nya browser lain udah ada sih atau belum.

11:47Cuma kelihatannya udah mulai widespread ya.

11:50Minimal per akhir 2023 inilah.

11:53- Coba mesti aja balik ke artikel tadi.

11:56- SetQN UI.

11:58Ya nanti kita akan bahas pelan-pelan ya nanti ya.

12:00Sabar. - Udah masuk menung.

12:02- Udah ada.

12:04- Itu ada nDesign tuh.

12:06Itu salah satu yang lama tuh.

12:08- NDesign. Ini juga dulu terkenal.

12:10- Terkenal dengan nMaterial UI.

12:13- Material UI.

12:15- Beda loh mUI sama materialized CSS atau materialized design.

12:23Itu sebenarnya kan Google Design System.

12:26- Material Design.

12:28- Design System-nya.

12:30Terus implementasinya banyak, open source-nya.

12:34- Ya dia spesifikasi kan.

12:36Material Design itu spesifikasi kan.

12:38Sama seperti Apple Design Guideline kan.

12:41Sama juga itu.

12:43Cuma kalau Apple kan dia lingkupnya lebih kecil.

12:46Makanya dia nggak, mungkin belum ada

12:49library yang pakai guideline-nya mereka.

12:54Ini nDesign.

12:56- Udah lama banget nih.

13:00- Head-to-head-nya sama material UI ya?

13:02- Iya, sama mUI.

13:04Majlis ulama Indonesia.

13:08- Dulu kayaknya namanya material UI deh.

13:11Sekarang ada rebranding ya.

13:13- Iya, material UI.

13:15Ada pricing. Apa ini? Oh ada pro-nya dia, premium.

13:19Produknya ada core, ada X, ada template, design kit.

13:23Design kit ini, buy, oke.

13:27Yang core-nya aja ya.

13:29Material UI. Ada Joy UI, bedanya apa?

13:32Open source react component, oh.

13:35- Semua react component.

13:37- Oh iya ya, react component semua ya.

13:41Ini khusus react ya?

13:43- Iya, ini material UI itu belum react.

13:47- Material UI is an open source react component library, blablabla.

13:52- Okay.

13:54Material CSS.

13:57Ada kan yang ekifalin sama bootstrap ya, material CSS.

14:02Materialize ya materialize.

14:04Ya materialize, betul.

14:06- Makanya suka bingung material design, material UI gitu.

14:10Mau yang mana gitu.

14:13- Nah tuh ada komen yang paling bawah.

14:15Jadi sebenarnya Google bikin standar, kayak apa?

14:21- Standar spesifikasi ya.

14:23- Rinsip-rinsipnya hanya material design.

14:26Nah itu maksudnya kayak token-nya kayak kalau button itu minimal berapa bentuknya.

14:33Terus behavior-nya kalau di hover itu lebih dua berapa persen.

14:38Bisa di-click dulu. Pertama kan yang nge-trend banget kan ripple ya.

14:44Ripple-nya behavior-nya kayak gimana.

14:46- Ripple effect ya.

14:48- Ternyata pas di-click kayak ada zeng-nya.

14:51Itu kan bikinnya gimana?

14:52Misalnya kalau di CSS beneran kalau pakai react.

14:54Nah dari Google nggak, nggak ketur implementasi exec-nya kayak gimana di kolonya.

15:00Nah makanya muncul banyak, ya banyak itu.

15:03Banyak library semua pakai nama material, blablabla.

15:06Bukan, bukan nggak diimplementasi.

15:09Dia implementasinya di Android.

15:11Kemudian diadaptasi ke web.

15:14Banyak orang yang, iya, banyak orang yang mengadaptasi ke web.

15:19Karena mungkin make sense juga.

15:21Sama halnya seperti yang tadi Apple design guideline.

15:25Itu kan untuk aplikasi native-nya kan buat iOS.

15:29Dan belum ada atau mungkin kita nggak tahu yang mengadoptasi ke web.

15:35Jadi yang material slice, material UI itu.

15:39- Cuma itu semua pakai nama material, maksudnya material UI itu.

15:43UI library yang menggunakan prinsip-prinsip yang diadoptasi dari material itu.

15:49- Ada juga UI component library yang namanya nggak ada material-nya.

15:56Nggak ada unsur material-nya.

15:58Tapi ada ini-nya.

16:00Dia menggunakan prinsip-prinsip material UI.

16:02Ada seperti itu.

16:03Saya lupa ada namanya.

16:05Banyak soalnya.

16:07Nah teman-teman di sini favoritnya mana nih?

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

16:14Kalau bootstrap itu masuk ke mana?

16:19- Nah itu semua kan sebetulnya.

16:21- Awalnya CSS framework, tapi akhirnya awalnya CSS framework.

16:24- Nah ini overlap.

16:26Jadi UI component library kan macem-macem ada yang beneran ngasih component doang.

16:31Ada yang kombinasi sama, ya itu kayak CSS framework ya kayak si bootstrap.

16:36Dulu ada zurp foundation juga.

16:39Kalau nggak salah, kalau si bootstrap itu ya bootstrap 1, twitter bootstrap tuh masanya namanya dulu tuh.

16:49Dia itu cuma CSS-nya doang.

16:52Utility class-nya dulu.

16:56- Utility class name kan kalau misalnya mau bikin 2 kolom, 3 kolom, atau class name-nya apa gitu.

17:00- Tapi kan setelah itu kan harus bikin contoh.

17:04Contoh-contohnya lama-lama jadi komponennya mereka bikin sendiri.

17:12- Kayaknya sempat ngetrend banget ya pas pertama belajar tuh semua orang pada pake ini.

17:21- Jaman dulu semua website itu mirip banget.

17:25Sama apa kayak di time forest gitu-gitu kayaknya udah sama semua.

17:30Tampilannya cuma beda warna doang.

17:33- Cuma ini kan helpful banget ya, apalagi dulu kayak misalnya drop-down nih.

17:39Coba buka komponen yang drop-down.

17:41Nah ini kan dulu bikinnya susah ya.

17:44Ya maksudnya dulu itu 6-7 tahun lalu ya.

17:48- Iya. - Iya.

17:56- Nah ini membantu banget kan.

18:00Jadi ini kan udah keluar diri rana CSS utility only kan.

18:05Walaupun ya emang pake CSS class-nya dia juga, kan ada JavaScript-nya juga nih.

18:09Dia ngebawa JavaScript ya bikinan mereka sendiri.

18:15- Terus saya suka pake Jumbotron.

18:19- Jumbotron. - Oh ini ya.

18:23Yang hero.

18:27Nah makanya si bootstrap ini karena ada JavaScript-nya agak susah.

18:33Mau di-convert ke komponen react, komponen view, gitu kan.

18:38Jadi ada lagi yang bikin kan, ada lagi yang bikin khusus untuk react, react bootstrap,

18:45ada yang buat view, saya nggak tahu tuh ada apa nggak.

18:49Ya pokoknya untuk semua framework dia ada karena dia ada mengandung JavaScript-nya di sana.

18:54- Nah ini bisa dibilang salah satu paling OG ya.

18:59Kayaknya yang paling pertama, ya kenapanya ya kayak yang tadi itu di artikel pertama.

19:04Biar cepat ya kan, pastilah. Itu faktor yang paling...

19:08- Tapi pengalaman saya justru bikin lambat tahu nggak sih.

19:11- Iya tergantung. Semua tergantung.

19:14- Jadi pusing gitu kayak. Karena kalau sudah jadi gitu mau dirembah-rembah itu

19:18kalau ada behavior yang mau berbeda dan dia nggak bisa, itu contohnya gini.

19:24Pernah tahu nggak kalau drop-down tapi bisa search?

19:30Drop-down tapi ada search-nya.

19:33Itu bahasanya itu ya.

19:35- Iya ngerti kebayang-kebayang, apa ya namanya?

19:38- Searchable drop-down. - Kalau di jQuery namanya jQuery select.

19:43Ada nama jQuery. Kalo dulu saya suka pake nama jQuery select.

19:49Bukannya jQuery apa ya?

19:54- Select to. - Ah select to, dah.

19:58Ah itu dia. - Sampai afal gitu namanya.

20:02- Select to. Nah itu drop-down tapi bisa di-search.

20:07Bahkan yang lebih atasnya dia kalau kita search dia bisa kayak callback ke fax,

20:13ngambil yang hasil search, terus ditelepilih.

20:16Itu kan untuk datanya ratusan ribu itu cocok banget ya buat jadi drop-down.

20:21Daripada diisi semua ke dalam drop-down.

20:26At some point kalau misalnya contohnya komponen seperti itu.

20:31Kalau misalnya kita mau ngerubah tetapi ya ternyata dia nggak bisa.

20:35Tetapi maunya komponen itu yang dipakai.

20:37Nah itulah yang bagi saya jadi ribet.

20:41Tapi itu permasalahan semua framework ya.

20:44Mau pake framework apapun kalau kita mau maksa diluar kaidah pasti akan jadi ribet.

20:49- Nah agian kan sebetulnya requirement kita makin spesifik.

20:55Ya makin ribet mengkustomise yang sudah ada. Karena orang bikin kan belum tentu dengan use case kita in mind.

21:03Nah tapi dibagi dulu aja nih.

21:05Pertama pronya, ngos-ngosnya pertimbangan kenapa kita pakai UI Component Library.

21:10Yang kedua kontranya. Kenapa kita misalnya kenapa nggak usah atau kapan kita nggak usah pakai.

21:16Nah pronya dulu aja yang jelas kan cepet deh tinggal kopas.

21:20Terutama kalau prototyping.

21:22Ya minimal ada UI nya lah.

21:25Pertama cepet.

21:27Terus kedua ya misalnya nggak ada UI designernya.

21:33Atau UI designernya masih occupied.

21:35Masih belum bisa gantung di tim kita.

21:39Ya minimal kan kalau kita pakai ya sejelek-jeleknya.

21:46Maksudnya standar-standarnya seplein-pleinnya jembut-jembut bootstrap lah itu tadi.

21:52Minimal kan dari kontrasnya, terus dari ukurannya itu kan sudah tersusun dengan baik ya.

22:01Jadi maksudnya nggak usah dealing dengan itu semua.

22:05Ada sesuatu yang minimal jelas bisa diperiksa lah.

22:10Jadi kalau nggak ada UI designer.

22:13Terus apalagi ya?

22:16Kalau misalnya kita pilih UI library yang aksesibilitasnya bagus.

22:21Atau mungkin ada juga yang secara estetika bagus juga ada kan.

22:26Misalnya material UI tadi atau end design atau radix.

22:32Kalau kita nemu yang style estetiknya cocok, aksesibilitasnya bagus.

22:38Ini kayak menang besaran, maksudnya menguntungkan banget karena udah sesuai yang kita mau.

22:44Ada lagi nggak pertimbangannya?

22:48Kalau cost gimana?

22:51Cost kan cepet tadi. Maksudnya main hour-nya, dev hour-nya lebih sedikit.

22:58Terus itu tadi dev hour kita sendiri, kita kerjanya lebih cepat.

23:02Kedua, orang UI. Kita nggak usah hire orang UI.

23:05Ini memang lebih tinggi, itu kontra-nya.

23:10Tapi yang pro-nya di sini adalah aplikasi web kita jadi konsisten.

23:18Oh ya, konsisten sih.

23:21Karena mungkin masing-masing orang punya preferensi sendiri.

23:27Kalau nggak ada guideline-nya, misalkan kita pakai bulma, kita pakai footstrap atau apapun.

23:33Dia tinggal lihat di kitchen sink, copy paste, jadi gitu kan.

23:38Tapi kalau misalkan nggak ada sama sekali, oh ini nggak ada guideline-nya.

23:42Yaudahlah buat sesuka-suka kita gitu.

23:44Akhirnya masing-masing selera.

23:46Apa yang nge-stop project yang sudah pakai UI Component Library A nggak nambah sesuatu dari UI Component Library B?

23:56Gimana-gimana?

23:59Saya pernah menemu loh, sudah pakai material design, tapi tiba-tiba pakai select tool di satu sisi lain.

24:09Karena ada yang itu kan sebetulnya custom.

24:13Iya, nggak selengkap itu.

24:16Oh itu poin bagus juga sih, menarik kan sebetulnya UI Component Library itu kayak memudahkan kita aja.

24:24Tapi kan bukan berarti saklek banget kayak kita beneran harus hanya pakai itu doang.

24:30Ya kalau kita punya kebutuhan lain yang si library itu nggak support.

24:34Ya kita, kalau bisa sih bahkan misalnya gini nih, butuh select atau apa.

24:40Cuma si component library itu nyediain yang lebih kayak low-level lah.

24:46Misalnya nyediain input, ya mungkin input atau button kan itu bisa kita susun.

24:52Kita pakai buat bikin meng-customize yang lebih kompleks kan, yang kita perlu.

24:58Ya atau pakai component library lain.

25:00Atau kadang kan ada library UI yang bukan menyeluruh, bukan design system atau component.

25:07Tapi ketengan ya, kayak misalnya Airbnb itu pernah punya date picker yang oke banget.

25:13Kita cuma perlu date pickernya aja, karena mungkin date picker bawaan component library nggak ada.

25:19Atau kurang cocok, mungkin kurang advance.

25:21Kita perlu date picker yang mantap banget.

25:24Yaudah kita ambil aja dari tempat lain ya, itu sah-sah banget sih.

25:28Cuma pertanyaannya itu pasti terlalu javascript ya.

25:33Pasti ada kodanya, ya dari segi performance kan itu gimana kita nanya aja kan.

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

25:45Belum tentu.

25:46Nah itu kan gimana kita lalu isi load tergantung kebutuhannya.

25:50Itu juga pernah jadi sebuah nightmare buat saya.

25:53Karena kliennya beli admin themes di time forest.

25:59Nah itu agak jelasan.

26:01Kan cakep tuh.

26:02Jaman itu masih pakai, sudah pakai itu booster 3 lah ya itu.

26:08Admin themes sudah pakai booster 3, itu semua ya.

26:11Tapi JavaScript-nya burungan.

26:12Cakep tuh.

26:13Burungan, cdn, di head semua.

26:15Aduh.

26:16Cakep.

26:17Di contoh aplikasinya, di contohnya cakep.

26:21Gitu developmentasi.

26:23Terus kok saya mau rubah ini gak bisa.

26:27Mau rubah itu gak bisa, hasilnya gimana.

26:29Akhirnya banyak maksa, banyak maksa, maksa akal-akalan montir segala macam.

26:33Yang penting jadi hasilnya juga gak bagus.

26:36Biasa-biasa aja.

26:37Jadi justru jadi gak konsisten kan ya.

26:40Yang awalnya kita berharap konsisten.

26:42Terus karena terpaksa menggunakan UI library.

26:47Terus kita gak tahu cara utak-atiknya.

26:50Akhirnya jadi malah jadi gak bagus gitu.

26:54Karena kurang konsisten gitu.

26:56Nah ngomongin apa, komponen library yang cukup lengkap.

27:02Salah satu yang cukup lengkap adalah yang carbon design.

27:05Ini juga menarik sekali ini dari IBM.

27:06Oh iya.

27:07Punyanya IBM, sebelum dibuka deh.

27:08Bagus.

27:09Enterprise ready, enterprise ready.

27:12Ya karena emang bikinan IBM ya.

27:15Dan ini contoh, itu kan tadi overlap ada beberapa ya.

27:19Misalnya kayak tadi tuh Bootswap.

27:21Mereka sebetulnya mainnya core-nya adalah CSS utility ya.

27:26CSS utility library.

27:28Tapi mereka include komponen juga.

27:31Atau kalau contoh yang agak lebih modern.

27:33Tailwind CSS kan sebenarnya library standalone.

27:36Kita pakai CSS kelasnya doang aja ya gak apa-apa.

27:38Tapi kalau kita perlu komponen, mereka pakai brandingnya tailwind UI.

27:43Secara offisial itu dari pihak yang sama.

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

27:54Kalau IBM ini, carbon design system ini, design system yang menyeluruh.

27:59Jadi kayak apa sih, pendekatan kayak apa, filsafat ya.

28:03Filosofinya, blablabla.

28:05Terus secara umum lah kayak pendekatan yang menyeluruh banget design.

28:11Jadi kayak ini bukan kodinganya doang.

28:14Cuma kayak cara mengkomunikasikan konten blablabla dah.

28:18Yang kita developer gak ngerti mungkin.

28:20Nah, design system termasuk salah satu di antaranya component library.

28:26Bahkan sampai font-nya juga udah ada lengkap sekali.

28:30Ini salah satu yang menarik kalau temen-temen mau bikin aplikasi yang istilahnya buat enterprise, buat perkantoran.

28:38Itu kayaknya cocok sekali.

28:40- Yang kelihatan mahal. - Klihatan mahal.

28:42- Gak mesti memang. - User facing juga gak apa-apa maksudnya.

28:46Gak masalah.

28:47Nah, ini mungkin ekifalitnya adalah dengan ini ya.

28:52Tadi kita udah ngomongin material design, design sistemnya.

28:56Dengan material UI atau materialize.

28:59Jadi ada design sistemnya, ada UI komponennya.

29:03Kalau ini diborong satu tempat.

29:05Kalau gak salah ada beberapa juga yang melakukan ini kan.

29:08Github kalau gak salah ada.

29:11- Terus ada... - Polaris, Shopify, Polaris.

29:14- Uber. - Shopify, Polaris.

29:19Apa namanya Polaris apa sih?

29:22Iya kayaknya.

29:23Ini base design sistem ini Uber.

29:26- Dia ada juga komponennya. - Komponennya.

29:30Iya.

29:31Tapi ini salah satu yang paling lengkap.

29:34Dan website-nya itu nyenangin banget sih.

29:37Sampai ada tutorial, ada code sandbox-nya.

29:40Coba deh, buka aja.

29:42Develop, getting started, react.

29:47Step 1, review, landing page.

29:51Ini framework juga menarik sih.

29:53Yang mereka support secara resmi itu ada plane HTML, CSS, JavaScript.

30:00- Ada codenya. - Ada contohnya ya.

30:04Web component.

30:06Framework-nya ada angular, view, color swell.

30:10Itu unofficial, jadi kayak sunking orang.

30:14Pada suka banget sama si design sistem dan komponen library ini.

30:19Ada yang bikin.

30:22Tapi kayak diakuin di Acknowledge sama IBM.

30:26Cuma nggak di maintain yang maintain-nya oleh komunitas, community.

30:32Bagus juga ya.

30:34Bagus, bagus.

30:36Cuman kayaknya dia hanya react ya kalau nggak salah.

30:39Karena mereka hanya menggunakan react kan.

30:42Eh, nggak tahu ya.

30:44- Tapi kalau nggak salah. - Ya buat mereka sendiri.

30:47Iya, buat mereka sendiri.

30:49Kalau nggak salah ya, ini pakai react.

30:53Guberdesign.

30:55Website-nya ya.

30:57Ya ini sampai charting library kayaknya ada deh data visualisation tuh.

31:01Ada tuh, lengkap sekali.

31:03- Pake D3. - D3.

31:07- D3. - Hmm, I don't know.

31:10Iya, maybe.

31:12Coba aja lihat.

31:14Oh, nggak bisa ya. Inspek.

31:16Tuh itu klik aja bawahnya.

31:19React, Angular, Vue, Vanilla.

31:21Nah itu ngebuka code sandbox.

31:24Itu bagus banget sih emang.

31:26Oh, seru-seru-seru.

31:30Dan udah ada contohnya kita tinggal kopas aja.

31:34Fluent UI by Microsoft.

31:36Merik-merik Carbon.

31:38Fluent UI juga yang kotak-kotak ala-ala Windows 11 gitu kan.

31:44Kalau nggak salah ya.

31:46- Eleventy. - Windows 11.

31:49Eleventy.

31:51- Ini... - Itu mau apa ya, Eleventy ya?

31:54- Static set generator. - Iya, mereka punya.

31:58Oh iya, Eleventy.

32:00Kayaknya mereka bikin sendiri apa gimana gitu ya.

32:04Oke.

32:06Coba lihat deh komponennya.

32:08Di kiri.

32:10Komponen. Button.

32:15- Button duluan. - Card, nggak ada card.

32:18Ada accessibility testing statusnya.

32:22- Mungkin. - Oh ini, oh iya.

32:25- Ini penting. - Jadi kayak semuanya ada info-nya.

32:28Terus di atas tuh, di paling atas.

32:30Usage, style, code, accessibility kayak apa?

32:34Lengkap semua.

32:36Kalau kita mau pakai vanilla, itu nama kelasnya apa?

32:40Terus contoh-contoh state-nya, terus di masing-masing framework kayak gimana.

32:45Wah, bener deh.

32:47Sebelum kita review satu persatu komponen library,

32:51tadi kan kita udah ada pro-nya, kontra-nya tadi kan.

32:53Oh iya, kontra-nya tadi.

32:55Kontra-nya. Susah dipelajari kemudian.

32:58Learning curve tadi.

33:00Ada kemungkinan learning curve.

33:02Ini tergantung UI library-nya juga kan.

33:04Misalnya nih kita pakai yang punya IBM tadi, Carbon Design.

33:07Ya mungkin lebih mudah ya karena lengkap.

33:10Dan hal-hal yang perlu dipertimbangin, udah ada detail-detailnya juga.

33:15Jadi maksudnya kita lebih gampang belajarinnya.

33:18Tapi kayak misalnya dulu kayaknya end design tuh yang suka dikatain apalah.

33:22Kayak mungkin dokumentasinya kurang jelas.

33:26- Accessibility statusnya juga. - Karena bahasanya juga.

33:29Nah itu berarti kemungkinan kan learning curve-nya bisa lama.

33:35Maksudnya developer nggak bisa dengan gampang langsung mengadopsi.

33:40Kedua, belum tentu si desainernya suka.

33:44Karena dipagerin.

33:46- Iya. Terkekang. - Iya terkekang.

33:51Atau jika misalnya ternyata desainernya yang menang.

33:55Jadi sesuka hatinya membuat desain tanpa desain sistem yang sudah di sepanggati.

34:04Kalah nih misalnya developer-nya.

34:07Nggak bisa ngomong apa-apa karena desainernya itu pemilik.

34:11Akhirnya terjadilah framework-nya dibelok-belokin.

34:16Framework-nya dibelok-belokin.

34:18Nah itu jadi nightmare.

34:20Cuma ini konsep, kalau balik ke topik UI component library-nya.

34:25Trend-nya juga kayaknya makin berubah deh.

34:27Kalau kayak yang dulu, yang agak lama kayak material UI, end desain, dan lain-lain.

34:34Itu kan saklet banget ya.

34:36Belum tentu semua warna bisa di-customize, bisa di-modif.

34:40Walaupun bisa, belum tentu semua.

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

34:50Radix UI, Shad-CN, itu styling-nya 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 ternyur pilih UI component library yang strict, restriktif.

35:08Agak sulit di-override.

35:10Terus kasusnya, kayak tadi Ivan bilang, desainernya konsepnya beda banget.

35:15Ya udah selamat pusing.

35:16Tapi kalau misalnya kita kebetulan pilih yang lebih flexible dan gampang di-override.

35:20Ya masih nggak apa-apalah. Relatif nggak apa-apa.

35:24Kekurangan selanjutnya apa?

35:27Nggak bisa keluar.

35:29Ke kunci ya?

35:31Bootstrap kan?

35:33Selamanya.

35:35Jadi misalnya udah pakai Sencha XTGS.

35:41Kalau mau ganti ke karbon desain, ya selamat aja.

35:49Selamat berjual.

35:51Rewrite semuanya.

35:53Berarti itu kayak invest waktu yang besar juga.

35:57Jadi kan tadi balik ke pro-nya, kita ambil UI library untuk menghemat waktu.

36:04Tapi itu juga sebetulnya di sisi lain menyinta waktu, ya kan?

36:08Karena kita abis itu waktu itu kita bikin hal-hal lainnya.

36:12Ke depannya kan bergantung itu.

36:15Iya maksudnya gini, evolusi sebuah produk kan ada.

36:18Jadi satu saat produk itu bisa terjadi yang namanya rebranding atau redesign.

36:25Nah kalau sudah redesign atau rebranding terjadi dan ternyata komponen library-nya tidak bisa,

36:34ya terpaksa semuanya harus di rewrite.

36:37Komponen-komponen itu di rewrite ulang.

36:40Contohnya ternyata secara desain sistemnya atau owner-nya bilang,

36:46"Ih, button-nya si material design bagus deh, bisa ada gelombang-gelombangnya.

36:51Pengen dong dibikin juga." Ternyata UI komponen library yang kita pakai nggak ada yang seperti itu.

36:57Akhirnya kalau dipaksa nggak bisa masuk, jelek. Terpaksa ya bongkar rewrite semuanya.

37:05Itu contohnya.

37:07- Salah satu waktu lain gini, misalnya di depan kita menghemat waktu karena ada komponen yang udah tinggal dipakai.

37:13Tapi kan setiap kita bikin halaman baru, kayak misalnya section lah.

37:17Section misalnya ada blog post, ya itu kan terdiri dari kartu, terdiri dari button, terdiri dari macem-macem bagian lah.

37:25Ada alert-nya. Itu kan sebenarnya makin lama, makin banyak isinya.

37:30Setelah beberapa bulan, setelah sekian tahun lah misalnya kan jadi banyak banget.

37:36Nah itu cost buat ngubah semua kan jadi itu numpuk banget. Jadi di awal menghemat waktu.

37:42Tapi makin lama waktu berjalan, kayak itu makin kekunci kita dengan UI komponen library itu kan.

37:51Kalau udah terlanjut dibikin.

37:55- Kelemahan berikutnya, aplikasi atau website kita jadi pasaran.

38:02Desainnya mirip-mirip dengan berbeda warna.

38:07Dulu inget banget kan waktu beberapa tahun yang lalu kerja di startup, baru mau launching gitu kan.

38:15"Wah kita bikin landing page, beli dari Tim Forest." Begitu launching.

38:19Besoknya ada yang launching juga dengan tema yang sama.

38:24Belinya sama nih barengan.

38:28Itu kan jaman dulu bootstrap itu sangat ini kan. - Atau bukan dipuli atau sebenarnya developer-nya

38:38"Dudek nih, kopi zip file-nya dikasih aja. Itu pakai aja seharusnya."

38:42- Ya pokoknya antara beli atau ambil di temen website, temen website yang gratis atau yang berbayar gitu kan.

38:52Habis itu implementasi, headline-nya beda, tulisan copywriting-nya beda, tapi ternyata button-nya sama.

39:03Bahkan ketika sebuah website bootstrap, meskipun warnanya berbeda, tetap aja feel-nya sama.

39:12- Ya kan bentuknya sama. Cuma kayak skin-nya aja. Beda skin doang.

39:17- Itulah yang terjadi, yang kayaknya mungkin sekarang udah lebih itu ya, lebih banyak opsi.

39:23Tapi yang terjadi kok misalkan temen-temen menggunakan tailwind UI apalagi kan.

39:28- Maksudnya tailwind yang asli ya, yang ORI maksudnya tanpa dikustom.

39:32- Ya, itu kan jadi kalau hasil kopas dari web gitu yang dicontohkan ya udah, sebegitu aja.

39:39Jadi semuanya mirip-mirip. Oh warnanya jangan warna ini deh, warna zinc 100 gitu ya udah.

39:45Tapi kan bentuknya mirip kan, tetep sama gitu. - Ya ketahuan lah.

39:50- Wah ini nggak profesional banget kok. Apa istilahnya nggak ada jiwanya ini aplikasi webnya.

39:56Cuma kopas dari tailwind atau tailwind UI atau daisy atau yang lain gitu.

40:01- Dan kita karena kita developer ya, maksudnya kita bukan fokus di orang UI/UX, kita nggak sadar kayak buat kita.

40:08Gak apa-apa. Aksesibility, kontras, kontras warnanya, telos-telos aja ke semua check.

40:15Maksudnya link ada warnanya ya warna standar tailwind lah. Blue text dash, blue dash 500 lah. Bagus. Apa salahnya?

40:24Kita kan nggak sadar ya. Cuma kalau misalnya produk kita udah terutama ya, kalau buat baru prototype banget kan,

40:31ya nggak apa-apa ya. Sebenernya rata-rata nggak masalah.

40:34Tapi kalau misalnya udah di launching untuk publik kan ada pertimbangan lain di luar pertimbangan teknis.

40:39Cuma kalau misalnya produk kita udah sampai skala itu ya gimana pun waktunya ambil ekspertis orang UI sih.

40:48Maksudnya kita berarti pertimbangan pilih UI Component Library dari awal yang harus bisa cukup fleksibel buat di modif.

40:56Nah ini mungkin bedanya evolusi dari zaman bootstrap sampai zaman tailwind.

41:01Kalau jaman tailwind itu kelebihannya kalau menurutku sih jauh lebih gampang dikustomize ya.

41:07Maksudnya kalau mau bikin yang unik dan punya karakter, punya jiwa, blablabla.

41:12- Masih bisa. - Apa? Bisa.

41:14Tapi ya harus ada ekspertis orang UI-nya. Cuma maksudnya karena itu beneran token utility-nya,

41:21konfigurasinya tuh detail banget. Jadi semua tuh bisa diubah dan dikustomize.

41:27Semakin detail, semakin tinggi learning curve-nya. Semakin mudah dikustomizasi.

41:35Semakin banyak kustomizasinya, semakin tinggi learning curve-nya, semakin berat aplikasinya.

41:44Ya tadi kan Ivan bilang produk itu kan ada evolusinya kan. Mulai dari MVP, kemudian first iteration, second iteration, blablabla.

41:53Makanya unicorn-unicorn kayak gojik akhirnya menerbitkan desain sistem sendiri kan. Grab juga sama.

41:59- Itu semua. Itu tadi Uber bikin, IBM bikin. - Bisa jadi, coba pikirkan kayak diakuisisi sama group company,

42:09mother company-nya. Tentu desain sistemnya harus ikut mother company-nya.

42:14- Harus sama dong. - Harus sama kan. Jadi itu kan merombang.

42:18Atau malah akuisisi yang punya desain sistem, itu kan kasusnya work OS itu loh.

42:25Radix kan, radix UI kan dulunya pure open source-nya. Individual masanya apa, project pure open source.

42:33Work OS itu sebenarnya gue kurang tahu sih produk inti mereka apa, ya pokoknya mereka parent company.

42:41Jadi mereka akuisisi sana-sini lah, kayak butuh out system, ngambil nyamplok project open source

42:49yang emang spesialisasinya di out. Nah, kelihatannya kasusnya work OS mengakuisisi radix ini,

42:56kelihatannya mereka butuh, ya itu, butuh desain sistem yang konsisten, streamline, ya maksudnya yang emang fokus di situ,

43:03mereka acquire radix UI deh. - Ngomongin radix ini, saya punya pertanyaan.

43:14Ada kan istilah akhir-akhirnya, ada istilah headless UI, itu maksudnya apa ya?

43:18- Itu yang kelihatannya, gak tahu loh, nanti serbil Google-nya aja. Ada-ada sering dengar sih.

43:26- Radix atau Asiat-CN itu ya yang headless UI? Tailwind juga punya headless UI?

43:33- Nah, kelihatannya nih, tebakan sekilas. - Unstyled UI component library.

43:38- Jadi, sebetulnya ada basic styling-nya. Cuma yang kita bahas tadi itu kan ribet ya, Brad,

43:46kalau misalnya opinionated banget styling-nya dan belum tentu semua bisa di-override. Ini sebaliknya,

43:52jadi filosofinya adalah sangat mudah, dan emang kita ekspektin men-styling sendiri.

43:58Kita bawa styling kita ke komponen mereka. - Oh, ngerti-ngerti.

44:02Jadi antara UI library, jadi dia posisinya di tengah-tengah, antara UI library dengan utility,

44:11antara tailwind dengan tailwind UI, di tengah-tengahnya ada headless UI, bener gak?

44:14- Enggak. - Salah ya? - Dia tetap ngasih komponen sih.

44:22- Pikirinnya adalah, pikirinnya kayak, pikirin kayak, apa tadi ya, apa yang sudah UI component, pikirin kayak end design,

44:44tapi gak ada style-nya, basic style ada supaya bentuknya gimana, tapi gak ada apa-apa.

44:52Kosong, plain, itu headless UI. Yang di ini.

45:00A completely unstyled, but fully accessible UI component library. Decide to integrate beautifully with tailwind.

45:14- Oh, headless ini kan produknya tailwind labs kan ya. - Iya.

45:18- Kalau kita mau pake yang lain, ada react area, ada reactable, eh bukan ya, react area yang ini ya, yang accessible juga ya.

45:26Mungkin approach-nya cara pikir headless-nya itu headless di sini, kan tadi pertanyaan headless itu maksudnya apa?

45:34Itu maksudnya relatif mudah di styling. Jadi maksudnya ini kan biasa developer kan bikin solusi,

45:42ternyata kena masalah dari solusi itu, bikin solusi baru untuk ngatasin masalah yang muncul dari solusi sebelumnya.

45:50Nah ini kayaknya kasus kayak gitu, jadi UI component library yang generasi dulu, kan ya itu kelebihannya gampang dipake,

45:57cuma sulit di-customize styling-nya, terutama kalau misalnya kita punya designer yang punya karakter sendiri,

46:04dan itu emang penting kan buat biar produk kita punya karakter lah, punya karakter brand sendiri.

46:11Nah dari masalah itu muncul ya gini, ini yang generasi UI component library baru.

46:17Dan ini emang gampang banget di styling-nya.

46:21- Apa kayak open props gitu juga ya? Open props, pernah tau kan? - Oh kalau open, pede open props itu?

46:28- Itu utility, utility. Dia yang bikin ini. - Utilities FS.

46:32- Kayak Tailwind. - Dia satu level sama Tailwind.

46:35Uno, Tailwind, dan temen-temennya. - Itu yang apa? Adam Erjel buat itu kan ya?

46:41- Iya, open props. Radix termasuk headless juga.

46:46- Nggak tau sih, istilah headless-nya kurang tau. - Low level kali ya, low level ya.

46:53- Cuma low level UI component library. Nah yang menarik di sini itu fokusnya adalah accessibility,

47:00customization. Jadi yang kayak contoh aku di awal tadi, kan buat buka model itu kan,

47:09bikin model dialog itu kan yang ribet adalah salah satunya ngatur kayak perkara focus trapping,

47:15mana yang bisa, apa, fokusnya harus pindah ke mana, harus ke mana, itu kan ada standar-nya sendiri,

47:21dan itu ribet banget kalau misalnya kita harus bikin sendiri. Nah ini udah diurus sama si component library-nya.

47:28Perkara padding-nya gimana, warnanya apa, itu semua kita yang styling sendiri.

47:38Mau pake tailwind, mau pake style component atau vanilla CSS atau apa, bebas.

47:45- Oh, jadi kita bisa bikin times di atas komponen-komponennya ya? - Betul.

47:50- Dia emang di desain menerima dimming dari parent-nya. - Kosongan, kosongan, bener-bener.

47:58- Tepat kan bahasanya, kosongan. Abis itu bikin palette-nya sendiri, bikin palette, bikin tim color-nya,

48:07terus tinggal di implement, jadi mungkin pakai CSS variable, jadinya CSS variable ya,

48:13kita tinggal ngasih CSS variable-nya, itu semuanya sama.

48:18- Oh, cuma kalau si Radix ini, Radix UI, mereka bikin kayak related, cuma terpisah opsional, Radix colors.

48:26Jadi itu sebenarnya mirip kayak tailwind ya, ada misalnya blue 500, blue 600, itu kan ada hitungannya.

48:34- Iya. Nah kalau kita, maksudnya kita belum punya nih, kasusnya kita belum punya sistem warna sendiri,

48:41pengen gampang lah, pengen cepet banget, pakai aja dari sini.

48:45Cuma kalau misalnya kita udah punya sendiri dari desainer kita, ya kita bisa punya kita sendiri.

48:53- Bakal kayak ini dong yang kita kembali tadi nanya itu, setcdn itu juga sebenarnya kosongan.

49:09- Mirip-mirip juga? - Kayaknya ya.

49:11- Oh itu malah lebih, itu lebih ekstrim lagi sih, itu kan kodenya kita kepas sendiri komponennya, coba deh buka.

49:19- Sebentar, ini ada setcdn.com, ada ui.setcdn.com.

49:25- Kalau setcdn.com ini udah ada.. - Oh itu websitenya Disney.

49:30- Oh namanya setcdn.com, proyeknya UI.

49:35- Iya, jadi ini tinggal pakai... - Kayaknya nggak bisa dipakai yang setcdn-nya, itu manusia.

49:44- Jadi dia udah bikin unit komponennya kecil-kecil.

49:49- Ini generator, kita generate, abis itu kode komponennya sendiri, kita kopas buat, jadi ini coba deh.

49:59- Oh. - Itu, dikasih kode kita bikin aja button komponen sendiri.

50:06- Bikin button komponen sendiri, oh ininya maksudnya.

50:11- Iya, itu import button, coba lihat ya importnya dari mana, dari itu sendiri.

50:19- Add component UI button. Ini dari mana? Install kan? Install dulu kan?

50:26- Iya. - Kita add button.

50:28- Itu kayak generator, ntx blablabla, jadi itu bakal nge-generate file button.tsx.

50:36- Oh gitu, oh jadi dia akan menambahkan kode di proyek kita, bukan di node modules.

50:44- Iya, jadi dia bukan... - Ada source-nya kan, ada source-nya ada generator-nya.

50:50Tapi komponennya taruh di tempat kita, jadi kayak mungkin kalau skala nih, kayak bootstrap,

50:56mungkin kayak material UI yang versi lama, itu kan beneran sulit buat di overwrite.

51:01Makin kesini nih, makin mudah buat di overwrite dan customize kayak misalnya radix UI tadi,

51:06tapi kan tadi masih ya komponen, cuma komponennya di breakdown ke banyak primitive

51:11yang lebih gampang dipindah-pindahin. Nah kalau ini lebih ekstrem lagi, lebih kesini lagi.

51:15Jadi kayak ya udah komponennya beneran taruh di tempat kita semua.

51:18- Berarti ini adalah tools buat kita nge-buat komponen library yang kita sendiri.

51:22- Nge-generate komponen kita berdasarkan opini-nya dia.

51:26Kan dia tetap punya opini bahwa apa yang dimaksud dengan button, sebuah button itu harus bisa...

51:32harus bisa ada children-nya, harus bisa di-click ya tetap aja lah.

51:36- Intinya ada, sudah accessible-nya sudah ada, opini-nya sudah ada gitu.

51:40- Sudah ada aturan-aturannya ya. - Aturan mainnya sudah ada.

51:43Dan yang keren lagi itu... - Tapi pakainya gimana, ya terus sendiri.

51:47- Yang kerennya lagi maksudnya sudah pernah tau itu yang v0 tau?

51:51- V0, tau kan kita udah pernah demo juga kan? - Iya itu pakainya...

51:56- SexyDN. - SexyDN.

51:59- SexyDN. - SexyDN.

52:01- SexyDN. - SexyDN.

52:03- SexyDN. - SexyDN.

52:05- SexyDN. - SexyDN.

52:07- SexyDN. - SexyDN.

52:09- Coba cari, mungkin ada tulisannya SexyDN. - How to pronounce.

52:13- How to pronounce. - Coba.

52:16- Gak penting. - SexyDN.

52:18- Landing page for ngobrolin web. Coba, coba.

52:23- Landing page for video podcast about web technology.

52:33- Kayaknya harus daftar deh. - Authentic ya.

52:37- Iya lah, makan compute seberapa banyak itu.

52:42- Gitu apa ini? Nggak konek kesini, pakai browser yang lain.

52:48- Baru apa? Saya tuh udah cukup tau lama SexyDN UI ini.

52:53- Baru sekarang mengerti maksudnya dan bedanya apa sama UI library lain.

53:00- Iya, jadi luar biasa ya program ini.

53:07- SexyDN. - Jadi baru ngerti sekarang lho.

53:10- Nggak ngerti malam ini, sebelum-sebelumnya tuh nggak ngerti apa sih SexyDN ini maksudnya gimana gitu.

53:15- Karena nggak pernah pakai kan. Cuma lihat-lihat doang, oh button-nya kayak gini, oh kart-nya kayak gini.

53:20- Kayaknya biasa aja. Yaudahlah gitu, ngapain pakai? Pas liat gini kan, nggak, nggak.

53:25- Kalau ini ada @/, kirain dia akan.. - Pas itu ada di tempat kita sendiri.

53:31- Iya, kirain tadinya ini dari node modules gitu. Makanya nggak nyadar.

53:38- Coba lagi. - Jadi menghilangkan masalah mikir overwrite.

53:42Gimana caranya misalnya kita mau ubah cuma kart deskripsinya doang nih.

53:46Karena beneran nggak sesuai sama yang use case kebutuhan kita.

53:50Nggak usah pusing-pusing, kodenya di kita. Yaudah mau dibongkar, mau diganti, mau di customize, siapain bebas.

53:57- Nah ini baru mengerti malam ini. Jadi ya mantap, mantap, mantap.

54:01Oke, kita coba ya. Stop screen, screen lagi, oh kok jadi bertiga begini? Nah.

54:08Share screen, window, v0. Eh ini udah login belum ya? Kayaknya sih belum.

54:17- Sudah tuh ada fotonya. - Oh sudah, oh iya sudah ya.

54:22- Itu udah dibikinin juga, lagi dibikinin. Kayaknya si chat Cn-nya itu di-recruit sama Vercel ya, kalau nggak salah.

54:30Gosip gitu, gosip web. - Gosip, gosip web.

54:35- Beneran nggak sih? Atau cuma go doang? - You are in QEWI. Kamu gratisan.

54:42Jangan minta yang... - Jangan minta cepat-cepat.

54:46- Terlalu spesial. - Weh, weh, weh, weh. Tuh kan Jumbotron kan, Jumbotron kan? - Ini, ini tailwind sekali.

55:00- Iya itu tailwind-tailwind-an. - Weh latest episode, eh keren juga loh.

55:07- Udah deh kita bikin aja beneran. - Bikin aja di sini ya?

55:10- Nanti next episode kita beneran ngoding bareng sejam gitu.

55:14- Udah ya panjang, dari sini aja makanya ini.

55:18- Ada sidebar-nya gitu, floating bar-nya gitu, popular category.

55:25Weh, sudah selesai ya? - Udah.

55:31- Ada tiga opsi lagi. - Itu ada tiga opsi di bawah.

55:35- Opsi kedua, oh dia generate lagi ya? Meet the host.

55:40- Weh, Jumbotron is a Cessna developer.

55:45- Yang ketiga, oh yang ketiga kayaknya, ini apa nih? Gambar kali ya?

55:50- Gambar, iya. - Gambar.

55:52- Wah ini sederhana tapi bagus-bagus ya? - Yang kedua sih bagus, yang kedua bagus ya.

55:56- Kedua ya? Lebih cakep ya? - Iya.

55:58- Iya, coba kode apa hasil kodenya? Kalau kode, suruh kanan atas.

56:02- Next.js lah pasti? - Iya, iya.

56:06- Iya, iya. - Oh enggak, ini ini ShadCN.

56:10- Oh iya, itu ShadCN banget ya, persis banget. - Yes.

56:14- Nah mungkin karena apa? - Ini langsung nih?

56:18- Ntx, venol, add. - Modular dan primitif.

56:23Kayak dipotong-potong jadi basic, gampang diintegrate buat generator kayak gini ya.

56:30- ShadCN UI-nya. - Aku menangis melihat ini panjang sekali.

56:37Ini apa ya? Link, oh link yang ini ya kali ya.

56:44Subscribe, oh di bawah ini, watch latest episode.

56:47Watch latest episode aja yang putih begini panjangnya begini ya.

56:51Tapi kan ada yang, apa, yang untuk mobile gitu ya.

56:56- Mungkin buat layout-layoutnya. - Iya, udah responsif.

57:00- Bisa dark mode juga, ada dark mode. - Coba caranya.

57:04- Mana dark mode? - Itu yang di atas, iya itu tuh, ten.

57:07- Ini? - Iya, klik.

57:10- Coba klik. - Enggak, content.

57:12- Oh bisa dikustomise fontnya juga ya? - Iya.

57:16- Oh gitu, Libre Franklin, pakai Jetson.

57:20Pasti nggak cocok, udah cocokin tadi.

57:23- Ada lobster nggak? - Gak ada, nggak ada.

57:27Laura, nggak, tetap Libre, udah paling bagus.

57:33Paling cocok bukan paling bagus.

57:35- Ada pasti. - Gak ada.

57:38Star, Flag, oh ini kalau tablet, kalau mobile.

57:44Ford, ini di sininya nggak ada ya.

57:49Oh nggak ada, tapi keren ini.

57:53Edan ya, gimana dong kita.

57:58- Iya kan tetap butuh dikustomise. - Desainer akan tergantikan.

58:02Desainer akan tergantikan, developer masih aman.

58:05- Eh kalau kasusnya ini, lebih nggak aman developer sih daripada desainer.

58:10Ya itu kalau buat branding kan butuh desainer.

58:14Untuk ada soul-nya gitu ya, ini mungkin buat developer aja

58:20yang enggan meng-hire desainer ya pakenya begini ya.

58:26- Oke kita balik lagi ke... - Tapi hasilnya juga gitu-gitu doang jadinya.

58:31Iya jadi pasaran juga kan ujung-ujungnya kan.

58:34Kita kembali ke si Sat Sien ini.

58:38Dia adalah desain engineer, pantasan ya. Engineer yang bisa desain.

58:45Namanya siapa? Nama aslinya siapa?

58:48- Sat Sien. - Sat Sien.

58:50- Sat Sien. - Serius?

58:52- Sat Sien. - Dia diversal sekarang bener.

58:54- Tuh. - Diversal.

58:57Nggak dia ada nama aslinya.

59:00- Emang Sat Sien namanya ya? - Dia nggak mau ngasih nama aslinya gimana.

59:04- Nggak, nggak boleh. Harus di-stalking sampai apa.

59:08- Dia orangnya privacy.

59:12- Tau dia lihat soalnya. - Tau dia lihat soalnya.

59:15- Siapa? - Ya coba aja buka Twitter-nya.

59:18- Itu ada ShedXN lagi, ShedXN. Apa lagi ShedXN?

59:22- Itu pemberiannya? - Itu ada ShedXN tuh.

59:27- Oh UI component. - Coba klik apaan tuh?

59:32- Apa lagi? - Kok sama ya ininya?

59:35- Ini kayak ini nih apa namanya?

59:39- ShedXN is forked from ShedCN UI.

59:43- Oh, forking-annya.

59:45- Forking-annya. Kenapa di-forking? Alasannya apa?

59:48- Ya itu karena pecah dulu.

59:51Keterangannya.

59:53- Namanya Pansos. Pansos-pansos.

59:56- Desain tuh. - Experimental.

59:59- Coba bikin ininya CLI tool-nya.

1:00:04- Oh bisa pakai custom component registries.

1:00:08Maksudnya kalau tadi kan NPX at ShedCN button,

1:00:12button-nya cuma dari tempat si bikinan di ShedCN itu kan.

1:00:18Nah kalau ini bisa pakai apa?

1:00:20Component registriesnya bisa pakai custom registries

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

1:00:29Prinsipnya sama, tapi kayak source,

1:00:32apa sumber registry yang dipakai buat kodenya bisa di-customize.

1:00:37- Saya masih mencari-cari nih.

1:00:43Seksinya ngobrol di web, itu yang di tadi, VNOL tadi.

1:00:48Mana ngobrol di web?

1:00:50Yang ada tulisan ngobrol di web?

1:00:53- Nggak. Ya maksudnya diganti aja nama section-nya.

1:00:56- Oh kirain. - Jadi ngobrolin web.

1:00:58- Dia udah bisa nebak bahwa saya mau bikin landing page untuk ngobrolin web.

1:01:03- Belum secembih itu kayaknya.

1:01:05- Hebat sekali kalau bisa begitu.

1:01:07Nggak ya. Oke, balik-balik.

1:01:09ShedXN. Oh enggak, kita tadi mau cari namanya ya.

1:01:12Yaudahlah lupakan lah ya.

1:01:14- Stalking nama asli ShedCN.

1:01:19- Iya, oke.

1:01:21- Next. Apa lagi nih? Kita bahas apa lagi?

1:01:24- Apa ya? UI Component Library yang favorit atau pernah dipakai lainnya.

1:01:29- Oh iya. Mantin, mantin. Mantin itu bagus kan.

1:01:32- Mantin sama Cakra. Itu yang...

1:01:35- Cakra. Oh iya Cakra.

1:01:37- Mantin dan Cakra itu dari segi apa?

1:01:39Filosofi pendekatan sih nggak se-modern Redix dan ShedCN ya.

1:01:44Cuma, ya lumayan lah aksesibelnya udah lumayan oke, customisable-nya, styling-nya juga udah lumayan oke juga.

1:01:54Banyak yang pakai dan banyak-banyak contohnya.

1:01:58Kalau Cakra, Cakra sama mantin itu nggak tahu kalau opini ku pribadi adalah secara estetik itu kayak lebih polished aja sih.

1:02:08Kalau bootstrap kan style-nya kayak ketahuan agak kuno lah.

1:02:16Maksudnya agak outdated ya dari segi trend kalau bootstrap tampilannya.

1:02:20Nah kalau si Cakra sama mantin ini ya lebih modern lah.

1:02:24- Cakra.

1:02:26- Apa ada bahas Cakra UI kan, Julie ya?

1:02:29- Iya, Cakra. - Bukan Cakra kan.

1:02:31- Cakra semua.

1:02:33Cakra UI, ini khusus React ya?

1:02:38- Iya sih, nggak tahu kalau ada forking-nya. - Reakt application.

1:02:43- Kayaknya ada forking juga deh. - Oh inget kontaknya sih tentang...

1:02:46- Ada view-nya. - Tentang Cakra.

1:02:48- Ada view nggak di sini? - Oh ada view.

1:02:50- Apa tuh? - Tau.

1:02:52- Panda, terus ini bikin Panda juga kan?

1:02:55Ini Cakra UI view.

1:02:58- Tau.

1:03:00- Berarti udah ada view ya?

1:03:01- Iya. - Cakra UI itu katanya aslinya designer.

1:03:04Jadi makanya itu tadi kenapa estetikanya secara UI mungkin lebih polis.

1:03:09Jadi dulunya aslinya dia UI designer, bukan developer.

1:03:13Cuma nggak inget kenapa lah.

1:03:15Maksudnya dia pengen bikin apa?

1:03:17Ya kalau developer bikin, developer yang asli bikin kan kadang

1:03:21set of design-nya rada fales ya.

1:03:23Nah terus sih. - Fales.

1:03:25- Masih yang bikin Cakra UI ini pengen mewujudkan ya kayak visinya dia.

1:03:30Jadi dengan sensibilitasnya dia sebagai UI designer.

1:03:33Tapi dia pengen mewujudkan dalam bentuk component library lah.

1:03:38Akhirnya dia belajar sendiri jadi developer beneran.

1:03:44- Dia belajar sendiri. - Dan bikin ini.

1:03:46- Wow. - OOT, ini pakai docusaurus.

1:03:50- Tau. Itu kasut ya. - Itu belum membahas ya.

1:03:54Itu ada apa namanya?

1:03:56Ada itu, uang kita mau bahas dokumentasi kan.

1:04:02- Oh iya.

1:04:04- Nah itu juga component library nggak sih?

1:04:08Atau itu framework ya?

1:04:10- Framework untuk website dokumentasi.

1:04:14Iya itu menarik tuh. Astro juga bikin kan namanya Starlight.

1:04:19- Iya. Starlight. Iya.

1:04:22Spare feed juga ada. Yes.

1:04:26Cakra. Wah menarik ya story-nya.

1:04:29Ini yang sempat ada drama sama Telwyn bukan ya?

1:04:35Yang saling meng-copy-copy.

1:04:37- Oh gitu. Beritahu malah. - Kalau nggak salah.

1:04:40Jadi Cakra apa? Pokoknya yang ini kan dia bikin panda kan.

1:04:45Nah itu kalau nggak salah ada entah siapa yang meng-copy copyright siapa.

1:04:50Maksudnya tulisan yang di landing page siapa itu saya nggak tahu pasti.

1:04:55Tapi sempat ada percakapan di Twitter, ya biasa lah ya, ngajak perang gitu.

1:04:59Yang ngasih tunjuk bahwa Telwyn sempat mencatut misalkan kayak gini nih.

1:05:04Dicatut sama Telwyn di dokumentasinya atau di mana gitu.

1:05:07Begitu juga sebaliknya.

1:05:08- Kayak di kopas mentah-mentah? - Iya.

1:05:11- Oh bukan. Coba dikomentasikan. - Windy ya?

1:05:14- Bukan. Namanya Windy.

1:05:17- Namanya aja berapa? - Saya salah ya.

1:05:20Kalau Windy CSS emang dia dari Telwyn.

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

1:05:26Yang si, aduh lupa.

1:05:29Yang salah satu kontributornya Vue dan Nux.

1:05:33Siapa itu? Yang Anfu.

1:05:35Dia juga sempat, ya Anfu.

1:05:38Dia sempat ini juga kan.

1:05:40Sempat bilang kalau Telwyn sempat meng-copy tulisan yang ada di dokumentasinya.

1:05:45Di kopas mentah-mentah dan ketahuan.

1:05:49Oh Uno CSS ya.

1:05:51Wah seru ya. Tidak hari ini tanpa drama.

1:05:55Sayangnya udah nggak Twitter.

1:05:57- Sekarang ini aja apa namanya yang baru ngetrend kemarin?

1:06:04Jurnal aja di-copy, dimasukin cgpt, terus dipublish jurnalnya.

1:06:09- Apa jurnal? - Sekarang banyak.

1:06:12Jadi ada yang kalau ngomongin AI, cgpt.

1:06:18Banyak sekarang orang-orang memanfaatkan buku.

1:06:22Jadi dia meng-generate buku.

1:06:24Summary video.

1:06:26Bukan summary, buku.

1:06:28Jadi si cgpt suruh bikin buku.

1:06:30Tolong bikin buku tentang mindfulness gitu kan.

1:06:33Bikin lah tuh banyak.

1:06:35Abis itu dia mencatut nama autor.

1:06:37Autor yang lain yang udah terkenal.

1:06:39Jadi di jebak kita.

1:06:43Ya kita ini di jebak, oh ini yang bikin buku ternyata Ivan nih.

1:06:48Gue kenal Ivan nih, beli ah. Ternyata bukan.

1:06:50Ternyata itu hasil generaitan dari AI.

1:06:53Wah itu parah banget.

1:06:56Itu salahnya berarti dua macem kan.

1:06:58Maksudnya nipu bikin jualan yang hasil generate cgpt.

1:07:03Dan kedua impersonation kan.

1:07:05Maksudnya dia mengataskan si pengarangnya.

1:07:08Padahal itu bukan dia.

1:07:10Betul, jadi dua.

1:07:12Dan kan sekarang istilahnya udah lebih demokratis kan.

1:07:18Jadi kalau kita mau publish buku, kita bisa taro di Amazon.

1:07:21Yang e-book gitu lah.

1:07:22E-book itu kan bisa publish di Amazon.

1:07:24Kita bisa tulis siapa aja kan.

1:07:26Misalkan penulis yang terkenal siapa ya.

1:07:30Misalkan Adi Osmani gitu.

1:07:32Tau nya bukunya bahasa Indonesia.

1:07:34Ya kan bisa aja kan kita daftar sebagai Adi Osmani.

1:07:38Terus emang gak ada verifikasinya sama sekali ya berarti.

1:07:42Misalnya tiba-tiba ada yang bikin cara beternak lele gitu.

1:07:45Terus atas nama Risa Fahmi gitu.

1:07:48Wah ya boleh, yang percaya jangan-jangan ya.

1:07:52Gak berarti kita semua harus sering ngecek nama kita sendiri gitu ya.

1:07:57Di platform.

1:07:59Kalau terkenal.

1:08:00Kalau gak terkenal ya mungkin gak ada yang mau mencetak juga.

1:08:03Kalau pasti saya bikin buku "Ternak Lele" dengan menggunakan LXC.

1:08:08Oh ide!

1:08:11Ya.

1:08:18Anyway.

1:08:32Oh iya iya iya.

1:08:34Telwin juga ada yang drag-and-drop.

1:08:36Udah mulai banyak kan ya.

1:08:38Nah ini ada yang bikin buat drag-and-drop

1:08:42based on capra UI.

1:08:44Hmm, gimana cara pakenya?

1:08:48Ya di drag-and-drop.

1:08:50Dari kiri itu yang ada alert gitu.

1:08:53Oh iya, ok. Button.

1:08:55Button, button. Nah tuh.

1:08:57Loh gak bisa digerakin.

1:08:59Oh ini dulu, container dulu, container.

1:09:02Mana container?

1:09:04Container dulu kan baru di dalamnya button.

1:09:06Loh gak bisa di...

1:09:07Nah.

1:09:08Nah.

1:09:09Sebelahnya mau ada button lagi.

1:09:11Nah.

1:09:13Nah.

1:09:14Ini bisa di...

1:09:15LG.

1:09:17Iya.

1:09:18Bisa di layout.

1:09:19Button text-nya bisa diubah.

1:09:21Flex.

1:09:23Reverse.

1:09:25Loh gak bisa.

1:09:26Ini CSS di...

1:09:29Di ini.

1:09:31Di sidebarin.

1:09:33Bingung ya?

1:09:36Iya.

1:09:37Color.

1:09:39Wuih.

1:09:40Oh ini color ya, bukan background color.

1:09:43Maksudnya ini.

1:09:44Background, nah itu.

1:09:46Background.

1:09:47Cuma ini usual sih buat orang yang bukan developer ya.

1:09:50Mau saya apa?

1:09:51Mau bikin proof of concept atau apalah.

1:09:54Atau bikin wireframe atau bikin apa?

1:09:56Cuma kebetulan aja pakainya chakra UI.

1:10:00I see.

1:10:02Oh dia pakai chakra UI ya.

1:10:03Terus bisa di-export dari code gak?

1:10:05Oh itu export code ya.

1:10:06Harusnya bisa.

1:10:07Export code.

1:10:08Itu di kanan.

1:10:09Mau pakai JSX, TSX, TSX.

1:10:11JSXA.

1:10:13Wuih langsung code sandbox langsung.

1:10:15Wuih langsung bikinin code sandbox.

1:10:17Wow.

1:10:18Bagus ya.

1:10:19Apa UX-nya?

1:10:20Developer Experience brand UX.

1:10:22DevX.

1:10:24Kan user-nya adalah developer.

1:10:26DevX.

1:10:29Di sini kan kita sebagai user productnya OpenChakra.

1:10:34Color twitter 500.

1:10:38Iih jelek.

1:10:39Oh dia mau mewarnai.

1:10:42Ini adalah problem saya ya.

1:10:45Jadi kalau biasanya kan kalau UI library itu kan keren-keren ya.

1:10:51Ada lagi ada contohnya gitu kan.

1:10:53Entah kenapa setiap saya pakai yang dibayangkan itu keren banget.

1:10:58Begitu digabungin jadi biasa aja.

1:11:00Kok jadi aneh ya.

1:11:01Kok jadi lebih jelek daripada contoh ya.

1:11:04Itu sering terjadi.

1:11:07Kalau ngeliat di sini sih bagus.

1:11:09Karena dia yang bikin juga.

1:11:11Itu standard problem developer.

1:11:13Oh iya ya.

1:11:14Standard ya.

1:11:15Karena bikin kan dia.

1:11:16Jadi dia tahu caranya kan.

1:11:19Kalau pengen yang lebih flashy, harus yang pilih yang opinionated.

1:11:23Khususnya DCUI deh.

1:11:26Kalau aku masalah itu baru terpecahkan.

1:11:29Maksudnya pengen yang ya misalnya pengen quick prototyping ya.

1:11:33Cuma pengen yang kalau orang liat wow bagus ya.

1:11:36Pengen kayak gitu.

1:11:37Apalagi tujuannya termasuk itu wow bagus ya.

1:11:41Itu pakai DCUI.

1:11:43Cuma ya opinionated.

1:11:46Tapi ya cukup gampang di override kok.

1:11:50Cuma karena ini based on tailwind.

1:11:52Ya apa?

1:11:53Expectasinya adalah harus pakai tailwind.

1:11:56Akan lebih repot override-nya kalau kita nggak pakai tailwind.

1:11:59Cuma maksudnya apa?

1:12:02Dari tingkat apa ya?

1:12:04Flashiness.

1:12:05Polished dan flashy kayak yang orang liat wow bagus.

1:12:09Iya iya iya.

1:12:11Ini keren.

1:12:12Ini keren.

1:12:13Dan kita bisa tambahin tailwind juga tetap ya.

1:12:16Walaupun misalkan ini kan udah dibungkus ke dalam ini ya.

1:12:19Jadi dia ngumpuk ke config tailwind.

1:12:22Jadi nggak bakal flashing.

1:12:24Jadi kayak plug-in gitu ya seolah-olah ya.

1:12:28Ya, literally plug-in tailwind.

1:12:30Jadi kita install-nya tuh sebagai plug-in tailwind.

1:12:34Tapi ini nggak butuh JavaScript kan ya.

1:12:36Bisa dipakai di semua framework doang ya.

1:12:38Bisa.

1:12:39Ini hanya CSS ya.

1:12:40HTML colosan pun bisa kalau mau.

1:12:43Oke, mantap-mantap.

1:12:44Oh ini keren.

1:12:46Kalau teman-teman mau main-main AI, terus butuh chatbot.

1:12:50Bisa langsung pakai ini aja.

1:12:52Udah ada warna, udah ada kiri-kanan.

1:12:55Tinggal pikirin yang ini nih.

1:12:59Containernya gimana.

1:13:00Mau sebesar apa atau sekecil apa.

1:13:02Ini nih pamer project pribadi kemarin pas apa?

1:13:06Gemini Sprint itu loh.

1:13:08Wah ini keren nih punya ikan nih.

1:13:11Demo, demo, demo.

1:13:14Ini pakai Desi.

1:13:16Iya Desi UI.

1:13:18Lumayan kasi kan.

1:13:20Enak dilihat kan.

1:13:22Dan itu beneran apa?

1:13:25UI-nya last minute.

1:13:26Kayak beneran cuma 1 jam lah buat UI-nya.

1:13:30Karena yang sebenarnya sepanjang weekend.

1:13:34Jumat, Sabtu, Minggu.

1:13:35Diseling makan.

1:13:38Jumat malam, Sabtu seharian.

1:13:40Diseling makan, diseling dan lain-lain.

1:13:43Minggu juga seharian.

1:13:45Tapi kan sebenarnya waktunya kepake bikin aplikasinya dan bikin apa?

1:13:50Interaksi Gemini AI-nya.

1:13:53Nah pas udah terakhir-terakhir nih udah last minute.

1:13:57Udah injuri time.

1:13:59Pengen bagusin UI-nya itu pakai Desi.

1:14:02Coba at your own, at your own dong.

1:14:05At your own.

1:14:08Apa nih?

1:14:10Find soulmate.

1:14:12Coba-coba ketik siapa tau.

1:14:14Finding soulmate.

1:14:16Finding soulmate.

1:14:19Finding your soulmate.

1:14:21Coba, get diagram.

1:14:23Diagram.

1:14:25Bisa, bisa nggak?

1:14:27Tidak bisa sih.

1:14:32Ah terlalu safe ini jaman AI-nya.

1:14:35Bisa bahasa Indonesia nggak?

1:14:37Eh ininya ilang.

1:14:38At your own.

1:14:39Harus refresh ya?

1:14:40Oh iya harus refresh.

1:14:42Cari jodoh.

1:14:44Cari jodoh.

1:14:46Bisa nggak?

1:14:47Oke.

1:14:48Get diagram.

1:14:50Gak bisa.

1:14:52Jangan-jangan nggak bisa semua.

1:14:54Jangan error nih.

1:14:56Jangan jangan ya.

1:14:57Create website.

1:14:59Create how state works.

1:15:06State lagi.

1:15:08React.

1:15:10US.

1:15:12US state.

1:15:14Coba oke.

1:15:16Ini udah niche.

1:15:18Gemini.

1:15:20Wah ada nih.

1:15:21Itu doang.

1:15:23Create website bisa sih.

1:15:27Create website relative normal sih.

1:15:29Coba apa?

1:15:31Create website.

1:15:33Create website.

1:15:34Oke.

1:15:35How to create website?

1:15:36Kau create website aja.

1:15:38Website.

1:15:39Create website.

1:15:41Uis.

1:15:48Nah itu relative normal lah.

1:15:50Cuma finding soulmate.

1:15:51Kok dia nggak bisa ya?

1:15:53Yes.

1:15:56Gemini API-nya open kah?

1:15:58Sekarang freemium.

1:16:00Jadi ada batasan query.

1:16:02Per hari ya.

1:16:04Temen-temen bisa cek di AI studio.

1:16:07Gemini AI.

1:16:09Bisa dapetin key apa?

1:16:12Akses key sama secret key di sana.

1:16:15Cuma mulai 2 Mei besok.

1:16:18Itu harus disambungin ke Google Cloud Project.

1:16:22Ke Google Cloud.

1:16:24Nah kan itu sebetulnya.

1:16:26Oh ya.

1:16:27Udah harus ya.

1:16:28Google Cloud itu kan ada free credit-nya ya.

1:16:30Maksudnya ada free tier-nya lah.

1:16:32Nah udah.

1:16:33Cuma maksudnya masuk ke limit-nya itu.

1:16:36Jadi kalau buat nyoba, ya bisa gratis.

1:16:38Cuma kalau udah banyak pake, nggak bisa.

1:16:41Nah soulmate bisa.

1:16:43Coba deh refresh.

1:16:45Soulmate doang tapi.

1:16:47Soulmate.

1:16:50Gimana diagramnya?

1:16:54Gampang banget teori-nya.

1:17:03Gampang.

1:17:05Ya betul sih.

1:17:07Tapi yang gitu nggak usah pake nanya AI.

1:17:14Nah itu biar kelihatan polish dan acceptable lah.

1:17:20Secara sense of design nggak falus-falus banget.

1:17:23Ini membantu banget DCUI.

1:17:25Akordionnya juga dari DCUI.

1:17:27Coba deh learn more.

1:17:28Learn more.

1:17:30Kanan, kanan.

1:17:33Kanan, kanan.

1:17:34Atas.

1:17:35Kanan, atas.

1:17:36Atas.

1:17:37Bawahnya kan akordiona.

1:17:39Itu beneran no effort.

1:17:41Beneran drop.

1:17:42Tinggal pake apa?

1:17:44Dari DCUI doang.

1:17:46Soulmates.

1:17:48And how to find yours.

1:17:50Ada itunya instruksinya tuh.

1:17:52The science of soulmates.

1:17:54Itu kalau mau lihat sesuatu yang kompleks.

1:17:56Gue paste.

1:17:58Oke.

1:18:00Details.

1:18:02Mitochondria.

1:18:04Iya coba masukin di itunya tadi.

1:18:06Kok 404?

1:18:07Nah masalahnya.

1:18:09Ini suka halu kalau suruh ngasih link resource yang eksternal.

1:18:15Kadang bisa kadang nggak.

1:18:17Diagram blah blah.

1:18:19Diagram mify.

1:18:22Diagram mify.

1:18:24Oh ini ada nih, back aja.

1:18:26Nah.

1:18:28Mitochondria.

1:18:30Coba bentuknya gimana.

1:18:32Details.

1:18:38Wah.

1:18:40Nggak bisa di zoom ya?

1:18:42Nggak bisa.

1:18:44Featurnya belum sampai situ.

1:18:46Kinta segitiga gitu.

1:18:52Mungkin akan roommate ya kinta segitiga.

1:18:54Bisa love triangle.

1:18:56Ya segitiga doang nanti hasilnya.

1:19:00Anyway ini udah kemana-mana loh.

1:19:04Topiknya.

1:19:06Gitu.

1:19:08Buat Valeria yang penasaran sama Jim ini.

1:19:12Ada tutorialnya.

1:19:14Saya bikin tutorial tertulisnya.

1:19:16Jadi kalau mau cek bisa.

1:19:18Saya juga punya indinya.

1:19:20Nah coba demo demo.

1:19:22Saya pribadinya silahkan.

1:19:24Hah dia mau.

1:19:26Nah ini bedanya.

1:19:28Bedanya.

1:19:32Eka sama saya kalau saya buatnya pakai.

1:19:34Vanilla CSS.

1:19:36Ya kan.

1:19:38Kalau developer bikin nggak pakai UI library.

1:19:40Jadinya begini.

1:19:42Jadinya begini.

1:19:44Kalau nggak pakai DCUI juga kayak gini.

1:19:46Lebih parah malah.

1:19:48Jadi begini ya kan.

1:19:50Terima kasih DCUI.

1:19:52Ini Vanilla CSS.

1:19:54Vanilla JavaScript.

1:19:56Semuanya Vanilla nggak pakai framework.

1:19:58Kasih tantangan buat penonton.

1:20:00Fork ini.

1:20:02Jadi UI library jadi keren.

1:20:04Terus 10 request.

1:20:06Tapi sebetulnya kalau buat orang yang punya skillnya.

1:20:08Ya kan nggak perlu framework apa-apa sih.

1:20:10Difix dari CSS juga busa.

1:20:12Nah cuma masalahnya kita fokusnya.

1:20:14Bukan ekspertis utamanya.

1:20:16Kan bukan di UI design ya.

1:20:18Bukan di visual UI.

1:20:20Iya.

1:20:22Nah ini kan.

1:20:24Ini.

1:20:26Saya pakainya.

1:20:28Server, create server.

1:20:30Terkesan.

1:20:32Routingnya begini pakai Iflu.

1:20:34Nggak perlu.

1:20:38Cuma satu halaman doa.

1:20:40Kan satu halaman doa.

1:20:42Nah kan nggak pakai routing.

1:20:44Macam-macam juga routingnya nggak banyak.

1:20:46Betul-betul.

1:20:48Routingnya sedikit. Jadi nggak pakai framework.

1:20:50Cuma perlu target formnya aja kan.

1:20:52Cuma perlu target formnya aja kan.

1:20:54Saya kopasnya dari Happy Hughes.

1:20:58Kita bikin buku.

1:21:00Ini template-nya.

1:21:02Nah saya ngambil desainnya dari sini nih.

1:21:06Tuh kelihatan kan mirip kan.

1:21:08Cuma diganti ini aja.

1:21:12Nah ini nih.

1:21:14Ngambil ininya doang.

1:21:16Iya ngambil ininya doang warna-warnanya.

1:21:18Habis itu di-convert ke CSS.

1:21:22Cuma ini pet peeve sih.

1:21:24Kalau kita lihat contoh gini kayaknya

1:21:26Wow Fleshy bagus dan profesional.

1:21:28Pas kita bikin sendiri.

1:21:30Jadi jadinya mendang mending tadi.

1:21:32Coba bandingkan.

1:21:34Bandingkan dari contoh.

1:21:36Coba mending.

1:21:38Mending DCUI.

1:21:40Atau vanilla CSS.

1:21:42Apa nih?

1:21:44CSS framework ya.

1:21:46Atau library.

1:21:48Oh di aplikasi.

1:21:50Sambil sharescan lah.

1:21:52Oh iya nggak sharescan ya.

1:21:54Lupa. Mending apa tadi?

1:21:56Vanilla CSS.

1:21:58DCUI atau?

1:22:00Vanilla CSS.

1:22:02Atau DCUI.

1:22:04Ini ngeri error sih.

1:22:08Mending DCUI.

1:22:12Lebih cepat dan mudah digunakan.

1:22:16Menyediakan banyak komponen yang sudah jadi.

1:22:18Konsisten dan terdokumentasi.

1:22:20Mendukung mode gelap.

1:22:22Vanilla CSS juga bisa, mode gelap.

1:22:24Cuma bikin sendiri.

1:22:26Bikin sendiri, jadi lambat.

1:22:28Oke, ada lagi yang mau dibahas.

1:22:30Ini udah terlalu jauh kita.

1:22:32Dan waktunya juga sudah terlalu jauh.

1:22:34Kemana-mana.

1:22:36Itu aja lah.

1:22:40Ya, set cn.

1:22:42Kalau untuk spell, spellkit ada yang namanya Skeleton.

1:22:44Skeleton.tf ya.

1:22:46Ini juga cukup menarik.

1:22:48Buat saya lagi ngulik-ngulik.

1:22:50Apa namanya, ngulik-ngulik.

1:22:52Spell.

1:22:54Spell ini jarang banget ya.

1:22:56Ada UI library-nya kan.

1:22:58Pengen deh, set cn ada.

1:23:00Atau mantin, atau tadi cakra.

1:23:02Set cn mah itu.

1:23:04Agnostik framework.

1:23:06Generik ya, sorry. Bukan set cn.

1:23:08Mantin, cakra.

1:23:10Yang ada di react tuh jarang.

1:23:12Cuma kalau mantin cakra itu react center.

1:23:14Jadi,

1:23:16kalau gue sih selama,

1:23:18kalau lagi pake spell tuh andalanya

1:23:20ya itu kalau kebetulan pake tailwind,

1:23:22antara tailwind UI atau DC UI,

1:23:24kalau di war itu

1:23:26karbon.

1:23:28Karbon, oke.

1:23:30Satu lagi, sudah cukup banget.

1:23:32Satu lagi, ada yang menarik

1:23:34selain open UI.

1:23:36Kita bahas open UI dulu kali ya. Terakhir ya.

1:23:38Dua terakhir.

1:23:40Open UI, teman-teman ada yang tau open UI?

1:23:42Ini dia.

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

1:23:46Itu sebenarnya

1:23:48W3C,

1:23:50Community Group, yang

1:23:52mendiskusikan UI Komponen apa sih.

1:23:54Kayak mereka tuh memetakan.

1:23:56Kan tadi kita banyak lalu bahas UI Komponen Library.

1:23:58Semua pasti punya button.

1:24:00Ada yang punya

1:24:02jubotron.

1:24:04Ada yang punya alert.

1:24:06Pasti semua punya card.

1:24:08Terus ada yang punya itu tadi yang Ivan bilang.

1:24:10Select, drop them.

1:24:14Open UI ini adalah

1:24:16komunitas

1:24:18di bawah W3C

1:24:20yang memetakan

1:24:22macam-macam

1:24:24kayak pola sih.

1:24:26Jadi mereka menganalisa

1:24:28macam-macam desain sistem yang terkenal.

1:24:30Terus ya itu memetakan

1:24:32komponen apa sih yang paling banyak dipakai

1:24:34dan dibutuhkan di user.

1:24:36Contoh-contoh penggunanya, gimana

1:24:38koncernnya apa. Ini undisain semua?

1:24:42Iya, ini undisain.

1:24:44Nah karena mereka

1:24:50komunitas W3C

1:24:52ada kemungkinan misalnya kalau misalnya banyak

1:24:54dipakai nih. Kedepannya

1:24:56bakal di-propose buat jadi web

1:24:58komponen misalnya.

1:25:00Atau minimal jadi

1:25:02inspirasi, jadi referensi misalnya

1:25:04ya kayak

1:25:06dialog modal itu kan

1:25:08sekarang udah ada di browser ya.

1:25:10Yang Native Web API.

1:25:12Nah itu kan inspirasinya dari

1:25:14pola-pola yang

1:25:16ada di UI

1:25:18Component Library yang sudah ada sebelumnya.

1:25:20Nah ini bisa jadi referensi sih.

1:25:22Dan sebenernya seru aja sih.

1:25:24Kalau kita lagi lupa namanya apa

1:25:26cari aja di situ.

1:25:28Oh iya, contoh-contoh ini ya. Contoh-contoh UI

1:25:32yang sering digunakan.

1:25:34Atau kita pengen nunjukin

1:25:36orang nih misalnya.

1:25:38Story ya kali ya.

1:25:40Kumpulan.

1:25:42Koleksi.

1:25:44Oke menarik-menarik.

1:25:46Ngomongin web komponen mungkin kalau

1:25:48menurut saya justru web komponen

1:25:50ini cocok sekali dibikin untuk

1:25:52Component Library supaya

1:25:54generic bisa dipakai di semua framework.

1:25:56Ada. Salah satunya

1:25:58adalah Shoelace.

1:26:00Shoelace ini sekarang

1:26:02dia berubah menjadi namanya Web Awesome.

1:26:04Web Awesome

1:26:06adalah dari tim Phone Awesome.

1:26:08Mereka bikin framework baru.

1:26:10Web Awesome.

1:26:12Web Awesome.

1:26:14Bukan framework, UI

1:26:16Library baru. Jadi kayak bikinnya

1:26:18pakai web komponen seperti ini.

1:26:20Button, card,

1:26:22ada alert,

1:26:24pages, dan lain-lain tuh.

1:26:26Hasilnya jadi

1:26:30Shadow Domka

1:26:32atau

1:26:34hasilnya tinggal kita pakai gini aja.

1:26:36Ya jadi Shadow Dom.

1:26:38Web Komponen.

1:26:40Ya kayak, enggak tau ya.

1:26:42Kalau dia bilang turunannya

1:26:44Shoelace, ya kita lihat.

1:26:46Ya Web Komponen.

1:26:48Style ya. Shadow Dom.

1:26:50Hasilnya apa?

1:26:56Nah, cuma kalau Web Komponen

1:26:58itu agak males di

1:27:00styling-nya sih. Kan

1:27:02kalau nggak dibuka,

1:27:04nggak bisa di styling dari luar.

1:27:06Nggak tau kalau ini udah punya

1:27:10mekanisme sendiri, cuma nggak bisa

1:27:12di override, ditumpuk

1:27:14segampang itu kan style-nya.

1:27:16Kalau udah

1:27:18ngomongin browser, berarti

1:27:20ya Web Komponen jadinya jadi Shadow Dom.

1:27:22Kalau jadi HTML

1:27:24nggak mungkin dia nampilin ini kan ya.

1:27:30Ini dia baru buka Kickstarter.

1:27:32Jadi belum ada produknya.

1:27:36Baru coming soon kayaknya.

1:27:38Tapi ada yang free, tenang aja.

1:27:40Seperti biasa ya.

1:27:42Tapi Kickstarter-nya udah selesai.

1:27:44Tapi udah tercapai belum target-nya?

1:27:48Udah, udah. Jauh banget.

1:27:50Tercapai.

1:27:52Terus ntar drama lagi. Orangnya kabur

1:27:56atau apa?

1:27:58Perpecahan, ayo.

1:28:00Perpecahan.

1:28:02Oke, nah.

1:28:06Udah, cukup?

1:28:08Cukup ya. Cukup.

1:28:10Banyak. Ini tadi ada

1:28:12masukan dari Watashi.

1:28:14Watashi wa Watashi.

1:28:16Bahas Deno. Kita udah sempat

1:28:18bahas belum ya? Udah kan ya.

1:28:20Sedikit-sedikit sih ya. Nggak detail.

1:28:22Kita bahas Deno.

1:28:24Kita bahas Not Deno sama

1:28:26Boon, kan.

1:28:28JavaScript Engine itu masalah ya?

1:28:30JavaScript Runtime.

1:28:32Tapi nggak bahas Deno secara

1:28:34spesifik.

1:28:36Karena kita belum ada yang pake Deno.

1:28:38Jadi kita nggak tau juga ekosistemnya ya.

1:28:40Mungkin kalau ada

1:28:42temen-temen kenalan.

1:28:44Ada yang pake Deno, boleh ya.

1:28:46Kita interview. Kita ajak

1:28:48ngobrol lah. Karena kita penasaran

1:28:50juga sama Denonya ini.

1:28:52Terutama kalau di production ya.

1:28:54Maksudnya kalau cuma buat Hello World

1:28:56ya udah

1:28:58apa? As expected.

1:29:00Tapi maksudnya lebih ke

1:29:02kalau udah

1:29:04di ranah praktek kan kayak suka

1:29:06ada hal yang oh ternyata nggak bisa ini

1:29:08padahal perlu gini. Atau mungkin ada behavior

1:29:10yang beda yang maksudnya yang perlu

1:29:12kita tau. Nah, pengen

1:29:14penasaran sama

1:29:16itu sih.

1:29:18Pake pengalaman-pengalaman.

1:29:20Ingat Deno, jadi

1:29:22ingat baru apa?

1:29:24Si Ryan Dahlnya baru launching

1:29:26produk baru. Bikin lagi?

1:29:28Bukan. Ini untuk

1:29:30registri.

1:29:32Untuk menemani

1:29:34NPM.

1:29:36Menemani NPM dalam tanda kutip.

1:29:38Jadi pikes-pikesnya.

1:29:40Made for TypeScript

1:29:42and ESM. Karena kan kalau

1:29:44NPM kan ada

1:29:46apa? Ada macem-macem ya nyampur-nyampur ya.

1:29:48Ada ESM, ada

1:29:50apa?

1:29:52Tergantung entry point,

1:29:54kalau ini dia

1:29:56spesifik buat ESM dan TypeScript.

1:29:58Jadi nggak ada lagi itu ya?

1:30:02Yang apa?

1:30:04Bundler.

1:30:06Bundler biasa.

1:30:08Iya.

1:30:10Tapi dia tetap ngambilnya dari NPM.

1:30:12Gak apa namanya? Bukan

1:30:14Oh cuma dia pakai entry point yang

1:30:16ya apapun itulah type

1:30:18scriptnya.

1:30:20Siapin internet kencang.

1:30:22Internet kencang

1:30:24buat apa?

1:30:26Jangan

1:30:28kapan itu.

1:30:30Udah ganti

1:30:32beberapa kali ya. Oke.

1:30:34Mungkin untuk malam ini sekian dulu.

1:30:36Sebelum kita makin ngantur, kita ketemu

1:30:38lagi minum-minum

1:30:40topik-topik yang berbeda. Jangan lupa

1:30:42kalau temen-temen punya saran topik,

1:30:44bisa kesanain

1:30:46dot ngobrol in web. Tadi ada yang

1:30:48menyarankan

1:30:50bahas Deno, ada yang menyarankan bahas Elixir,

1:30:52silahkan.

1:30:54Kita diskusi disana.

1:30:56Kalau temen-temen punya pertanyaan

1:30:58seputar misalkan, wah ini

1:31:00mau UI library yang mana ya? Yang keren ya?

1:31:02Kita bahas setelah acara ini selesai,

1:31:04bisa disitu juga.

1:31:06Gak mesti harus bahas topik ya.

1:31:08Bisa bahas juga misalkan

1:31:10ada library yang bagus,

1:31:12yang mungkin

1:31:14kita jajal, kita coba.

1:31:16Ya bisa disajis disana.

1:31:18Oke. Untuk malam ini, sekian

1:31:20dulu. Terima kasih banyak buat semuanya yang

1:31:22sudah menemani kita

1:31:24ngobrol-ngobrol dan belajar bareng malam hari ini.

1:31:26To-de-iler-nya banyak sekali

1:31:28malam ini ya.

1:31:30Dan ngelantur juga kemana-mana.

1:31:32Oke. Ketemu lagi minggu depan.

1:31:34Selamat malam. Bye-bye.