Ngobrolin Storybook - Ngobrolin WEB

0:00[musik intro]

0:10Dapatkan hanya di Domain Asia

0:13[musik intro]

0:22Halo, selamat malam semuanya

0:26Biasanya Airhorn, sekarang ini aja

0:29Ya mirip lah sama-sama telwet

0:33Gimana kabarnya semuanya, teman-teman di Youtube dan di LinkedIn

0:39Apa kabarnya malam ini, mudah-mudahan sehat semuanya

0:44Kita rencananya bertiga, tapi yang satu belum muncul

0:49Oh lagi OTW katanya, dari kamar ke kamar kerja

0:56Dari kamar ke komputer

1:00Biasa kalau kantornya di rumah, OTW-nya deket lah ya, aman ya

1:05Oke, jadi malam hari ini kita akan bercerita

1:13Oh bercerita, kita akan diskusi

1:17Tentang cerita

1:19Tentang cerita, jadi kalau teman-teman front-end kayaknya udah familiar ya sama tools ini ya

1:24Nah ini dia udah sampai

1:26Ada juga yang belum

1:28Nah, dateng juga

1:30Tapi kamera angle nya beda ya

1:32Salah, ngadep

1:34Nah, kameranya dua ya berarti

1:36Iya, ini apa pamer

1:40Pamir kursi kayaknya

1:42Diatan mereknya

1:44Oh bukan

1:46Ini laptop baru dinyalain yang dinyala default camera

1:52Oh jadi kameranya external ya berarti

1:56Webcam

2:00Bukan

2:02Iya, karena kan dua monitor, satu disini, satu disini

2:08Oh monitornya dua

2:10Dan monitor kan gak punya webcam

2:14Ada sih, cuma laptopnya sebelah sini

2:18Jadi yang dinyala pertama webcam

2:21Eh salah

2:23Gak kelihatan

2:27Muternya gak 360

2:33Udah gak usah dikasih liat

2:37Kita bahas setup kapan-kapan

2:39Oh iya bahas setup kapan-kapan enak juga

2:43Bahas setupnya maksudnya ergonomisnya gitu loh

2:50Karena ergonomis itu penting

2:53Betul, kalau gak sakit punggung

2:56Sakit punggung, sakit pantat, sakit pinggang

3:00Sakit hati, sakit gigi

3:03Oh iya

3:04Terpal tunnel

3:08Jadi malam ini kita akan bahas tentang storybook

3:13Kalau temen-temen foreign kaya udah familiar ya sama storybook

3:16Tapi sebelum kita ngomongin storybook

3:18Kita mau terima kasih dulu buat temen-temen dari Dominicia

3:22Karena episode ini kembali hasil kolaborasi kita ngobrolin web dengan Dominicia

3:28Jadi kalau temen-temen mau cobain

3:32Bisa pakai promo code ngobrolin vpsdn

3:37Jadi ngobrolin virtual private server Dominicia

3:41Ngobrolin vpsdn

3:43Sekarang hosting udah gak ada promo code lagi?

3:46Sebenernya ada

3:48Eh gak tau ya udah di hapus atau belum ya

3:50Tapi sekarang promonya beralih dari hosting ke vps

3:56Dapat diskon 50% untuk pembelian baru

3:59Wow lumayan banget

4:01Karena waktu kita pembicaraan yang lalu

4:04Kita omongin javascript framework segala macem gitu ya

4:08Yang kayaknya lebih cocok kalau apa yang kita omongin bisa langsung dicoba di vps

4:15Bukan share hosting

4:17Mungkin temen-temen yang nonton

4:20Ada yang pernah pengalaman pakai Dominicia?

4:23Belum sih

4:24Saya pengalaman baru beli domain

4:26Di Dominicia

4:28Saya bukan saya sih

4:31Saya pakai untuk wp-id.org

4:39Wp-id.org

4:42Ini ya komunitas WordPress Indonesia

4:46Saya pakai Dominicia

4:51Apanya? Hostingnya?

4:54Vps

4:56Ini ya?

4:58Iya

5:00Ini pas acara apa nih?

5:05Ini WorkCamp Jakarta 2019

5:09Rame ya

5:12Oh rame ya 300an orang 350 pas 370 gitu

5:17Ini siapa? Oh gak bisa di zoom ya

5:21Zoom zoom zoom

5:23Pecah

5:25Pecah

5:27Oke

5:29Ini di vps-nya Dominicia ya

5:32Jadi kalau temen-temen yang tertarik mau nyobain bisa coba yang cloud vps turbo

5:39Jadi apa namanya promo-nya atau diskon-nya itu hanya berlaku untuk vps turbo tapi tidak berlaku untuk vps echo

5:52Saya pakai apa ya? Lupa

5:56Ntar saya lihatin

5:58Oh ya saya lupa pakai yang mana

6:04Tapi ini komunitasinya jalan terus ya ini terakhir 5 Juni masih ada hosting ya

6:12Masih dong

6:14Masih ada meet up ya

6:16Baru biasa

6:18Jalan

6:20Maksudnya grassroot itu apa sih?

6:30Akar rumput

6:34Jadi kita gak akan bisa hilang gitu

6:38Jadi tetap ada jantungnya tetap ada gitu

6:42Iya yang gini-gini nih

6:44Komunitasnya gak harus meet up harus presentasi WFC aja cukup ya sebenarnya

6:52Ngobrol-ngobrol santai

6:54Terus kerja bareng di satu tempat gitu kan

7:00Tapi biar bisa gitu prasiratnya jumlah orangnya harus banyak dulu

7:06Kenapa harus banyak?

7:08Ya enggak maksudnya harus cukup banyak kan WFC juga belum terus semua global semua bisa

7:16Ya jadi apa si A gak bisa lagi gak bisa lagi gak bisa aktif

7:20B, C, D masih bisa ya walaupun aktivitas se-simple apapun masih bisa nyalainin

7:26Nanti giliran B yang lagi gak bisa atau pindah keluar kota atau apapun

7:30A, C, D masih bisa melanjutin

7:34Saya punya kisah sukses juga nih dari temen yang urusin WordPress Tegal

7:42Dia dari yang hanya dulu masalahnya ikut terlibat kecil-kecilan

7:50Terus dia pernah ikut terlibat urusin WordPress di Tegal

7:58Lalu dia pernah juga terlibat di Translation

8:02Masih aktif banget orangnya masih hari Sutiwono

8:06Terus sampai dia satu titik sekarang untuk menjalankan komunitas ini dia disponsori

8:16Disponsori sama perusahaan luar untuk menjalankan komunitas WordPress

8:24Maksudnya digaji untuk menjalankan komunitas gitu digaji dan apa?

8:28Full time sih cuman disponsori artinya

8:32Ada honornya lah ya

8:34Ada honornya hour base itu

8:36Ya ada hitungan jamnya

8:38Jadi kalau dia misalnya bilang 15 jam seminggu untuk komunitas ya dia akan dibayar

8:46Karena buyo bisa konsisten juga berarti kan

8:50Konsisten sekali bertahun-tahun konsisten dan dia sampai akhirnya bisa disponsori

8:57Mantap-mantap

9:00Terus apa ini undang lah?

9:02Oh iya benar

9:04Bahas komunitas WordPress

9:06Grassroot Community Engagement

9:08Nah ini ada beberapa nih

9:12Wan Satya langganan kalau beli domain ya

9:15Nama juga Domain Indonesia

9:18Domain Indonesia

9:20Selamat malam Mas Ricky, Mas Pata

9:25Sama Link In User

9:27Hello Link In User

9:29Bisa anon ya Domain Indonesia

9:31Iya bisa anon ya

9:33Apa karena kita belum mutualan mungkin ya

9:35Jadi namanya gak keluar atau gimana ya

9:38Oke jadi malam ini kita akan bercerita

9:40Eh aku masalah pernah ke ini kan

9:42Oh iya eike kan pernah ke kantor Domain Indonesia kan ya

9:45Pernah

9:46Pernah

9:47Pernah nonton event

9:49Jadi apa?

9:51Terpukul tangan nya yang keren

9:56Acara apa?

9:58Acara apa?

10:00Acaranya Domain Asia

10:02Iya maksudnya bicarain tentang apa?

10:04Oh WordPress dan AI

10:07Oh

10:09Plugin apa tuh?

10:11Plugin buat auto konten

10:13Iya maksudnya saya waktu itu

10:16Kasi pembukaan

10:21Oh keynote keynote

10:23Ya keynote

10:25Dan nyasih tau tentang

10:28Bagaimana sih

10:29Perkembangan AI dan WordPress

10:32Itu bisa

10:33Dan saya kasihin demo

10:35Demo bagaimana

10:37Demo simpel aja sebenarnya

10:39Kayak

10:45Generated content pakai AI

10:47Lalu di samping kanan itu

10:49Langsung ada

10:51Chat GPT

10:52Jadi bisa nanya langsung tentang fakta-fakta dari AI

10:55Langsung konek ke OpenAI ya

10:57API

10:58Bisa nanya jadi kayak

11:00Kayak asisten lah ya

11:02Terus bisa ngerewrite, ngerefresh

11:05Refraser

11:07Supaya bahasanya lebih baik

11:10Sampai

11:13Upscaling image

11:15Di WordPress Media Library

11:17Jadi yang di upload file-nya kecil

11:19Jadi gede

11:21Kalau digusarin biasa pecah

11:23Pixelnya bisa di upscaling

11:25Namun

11:27Saat itu kan itu 2 tahun lalu ya

11:29Kayak apa 1 tahun lalu ya

11:31Iya udah lama

11:33Ampir 2 tahun lah ceritanya

11:35Itu waktu awal-awal chat GPT

11:37Baru mulai laris lah

11:39Nah itu teknologi jaman itu

11:41Masih

11:43AI-nya masih kurang ya

11:45Jadi kalau yang upscaling image

11:47Not too good lah

11:49Kalau image-nya

11:51Base-nya

11:53Cartoon, bagus banget

11:55Tapi kalau base-nya

11:57Orang

11:59Ada kekeliruan

12:01Ada halusinasi-nya

12:03Oh iya, kalau dulu

12:05Jarinya 7 ya

12:07Ada jari itu biasanya itu

12:09Ketauan dari AI

12:11Kalau sekarang

12:13Tengahnya 3, jari nya 7

12:15Tapi harusnya sudah jauh lebih baik

12:17Oke

12:19Mudah-mudahan ini ya

12:21Ada kesempatan kita buat

12:23Ngisi acara di

12:25Domenisia, di kantor Domenisia ya

12:27Offline ya, offline ya, ngobrolin web

12:29Jadi temen-temen dari Jogja

12:31Bisa ngumpul-ngumpul bareng ya

12:33Oke

12:35Sekali lagi terima kasih

12:37Buat Domenisia

12:39Buat kolaborasinya

12:41Kita sekarang langsung ngobrolin

12:43Tentang storybook

12:45Storybook

12:47Itu topik yang laris ini

12:49Laris ya, kenapa laris?

12:51Kan kita punya

12:53A-vote-nya kan, tentang storybook

12:55Ya nggak sih?

12:57Karena udah lama juga ya

12:59A-vote

13:01Gue juga nge-vote kemarin

13:03Memanipulasi voting

13:05Mungkin sedikit

13:07Apa ya, sedikit background

13:09Ini storybook ini kan udah lama

13:11Dan dulu saya

13:13Terakhir pakai

13:15Itu

13:17Masih berat banget

13:19Dulu itu stigma nya itu

13:21Blotted banget

13:23Sekarang kayaknya

13:25Mereka udah berbenah ya

13:27Dan 2 tahun

13:29Ada podcastnya menarik sih

13:31Lupa podcast Syntax FM

13:33Itu nggak salah

13:35Belum terlalu lama lah sekitar 2-3 bulan yang lalu

13:37Ya itu emang

13:39Lawan cara sama

13:41Maintainer storybook

13:43Dan emang dia juga

13:45Adress bahwa

13:47Kayak stigma storybook itu blotted

13:49Itu udah kayak

13:51Menahun gitulah, padahal

13:53Sebetulnya dari sekitar 1-2 tahun yang lalu

13:55Mereka itu udah switch ke feed

13:57Udah nggak webpack lagi

13:59Jadi itu udah ngobrolin

14:01Karena banyak

14:03Ada beberapa sebagian yang

14:05Udah ditulis ulang

14:07From the ground up

14:09Jadi kayak di refactor

14:11Sama yang terakhir

14:13Dulu ada beberapa add-on

14:15Yang default

14:17Jadi sebetulnya kayak

14:19Seninya itu kan kompleks banget sistemnya

14:21Kayak seni

14:23Mecah-mecah service atau library

14:25Kan emang sebetulnya

14:27Under the hood kan masing-masing utility

14:29Itu kayak ada package-nya

14:31Tapi user end user

14:33Terus developer yang meng-consume storybook

14:35Itu agak kusing kan kalau begitu

14:37Install tiba-tiba dependency-nya jadi banyak banget

14:39Nah itu kayak

14:41Mereka ngakalin ya sebenarnya

14:43Functionality-nya ya tetap

14:45Mostly sama aja

14:47Nggak dipangkas signifikan, cuma

14:49Ada yang disatuin

14:51Ada yang digabungin, intinya jadi

14:53Nggak terlalu kayak tiba-tiba dependency-nya

14:55Banyak banget dan bikin orang yang

14:57Ya

14:59Dulu inget pas

15:01Apa namanya? Pas

15:03Lagi bloated-bloated-nya tuh ada yang bikin

15:05Alternative-nya

15:07Kayaknya

15:09Nggak ada yang

15:11Awet lama

15:13Ada yang bagus namanya react style

15:15Guide-ness

15:17Tapi terlalu nice di react doang

15:19Udah dari

15:21Dulu juga dan ya nggak

15:23Tetap aja itu lebih simple

15:25Simple-simple banyak sih

15:27Dulu sampe coba apa

15:29Storybook itu sebenarnya

15:31Awalnya react doang sih ya

15:33Iya awalnya

15:35Di mulai dari react

15:37Tapi

15:39Mungkin salah satu yang bikin storybook tetap

15:41Pertahanan adalah fiturnya ya, fiturnya super lengkap

15:43Dan add-ons-nya itu banyak

15:45Jadi orang

15:47Nggak perlu bikin sendiri gitu ya

15:49Bisa satu tempat

15:51Benar-benar kayak persis banget

15:53Seperti bahasanya storybook

15:55Karena jadi

15:57Front-end component

15:59Kayak

16:01Library

16:03Kitchen sink

16:07Tempat cuci piring

16:09Workshop sih

16:11Jadi definisi yang di website-nya

16:13Storybook itu

16:15Udah cukup deskriptif sih

16:17Dan sebetulnya nge-definisinya tuh

16:19Agak sulit ya, apa sih

16:21Storybook itu karena

16:23Produk yang persis kayak gitu

16:25Library yang persis kayak gini

16:27Itu ya nggak ada bisa dibilang

16:29Relatif sedikit lah

16:31Karena ini itu

16:33Title-nya bagus sih, build, test, and document

16:35Jadi apa waktu kita lagi nge-develop

16:37UI itu kan visual ya

16:39Apa

16:41Ya kayak misalnya kalau kita nulis

16:43Apa

16:45Function lah, nulis function kan

16:47Sambil nyalain testing ya

16:49Terus watch kan bisa kan

16:51Setiap kita save, kalau masih belum bener

16:53Ya itu apa, masih

16:55Merah, masih merah

16:57Ya udah kita ngetik lagi

16:59Atau nyuruh AI benerin, sampe kelar

17:01Sampe hijau semua

17:03Oke itu kan kalau nulis function ya

17:05Terus kalau misalnya UI kan

17:07Kita butuh feedback yang kayak gitu juga

17:09Tapi ya maksudnya

17:11Kalau kita harus nyalain seluruh aplikasi web

17:13Terus dengan segala

17:15Apalah side effect atau

17:17Yang dimanggil API

17:19Kita buka halaman benerannya

17:21Kadang yang males kan, maksudnya ini

17:23Salah satu cara yang efektif juga sih

17:25Jadi pas proses nge-develop

17:27Itu storybook kepake

17:29Ya workshop kan

17:31Workshop budang kan tempatnya kita kerja

17:33Tapi ini juga bisa untuk testing

17:35Sama untuk documenting

17:37Jadi kayak, bukan end to end sih

17:39Cuma pas kita lagi, pas developer lagi bikin

17:41Lagi ngetik kodenya

17:43Sampe udah selesai, di deploy

17:45Di publish untuk

17:47Stakeholder lainnya

17:49Visual testing kali ya

17:51Visual testing ya, tapi

17:53Perkomponen

17:55Dan sebenernya nggak cuma visual sih

17:57Testingnya banyak banget

17:59Jadi testing, kita mau masuk

18:01Ingest atau testing library

18:03Juga bisa, accessibility juga

18:05Juga bisa, tapi storybook itu

18:07Storybook nya sendiri itu gratis

18:09Open source kodenya

18:11Tapi mereka ini adalah produknya

18:13Perusahaan commercial yang namanya

18:15Chromatic

18:17Chromatic itu bekerja di visual testing

18:19Jadi ada produk berbayarnya

18:21Maksudnya

18:23Mereka punya service

18:25Terus cloud positive team mereka

18:27Untuk visual testing, beneran literally

18:29Untuk compare, jadi misalnya

18:31Di iteration atau

18:33Di publish yang hari ini itu

18:35Mereka bikin screenshotnya semua

18:37Terus besok, kalau kita mau

18:39Nge-push lagi

18:41Bisa di setting ke branch git

18:43Atau semacamnya, atau di storybook

18:45Nya sendiri juga bisa compare

18:47Apa yang berubah

18:49Ini intentional atau nggak, jadi kayak

18:51Bikin screenshot dan meng-compare

18:53Screenshot visualnya

18:55Nah, itu ada free tiernya sih

18:57Gua pernah nyoba, tapi abis itu

18:59Nggak pernah pakai lagi karena nggak

19:01Senyat itu, tapi sebenarnya yang

19:03Layanan commercialnya dari situ, layanan

19:05Chromaticnya, dan itu nggak

19:07Wajib sih pakai storybook

19:09Beratus gratis aja

19:11Ini lebih kayak

19:13Design system

19:15Kalau design system kan gambar ya

19:17Jadi kayak Figma gitu kan

19:19Ini berarti lanjutannya ya dari Figma

19:21Terus mungkin

19:23Kita mau mulai bikin satu

19:25Komponen button

19:27Button itu ada property apa aja

19:29Warnanya kayak gimana, terus

19:31Mungkin ada bordernya apa

19:33Ketika disable gimana, ketika

19:35Enable gimana gitu ya

19:37Gimana urutannya?

19:39Urutannya waktu saya bekerja nih misalnya ya

19:41Dari awal pembuatan misalnya

19:43Mau klien datang, mau bikin website

19:45Terus kemudian

19:47Dari sisi UX

19:49Yang mendefinisikan semua

19:51Angan-angan itu

19:53Yang abstrak itu

19:55UX lah, yang ngomong

19:57Tidak, yang ngomong

19:59Yang ngomong itu

20:01Yang ngomong itu

20:03Yang ngomong itu

20:05UX lah, yang ngomong itu

20:07Sampai jadilah skeleton

20:09Biasanya ke skeleton

20:11Journey, segala macem lah

20:13Lalu dari UX

20:15Kemudian jadi UI

20:17Jadilah Figma

20:19Design system lah

20:21Color hex code-nya itu

20:23Segala macem apalah

20:25Bentuk fill

20:27Button

20:29Rounded corner-nya itu

20:31Seberapa segala macem

20:33Button pill bahasanya

20:35Button pill-nya itu seperti apa

20:37Card

20:39Biasanya card, mau bentuk cardnya

20:41Image bawa text

20:43Text kiri

20:45Kanan segala macem

20:47Terus semua font type-nya segala macem

20:49Di Figma

20:51Urutannya itu setelah dari

20:53UI selesai

20:55Tempat saya bekerja

20:57Dulu itu si

20:59Front-end itu sudah mulai jalan

21:01Front-end itu

21:03Sampai membuat storybook

21:05Komponen itu kelar

21:07Dan saya biasanya yang di bagian back-end

21:09Membuat semua

21:11Type data dan data structure-nya itu

21:13Seperti apa

21:15Data structure mau disimpan atau gimana

21:17Tampilin block-nya itu seperti apa segala macem

21:19Nah, terus kemudian

21:21Secara kode yang untuk

21:23Front-end-nya itu

21:25Saya nanti tinggal ambil si front-end bilang

21:27Ini pro apa namanya

21:29Jadi building block-block-block-nya itu

21:31Sudah ada di storybook semua

21:33Saya gak mau tau, tinggal

21:35CSS-nya udah dia buat, udah dia library-in

21:37Segala macem rapi structure-nya

21:39Komponennya udah jadi

21:41Saya tinggal sebenarnya tinggal pakai

21:43Tinggal konekin bahasanya

21:45Kalau saya itu wiring

21:47Jadi dari sisi back-end

21:49Saya tinggal ngewire ke komponen

21:51Jadi komponen itu

21:53Kalau dari sisi front-end

21:55Semua komponen itu masih

21:57Ya kan

21:59Misalnya lorem ipsum

22:01H1 lorem ipsum

22:03Saya yang ngebuat H1-nya itu jadi

22:05Ada datanya dari database

22:07Jadi wiring semua komponen-komponen

22:09Dan jadi lah website

22:11Enaknya dengan ada storybook ini

22:13Pekerjaan front-end dan back-end

22:17Paralel

22:19Mereka jalan, saya jalan

22:21Dan

22:23Nanti setelah hampir

22:25Saya udah mau jadi setengah

22:27Mereka udah jadi setengah, tinggal

22:29Process wiring aja sambil jalan

22:31Jadi

22:33Serasa lebih efisien

22:35Serasanya lebih efisien

22:37Bahkan mungkin lebih efisien

22:39Kadang gak banyak ini kan

22:41Gak banyak

22:43Apa istilahnya ya

22:45Gak banyak ngontok-ngontokan

22:47Pokoknya jadi

22:49Rapi, saya tinggal pakai

22:51Tinggal konekin aja sebenarnya

22:53Kadang-kadang kan kalo

22:55Tidak terdokumentasi gini kan kita bingung kan

22:57Ini button yang untuk

22:59Delete udah ada belum ya

23:01Akhirnya

23:03Mungkin lagi baru CSS-nya

23:05Udah ada aplikasi

23:07Biasanya hover-nya kan

23:09Gak dipikirin kan

23:11Jamanya kalo ngedesain

23:13Pakai Photoshop

23:15Atau Corel

23:17Jamanya dulu

23:19Desainnya cakep

23:21Tetapi gak mikirin

23:23Ini kalo di hover gimana

23:25Udah realistis, kalo textnya panjang aja

23:27Textnya panjang juga

23:29Menunya udah dibikin cakep, ada logo, ada menu

23:31Terus kalo misalnya

23:33Textnya terlalu pendek ya pokoknya gak

23:35Beda sama yang di konsep

23:37Contoh, iya

23:39Jadinya aneh kan

23:41Kalo disini, kalo di Storybook ini

23:43Enaknya bisa ada desktop view

23:45Tablet view

23:47Mobile view

23:51Oke

23:53Jadi kalian juga bisa liat sih

23:55Hasilnya langsung

23:57Live kan

23:59Bisa di klik gitu ya

24:01Ini komunikasi untuk semua stakeholder

24:03Frontend sama back-end

24:05Atau mungkin full-text

24:07Terus ke desainernya yang orang UI

24:09Yang pure orang UI kan

24:11Kadang bikin desain

24:13Bagus secara visual

24:15Cuma gak terlalu mengantisipasi

24:17Realitas tuh kayak gimana kan

24:19Nah, ini kita bisa komunikasi ini kan

24:21Mungkin butuh text yang

24:23Lebih panjang ya itu trangkait

24:25Apa? Trangkaitnya gimana kalo judulnya

24:27Misalnya 5 baris jadi ke

24:29Stretch

24:31Nah, itu kan orang UI yang pure UI

24:33Bukan moding

24:35Umumnya kurang mengantisipasi

24:37Hal-hal kayak gitu kan

24:39Nah, ini jadi bisa untuk komunikasi stakeholder juga

24:41Terus buat orang product lah

24:43Atau apalah

24:45Atau mungkin buat demo ke client

24:47Sementara progress-nya kayak gini

24:49Untuk skenario-skenario

24:51Wireframe misalnya flow-nya gimana

24:53Bisa dibikin section-nya juga

24:55Betul, dan ini

24:57Tambahan juga

24:59Untuk reusable component ya

25:01Sangat membantu ya

25:03Storybook, karena

25:05Bisa dipake

25:07Bareng-bareng, dimana aja gitu kan

25:09Maksudnya dimana aja di halaman yang mana

25:11Kita tinggal liat, oh

25:13Ini ada button, ini, oh ini

25:15Ada card, product card

25:17Yang gambarnya

25:19Imagenya di kiri atas gitu kan

25:21Dan reusability

25:23Faktor reusability-nya

25:25Itu jadi oke juga sih

25:27Oke banget, bener tuh bentu untuk bikin

25:29Reusable, karena kadang kasusnya

25:31Kita udah punya card, terus

25:33Ya sekian bulan kemudian udah

25:35Ngerjain project lain, balik ke project itu

25:37Terus ada brief baru

25:39Atau fitur baru, bikin card baru

25:41Lagi, yang tadinya misalnya

25:43Kalau card lama, bordernya

25:454px, terus sekarang bikin

25:47Card baru yang mirip

25:49Tapi beda

25:51Tiba-tiba rounditnya 6px atau 10px

25:53Gak konsisten jadinya ya

25:55Bikin lagi

25:57Nah, kalau kita udah punya dokumentasi ini

25:59Jadi ya bisa buat

26:01Itu juga kan sebelum bikin, oh udah-ada

26:03Ini tinggal dicomot, cuma mungkin

26:05Buat fitur misalnya apa, background-nya

26:07Dibikin lebih prominent, karena ini

26:09Feature pose atau apa, cuma membantu

26:11Faktor reusability

26:13Reusable-nya

26:15Reusable-nya ya

26:17Nah, tadi ada link yang saya kasih Mas Riza

26:19Ada, tapi belum

26:21Load nih, lama banget

26:23Oh gitu, nah oke

26:25Lanjut-lanjut

26:27Saya gak bilang ini

26:29Desain metodologian terbaik, tetapi

26:31Ini salah satu yang saya pakai

26:33Bukan saya yang pakai sih

26:35Lebih tepatnya secara

26:37Team decided

26:39Agree untuk menggunakan

26:41Desain metodologi ini

26:43Jadi saat

26:45Pembicaraan, ya aku gak buka

26:47Kebuka-buka ya, jadi saat

26:49Pembicaraan dari

26:51Dari

26:53UI komponennya sendiri pun

26:55Dari yang desain

26:57UI desainnya, itu sudah

26:59Membuat, udah memikirkan

27:01Atomic design metodologi, jadi

27:03Secara kesepakatan bersama sebenarnya

27:05Atomic design ini saya gak

27:07Load, cuma, jadi dia bisa

27:09Memecah-mecah

27:11Desain itu menjadi ada yang namanya Atoms

27:13Atom, komponen

27:15Organism

27:17Template sampai pages

27:19Jadi ada yang paling kecil itu atom

27:21Anggap aja itu cell

27:23Atau

27:25Ya, cell

27:27Jadi misalnya

27:29Komponen terkecil daram sebuah

27:31Desain, kalau kalian bayangkan sebuah page ya

27:33Sebuah halaman

27:35Contohnya ini deh

27:37Komponen terkecilnya itu kan mungkin button

27:39Anggap aja text dan button ini

27:41Button-button made for

27:43Made for

27:45Yang kecil-kecil itu loh, made for react, feed

27:47Apa tuh namanya

27:49Anggular, itu kan namanya

27:51Kecil, itu atom

27:53Terus molekul, ya itu

27:55Sebuah

27:57Ini, komponen

27:59Atom-atom tadi, jadi

28:01Made for apanya itu

28:03Sudah dikumpulin jadi satu

28:05Terus organism

28:07Satu row

28:09Organism satu row

28:11Jadi biasanya page itu

28:13Ada row-row nya kan

28:15Row itu satu

28:17Satu

28:19Organism satu row

28:21Lalu kemudian

28:23Naik lagi

28:25Templates, jadi misalnya

28:29Template halaman

28:31Home page, template

28:33Jadi template itu kumpulan dari

28:35Beberapa organism

28:37Home page, single page

28:39Contact page, segala macem

28:41Baru jadi pages

28:43Jadi

28:45Ada desain sistem yang lain

28:47Cuma ini adalah salah satunya

28:49Nah gue dulu berusaha

28:51Nerapin ini nih

28:53Cuma prakteknya ya gak tau ya

28:55Mungkin kalau orang yang

28:57Jago apa

28:59Project management atau UI

29:01Mungkin bisa, tapi gue dulu

29:03Berusaha ngajak

29:05Ini, cuma yang lain

29:07Yang gak ada run-in lainnya sih

29:09Cuma satu visual designer

29:11Prakteknya

29:13Makin banyak konten pusing

29:15Jadi akhirnya yang lebih realistis

29:17Cuma punya atom

29:19Kalau atom itu bisa lebih gampang

29:21Untuk sepakat itu

29:23Semua item paling kecil

29:25Atom yaudah, sisanya yang kayak

29:27Full organism punya

29:29Combination of atoms

29:31Udah jadi kayak Lego block aja

29:33Nah langsung lompat ke template

29:35Dan pages

29:37Jadi apa, mungkin kalau di team yang

29:39Lebih terbiasa dan professional

29:41Dan punya

29:43Pengalaman buat apa ya

29:45Kayak desain thinking blablabla

29:47Mungkin bisa, nah kalau gue kan

29:49Yang gak punya pengalaman itu cuman

29:51Model baca ini aja, kayaknya lucu

29:53Kayaknya bagus nih untuk nerapin

29:55Harus ngelit mendefinisiin

29:57Prakteknya itu

29:59Definisinya kan gak se clear cut

30:01Di teori itu

30:03Pas ada kebutuhan

30:05Macam-macam, itu mana yang

30:07Organism, mana yang

30:09Itu paling sering

30:11Konflik

30:13Dan harus ngawal kan

30:15Dan jujur gak ada resourcenya

30:17Karena timnya kecil banget dan

30:19Gak ada orang yang ngerti kayak gitu

30:21Ya udahlah, ambil gampangnya aja

30:23Dan setiap hal yang lain

30:25Perinsip pikirnya sih

30:27Tetep kepake ya, tetep bagus

30:29Maksudnya itu prinsip yang bagus

30:31Cuma, mungkin kalau

30:33Di tempat Ivan lebih berhasil

30:35Kalau pengalaman gue harus ngelit kayak gitu

30:37Gak ada legoblog aja

30:39Lebih ke lego

30:41Potongan-potongan lego kan

30:43Bisa satu sendiri, bisa ditumpuk

30:45Bisa bikin kumpulan

30:47Yang lebih intrikit lah

30:49Yang lebih kompleks

30:51Karena waktu, ini bukan tempat saya kejar sekarang

30:53Yang lalu itu

30:55Front end directornya itu

30:57Sakle

30:59Kayak strict

31:01Kayak menarahkannya itu

31:03Sangat entusias

31:05Fanatik dan entusias

31:07Nah, jadi gak cuma fanatik doang

31:09Dia enforcing

31:11Tetapi dia mengarahkan

31:13Sampai UI-UI nya itu

31:15Juga diarahkan sama dia

31:17Karena sebelum

31:19Front end mulai mengerjakan

31:21Front end itu harus

31:23Harus approval

31:25Front end dulu kan, sebelum

31:27Diserahkan ke client sebenarnya

31:29Jadi jangan salah

31:31Banyak kan pengalaman saya

31:33Waktu bekerja di agensi

31:35Di Indonesia

31:37Design itu udah di approve client

31:39Baru diserahkan ke

31:41Team, ke developer

31:43Atau engineer

31:45Alhasil bahasanya, itu udah di approve client

31:47Di rumah gak bisa

31:49Udah di approve client, gak bisa

31:51Jadi kalau yang lalu itu

31:53Strict nya itu adalah

31:55Approval dari team dulu

31:57Baru ke client

31:59Kasih tau dulu, ini team

32:01Ini begini bisa gak?

32:03Dibahas lah itu secara team meeting

32:05Misalnya kalau misalnya

32:09Dibikin desainnya cakep yang misalnya kayak

32:11Banyak floating-floatingnya gitu

32:13Kayak apa

32:15Mungkin

32:17Kalau budgetnya besar, di iain

32:19Tapi kalau budgetnya kecil, enggak

32:21Ini kita budgetnya terbatas, jangan bikin yang

32:23Aneh-aneh, kayak gitu

32:25Mungkin buat temen-temen yang

32:29Belajar React

32:31Ini juga kayaknya senada ya

32:33Sama thinking in React, kalau temen-temen

32:35Familiar

32:37Jadi kalau misalkan ngeliat

32:39Satu halaman gitu ya

32:41Itu di break ke komponen

32:43Jadi kecil-kecil

32:45Nah ini sebenarnya basicnya dari sini

32:47Ini sudah organism kalau bagi saya

32:51Iya, maksudnya basicnya dari sini yang tadi itu

32:53Jadi perkembangan lebih lanjut dari ini

32:55Ini lumayan

33:01Thinking in React ini lumayan

33:03Membantu ketika kita baru

33:05Terutama yang baru belajar tentang

33:07Komponen base framework ya

33:09Ini cukup membantu

33:13Bahasanya kalau di sini masih ada yang namanya

33:15Ada yang

33:17Dump component

33:19Dump component sama smart component

33:21Ya

33:23Sekarang diganti jadi

33:25Presentational

33:27Kalau jaman dulu dump component

33:29Nggak ada yang bodoh ya

33:31Bodoh

33:33Component bodoh sama component

33:35Tinter

33:37Sekarang apa namanya?

33:39Presentational sama control

33:41Nggak tahu lupa satu lagi apa lupa

33:43Oke, kita kembali ke

33:49Storybook ya

33:51Apa namanya

33:53Tadi ya, flow-nya ya

33:55Berarti

33:57Sebentar

33:59Berarti

34:01Kalau kita

34:03Pada saat

34:05Oh jadi supaya bisa parallel tadi ya

34:07Antara si front-end

34:09Mengerjain satu-satu

34:11Di back-end, oh ini komponennya udah jadi

34:13Ini bisa dipake gitu ya

34:15Nggak saling menunggu ya

34:17Jadi pertama setelah

34:19Setelah desain sudah kelar

34:21Maksudnya

34:23Secara face

34:25Face-nya desain udah kelar

34:27Sembari itu juga

34:29Saya dan

34:31Back-end dan front-end itu juga membuat

34:33Sebuah technical documentation

34:35Jadi kalau

34:37Component X

34:39Yang besar ya, component card

34:41Itu misalnya data ini

34:43Ambil data dari post

34:45Data ini diambil dari kategori

34:47Data ini diambil dari product

34:49Data ini diambil dari apa

34:51Kan jadilah sebuah data type

34:53Data-data type ini kan sudah kita define semua

34:55Data structure-nya itu ada

34:57Bagaimana data disimpan di CMS

34:59Atau di database

35:01Sudah didefine di technical documentation

35:03Atau kalau di

35:05Case yang lain, schema

35:07Data schema-nya itu

35:09Sudah jadi

35:11Kalau schema sudah jadi

35:13Sudah di-agree bersama

35:15Ini idealist way ya

35:17Kadang ada si kita shortcut-shortcut

35:19Sana-sini kita gantung timeline

35:21Dan budget kembali lagi

35:23Kalau idealist-nya

35:25Schema sudah jadi

35:27Si front-end

35:29Sudah bisa jalan

35:31Dengan menggunakan

35:33Apa yang fake data

35:35Untuk data fake

35:37Dipake JS

35:39Faker

35:41Nah, pakai faker bisa

35:43Disimulate data dari schema

35:45Kan bisa di-faker kan

35:47Jadi ini sudah bisa jalan

35:49Tanpa menunggu back-end kelar

35:51Jadi back-end itu cuman kayak membuat database

35:53Membuat CMS

35:55Dan meng-outputkan sesuai schema

35:57Jadi waktu combine

35:59Wiringnya itu

36:01Ya tinggal sebenarnya

36:03Datanya ini

36:05Sambungkan ke komponen-komponen

36:07Yang sudah mereka sambungin

36:09Sebenarnya tinggal ganti data source

36:11Idealist-nya begitu

36:15Tapi praktisnya

36:17Banyak yang terjadi

36:19Ada-ada aja lah

36:21Yang limit

36:23Text-nya

36:25Nggak diatur, akhirnya harus

36:27Jadi overflow

36:29Ada yang macam-macam lah

36:31Ya namanya

36:33Projek pasti ada aja

36:35Ada aja lah

36:37Di tengah jalan ketemu aneh-aneh

36:39Ini dari storybook

36:41Showcase, beberapa

36:43Inspirasi

36:45Kalau pengen

36:47Kalau pengen lihat penggunaannya

36:49Jadi salah satu keunikan storybook juga

36:51Karena yaitu saking banyaknya fiturnya

36:53Maksudnya saking kompleks

36:55Banyak add-ons-nya juga

36:57Ya itu versatile

36:59Maksudnya bisa di-customize

37:01Untuk macem-macem kebutuhan

37:03Tapi kadang kan kita nggak

37:05Langsung ngebayang ya

37:07Makanya gimana

37:09Showcase ini berguna banget sih

37:11Buat lihat

37:13Jadi pas kita lihat, oh gitu pakenya

37:15Ya ampun UI library

37:19Windows 95

37:21Di sini temen-temen ada yang

37:23Pernah pakai nggak Windows 95

37:25Apa kita doang yang pernah merasakan

37:27Eh, kok nggak pernah ya

37:29Sorry, semenit berapa ya

37:31Sorry ya, saya XP

37:33Saya 311

37:35Eh, saya sebelum 311

37:37Sudah pakai, astaga

37:39311

37:41MS-DOS

37:43Oh kalau MS-DOS

37:45Mana pernah yang pakai Floppy

37:47Apa, Drive-B

37:49Pernah ngerasain masukin itu

37:51Yang agak besar Drive-B

37:53Ini contohnya misalkan kita mau

37:55Lihat cara penggunaan button

37:57Gimana sih bisa showcode ya

37:59Oh gini doang

38:01Terus ada parameternya

38:03Cuma ini

38:07Kurang oke

38:09Kurang oke, coba buka ya

38:11Kurang oke ya

38:13Yang di contoh

38:15Reactdates deh

38:17Reactdates

38:21Ini

38:23Jadi ini bukan desain

38:25Sistem lengkap ya, ini

38:27Dokumentasi untuk library

38:29Komponen library punya

38:31Airbnb, itu kan terkenal nih

38:33Date pickernya, kalau yang pernah bikin

38:35React dan butuh date picker

38:37Kan Airbnb kan itu

38:39Kursial banget ya, untuk ngebooking

38:41Ngebooking penginapan

38:43Tanggal itu kan

38:45Ini tuh emang

38:47Oke banget

38:49Nah itu

38:51Varian-variannya default

38:53Oh

38:55Jadi ada

38:57Defaultnya seperti ini

38:59Tapi kalau butuh yang

39:01Di hidden, dia harus ada

39:03Buttonnya dulu, baru di click

39:05Di dalam form

39:07Seperti apa

39:09Oh use case, use case nya diisi semua disini ya

39:11Non-English

39:13Ya non-English

39:17Ada yang dari kanan ke kiri

39:19Yang ini kiri ke kanan

39:21Kalau bikin gitu

39:23Tapi gak mikir kemungkinan

39:25Bahwa from dan to nya bisa kanan

39:27Ke kiri, jadi jebol semua

39:29Jebol semua ya, bener juga

39:31Terus apalagi yang menarik ini ya

39:37UI kit conductor

39:39Desain sistem ya

39:41Jadi ini

39:43Contoh

39:45UI, cuma belum desain sistem

39:47Yang menyeluruh sih, lebih ke UI

39:49Desain sistem

39:51Ini buat conductor tuh apasih

39:53Kayak layanan

39:55LLM gitu lah

39:57Ya kayak chat GPT atau Jimenai

39:59Apalagi nge-refer

40:01Nge-refer ISDK, tapi untuk

40:03Mengenerate content, itunya gak penting sih

40:05Cuma maksanya background nya dipakai buat apa

40:07Nah ini

40:09Salah satu oke dari

40:11Storybook itu

40:13Yang bisa di-dokumentasiin

40:15Dia juga support MDX

40:17MDX untuk halaman biasa

40:19Kayak yang si introduction tadi itu

40:21Yang ikonnya kuning

40:23Jadi kita cuma mau ngetik nih

40:25Kita bikin overview atau bulk

40:27Atau how to use atau catetan apapun

40:29Ya tinggal bikin literally

40:31Introduction.mdx

40:33Udah langsung masuk

40:35Buat dimana ya, Paya

40:37Ada helper-helper

40:39Component nya yang kayak

40:41Content di kanan tuh kayaknya

40:43Otomatis degenerate dari

40:45Semantik heading, jadi H1, H2A

40:47Itu otomatis dibikinin

40:49Bisa masukin code sample

40:51Ada di atas tuh

40:53Ada di top bar

40:55Top bar kan ada macem-macem tuh

40:57Icon-icon itu bisa di-click

40:59Bisa untuk mobile

41:01Bisa light

41:03Nah

41:05Oke

41:07Ini buat grid ya

41:09Gridnya bisa liat

41:11Margin

41:13Margin padding ya

41:15Ini kayaknya

41:17Ada yang didisable by default

41:19Kayaknya ada yang buat

41:21Responsi ya

41:23Ada actions, interaction,

41:25Accessibility

41:27Nah itu ada

41:29Yang tadi gue pengen tunjuk

41:31Controlnya sih

41:33Element must meet minimum

41:35Dia gak itu

41:37Gak masuk ya

41:39Ijo ke hitam kali ya

41:41Atau ke putih ya

41:43Entahlah tau yang mana

41:45Putih kayaknya gak masuk

41:47Di highlight kok

41:49Bagian yang mana

41:51Coba highlight risal

41:53Highlight, nah

41:55Itu ada centernya

41:57Mana yang langgar, iya putih di ijo

41:59Putih

42:01Background nya ijo

42:03Kurang accessible

42:05Ya gak kurang

42:07Kurang contrast

42:09Gak masuk ke

42:11Ke expected

42:13Contrast ratio 4,5

42:15Banding 1, dia gak masuk kan

42:17Hmm

42:35Tapi kalau misalnya gak comply sama AAA

42:37AAA juga

42:39Ada yang gak apa-apa ya gitulah

42:41Bisa disesuaikan

42:43Nah terus tadi buka

42:45Random dialog atau

42:47Ya buka yang tadi

42:49Dialog aja

42:51Default

42:53Default

42:55Default bawahnya

42:57Di tab yang bawah buka controls

42:59Controls kiri ya

43:03Terus apa ya

43:05Content padding atau apa, ini gak ada keterangannya sih

43:07Coba content padding

43:11Atau title

43:13Nggak bisa di edit

43:15Bisa

43:17Bisa di ketik

43:19Ini gak bisa

43:21Iya makanya

43:23Sekarang udah gak bisa tuh

43:25Udah gak bisa di click

43:27Ada error

43:29Ya itu pokoknya

43:31Itu sesuai

43:33Bisa di edit

43:35Sama coba cari component lain deh

43:37Yang ada controlnya juga

43:39Nah itu kalau angka bisa digeser-geser

43:41Pake slider, dibesarin

43:43Dikecilin, lucu aja

43:45Skeleton

43:49Spinner

43:51Coba possible variance deh

43:53Skeleton, nah ini

43:55Ada descriptionnya kan tuh di control

43:57The size of the component

43:59Nah ini oke banget sih

44:01Ini otomatis diambil dari

44:03Type script definitionnya

44:05Eh type script apa

44:07Mau nya component pas kita nge-definisi

44:09Props-nya, prop type-nya

44:11Iya

44:13Prop type kan bisa

44:15Atasnya kita kasih comment nih

44:17Mana ya contohnya ini

44:19Ada source-nya gak

44:21Ada source

44:23Itu docs and props

44:25Itu di atasnya, di spinner

44:29Itu paling kanan kan source

44:31Nuh

44:33Ini

44:35Oh ada vision sih

44:37Ini, ini

44:39Bawah, oh

44:41Gak ada kayaknya

44:43Gak ada kayaknya, coba buka di private chat deh

44:45Itu contoh aja

44:51Nah itu scroll ke bawah

44:57Scroll lagi

44:59Scroll lagi

45:01Nah itu pokoknya kayak apa

45:03Open, whether the model dialog

45:05Is open or not, learn more

45:07Jadi apa, itu bukan

45:09Jadi ini bukan extra

45:11Kerja JS.com

45:13Atau type script

45:15Di cloud technician atau apapun

45:17Jadi bukan bikin halaman atau fitur

45:19Khusus sendiri di storybook-nya

45:21Cuma udah back in, dia ngambil

45:23Ngebaca dari componentnya

45:25Ini kan bagus banget sih

45:27Encourage best practice

45:29Bahkan kalau pun di luar konteks

45:31Pake storybook kan jadi apa

45:33Ini encourage setiap orang

45:35Pake component ini kan langsung muncul

45:37Deskripsi-nya

45:39Deskripsi-nya jadi

45:41Membantu untuk

45:43Terutama buat kita yang

45:45Belum tahu cara gunainnya

45:47Kita harus baca dulu kan

45:49Jadi misalnya apa, nanti temen

45:51Ini yang bikin kita, tapi habis itu

45:53Buat edit atau

45:55Menggunakan di halaman lain

45:57Bisa aja bukan kita, tapi temen stream kita

45:59Jadi nggak harus nanya

46:01Atau bikin baru lagi atau

46:03Mikir-mikir sendiri kan

46:05Udah ada keterangannya

46:07Ini masih spinner, padahal udah toast

46:11Nyangkut ini

46:23Oh circuit itu yang ini ya

46:25Nah kalau ini contoh, yang tadi kan

46:31Design system, tapi

46:33Bukan keseluruhan, lebih ke UI-nya aja

46:35Termasuk segala

46:37Nanti kalau misalnya kalian

46:39Temen-temen selalu lihat satu persatu

46:41Bagus sih, kayak stress test

46:43Text aja, text itu di stress test

46:45Kalau textnya panjang, textnya pendek

46:47Nggak ada spesinya, tapi itu UI doang

46:49Nah kalau ini, contoh yang

46:51Apa ya, holistic lah

46:53Design system yang lebih luas lagi

46:55Termasuk mereka punya beberapa package

46:57Yang dipublish kalau scroll

46:59Ya yang standar UI

47:01Ada tipografi blablabla

47:03Terus kalau di scroll terus, sidebar

47:05Kebawah lagi, itu mereka

47:07Publish beberapa package juga

47:09Ada branding

47:11Ada accessibility

47:13Ada writing style atau

47:15Semacamnya

47:17Ada template buat

47:19Framework

47:21Hmm

47:23Menarik ya

47:27Misalkan button, base

47:31Ini, storybook ini sebenarnya kalau mau digali

47:35Bisa dalam banget

47:37Banyak banget fitur-fitur yang bisa dibuat

47:39Cuma, harus kembali lagi

47:41Ke

47:43Ini ya, kembali ke

47:47Kebutuhan

47:49Nah itu

47:51Realistik

47:53Karena maintainnya sulit lho

47:55Bener

47:57Kalau orangnya cuma

47:59Timnya kecil

48:01Orang front-endnya cuma satu

48:03Dan flow kerja normal pada umumnya ya

48:05Itu agak sulit

48:07Kalau harus

48:09Ya maksudnya ini

48:13Nggak tahu ya kalau si circuit ini

48:15Kan mungkin lebih besar ya

48:17Tim lebih besar, mungkin bisa mengalokasi

48:19Emang sekian jam

48:21Dalam seminggu cuma buat

48:23Cuma buat ngurusin ini, biar rapih

48:25Dan selalu updated

48:27Tapi kalau cuma di sleep-sleepin doang

48:29Ya, belum tentu

48:31Apakah

48:33Kalau kita bikin storybook atau design system

48:37Seperti ini, butuh

48:39Dedicated person untuk maintain

48:41Atau bisa

48:43Bukan

48:45Not necessarily ya

48:47Tapi harus mengalokasi, waktu yang jelas

48:49Tim ya, bukan orang ya

48:51Yang memaintain tim

48:53Dan harus berkala sih

48:55Maksudnya nggak bisa cuma kayak

48:57Sekali

48:59Ya udah kalian seminggu kerjain ini

49:01Udah nggak bisa kayak gitu, ini living

49:03Dokumen kan soalnya

49:05Kesalahan saya

49:07Bukan kesalahan saya, kesalahan

49:09Waktu pertama kali kita nyomong-nyomong

49:11Pake storybook, dan tim kita itu adalah

49:13Memisahkan source code

49:15Apa yang kita kerjakan

49:17In storybook dengan proyek

49:19Kenyataannya

49:21Harusnya jangan dipisahkan

49:23Ya, dipisahkan

49:25Nah, next project-nya kita harus

49:27Satukan, jadi repo-nya

49:29Pun satu, dan disitu ada

49:31Storybook, style

49:33Reference styling, style SCSS-nya pun

49:35Harus satu

49:37Pake yang sama

49:39Jadi kalau ada perubahan, kelihatan ya

49:41Iya, dan tentunya pasti ada

49:43CSS yang

49:45Khusus untuk storybook itu ada

49:47Karena perlu ada modifikasi

49:49Nggak bisa idealis kayak

49:51Sepenuhnya percaya sama CSS

49:53Yang kita pakai, tetap perlu modifikasi

49:55Cuman, main source

49:57CSS dan JavaScript

49:59Harus dari project main repo

50:01Yang kita pakai

50:03Sebenar-benarnya

50:05Yang direferensi ke storybook

50:07Sama halnya dengan dokumentasi juga

50:09Dokumentasi semakin dekat ke code

50:11Semakin bagus, karena ketika codenya

50:13Berubah, terus kalau terpisah

50:15Dokumentasinya

50:17Lupa nge-update

50:19Gak relevan

50:21Repo-nya udah beda

50:23Lupa nge-update

50:25Bisa jadi snowball, nggak akan keurus

50:27Jadi harus, sebaiknya

50:29Di satu project

50:31Atau di satu repo

50:33Mungkin ada docs atau apa

50:35Bahkan menggunakan JS docs

50:37Jadi otomatis kan

50:39Ketika ada update fungsinya

50:41Atau menambah

50:43Parameter udah langsung

50:45Ditambahin keterangannya

50:47Jadi nanti tinggal di agregasi aja

50:49Betul

50:51Bahkan cara yang tempat saya bekerja sekarang

50:53Dokumentasi project itu

50:55Nggak mau lagi kita bikin

50:57Kayak punya GitHub wiki

50:59Nggak mau lagi kayak confluence

51:01Jadi nggak keurus

51:03Di confluence ada

51:05Di wiki aja

51:07Di Google docs ada

51:09Terus sekarang gimana?

51:11Jadi kita kan, saya kan

51:13Maintain projectnya kan WordPress rata-rata ya

51:15Dan saya WordPress itu kan punya plug-in

51:17Ataupun modul lah

51:19Kita sebut plug-in dan modul

51:21Di setiap plug-in dan modul itu

51:23Ada sendiri

51:25Underscore doc folder

51:27Dan di dalamnya itu MD file

51:29MD file

51:31Jadi

51:33Di developer documentation

51:35Kita ada plug-in yang khusus kayak ngebaca

51:37MD file itu

51:39Jadi di browser-nya kita saat di dashboard itu

51:41Bisa lihat itu dokumentasi-dokumentasi itu

51:43Bisa di render

51:45Jadi bacanya disitu

51:47Semua

51:49Setiap kali si

51:51Developer menambahkan

51:53Modul baru atau CLI command baru

51:55Dia perlu menambahkan

51:57Kode itu, dokumentasi itu

51:59Dokumentasi

52:01Jadi semuanya di satu repo

52:03Kok nggak terurus mas?

52:05Yes, betul, setuju

52:07Dokumentasi termasuk juga

52:09Dan makanya storybook itu kan encourage

52:11Jadi bukan satu project

52:13Atau repo storybook terpisah

52:15Itu sangat encourage

52:17Storybook-nya itu ya di tempat

52:19Dimana kita mengembangkan UI component

52:21Ya sebisa mungkin

52:23Jadi kayak makanya itu tadi

52:25Kayak yang kontrol props-nya apa

52:27Ya langsung ngebaca dari file

52:29Component.tsx

52:31T.s.x-nya

52:33Jadi nggak nulis terpisah, kalau nulis terpisah

52:35Udah pasti nggak bakalan di update itu setelah

52:37Seminggu, dua minggu

52:39Cuma kalau itu kan

52:41Kalau misalnya emang ada

52:43Props yang dihapus atau cara kerjanya

52:45Diubah atau misalnya tadinya

52:47Optional, terus dijadiin

52:49Required, ya udah tanpa

52:51Harus ada kerjaan ekstra

52:53Storybook-nya juga ngebaca dari component itu

52:55Ikut ngadep detail props-nya

52:57Oke, nah kalau

53:01Ada teman-teman yang belum pakai, terus mau mulai

53:03Pakai, gimana caranya? Langsung ini ya

53:05MPM create ini ya

53:07Langsung install di project masing-masing

53:11Gitu ya

53:13Yang officially supported sekarang

53:15Apa sih, React, Svelte

53:17Nah itu

53:19Next, Preact, Angular, View

53:21Svelte dari SvelteKit sama Web Component

53:23Dan satu lagi ada HTML

53:25Bisa loh, HTML saja

53:27Bisa, dan gue pernah

53:29Gue pernah bikin

53:31Buat custom element, jadi

53:33Bahkan nggak pakai stencil atau framework

53:35Apa pun custom element mentahan

53:37Itu dipakainya, jadi ada

53:39Setup WordPress

53:41Tapi pakai Elementor, dan

53:43Sebetulnya itu nggak tahu siapa

53:45Yang pokoknya nggak bisa dibongkar

53:47Dari awal, tapi

53:49Cuma kayak nambah fungsinality

53:51Yang simple, itu kan overkill

53:53Kalau beneran harus develop

53:55Pakai React atau apa, hal-hal simple

53:57Yang custom element

53:59Custom element vanilla pun

54:01Bisa, nah cuma ke preview-nya

54:03Gimana kan, pusing ya? Yaudah

54:05Storybook itu berguna banget ke lain

54:07HTML-nya

54:09Ini untuk SvelteKit contohnya ya

54:13Terus habis itu

54:15Kita perlu buat satu folder

54:17Atau udah dibikinin ya?

54:19Kalau kita pakai itu

54:21Pakai create comment sih

54:23Dibikinin

54:25NPM create KDP

54:27Atau PNPM create storybook

54:29Dan lain-lain

54:31Menarik ya

54:37Jadi, kalau project itu

54:41Bagus kan

54:43Ada storybook-nya, terus kemudian

54:45Ada dokusaurus-nya

54:47Uwe, dokusaurus

54:49Gak mesti dokusaurus kali

54:51Ada yang lain juga

54:53Yang penting, markdown base lah ya

54:55Markdown base ya

54:57Bisa diganti-ganti nanti, tapi Astro

54:59Nggak ada ya

55:01Belum ya, baru Astro

55:03Astro yang pakai

55:05Oh dia kan UI doang ya

55:07Dia UI doang ya

55:09Dut Astronya belum bisa

55:11Tapi di install aja, kalau misalnya

55:13Kita pakai

55:15Bahkan cuma HTML

55:17Misalkan pakai Spelt

55:19Berarti kita tinggal install-nya aja ya

55:21Atau pakai React bisa

55:23Atau bahkan HTML doang

55:25Tapi kita pakai Tailwind config

55:27Gue pernah punya use case itu juga

55:29Tailwind kan bisa bikin config yang

55:31Dipalui sebagai package ya

55:33Yang buat token-tokennya

55:35Sama buat custom color

55:37Udah bikin storybook buat itu

55:39Jadi, cokelode-nya HTML biasa aja

55:43Itu kan bisa di kopas, bisa dipakai di Astro

55:45Tapi emang sekarang belum bisa

55:47Directly baca .Astro

55:49Oh, oke-oke

55:51Blade, Blade itu apa?

55:53Laravel ya?

55:55Template

55:57Ini kan back-end

55:59Front-end itu

56:01Front-end framework JavaScript ya

56:03Ya itu, nggak bisa

56:05Baca .PHP

56:07Tapi ya bisa diakalin

56:09Pakainya HTML itu tadi

56:11Cuma buat CSS-nya

56:13Ya di kopas aja kan

56:15Any valid HTML kan bisa di kopas

56:17Masukin ke .blade .php

56:19Masa Laravel nggak ada

56:23Storybook yang seperti

56:25Storybook? Ada kali?

56:27Ya cuma kalau ini kan

56:31Fokus di UI-nya

56:33Nggak tahu sih Laravel bikin sendiri

56:35Beda ini dong mas

56:37Beda arah

56:39Ya beda kebutuhan

56:41Beda scan-nya

56:43Dia keunggulannya kan di

56:47Ecosystem full-stack kan

56:49Betul-betul-betul

56:51Dia bikin produknya ya, dikuatin ke situ

56:53Ini sama sekali dari back-end-nya

56:55Oh, ada

56:57Pasti ada

56:59Saya yakin ada

57:01Tapi ini nggak tahu ini buat apa ya

57:03Oh ya buat ngebaca

57:07Di template yang engine aja

57:09Itu tetap pakai storybook

57:11Headphone ya

57:13Nggak tahu yang ini

57:15Yang di atas nih

57:17Blast, tadi juga ya sama ya

57:19Yang tadi ini kodenya

57:21Yang tadi ya

57:23Kapan terakhir 3 bulan

57:25Oke lah ya

57:27Lumayan aktif kok

57:29Storybook

57:31Bentuknya kayak gimana?

57:33Nggak ada ya?

57:35Nggak ada contohnya dia

57:37Oh dia pakai storybook

57:39Ya iya, itu cuma storybook

57:41Tapi biar bisa ngebaca

57:43Dibalik lah ya

57:45Itu HTML

57:47Pake fungsionalitas

57:49Yang buat HTML

57:51Rapper ya, berarti ini ya

57:53Hanya rapper

57:57Rapper lah ya

57:59Untuk membuat

58:01Storybook

58:03Iya

58:05Silahkan

58:07Kalau mau pakai

58:09Mas Kaisa

58:11Husky, dia pakai husky

58:17Nah, apa lagi yang menarik nih

58:21Dari storybook

58:23Chromatic, kayak kalau dia mau visual

58:25Dibasain kan, dia connect

58:27Chromaticnya gampang banget sih sebenarnya

58:29Karena kayak seamless, beneran seamless

58:31Ini kan

58:33Sebenernya produk nggak jubahkan sih

58:35Kalau yang jubahkan itu kan, Next.jsnya gratis

58:37Tapi versenanya dibikin ketergantungan

58:39Kalau ini nggak

58:41Mesti pakai Chromatic, cuma

58:43Cuma dimudahkan

58:45Integrasi Chromaticnya itu kayak

58:47Kayak nggak pakai effort

58:49Maintainer storybook itu

58:51Digaji oleh Chromatic

58:53Sama kan

58:55Kayak Next.js, kalau misalkan deploy

58:57Ke versenya kan

58:59Gampang

59:01Sumpah gampang

59:03Kalau ke tempat lain ya, tricky

59:05Sumpah gampang

59:07Bahkan dia bisa ke browser stack juga loh

59:09Bisa ke browser stack juga

59:11Tanpa visual texting pun

59:13Storybooknya tetap jalan

59:15Tapi emang seamless

59:17Dua hal yang terpisah ya

59:19Produk semi jubahkan

59:21Semi jubahkan, ya ini

59:23Setengah ya, setengah jubahkan ya

59:25Kerennya bisa ke browser stack juga

59:27Ini bisa tes di multiple browser secara real device

59:29Oke

59:31Dan ada yang

59:33Fremiumnya juga ya, ada yang gratisnya

59:35Ada lah ya buat kamu ya

59:37Jadi ini

59:39Tujuan si Chromatic ini ngapain dia

59:41Ngescreenshot

59:43Atau apaan ya

59:45Kayak jalanin play, right?

59:47Ngescreenshot

59:49Tapi hostil

59:51Ngescreenshot

59:53Terus compare

59:55Ya UI-nya bagus

59:57Mereka cloud service

59:59Di hosting nih mereka

1:00:01Dan kayak apa ya, ya lebih main

1:00:03UI/UXC/DX/DX

1:00:05Di developer experience

1:00:07Jadi compare

1:00:09Apa

1:00:11Itu bisa integrate

1:00:13Ke CI/CD pipeline

1:00:15Jadi kayak di github pull request

1:00:17Atau di isunya atau apalah

1:00:19Ada komennya, terus memudahkan

1:00:21Stakeholder kita, developer-nya nih

1:00:23Atau ini yang berubah, approve atau enggak

1:00:25Ya kayak ada tombol-tombolnya

1:00:27Ya gitu lah, bikin enak

1:00:29Oh ini ada pertanyaan nih

1:00:35Kalau kita reject, ya gak bisa

1:00:37Di merge dan lain-lain

1:00:39Testing di semua browser kah?

1:00:41Bisa di define, browser yang major

1:00:43Atau browser yang mau kita pakai

1:00:45Di device yang mana bisa di define di Chromatic

1:00:47Dan di connect ke browser stack

1:00:51Browser stack ya, buat

1:00:53Ngecek semua browser

1:00:55Nge-screenshot-nya pakai browser stack

1:00:57Jadi setelah update X

1:01:01Tiba-tiba breaking, tapi cuma

1:01:03Di Safari versi

1:01:0513 atau apalah

1:01:07Itu kan cache case yang biasanya kita gak

1:01:09Bisa nge-cache kan, kita belum tentu

1:01:11Nangkep

1:01:13Nah ini dibikin bagus

1:01:15Interface-nya, terus dia bisa komen di github

1:01:17Issunya, langsung udah data

1:01:19Terima kasih

1:01:21Oke

1:01:27Oh ya

1:01:39PRCA

1:01:41PRCA

1:01:43PRCA

1:01:45Mana?

1:01:47Itu tuh

1:01:49Di tengah

1:01:51Di tengah itu lho kan

1:01:53Ini?

1:01:55Ini musuhnya Chromatic

1:01:57Tapi dia gak bikin storybook

1:02:01Competitor ya

1:02:03Oh jadi dia punya sendiri ya

1:02:05I see

1:02:07Kalau ini yang punya

1:02:11Ini punya-nya browser stack

1:02:15Browser stack

1:02:17Oke

1:02:19Nah cuma ngomong-ngomong Chromatic

1:02:25Gue lumayan salut sih

1:02:27Ini storybook kan udah bertahun-tahun ya

1:02:29Cuma kayaknya makin, ya maksudnya

1:02:31Aktif di-maintain, terus progress-nya juga bagus

1:02:33Nah berarti kan

1:02:35Bisa disimpulin, Chromatic-nya

1:02:37Cuan ya, maksudnya income

1:02:39Pemasukannya

1:02:41Minimal tetep, bahkan naik

1:02:43Bisa tetep nge-gaji apa

1:02:45Nge-maintain storybook kan

1:02:47Kalau misalnya mereka customer-nya

1:02:49Sedikit atau gak untung kan

1:02:51Storybook-nya bakal mati kan

1:02:53Berarti orang kebutuhan

1:02:55Visual testing yang sedetail

1:02:57Dan sekompleks itu sebenarnya cukup besar ya

1:02:59Banyak yang pakai

1:03:01Ya lumayan kan

1:03:03Kalau project yang

1:03:05Yang tadinya

1:03:09Well saya berkaca

1:03:11Dari project yang saya maintain

1:03:13Itu ada yang harus

1:03:15WCRG compliance kan

1:03:17Atau accessibility compliance

1:03:19Jadi sebenarnya storybook yang dipakai itu

1:03:21Untuk memastikan

1:03:23Komponen yang kita shipping itu

1:03:25Accessibility-nya

1:03:27Komplai

1:03:29Jadi ada proof-nya

1:03:31Chromatic-nya

1:03:33Yang beneran visual testing

1:03:35Detail-nya itu berarti kan

1:03:37Cukup banyak customer yang

1:03:39Berbayar kan

1:03:41Simplify banget untuk dari

1:03:43Testing dari storybook ke chromatic ya

1:03:45Storybook, nah itu terjebak ya

1:03:47Ke tergantungan

1:03:49Karena bukan terjebak

1:03:51Apa istilahnya ya

1:03:53Saving time

1:03:55Berarti itu bagus kan

1:03:57Maksudnya bikin produk commercial

1:03:59Berbayar dan itu emang sesuatu

1:04:01Yang dibutuhin berguna buat

1:04:03Penggunanya customer-nya

1:04:05Jadi maksudnya bukan ya kalau kata-kata

1:04:07Dibak atau ketergantungan itu kayak

1:04:09Konotasinya negatif kan ya

1:04:11Kayak dikibulin, kayak dimanipulasi

1:04:13Nah kalau ini kan nggak kan, maksudnya

1:04:15Orang tadinya pakai storybook, integrate sama

1:04:17Visual testing product

1:04:19Hosted-nya Chromatic

1:04:21Walaupun sebenarnya sendiri kan

1:04:23Bikin script playwright

1:04:25Atau papitir atau apa juga mungkin bisa

1:04:27Tapi ini dimudahin banget

1:04:29Pakai layanan Chromatic, jadi

1:04:31Customer yang emang ada budget-nya ya udah

1:04:33Kan ada kebutuhan sih sebenarnya

1:04:35Kebutuhannya itu sebenarnya

1:04:37Proof kalau accessibility

1:04:39Kita itu

1:04:41Dari kita time-to-time itu

1:04:43Maksudnya setiap kali

1:04:45Deploy aman

1:04:47Dan ada proof-nya

1:04:49Dan sewaktu kita shipping

1:04:51Peace of mind sama trail

1:04:53Kayak paper trail gitu kan

1:04:55Lebih tempat ini paper trail

1:04:57Udah, karena compliance itu

1:04:59Paper trail

1:05:01Jadi sebelum terjadi

1:05:03Kena sew, kita sudah benerin

1:05:05Pentingnya disitu

1:05:09Oh iya

1:05:11Kalau itu harus ya, mau nggak mau ya

1:05:13Iya

1:05:15Dan daripada kita

1:05:17Nge-check satu persatu di semua device

1:05:19Cape juga gaji

1:05:21Lebih mahal dan ngabisin waktu

1:05:23Anggap aja

1:05:25Wow kita mau pakai Chromatic karena

1:05:27Mau stay idealist, harus

1:05:29Open source semua misalnya

1:05:31Mereka gaji lah kita yang

1:05:33Gak tahu cara bikin

1:05:35Visual regression testing yang

1:05:37Mumpuni gitu ya

1:05:39Karena Chromatic kan sudah

1:05:41Invest

1:05:43Ribuan jam, ribuan

1:05:45Udah ada sistemnya juga kan

1:05:47Banyak banget, khusus hanya untuk itu

1:05:49Sedangkan kita kan nggak ahli

1:05:51Untuk membuat visual regression

1:05:53Testing

1:05:55Jadi ya mahal

1:05:57Investin mana untuk

1:05:59Membeli sebuah service itu

1:06:01Pasti efisien membeli service kan

1:06:03Ada trade-off lah

1:06:07Dan dari sisi

1:06:09Budget juga, kembali ke budget

1:06:11Dan efisiensi

1:06:13Lebih efisien kalau pakai

1:06:15Service yang sudah ada dan bagus

1:06:19Berarti mereka bisa nge-balance itu kan

1:06:23Punya

1:06:25Produk commercial, punya produk

1:06:27Hosted commercial dengan segala

1:06:29Kemudahannya

1:06:31Mereka sebagian dilarikan ke

1:06:35Open source kan bikin storybook, tapi dari situ juga

1:06:37Dapat input

1:06:39Ya oleh semua yang pakai

1:06:41Storybook kan, kebutuhannya

1:06:43Kebutuhannya UI

1:06:45Component design itu kayak gimana ya

1:06:47Dapat input juga buat bikin produk

1:06:49Commercial, produk berbayar mereka

1:06:51Juga bisa diimprove lebih bagus lagi kan

1:06:53Karena datanya, apa inputnya

1:06:55Banyak

1:06:57Oke, ada lagi

1:07:01Yang mau dibahas sekitar

1:07:03Storybook

1:07:05Ad-ons, bahas sedikit aja ya

1:07:07Buku aja tuh, halaman ad-ons

1:07:09Nah ini ada yang menarik

1:07:13Ad-ons yang menarik apa

1:07:15Aja kira-kira

1:07:17Kalau yang wajib, kayaknya di install

1:07:19By default ya itu

1:07:21Tadi accessibility

1:07:23Terus sisanya, itu yang popular sih

1:07:25Ini ya

1:07:27Kalau teams itu

1:07:29Kalau yang by default

1:07:31Dark mode, light mode doang

1:07:33Tapi kan kadang ada yang pakai high contrast

1:07:35Atau semacamnya

1:07:37Itu juga udah lama kok, sekarang udah masuk

1:07:39Di mainnya kalau nggak salah

1:07:41Accessibility, yang tadi accessibility

1:07:43Test runner

1:07:45Oh yang centang itu

1:07:47Centang biru tuh official kayaknya

1:07:49Kalau yang

1:07:51Standard ya itu tadi accessibility

1:07:53Dark mode, light mode, tapi kayak kelihatannya

1:07:55Ada diming yang lebih

1:07:57Custom lagi

1:07:59Yang itu tadi, kalau misalnya selain dark mode

1:08:01Light mode, kita mau define

1:08:03High contrast atau semacamnya

1:08:05Yang berguna

1:08:07Terus test runner, itu tadi

1:08:09Oke, test runner itu untuk

1:08:11Kalau kita udah punya existing test yang

1:08:13Pake jazz atau testing library

1:08:15Bisa dijalani dari storybook

1:08:19Ini selera ya, kalau gue sih tetap

1:08:21Lebih enak dari CLI aja sih kan

1:08:23PNPM test atau PNPM test watch

1:08:25Cuma kalau, ya mungkin

1:08:27Ini lebih ke collocate sih

1:08:29Apa, kayak di contoh

1:08:31Landing page-nya tadi, jadi

1:08:33Sambil ngejalanin test

1:08:35Sambil lihat UI-nya kayak gimana

1:08:37Jadi ya, itu bisa

1:08:39Berguna juga

1:08:41Terus yang oke juga tadi tuh

1:08:43Scroll ke atas, mock service worker

1:08:45Itu buat

1:08:47Faking API call

1:08:49Kalau misalnya

1:08:51In the real world kan

1:08:53Komponen yang, misalnya komponen

1:08:55Udah di jahit lah, udah jadi satu

1:08:57Udah jadi, apa tadi, template ya

1:08:59Kalau pakai balasannya atomic design

1:09:01Pasti ada, apa

1:09:03Smart komponennya, kalau yang react tadi kan

1:09:05Udah ada fetching-nya

1:09:07Ya jangan, apa, kita pedel

1:09:09Cuma pengen nge-test UI-nya, jadi

1:09:11Bisa diatur biar enggak

1:09:13Fetch ke API beneran

1:09:15Tanpa kodang atik dari

1:09:17Kode react-nya sendiri

1:09:19Jadi nggak usah if

1:09:23Lagi jalan, nggak

1:09:25Kita nggak harus capai-capai ngedetek

1:09:27Ini lagi jalan di storybook atau bukan

1:09:29Kalau lagi jalan dari storybook

1:09:31Fetch-nya ke fake data

1:09:33Atau fake API, nggak usah kayak gitu

1:09:35Jadi tetap nggak usah kodang atik

1:09:37Oh, udah otomatis ya

1:09:39Langsung ya

1:09:41Kita nge-replace

1:09:43Limpa request ke

1:09:45Ya kita define aja API

1:09:47URL-nya apa, direplace

1:09:49Pakai apa

1:09:51Sisanya jujur nggak pernah pakai

1:09:53Kayak integrasi Figma, Zeppelin

1:09:55Dan lain-lain

1:09:57Zeppelin ini kayak Figma

1:09:59Beda ya?

1:10:01Ya, mirip-mirip gitu

1:10:03Mirip-mirip ya

1:10:05Kalau itu, addons-nya

1:10:09Rata-rata use case spesifik banget sih

1:10:11Yaitu kayak bentuk grid tertentu

1:10:13Atau deeming tertentu

1:10:15Tapi yang addons

1:10:17Yang mungkin berguna juga

1:10:19Cuma gue belum nyobain

1:10:21Itu yang buat framework integration

1:10:23Kayak yang apa?

1:10:25Ada komponen-komponen

1:10:27Yang khusus Next.js

1:10:29Ada kode Next.js-nya

1:10:31Nah, itu bisa di

1:10:33Bisa ditimpal

1:10:35Sama si

1:10:37Storybook

1:10:39Lupa namanya apa

1:10:41Ada addons buat routing juga

1:10:43Itu kan tadi ketengan kan

1:10:45Misalnya satu per satu

1:10:47Komponen, nah kalau mau

1:10:49Simulate routing juga bisa

1:10:51Cuma lupa namanya apa sih

1:10:53Oke

1:10:55Oke

1:10:57Ada lagi kah?

1:10:59Sebelum kita menuju

1:11:01Ke segmen terakhir

1:11:03Itu tuh ada komen berharap

1:11:05Pemerintah kita ada UI UX

1:11:07Storybook

1:11:09Kalau pemerintah kita sih

1:11:11Maaf-maaf ya gatau ya

1:11:13Masih jauh kayaknya ya

1:11:15Nah, kalau mau pindah keluarga negara

1:11:17Ke Inggris, beneran ada tuh

1:11:19Di private chat

1:11:21Pemerintah UK itu

1:11:25Punya design system sendiri

1:11:27Dan itu didokumentasiin

1:11:29Pakai Storybook

1:11:31Buka aja

1:11:35Open source ya gitu

1:11:37Jadi semua

1:11:43Situs pemerintah

1:11:45Harus follow ini ya

1:11:47Ya pake standar yang sama

1:11:49Standar yang sama

1:11:51Gitu dong, kalau engga nanti banner

1:11:53Isinya foto

1:11:55Foto pecah

1:11:57Besar banget

1:11:59Buduh banget

1:12:01Terus itu lagi apa

1:12:03Informasi yang dicari sulit banget

1:12:05Terus engga dimenting

1:12:11Loh, kok jadi undang-undang sih

1:12:13Cuma kalau ada

1:12:15Storybook gini, mengurangi budget

1:12:17Pengadaan, nanti ga bisa bikin

1:12:19Ga bisa propose budget bikin dari awal lagi

1:12:21Karena komponen-komponennya udah ada semua

1:12:23Waduh gimana ini

1:12:25Ada saran untuk kami

1:12:29Pemula belajar full stack?

1:12:33Belajar partial stack dulu

1:12:35Iya, jangan full

1:12:37Jangan full ya

1:12:39Fokus-fokus, belajar satu-satu

1:12:41Mau back-end dulu boleh

1:12:43Front-end dulu

1:12:45Jangan langsung semuanya

1:12:47Berat

1:12:49Atau larapel aja, silahkan

1:12:51Atau WordPress aja

1:12:53Pake framework yang sudah full stack ya

1:12:55Jadi belajarnya lebih gampang

1:12:57WordPress aja dulu

1:12:59Kan sudah ada full side editing

1:13:03Sudah tinggal drag-and-drop

1:13:05Tapi kayaknya iya deh, tetep aja

1:13:09Pilih salah satu dulu, mana yang keliatan

1:13:11Paling menarik

1:13:13Front-end dulu atau back-end dulu, abis itu

1:13:15Pelan-pelan ya

1:13:17Dibuat lebih full

1:13:19Iya, kan sekarang tuh

1:13:21Cenderung lebih

1:13:23Apa ya, kalau dulu kan

1:13:25Misalkan kita belum, tools-nya belum terlalu banyak

1:13:27Misalkan kita mau

1:13:29Punya database, bingung

1:13:31Dimana, harus punya temen yang bisa back-end

1:13:33Kalau sekarang misalkan

1:13:35Kita bisa pakai

1:13:37Open API kan, misalkan ada API

1:13:39Yang sudah terbuka, atau kita mau

1:13:41Pakai semacam firebase, superbase

1:13:43Gitu ya, yang sederhana

1:13:45Datanya bisa kita input

1:13:47Manual

1:13:49Terus udah bisa di-consume

1:13:51Begitu juga sebaliknya, kalau anak

1:13:53Back-end, mau pakai front-end

1:13:55Kan sekarang ada yang bisa drag-and-drop lah

1:13:57Apa segala macam, banyak

1:13:59Ya, macem-macem lah

1:14:01Jadi

1:14:03Apa ya, belajar

1:14:05Setengah dulu atau

1:14:07Satu bagian dulu juga

1:14:09Gak ada masalah, kalau dulu mungkin

1:14:11Nah, terus, ini

1:14:13Tetep usahakan jadi T-shape

1:14:15Developer kan, ada istilahnya

1:14:17Berbentuk, itu maksudnya

1:14:19Kita punya peketahuannya

1:14:21Cukup luas, ya walaupun

1:14:23Nggak dalam-dalam amat

1:14:25Luas, terus ada satu bagian

1:14:27Yang dalam

1:14:29Yang lebih dalam

1:14:31Oke

1:14:33Oke

1:14:35Kalau, apa ya, kalau ngejar

1:14:37Pengetahuan terlalu dalam, terlalu skillful

1:14:39Tapi luas banget, kita malah jadi

1:14:41Palu gede, cuma, kayak apa

1:14:43Nggak kuat-kuat banget di bagian

1:14:45Manapun kan

1:14:47Sama itu

1:14:49Sama harus

1:14:51Di-decide juga, ditentukan juga

1:14:53Full stack itu apa? Ini kan

1:14:55Kayak masih abu-abu kan

1:14:57Full stack itu apakah front-end, back-end doang

1:14:59Atau front-end, back-end,

1:15:01DevOps, mobile

1:15:03Itu komen naikin

1:15:05Di bidik gue, maksudnya

1:15:07Cyber security

1:15:09Jadi, ditentukan dulu, mau belajarnya apa

1:15:11Jangan belajar full stack, tapi full stack-nya juga nggak jelas

1:15:13Definisinya apa, didefinisikan aja

1:15:15Oh, saya mau belajar front-end sama back-end

1:15:17Oh, saya mau belajar front-end, back-end sama

1:15:19Mobile

1:15:21Iya

1:15:23Cuma, itu kan definisinya juga nggak

1:15:25Nggak ada yang resmi

1:15:27Nggak ada yang resmi

1:15:29Nggak ada yang benar, nggak ada yang salah

1:15:31Dari satu perusahaan ke perusahaan lain

1:15:33Yang disebut full stack apa, atau front-end apa

1:15:35Back-end apa, juga nggak

1:15:37Sakut kan, kayak contoh Gopal aja tadi

1:15:39Yang Ivan ngasih contoh

1:15:41Storybook, apa

1:15:43Front-end bikin storybook

1:15:45Ivan sebagai back-end, sambil

1:15:47Bikin skema atau data type-nya

1:15:49Nanti Ivan yang

1:15:51Nyambungin ke markup yang

1:15:53Udah dibikin, nah

1:15:55Kalau di tempat gue itu semua kerjaan front-end

1:15:57Ya maunya back-end stop di skema

1:15:59Cuma kan itu tergantung

1:16:01Ya tergantung apalah

1:16:03Workload atau tergantung jumlah orang

1:16:05Tergantung macem-macem kan, jadi nggak

1:16:07Karena dari sisi front-end

1:16:09Mereka masih mikirin

1:16:11Itu tadi

1:16:13Masih mikirin, meskipun sudah diwiring

1:16:15Mereka masih harus kayak

1:16:17Mobile view, responsif

1:16:19Accessibility

1:16:21Dan

1:16:25Macem-macem lainnya, kayak

1:16:27Apa namanya, lebih

1:16:29Itu aja hal itu

1:16:31Browser compatibility, mereka itu

1:16:33Sisi front-end, luas loh

1:16:35Yang harus di mereka pikirin

1:16:37Iya, tapi maksudnya apa

1:16:39Yang gue alamin adalah

1:16:41Selain mikir itu semua juga nyambungin

1:16:43Ke skema, maksudnya itu kan

1:16:45Kenapa, karena

1:16:47Karena si developer yang

1:16:49Abis bikin skema itu

1:16:51Udah harus kerjain hal lain lagi, jadi

1:16:53Maksudnya emang oke lah

1:16:55Team

1:16:57Manajemen itu kan bagi workload juga ya

1:16:59Jadi ya emang kebutuhannya

1:17:01Gitu, jadi nggak bisa

1:17:03Dipukul rata

1:17:05Karena nggak kebayang

1:17:07Gua memperan end branding aja

1:17:09Sebetulnya sih

1:17:11Mid-end kali, box-to-box

1:17:13Box-to-box, mid-end

1:17:15Box-to-box

1:17:17Mid-fielder

1:17:19Ini kan

1:17:21Ini kan konteks developer ya

1:17:23Mid-ender ya

1:17:25Box-to-box, mid-ender ya

1:17:27Bisa dipakai lah ya

1:17:29Dari depan-belakang

1:17:31Secara instink, attacking lah

1:17:33Di depan, tapi sebenernya

1:17:35Kalau praktek lah, kalau sesuai kebutuhan

1:17:37Maju-mundur, maju-mundur ya boleh lah

1:17:39Unting beres

1:17:41Jadi Safi dan Iniesta dong ya

1:17:45Boca-boca yang nonton bingung gitu

1:17:47Safi kan pelatih

1:17:49Kaga nonton pas main

1:17:51Ini ya banyak yang

1:17:53Apa kabarnya yang nonton

1:17:55Guardiola main

1:17:57Nonton Guardiola penyiar rambut

1:17:59Frank Raikert ya, Frank Raikert main

1:18:01Juga keren dulu

1:18:03Atau Van Basten

1:18:05Oke

1:18:07Cuma gue cium nuain lu inget

1:18:11Pas Guardiola masih penyiar rambut sih

1:18:13Ini gak penting sama sekali

1:18:15Oke

1:18:17Sekmen terakhir

1:18:19Pilih topik, pilih topik

1:18:21Ayo kita pilih ini

1:18:23Ada beberapa

1:18:25Mid-fielder aja lah, mid-ender

1:18:27Eh by the way, Van

1:18:29Minggu depan kita ini kan ya

1:18:31Iya, jadi pilih topik lah

1:18:33Buat itu, rekaman ya

1:18:35InsyaAllah rekaman ya

1:18:37Kita mau voting lagi ya topiknya

1:18:39Mau voting?

1:18:41Mau yang mana? Mau voting

1:18:43Atau mau langsung tunjuk? Terserah

1:18:45Voting lah demokratis

1:18:47Sedikit sekali-sekali

1:18:49Apa aja yang mau di voting?

1:18:51Apa ya?

1:18:53Problem solving tuh

1:18:55Bagus tuh

1:18:57Boleh

1:18:59Problem solving

1:19:01AI assisted coding

1:19:03Jangan-jangan-jangan, simpan-simpan

1:19:05Setembar, setembar

1:19:07Semantik

1:19:09Computational thinking ya

1:19:11Computational thinking

1:19:13Terus

1:19:15Topik

1:19:17Semantik versioning

1:19:19Topik minggu depan

1:19:21Computational thinking

1:19:23Mendingan

1:19:25Kan kita nggak live kan, jadi nggak

1:19:27Begitu interaktif, nggak apa-apa

1:19:29Terus tadi apa?

1:19:31Yang kedua?

1:19:33Yang

1:19:35Semantik versioning juga

1:19:37Terlalu pendek sih

1:19:39Kalau nggak live nggak ada yang gomong

1:19:41ECMA script 2025

1:19:43Nah boleh, kita cuma bahas

1:19:45ECMA

1:19:47Jadi computational thinking nanti ya, disimpan ya

1:19:49ECMA

1:19:51Script 2025

1:19:53Kita juga yang nantuin

1:19:55Yang kedua? Ada lagi nggak?

1:19:57Atau kita mau langsung veto aja?

1:19:59Veto aja deh

1:20:01Veto ya?

1:20:03Katanya mau demokratis gimana sih

1:20:05Veto aja

1:20:07Gak bakat jadi pemimpin demokratis

1:20:11Dependensi injection

1:20:13ECMA script

1:20:15Kemudian dependensi

1:20:17Injection

1:20:19Terus apa lagi?

1:20:21Tadi kan ECMA

1:20:23Sama satu lagi yang ada

1:20:25Semantik HTML terlalu kecil ya

1:20:29Istimasi

1:20:31CSS unit, beda buku

1:20:35Beda buku nggak sempet

1:20:37Nggak sempet bacanya

1:20:39Oh iya

1:20:41Antara dua itu aja

1:20:43Udah, dua aja ya

1:20:45Gimana nih?

1:20:47Kok nggak bisa di start?

1:20:49Oh bentar, optionnya dikurangin

1:20:51Dua, silahkan

1:20:53Sekitar 5 menit kedepan ditunggu

1:20:57Pollingnya di youtube

1:20:59Teman-teman yang di linkin

1:21:01Nggak bisa ya

1:21:03Bisa kita bantu nggak?

1:21:05Oh nggak bisa juga

1:21:07Ya

1:21:09Atau ngosotin di

1:21:11GitHub issue

1:21:13Discussion

1:21:15ECMA script

1:21:1767%

1:21:19Wow 50/50, jangan sampai 50/50 lah ya

1:21:23Kalau 50/50

1:21:25Nanti kita hak Veto lagi

1:21:27Hak Veto lagi

1:21:29Akhirnya jadi supreme leader lagi

1:21:31Supreme leader

1:21:3360/40, let's go

1:21:35Seru juga ngeliatin

1:21:37Real time-nya

1:21:39Emang bisa lihat di mana?

1:21:41Di youtube

1:21:43Youtube

1:21:45Streamyard nggak mungkin

1:21:47Nggak bisa

1:21:49Udah di ini belum?

1:21:51Balance-nya udah ditambah

1:21:53Belum ke sini?

1:21:55Balance apa tuh?

1:21:57Balance ini, balance

1:21:59Streamyard

1:22:01Bayar gitu

1:22:03Bayar mah udah

1:22:05Kan kemaren kan

1:22:07Overflow ceritanya

1:22:09Iya buat tahun depan

1:22:11Udah balik balance-nya, udah ditambahin

1:22:13Nggak kelihatan, orang nggak ada balance-nya

1:22:15Nggak ada

1:22:17Ditambahinnya tahun depan kan berarti

1:22:19Cuma kayak expire

1:22:21Your subscription is active until

1:22:23Blah-blah-blahnya

1:22:25Kita harus cari ini lagi berarti ya

1:22:27Cari sponsor

1:22:29Sampai tahun depan

1:22:31Yang mau sponsor, yang mau sponsor selanjutnya

1:22:33Kantor-kantornya

1:22:35Mungkin ada yang mau sih

1:22:37Jadi kayak jualan di

1:22:39Selling banget

1:22:41Atau kalau ada yang butuh

1:22:45Konsultasi

1:22:47Seputar

1:22:49Performance

1:22:51Jangan ngejenjin yang aneh-aneh deh

1:22:53Oh performance, ya udah ifang aja

1:22:55Iya maksudnya

1:22:57Mending

1:22:59Capability sama

1:23:01Mas Riza atau itu sama

1:23:03Mbak Eka

1:23:05Yang butuh training boleh

1:23:07CSS tooling

1:23:09Yang mau private

1:23:11Kayaknya cari duit banget nih

1:23:13Oke 2 menit lagi

1:23:17Nggak sibuk kan

1:23:19Berapa menit kita

1:23:21Pokoknya sampai 21-25

1:23:23Kurang lebih

1:23:25Apa udah cukup?

1:23:27Terus?

1:23:29Menang lagi aja

1:23:31Bener juga sih

1:23:33Tapi

1:23:35Bahas ini

1:23:37Nanti dia sedih

1:23:41Nanti dia sedih

1:23:43Bahas ini

1:23:45Bagaimana cara

1:23:47Bikin workshop yang

1:23:51Keren

1:23:53Susah itu

1:23:55Soalnya pembawaan dia keren banget

1:23:57Kita nggak bisa nyiru itu

1:23:59Susah banget

1:24:01Gak menghipnotis sih

1:24:03Dia sendiri

1:24:05Yang menguasai materi jelas

1:24:07Dan entusias

1:24:09Kayak nge-delivernya itu bikin kita

1:24:11Kehub

1:24:13Kecantol

1:24:17Yang tadinya nggak begitu niat untuk ngikut

1:24:19Akhirnya jadi keren banget

1:24:21Padahal kita udah tau itu sebenarnya

1:24:23Fitur-fiturnya udah tau ya

1:24:25Tapi begitu dia demokan itu

1:24:27Kayak kita ini banget

1:24:29Wow ya kita sekarang bisa

1:24:31Bikin ini

1:24:33Itu kan sebetulnya hal yang bisa

1:24:35Dibaca kan artikelnya ada

1:24:37Dispec juga ada itu hal yang

1:24:39Ya oke kita bisa bikin ini

1:24:41Cuma di-deliver dan ditunjukin

1:24:43Dengan code dan

1:24:45Ada outputnya juga kita bisa bikin

1:24:47Ini itu dengan convincing aja

1:24:49Ya jadi

1:24:51Mungkin sedikit background sambil

1:24:53Menunggu temen-temen yang voting

1:24:55Kita waktu itu ikutan

1:24:57Workshopnya di

1:24:59Ioconnect ya

1:25:01Di Beijing ya

1:25:03Iya di Beijing ketemu

1:25:05Sama Mas Adam Ajalnya langsung

1:25:07Nah kalo temen-temen penasaran

1:25:09Workshopnya materinya apa sih

1:25:11Ada di Youtube cari aja

1:25:13Saya posting nih ada

1:25:15Jadi walaupun

1:25:17Tidak tetap muka ya

1:25:19Kalau kemarin kan kita langsung ketemu kan

1:25:21Mungkin energinya agak beda

1:25:23Tapi topiknya sama

1:25:25Dia bikinin

1:25:27Di rekam

1:25:29Di rekam sesi workshopnya

1:25:31Tapi di studio

1:25:33Bukan pada saat itu

1:25:35Kalo gak salah Pak Dika sempet

1:25:37Nerekam ya tapi gak tau apakah

1:25:39Di apa namanya

1:25:41Di publish di

1:25:43Youtube nya dia atau gak

1:25:45Anyway

1:25:47Anyway

1:25:49Sudah nih hasilnya apa

1:25:51Hasilnya adalah ECMAScript

1:25:5367%

1:25:57Jadi ditunggu aja

1:25:59Minggu depan kita akan bahas tentang

1:26:01ECMAScript 2025 ada fitur apa

1:26:03Aja yang baru

1:26:05Kemungkinan besar kita gak live

1:26:07Jadi kita rekaman dulu karena

1:26:11Evan tidak bisa hadir

1:26:13Di alis lat saya

1:26:15Untuk malam ini sekian dulu

1:26:17Terima kasih banyak buat semuanya

1:26:19Diskusinya seru

1:26:21Mudah-mudahan kita ketemu lagi minggu depan

1:26:23Di Selasa Malam jam

1:26:258 malam

1:26:27Selamat malam semuanya

1:26:29Sampai jumpa bye bye

1:26:41Jika Anda mencari tau mengenai layanan web hosting terbaik

1:26:43Kami pastikan Anda berada

1:26:45Di tempat yang tepat

1:26:47Dengan Domainesia dapatkan pengalaman

1:26:49Memunakan layanan hosting yang lebih baik

1:26:51Dengan SSD berperforma tinggi

1:26:53Dalam infrastruktur cloud

1:26:55Yang telah dioptimalkan untuk kebutuhan personal

1:26:57Maupun bisnis

1:26:59Teknologi ini memungkinkan Anda memperoleh

1:27:01Layanan yang lebih stabil serta proteksi

1:27:03Dari korupsi data

1:27:05Hosting Domainesia juga telah mendukung

1:27:07Node.js, Python, Ruby, Go

1:27:09PHP, Java, serta binary Linux

1:27:11Lebih dari 200.000 pelanggan telah mempercayakan

1:27:15Layanan hosting di Domainesia

1:27:17Kepercayaan yang kami jaga dengan

1:27:19Garansi uptime 99,9%

1:27:21Serta garansi uang kembali 100%