Ngobrolin Storybook
Ringkasan Episode
Bantu KoreksiEpisode ini membahas Storybook, tool untuk membangun, menguji, dan mendokumentasikan komponen UI secara terisolasi. Host membahas evolusi Storybook dari yang sebelumnya dianggap berat dan lambat (menggunakan webpack) menjadi jauh lebih baik setelah beralih ke Vite 1-2 tahun terakhir. Diskusi mencakup bagaimana Storybook membantu dalam pengembangan Design System, implementasi Atomic Design methodology (Atoms, Molecules, Organisms, Templates, Pages), dan kolaborasi antara frontend developer dengan designer. Storybook memungkinkan frontend developer bekerja mandiri dengan fake data sambil menunggu backend selesai, serta mendokumentasikan berbagai state dan varian komponen yang mungkin tidak terpikirkan saat desain.
Poin-poin Utama
- •Storybook adalah tool untuk build, test, dan dokumentasi UI components dalam isolasi (seperti workshop untuk komponen)
- •Storybook sudah jauh lebih ringan setelah beralih dari webpack ke Vite sekitar 1-2 tahun lalu
- •Chromatic menyediakan layanan visual testing berbayar untuk membandingkan screenshot antar perubahan kode
- •Atomic Design methodology memecah desain menjadi Atoms, Molecules, Organisms, Templates, dan Pages
- •Frontend developer bisa bekerja paralel dengan backend menggunakan fake data dari library seperti Faker
- •Storybook membantu mendokumentasikan edge cases seperti state hover, disabled, text panjang, dan dukungan RTL (right-to-left)
- •Kolaborasi dengan DomaiNesia untuk cloud hosting dengan promo code 'ngobrolin'
[musik intro]
Dapatkan hanya di Domain Asia
[musik intro]
Halo, selamat malam semuanya
Biasanya Airhorn, sekarang ini aja
Ya mirip lah sama-sama telwet
Gimana kabarnya semuanya, teman-teman di Youtube dan di LinkedIn
Apa kabarnya malam ini, mudah-mudahan sehat semuanya
Kita rencananya bertiga, tapi yang satu belum muncul
Oh lagi OTW katanya, dari kamar ke kamar kerja
Dari kamar ke komputer
Biasa kalau kantornya di rumah, OTW-nya deket lah ya, aman ya
Oke, jadi malam hari ini kita akan bercerita
Oh bercerita, kita akan diskusi
Tentang cerita
Tentang cerita, jadi kalau teman-teman front-end kayaknya udah familiar ya sama tools ini ya
Nah ini dia udah sampai
Ada juga yang belum
Nah, dateng juga
Tapi kamera angle nya beda ya
Salah, ngadep
Nah, kameranya dua ya berarti
Iya, ini apa pamer
Pamir kursi kayaknya
Diatan mereknya
Oh bukan
Ini laptop baru dinyalain yang dinyala default camera
Oh jadi kameranya external ya berarti
Webcam
Bukan
Lihat transkrip lengkap (2321 segmen lagi)
Iya, karena kan dua monitor, satu disini, satu disini
Oh monitornya dua
Dan monitor kan gak punya webcam
Ada sih, cuma laptopnya sebelah sini
Jadi yang dinyala pertama webcam
Eh salah
Gak kelihatan
Muternya gak 360
Udah gak usah dikasih liat
Kita bahas setup kapan-kapan
Oh iya bahas setup kapan-kapan enak juga
Bahas setupnya maksudnya ergonomisnya gitu loh
Karena ergonomis itu penting
Betul, kalau gak sakit punggung
Sakit punggung, sakit pantat, sakit pinggang
Sakit hati, sakit gigi
Oh iya
Terpal tunnel
Jadi malam ini kita akan bahas tentang storybook
Kalau temen-temen foreign kaya udah familiar ya sama storybook
Tapi sebelum kita ngomongin storybook
Kita mau terima kasih dulu buat temen-temen dari Dominicia
Karena episode ini kembali hasil kolaborasi kita ngobrolin web dengan Dominicia
Jadi kalau temen-temen mau cobain
Bisa pakai promo code ngobrolin vpsdn
Jadi ngobrolin virtual private server Dominicia
Ngobrolin vpsdn
Sekarang hosting udah gak ada promo code lagi?
Sebenernya ada
Eh gak tau ya udah di hapus atau belum ya
Tapi sekarang promonya beralih dari hosting ke vps
Dapat diskon 50% untuk pembelian baru
Wow lumayan banget
Karena waktu kita pembicaraan yang lalu
Kita omongin javascript framework segala macem gitu ya
Yang kayaknya lebih cocok kalau apa yang kita omongin bisa langsung dicoba di vps
Bukan share hosting
Mungkin temen-temen yang nonton
Ada yang pernah pengalaman pakai Dominicia?
Belum sih
Saya pengalaman baru beli domain
Di Dominicia
Saya bukan saya sih
Saya pakai untuk wp-id.org
Wp-id.org
Ini ya komunitas WordPress Indonesia
Saya pakai Dominicia
Apanya? Hostingnya?
Vps
Ini ya?
Iya
Ini pas acara apa nih?
Ini WorkCamp Jakarta 2019
Rame ya
Oh rame ya 300an orang 350 pas 370 gitu
Ini siapa? Oh gak bisa di zoom ya
Zoom zoom zoom
Pecah
Pecah
Oke
Ini di vps-nya Dominicia ya
Jadi kalau temen-temen yang tertarik mau nyobain bisa coba yang cloud vps turbo
Jadi apa namanya promo-nya atau diskon-nya itu hanya berlaku untuk vps turbo tapi tidak berlaku untuk vps echo
Saya pakai apa ya? Lupa
Ntar saya lihatin
Oh ya saya lupa pakai yang mana
Tapi ini komunitasinya jalan terus ya ini terakhir 5 Juni masih ada hosting ya
Masih dong
Masih ada meet up ya
Baru biasa
Jalan
Maksudnya grassroot itu apa sih?
Akar rumput
Jadi kita gak akan bisa hilang gitu
Jadi tetap ada jantungnya tetap ada gitu
Iya yang gini-gini nih
Komunitasnya gak harus meet up harus presentasi WFC aja cukup ya sebenarnya
Ngobrol-ngobrol santai
Terus kerja bareng di satu tempat gitu kan
Tapi biar bisa gitu prasiratnya jumlah orangnya harus banyak dulu
Kenapa harus banyak?
Ya enggak maksudnya harus cukup banyak kan WFC juga belum terus semua global semua bisa
Ya jadi apa si A gak bisa lagi gak bisa lagi gak bisa aktif
B, C, D masih bisa ya walaupun aktivitas se-simple apapun masih bisa nyalainin
Nanti giliran B yang lagi gak bisa atau pindah keluar kota atau apapun
A, C, D masih bisa melanjutin
Saya punya kisah sukses juga nih dari temen yang urusin WordPress Tegal
Dia dari yang hanya dulu masalahnya ikut terlibat kecil-kecilan
Terus dia pernah ikut terlibat urusin WordPress di Tegal
Lalu dia pernah juga terlibat di Translation
Masih aktif banget orangnya masih hari Sutiwono
Terus sampai dia satu titik sekarang untuk menjalankan komunitas ini dia disponsori
Disponsori sama perusahaan luar untuk menjalankan komunitas WordPress
Maksudnya digaji untuk menjalankan komunitas gitu digaji dan apa?
Full time sih cuman disponsori artinya
Ada honornya lah ya
Ada honornya hour base itu
Ya ada hitungan jamnya
Jadi kalau dia misalnya bilang 15 jam seminggu untuk komunitas ya dia akan dibayar
Karena buyo bisa konsisten juga berarti kan
Konsisten sekali bertahun-tahun konsisten dan dia sampai akhirnya bisa disponsori
Mantap-mantap
Terus apa ini undang lah?
Oh iya benar
Bahas komunitas WordPress
Grassroot Community Engagement
Nah ini ada beberapa nih
Wan Satya langganan kalau beli domain ya
Nama juga Domain Indonesia
Domain Indonesia
Selamat malam Mas Ricky, Mas Pata
Sama Link In User
Hello Link In User
Bisa anon ya Domain Indonesia
Iya bisa anon ya
Apa karena kita belum mutualan mungkin ya
Jadi namanya gak keluar atau gimana ya
Oke jadi malam ini kita akan bercerita
Eh aku masalah pernah ke ini kan
Oh iya eike kan pernah ke kantor Domain Indonesia kan ya
Pernah
Pernah
Pernah nonton event
Jadi apa?
Terpukul tangan nya yang keren
Acara apa?
Acara apa?
Acaranya Domain Asia
Iya maksudnya bicarain tentang apa?
Oh WordPress dan AI
Oh
Plugin apa tuh?
Plugin buat auto konten
Iya maksudnya saya waktu itu
Kasi pembukaan
Oh keynote keynote
Ya keynote
Dan nyasih tau tentang
Bagaimana sih
Perkembangan AI dan WordPress
Itu bisa
Dan saya kasihin demo
Demo bagaimana
Demo simpel aja sebenarnya
Kayak
Generated content pakai AI
Lalu di samping kanan itu
Langsung ada
Chat GPT
Jadi bisa nanya langsung tentang fakta-fakta dari AI
Langsung konek ke OpenAI ya
API
Bisa nanya jadi kayak
Kayak asisten lah ya
Terus bisa ngerewrite, ngerefresh
Refraser
Supaya bahasanya lebih baik
Sampai
Upscaling image
Di WordPress Media Library
Jadi yang di upload file-nya kecil
Jadi gede
Kalau digusarin biasa pecah
Pixelnya bisa di upscaling
Namun
Saat itu kan itu 2 tahun lalu ya
Kayak apa 1 tahun lalu ya
Iya udah lama
Ampir 2 tahun lah ceritanya
Itu waktu awal-awal chat GPT
Baru mulai laris lah
Nah itu teknologi jaman itu
Masih
AI-nya masih kurang ya
Jadi kalau yang upscaling image
Not too good lah
Kalau image-nya
Base-nya
Cartoon, bagus banget
Tapi kalau base-nya
Orang
Ada kekeliruan
Ada halusinasi-nya
Oh iya, kalau dulu
Jarinya 7 ya
Ada jari itu biasanya itu
Ketauan dari AI
Kalau sekarang
Tengahnya 3, jari nya 7
Tapi harusnya sudah jauh lebih baik
Oke
Mudah-mudahan ini ya
Ada kesempatan kita buat
Ngisi acara di
Domenisia, di kantor Domenisia ya
Offline ya, offline ya, ngobrolin web
Jadi temen-temen dari Jogja
Bisa ngumpul-ngumpul bareng ya
Oke
Sekali lagi terima kasih
Buat Domenisia
Buat kolaborasinya
Kita sekarang langsung ngobrolin
Tentang storybook
Storybook
Itu topik yang laris ini
Laris ya, kenapa laris?
Kan kita punya
A-vote-nya kan, tentang storybook
Ya nggak sih?
Karena udah lama juga ya
A-vote
Gue juga nge-vote kemarin
Memanipulasi voting
Mungkin sedikit
Apa ya, sedikit background
Ini storybook ini kan udah lama
Dan dulu saya
Terakhir pakai
Itu
Masih berat banget
Dulu itu stigma nya itu
Blotted banget
Sekarang kayaknya
Mereka udah berbenah ya
Dan 2 tahun
Ada podcastnya menarik sih
Lupa podcast Syntax FM
Itu nggak salah
Belum terlalu lama lah sekitar 2-3 bulan yang lalu
Ya itu emang
Lawan cara sama
Maintainer storybook
Dan emang dia juga
Adress bahwa
Kayak stigma storybook itu blotted
Itu udah kayak
Menahun gitulah, padahal
Sebetulnya dari sekitar 1-2 tahun yang lalu
Mereka itu udah switch ke feed
Udah nggak webpack lagi
Jadi itu udah ngobrolin
Karena banyak
Ada beberapa sebagian yang
Udah ditulis ulang
From the ground up
Jadi kayak di refactor
Sama yang terakhir
Dulu ada beberapa add-on
Yang default
Jadi sebetulnya kayak
Seninya itu kan kompleks banget sistemnya
Kayak seni
Mecah-mecah service atau library
Kan emang sebetulnya
Under the hood kan masing-masing utility
Itu kayak ada package-nya
Tapi user end user
Terus developer yang meng-consume storybook
Itu agak kusing kan kalau begitu
Install tiba-tiba dependency-nya jadi banyak banget
Nah itu kayak
Mereka ngakalin ya sebenarnya
Functionality-nya ya tetap
Mostly sama aja
Nggak dipangkas signifikan, cuma
Ada yang disatuin
Ada yang digabungin, intinya jadi
Nggak terlalu kayak tiba-tiba dependency-nya
Banyak banget dan bikin orang yang
Ya
Dulu inget pas
Apa namanya? Pas
Lagi bloated-bloated-nya tuh ada yang bikin
Alternative-nya
Kayaknya
Nggak ada yang
Awet lama
Ada yang bagus namanya react style
Guide-ness
Tapi terlalu nice di react doang
Udah dari
Dulu juga dan ya nggak
Tetap aja itu lebih simple
Simple-simple banyak sih
Dulu sampe coba apa
Storybook itu sebenarnya
Awalnya react doang sih ya
Iya awalnya
Di mulai dari react
Tapi
Mungkin salah satu yang bikin storybook tetap
Pertahanan adalah fiturnya ya, fiturnya super lengkap
Dan add-ons-nya itu banyak
Jadi orang
Nggak perlu bikin sendiri gitu ya
Bisa satu tempat
Benar-benar kayak persis banget
Seperti bahasanya storybook
Karena jadi
Front-end component
Kayak
Library
Kitchen sink
Tempat cuci piring
Workshop sih
Jadi definisi yang di website-nya
Storybook itu
Udah cukup deskriptif sih
Dan sebetulnya nge-definisinya tuh
Agak sulit ya, apa sih
Storybook itu karena
Produk yang persis kayak gitu
Library yang persis kayak gini
Itu ya nggak ada bisa dibilang
Relatif sedikit lah
Karena ini itu
Title-nya bagus sih, build, test, and document
Jadi apa waktu kita lagi nge-develop
UI itu kan visual ya
Apa
Ya kayak misalnya kalau kita nulis
Apa
Function lah, nulis function kan
Sambil nyalain testing ya
Terus watch kan bisa kan
Setiap kita save, kalau masih belum bener
Ya itu apa, masih
Merah, masih merah
Ya udah kita ngetik lagi
Atau nyuruh AI benerin, sampe kelar
Sampe hijau semua
Oke itu kan kalau nulis function ya
Terus kalau misalnya UI kan
Kita butuh feedback yang kayak gitu juga
Tapi ya maksudnya
Kalau kita harus nyalain seluruh aplikasi web
Terus dengan segala
Apalah side effect atau
Yang dimanggil API
Kita buka halaman benerannya
Kadang yang males kan, maksudnya ini
Salah satu cara yang efektif juga sih
Jadi pas proses nge-develop
Itu storybook kepake
Ya workshop kan
Workshop budang kan tempatnya kita kerja
Tapi ini juga bisa untuk testing
Sama untuk documenting
Jadi kayak, bukan end to end sih
Cuma pas kita lagi, pas developer lagi bikin
Lagi ngetik kodenya
Sampe udah selesai, di deploy
Di publish untuk
Stakeholder lainnya
Visual testing kali ya
Visual testing ya, tapi
Perkomponen
Dan sebenernya nggak cuma visual sih
Testingnya banyak banget
Jadi testing, kita mau masuk
Ingest atau testing library
Juga bisa, accessibility juga
Juga bisa, tapi storybook itu
Storybook nya sendiri itu gratis
Open source kodenya
Tapi mereka ini adalah produknya
Perusahaan commercial yang namanya
Chromatic
Chromatic itu bekerja di visual testing
Jadi ada produk berbayarnya
Maksudnya
Mereka punya service
Terus cloud positive team mereka
Untuk visual testing, beneran literally
Untuk compare, jadi misalnya
Di iteration atau
Di publish yang hari ini itu
Mereka bikin screenshotnya semua
Terus besok, kalau kita mau
Nge-push lagi
Bisa di setting ke branch git
Atau semacamnya, atau di storybook
Nya sendiri juga bisa compare
Apa yang berubah
Ini intentional atau nggak, jadi kayak
Bikin screenshot dan meng-compare
Screenshot visualnya
Nah, itu ada free tiernya sih
Gua pernah nyoba, tapi abis itu
Nggak pernah pakai lagi karena nggak
Senyat itu, tapi sebenarnya yang
Layanan commercialnya dari situ, layanan
Chromaticnya, dan itu nggak
Wajib sih pakai storybook
Beratus gratis aja
Ini lebih kayak
Design system
Kalau design system kan gambar ya
Jadi kayak Figma gitu kan
Ini berarti lanjutannya ya dari Figma
Terus mungkin
Kita mau mulai bikin satu
Komponen button
Button itu ada property apa aja
Warnanya kayak gimana, terus
Mungkin ada bordernya apa
Ketika disable gimana, ketika
Enable gimana gitu ya
Gimana urutannya?
Urutannya waktu saya bekerja nih misalnya ya
Dari awal pembuatan misalnya
Mau klien datang, mau bikin website
Terus kemudian
Dari sisi UX
Yang mendefinisikan semua
Angan-angan itu
Yang abstrak itu
UX lah, yang ngomong
Tidak, yang ngomong
Yang ngomong itu
Yang ngomong itu
Yang ngomong itu
UX lah, yang ngomong itu
Sampai jadilah skeleton
Biasanya ke skeleton
Journey, segala macem lah
Lalu dari UX
Kemudian jadi UI
Jadilah Figma
Design system lah
Color hex code-nya itu
Segala macem apalah
Bentuk fill
Button
Rounded corner-nya itu
Seberapa segala macem
Button pill bahasanya
Button pill-nya itu seperti apa
Card
Biasanya card, mau bentuk cardnya
Image bawa text
Text kiri
Kanan segala macem
Terus semua font type-nya segala macem
Di Figma
Urutannya itu setelah dari
UI selesai
Tempat saya bekerja
Dulu itu si
Front-end itu sudah mulai jalan
Front-end itu
Sampai membuat storybook
Komponen itu kelar
Dan saya biasanya yang di bagian back-end
Membuat semua
Type data dan data structure-nya itu
Seperti apa
Data structure mau disimpan atau gimana
Tampilin block-nya itu seperti apa segala macem
Nah, terus kemudian
Secara kode yang untuk
Front-end-nya itu
Saya nanti tinggal ambil si front-end bilang
Ini pro apa namanya
Jadi building block-block-block-nya itu
Sudah ada di storybook semua
Saya gak mau tau, tinggal
CSS-nya udah dia buat, udah dia library-in
Segala macem rapi structure-nya
Komponennya udah jadi
Saya tinggal sebenarnya tinggal pakai
Tinggal konekin bahasanya
Kalau saya itu wiring
Jadi dari sisi back-end
Saya tinggal ngewire ke komponen
Jadi komponen itu
Kalau dari sisi front-end
Semua komponen itu masih
Ya kan
Misalnya lorem ipsum
H1 lorem ipsum
Saya yang ngebuat H1-nya itu jadi
Ada datanya dari database
Jadi wiring semua komponen-komponen
Dan jadi lah website
Enaknya dengan ada storybook ini
Pekerjaan front-end dan back-end
Paralel
Mereka jalan, saya jalan
Dan
Nanti setelah hampir
Saya udah mau jadi setengah
Mereka udah jadi setengah, tinggal
Process wiring aja sambil jalan
Jadi
Serasa lebih efisien
Serasanya lebih efisien
Bahkan mungkin lebih efisien
Kadang gak banyak ini kan
Gak banyak
Apa istilahnya ya
Gak banyak ngontok-ngontokan
Pokoknya jadi
Rapi, saya tinggal pakai
Tinggal konekin aja sebenarnya
Kadang-kadang kan kalo
Tidak terdokumentasi gini kan kita bingung kan
Ini button yang untuk
Delete udah ada belum ya
Akhirnya
Mungkin lagi baru CSS-nya
Udah ada aplikasi
Biasanya hover-nya kan
Gak dipikirin kan
Jamanya kalo ngedesain
Pakai Photoshop
Atau Corel
Jamanya dulu
Desainnya cakep
Tetapi gak mikirin
Ini kalo di hover gimana
Udah realistis, kalo textnya panjang aja
Textnya panjang juga
Menunya udah dibikin cakep, ada logo, ada menu
Terus kalo misalnya
Textnya terlalu pendek ya pokoknya gak
Beda sama yang di konsep
Contoh, iya
Jadinya aneh kan
Kalo disini, kalo di Storybook ini
Enaknya bisa ada desktop view
Tablet view
Mobile view
Oke
Jadi kalian juga bisa liat sih
Hasilnya langsung
Live kan
Bisa di klik gitu ya
Ini komunikasi untuk semua stakeholder
Frontend sama back-end
Atau mungkin full-text
Terus ke desainernya yang orang UI
Yang pure orang UI kan
Kadang bikin desain
Bagus secara visual
Cuma gak terlalu mengantisipasi
Realitas tuh kayak gimana kan
Nah, ini kita bisa komunikasi ini kan
Mungkin butuh text yang
Lebih panjang ya itu trangkait
Apa? Trangkaitnya gimana kalo judulnya
Misalnya 5 baris jadi ke
Stretch
Nah, itu kan orang UI yang pure UI
Bukan moding
Umumnya kurang mengantisipasi
Hal-hal kayak gitu kan
Nah, ini jadi bisa untuk komunikasi stakeholder juga
Terus buat orang product lah
Atau apalah
Atau mungkin buat demo ke client
Sementara progress-nya kayak gini
Untuk skenario-skenario
Wireframe misalnya flow-nya gimana
Bisa dibikin section-nya juga
Betul, dan ini
Tambahan juga
Untuk reusable component ya
Sangat membantu ya
Storybook, karena
Bisa dipake
Bareng-bareng, dimana aja gitu kan
Maksudnya dimana aja di halaman yang mana
Kita tinggal liat, oh
Ini ada button, ini, oh ini
Ada card, product card
Yang gambarnya
Imagenya di kiri atas gitu kan
Dan reusability
Faktor reusability-nya
Itu jadi oke juga sih
Oke banget, bener tuh bentu untuk bikin
Reusable, karena kadang kasusnya
Kita udah punya card, terus
Ya sekian bulan kemudian udah
Ngerjain project lain, balik ke project itu
Terus ada brief baru
Atau fitur baru, bikin card baru
Lagi, yang tadinya misalnya
Kalau card lama, bordernya
4px, terus sekarang bikin
Card baru yang mirip
Tapi beda
Tiba-tiba rounditnya 6px atau 10px
Gak konsisten jadinya ya
Bikin lagi
Nah, kalau kita udah punya dokumentasi ini
Jadi ya bisa buat
Itu juga kan sebelum bikin, oh udah-ada
Ini tinggal dicomot, cuma mungkin
Buat fitur misalnya apa, background-nya
Dibikin lebih prominent, karena ini
Feature pose atau apa, cuma membantu
Faktor reusability
Reusable-nya
Reusable-nya ya
Nah, tadi ada link yang saya kasih Mas Riza
Ada, tapi belum
Load nih, lama banget
Oh gitu, nah oke
Lanjut-lanjut
Saya gak bilang ini
Desain metodologian terbaik, tetapi
Ini salah satu yang saya pakai
Bukan saya yang pakai sih
Lebih tepatnya secara
Team decided
Agree untuk menggunakan
Desain metodologi ini
Jadi saat
Pembicaraan, ya aku gak buka
Kebuka-buka ya, jadi saat
Pembicaraan dari
Dari
UI komponennya sendiri pun
Dari yang desain
UI desainnya, itu sudah
Membuat, udah memikirkan
Atomic design metodologi, jadi
Secara kesepakatan bersama sebenarnya
Atomic design ini saya gak
Load, cuma, jadi dia bisa
Memecah-mecah
Desain itu menjadi ada yang namanya Atoms
Atom, komponen
Organism
Template sampai pages
Jadi ada yang paling kecil itu atom
Anggap aja itu cell
Atau
Ya, cell
Jadi misalnya
Komponen terkecil daram sebuah
Desain, kalau kalian bayangkan sebuah page ya
Sebuah halaman
Contohnya ini deh
Komponen terkecilnya itu kan mungkin button
Anggap aja text dan button ini
Button-button made for
Made for
Yang kecil-kecil itu loh, made for react, feed
Apa tuh namanya
Anggular, itu kan namanya
Kecil, itu atom
Terus molekul, ya itu
Sebuah
Ini, komponen
Atom-atom tadi, jadi
Made for apanya itu
Sudah dikumpulin jadi satu
Terus organism
Satu row
Organism satu row
Jadi biasanya page itu
Ada row-row nya kan
Row itu satu
Satu
Organism satu row
Lalu kemudian
Naik lagi
Templates, jadi misalnya
Template halaman
Home page, template
Jadi template itu kumpulan dari
Beberapa organism
Home page, single page
Contact page, segala macem
Baru jadi pages
Jadi
Ada desain sistem yang lain
Cuma ini adalah salah satunya
Nah gue dulu berusaha
Nerapin ini nih
Cuma prakteknya ya gak tau ya
Mungkin kalau orang yang
Jago apa
Project management atau UI
Mungkin bisa, tapi gue dulu
Berusaha ngajak
Ini, cuma yang lain
Yang gak ada run-in lainnya sih
Cuma satu visual designer
Prakteknya
Makin banyak konten pusing
Jadi akhirnya yang lebih realistis
Cuma punya atom
Kalau atom itu bisa lebih gampang
Untuk sepakat itu
Semua item paling kecil
Atom yaudah, sisanya yang kayak
Full organism punya
Combination of atoms
Udah jadi kayak Lego block aja
Nah langsung lompat ke template
Dan pages
Jadi apa, mungkin kalau di team yang
Lebih terbiasa dan professional
Dan punya
Pengalaman buat apa ya
Kayak desain thinking blablabla
Mungkin bisa, nah kalau gue kan
Yang gak punya pengalaman itu cuman
Model baca ini aja, kayaknya lucu
Kayaknya bagus nih untuk nerapin
Harus ngelit mendefinisiin
Prakteknya itu
Definisinya kan gak se clear cut
Di teori itu
Pas ada kebutuhan
Macam-macam, itu mana yang
Organism, mana yang
Itu paling sering
Konflik
Dan harus ngawal kan
Dan jujur gak ada resourcenya
Karena timnya kecil banget dan
Gak ada orang yang ngerti kayak gitu
Ya udahlah, ambil gampangnya aja
Dan setiap hal yang lain
Perinsip pikirnya sih
Tetep kepake ya, tetep bagus
Maksudnya itu prinsip yang bagus
Cuma, mungkin kalau
Di tempat Ivan lebih berhasil
Kalau pengalaman gue harus ngelit kayak gitu
Gak ada legoblog aja
Lebih ke lego
Potongan-potongan lego kan
Bisa satu sendiri, bisa ditumpuk
Bisa bikin kumpulan
Yang lebih intrikit lah
Yang lebih kompleks
Karena waktu, ini bukan tempat saya kejar sekarang
Yang lalu itu
Front end directornya itu
Sakle
Kayak strict
Kayak menarahkannya itu
Sangat entusias
Fanatik dan entusias
Nah, jadi gak cuma fanatik doang
Dia enforcing
Tetapi dia mengarahkan
Sampai UI-UI nya itu
Juga diarahkan sama dia
Karena sebelum
Front end mulai mengerjakan
Front end itu harus
Harus approval
Front end dulu kan, sebelum
Diserahkan ke client sebenarnya
Jadi jangan salah
Banyak kan pengalaman saya
Waktu bekerja di agensi
Di Indonesia
Design itu udah di approve client
Baru diserahkan ke
Team, ke developer
Atau engineer
Alhasil bahasanya, itu udah di approve client
Di rumah gak bisa
Udah di approve client, gak bisa
Jadi kalau yang lalu itu
Strict nya itu adalah
Approval dari team dulu
Baru ke client
Kasih tau dulu, ini team
Ini begini bisa gak?
Dibahas lah itu secara team meeting
Misalnya kalau misalnya
Dibikin desainnya cakep yang misalnya kayak
Banyak floating-floatingnya gitu
Kayak apa
Mungkin
Kalau budgetnya besar, di iain
Tapi kalau budgetnya kecil, enggak
Ini kita budgetnya terbatas, jangan bikin yang
Aneh-aneh, kayak gitu
Mungkin buat temen-temen yang
Belajar React
Ini juga kayaknya senada ya
Sama thinking in React, kalau temen-temen
Familiar
Jadi kalau misalkan ngeliat
Satu halaman gitu ya
Itu di break ke komponen
Jadi kecil-kecil
Nah ini sebenarnya basicnya dari sini
Ini sudah organism kalau bagi saya
Iya, maksudnya basicnya dari sini yang tadi itu
Jadi perkembangan lebih lanjut dari ini
Ini lumayan
Thinking in React ini lumayan
Membantu ketika kita baru
Terutama yang baru belajar tentang
Komponen base framework ya
Ini cukup membantu
Bahasanya kalau di sini masih ada yang namanya
Ada yang
Dump component
Dump component sama smart component
Ya
Sekarang diganti jadi
Presentational
Kalau jaman dulu dump component
Nggak ada yang bodoh ya
Bodoh
Component bodoh sama component
Tinter
Sekarang apa namanya?
Presentational sama control
Nggak tahu lupa satu lagi apa lupa
Oke, kita kembali ke
Storybook ya
Apa namanya
Tadi ya, flow-nya ya
Berarti
Sebentar
Berarti
Kalau kita
Pada saat
Oh jadi supaya bisa parallel tadi ya
Antara si front-end
Mengerjain satu-satu
Di back-end, oh ini komponennya udah jadi
Ini bisa dipake gitu ya
Nggak saling menunggu ya
Jadi pertama setelah
Setelah desain sudah kelar
Maksudnya
Secara face
Face-nya desain udah kelar
Sembari itu juga
Saya dan
Back-end dan front-end itu juga membuat
Sebuah technical documentation
Jadi kalau
Component X
Yang besar ya, component card
Itu misalnya data ini
Ambil data dari post
Data ini diambil dari kategori
Data ini diambil dari product
Data ini diambil dari apa
Kan jadilah sebuah data type
Data-data type ini kan sudah kita define semua
Data structure-nya itu ada
Bagaimana data disimpan di CMS
Atau di database
Sudah didefine di technical documentation
Atau kalau di
Case yang lain, schema
Data schema-nya itu
Sudah jadi
Kalau schema sudah jadi
Sudah di-agree bersama
Ini idealist way ya
Kadang ada si kita shortcut-shortcut
Sana-sini kita gantung timeline
Dan budget kembali lagi
Kalau idealist-nya
Schema sudah jadi
Si front-end
Sudah bisa jalan
Dengan menggunakan
Apa yang fake data
Untuk data fake
Dipake JS
Faker
Nah, pakai faker bisa
Disimulate data dari schema
Kan bisa di-faker kan
Jadi ini sudah bisa jalan
Tanpa menunggu back-end kelar
Jadi back-end itu cuman kayak membuat database
Membuat CMS
Dan meng-outputkan sesuai schema
Jadi waktu combine
Wiringnya itu
Ya tinggal sebenarnya
Datanya ini
Sambungkan ke komponen-komponen
Yang sudah mereka sambungin
Sebenarnya tinggal ganti data source
Idealist-nya begitu
Tapi praktisnya
Banyak yang terjadi
Ada-ada aja lah
Yang limit
Text-nya
Nggak diatur, akhirnya harus
Jadi overflow
Ada yang macam-macam lah
Ya namanya
Projek pasti ada aja
Ada aja lah
Di tengah jalan ketemu aneh-aneh
Ini dari storybook
Showcase, beberapa
Inspirasi
Kalau pengen
Kalau pengen lihat penggunaannya
Jadi salah satu keunikan storybook juga
Karena yaitu saking banyaknya fiturnya
Maksudnya saking kompleks
Banyak add-ons-nya juga
Ya itu versatile
Maksudnya bisa di-customize
Untuk macem-macem kebutuhan
Tapi kadang kan kita nggak
Langsung ngebayang ya
Makanya gimana
Showcase ini berguna banget sih
Buat lihat
Jadi pas kita lihat, oh gitu pakenya
Ya ampun UI library
Windows 95
Di sini temen-temen ada yang
Pernah pakai nggak Windows 95
Apa kita doang yang pernah merasakan
Eh, kok nggak pernah ya
Sorry, semenit berapa ya
Sorry ya, saya XP
Saya 311
Eh, saya sebelum 311
Sudah pakai, astaga
311
MS-DOS
Oh kalau MS-DOS
Mana pernah yang pakai Floppy
Apa, Drive-B
Pernah ngerasain masukin itu
Yang agak besar Drive-B
Ini contohnya misalkan kita mau
Lihat cara penggunaan button
Gimana sih bisa showcode ya
Oh gini doang
Terus ada parameternya
Cuma ini
Kurang oke
Kurang oke, coba buka ya
Kurang oke ya
Yang di contoh
Reactdates deh
Reactdates
Ini
Jadi ini bukan desain
Sistem lengkap ya, ini
Dokumentasi untuk library
Komponen library punya
Airbnb, itu kan terkenal nih
Date pickernya, kalau yang pernah bikin
React dan butuh date picker
Kan Airbnb kan itu
Kursial banget ya, untuk ngebooking
Ngebooking penginapan
Tanggal itu kan
Ini tuh emang
Oke banget
Nah itu
Varian-variannya default
Oh
Jadi ada
Defaultnya seperti ini
Tapi kalau butuh yang
Di hidden, dia harus ada
Buttonnya dulu, baru di click
Di dalam form
Seperti apa
Oh use case, use case nya diisi semua disini ya
Non-English
Ya non-English
Ada yang dari kanan ke kiri
Yang ini kiri ke kanan
Kalau bikin gitu
Tapi gak mikir kemungkinan
Bahwa from dan to nya bisa kanan
Ke kiri, jadi jebol semua
Jebol semua ya, bener juga
Terus apalagi yang menarik ini ya
UI kit conductor
Desain sistem ya
Jadi ini
Contoh
UI, cuma belum desain sistem
Yang menyeluruh sih, lebih ke UI
Desain sistem
Ini buat conductor tuh apasih
Kayak layanan
LLM gitu lah
Ya kayak chat GPT atau Jimenai
Apalagi nge-refer
Nge-refer ISDK, tapi untuk
Mengenerate content, itunya gak penting sih
Cuma maksanya background nya dipakai buat apa
Nah ini
Salah satu oke dari
Storybook itu
Yang bisa di-dokumentasiin
Dia juga support MDX
MDX untuk halaman biasa
Kayak yang si introduction tadi itu
Yang ikonnya kuning
Jadi kita cuma mau ngetik nih
Kita bikin overview atau bulk
Atau how to use atau catetan apapun
Ya tinggal bikin literally
Introduction.mdx
Udah langsung masuk
Buat dimana ya, Paya
Ada helper-helper
Component nya yang kayak
Content di kanan tuh kayaknya
Otomatis degenerate dari
Semantik heading, jadi H1, H2A
Itu otomatis dibikinin
Bisa masukin code sample
Ada di atas tuh
Ada di top bar
Top bar kan ada macem-macem tuh
Icon-icon itu bisa di-click
Bisa untuk mobile
Bisa light
Nah
Oke
Ini buat grid ya
Gridnya bisa liat
Margin
Margin padding ya
Ini kayaknya
Ada yang didisable by default
Kayaknya ada yang buat
Responsi ya
Ada actions, interaction,
Accessibility
Nah itu ada
Yang tadi gue pengen tunjuk
Controlnya sih
Element must meet minimum
Dia gak itu
Gak masuk ya
Ijo ke hitam kali ya
Atau ke putih ya
Entahlah tau yang mana
Putih kayaknya gak masuk
Di highlight kok
Bagian yang mana
Coba highlight risal
Highlight, nah
Itu ada centernya
Mana yang langgar, iya putih di ijo
Putih
Background nya ijo
Kurang accessible
Ya gak kurang
Kurang contrast
Gak masuk ke
Ke expected
Contrast ratio 4,5
Banding 1, dia gak masuk kan
Hmm
Tapi kalau misalnya gak comply sama AAA
AAA juga
Ada yang gak apa-apa ya gitulah
Bisa disesuaikan
Nah terus tadi buka
Random dialog atau
Ya buka yang tadi
Dialog aja
Default
Default
Default bawahnya
Di tab yang bawah buka controls
Controls kiri ya
Terus apa ya
Content padding atau apa, ini gak ada keterangannya sih
Coba content padding
Atau title
Nggak bisa di edit
Bisa
Bisa di ketik
Ini gak bisa
Iya makanya
Sekarang udah gak bisa tuh
Udah gak bisa di click
Ada error
Ya itu pokoknya
Itu sesuai
Bisa di edit
Sama coba cari component lain deh
Yang ada controlnya juga
Nah itu kalau angka bisa digeser-geser
Pake slider, dibesarin
Dikecilin, lucu aja
Skeleton
Spinner
Coba possible variance deh
Skeleton, nah ini
Ada descriptionnya kan tuh di control
The size of the component
Nah ini oke banget sih
Ini otomatis diambil dari
Type script definitionnya
Eh type script apa
Mau nya component pas kita nge-definisi
Props-nya, prop type-nya
Iya
Prop type kan bisa
Atasnya kita kasih comment nih
Mana ya contohnya ini
Ada source-nya gak
Ada source
Itu docs and props
Itu di atasnya, di spinner
Itu paling kanan kan source
Nuh
Ini
Oh ada vision sih
Ini, ini
Bawah, oh
Gak ada kayaknya
Gak ada kayaknya, coba buka di private chat deh
Itu contoh aja
Nah itu scroll ke bawah
Scroll lagi
Scroll lagi
Nah itu pokoknya kayak apa
Open, whether the model dialog
Is open or not, learn more
Jadi apa, itu bukan
Jadi ini bukan extra
Kerja JS.com
Atau type script
Di cloud technician atau apapun
Jadi bukan bikin halaman atau fitur
Khusus sendiri di storybook-nya
Cuma udah back in, dia ngambil
Ngebaca dari componentnya
Ini kan bagus banget sih
Encourage best practice
Bahkan kalau pun di luar konteks
Pake storybook kan jadi apa
Ini encourage setiap orang
Pake component ini kan langsung muncul
Deskripsi-nya
Deskripsi-nya jadi
Membantu untuk
Terutama buat kita yang
Belum tahu cara gunainnya
Kita harus baca dulu kan
Jadi misalnya apa, nanti temen
Ini yang bikin kita, tapi habis itu
Buat edit atau
Menggunakan di halaman lain
Bisa aja bukan kita, tapi temen stream kita
Jadi nggak harus nanya
Atau bikin baru lagi atau
Mikir-mikir sendiri kan
Udah ada keterangannya
Ini masih spinner, padahal udah toast
Nyangkut ini
Oh circuit itu yang ini ya
Nah kalau ini contoh, yang tadi kan
Design system, tapi
Bukan keseluruhan, lebih ke UI-nya aja
Termasuk segala
Nanti kalau misalnya kalian
Temen-temen selalu lihat satu persatu
Bagus sih, kayak stress test
Text aja, text itu di stress test
Kalau textnya panjang, textnya pendek
Nggak ada spesinya, tapi itu UI doang
Nah kalau ini, contoh yang
Apa ya, holistic lah
Design system yang lebih luas lagi
Termasuk mereka punya beberapa package
Yang dipublish kalau scroll
Ya yang standar UI
Ada tipografi blablabla
Terus kalau di scroll terus, sidebar
Kebawah lagi, itu mereka
Publish beberapa package juga
Ada branding
Ada accessibility
Ada writing style atau
Semacamnya
Ada template buat
Framework
Hmm
Menarik ya
Misalkan button, base
Ini, storybook ini sebenarnya kalau mau digali
Bisa dalam banget
Banyak banget fitur-fitur yang bisa dibuat
Cuma, harus kembali lagi
Ke
Ini ya, kembali ke
Kebutuhan
Nah itu
Realistik
Karena maintainnya sulit lho
Bener
Kalau orangnya cuma
Timnya kecil
Orang front-endnya cuma satu
Dan flow kerja normal pada umumnya ya
Itu agak sulit
Kalau harus
Ya maksudnya ini
Nggak tahu ya kalau si circuit ini
Kan mungkin lebih besar ya
Tim lebih besar, mungkin bisa mengalokasi
Emang sekian jam
Dalam seminggu cuma buat
Cuma buat ngurusin ini, biar rapih
Dan selalu updated
Tapi kalau cuma di sleep-sleepin doang
Ya, belum tentu
Apakah
Kalau kita bikin storybook atau design system
Seperti ini, butuh
Dedicated person untuk maintain
Atau bisa
Bukan
Not necessarily ya
Tapi harus mengalokasi, waktu yang jelas
Tim ya, bukan orang ya
Yang memaintain tim
Dan harus berkala sih
Maksudnya nggak bisa cuma kayak
Sekali
Ya udah kalian seminggu kerjain ini
Udah nggak bisa kayak gitu, ini living
Dokumen kan soalnya
Kesalahan saya
Bukan kesalahan saya, kesalahan
Waktu pertama kali kita nyomong-nyomong
Pake storybook, dan tim kita itu adalah
Memisahkan source code
Apa yang kita kerjakan
In storybook dengan proyek
Kenyataannya
Harusnya jangan dipisahkan
Ya, dipisahkan
Nah, next project-nya kita harus
Satukan, jadi repo-nya
Pun satu, dan disitu ada
Storybook, style
Reference styling, style SCSS-nya pun
Harus satu
Pake yang sama
Jadi kalau ada perubahan, kelihatan ya
Iya, dan tentunya pasti ada
CSS yang
Khusus untuk storybook itu ada
Karena perlu ada modifikasi
Nggak bisa idealis kayak
Sepenuhnya percaya sama CSS
Yang kita pakai, tetap perlu modifikasi
Cuman, main source
CSS dan JavaScript
Harus dari project main repo
Yang kita pakai
Sebenar-benarnya
Yang direferensi ke storybook
Sama halnya dengan dokumentasi juga
Dokumentasi semakin dekat ke code
Semakin bagus, karena ketika codenya
Berubah, terus kalau terpisah
Dokumentasinya
Lupa nge-update
Gak relevan
Repo-nya udah beda
Lupa nge-update
Bisa jadi snowball, nggak akan keurus
Jadi harus, sebaiknya
Di satu project
Atau di satu repo
Mungkin ada docs atau apa
Bahkan menggunakan JS docs
Jadi otomatis kan
Ketika ada update fungsinya
Atau menambah
Parameter udah langsung
Ditambahin keterangannya
Jadi nanti tinggal di agregasi aja
Betul
Bahkan cara yang tempat saya bekerja sekarang
Dokumentasi project itu
Nggak mau lagi kita bikin
Kayak punya GitHub wiki
Nggak mau lagi kayak confluence
Jadi nggak keurus
Di confluence ada
Di wiki aja
Di Google docs ada
Terus sekarang gimana?
Jadi kita kan, saya kan
Maintain projectnya kan WordPress rata-rata ya
Dan saya WordPress itu kan punya plug-in
Ataupun modul lah
Kita sebut plug-in dan modul
Di setiap plug-in dan modul itu
Ada sendiri
Underscore doc folder
Dan di dalamnya itu MD file
MD file
Jadi
Di developer documentation
Kita ada plug-in yang khusus kayak ngebaca
MD file itu
Jadi di browser-nya kita saat di dashboard itu
Bisa lihat itu dokumentasi-dokumentasi itu
Bisa di render
Jadi bacanya disitu
Semua
Setiap kali si
Developer menambahkan
Modul baru atau CLI command baru
Dia perlu menambahkan
Kode itu, dokumentasi itu
Dokumentasi
Jadi semuanya di satu repo
Kok nggak terurus mas?
Yes, betul, setuju
Dokumentasi termasuk juga
Dan makanya storybook itu kan encourage
Jadi bukan satu project
Atau repo storybook terpisah
Itu sangat encourage
Storybook-nya itu ya di tempat
Dimana kita mengembangkan UI component
Ya sebisa mungkin
Jadi kayak makanya itu tadi
Kayak yang kontrol props-nya apa
Ya langsung ngebaca dari file
Component.tsx
T.s.x-nya
Jadi nggak nulis terpisah, kalau nulis terpisah
Udah pasti nggak bakalan di update itu setelah
Seminggu, dua minggu
Cuma kalau itu kan
Kalau misalnya emang ada
Props yang dihapus atau cara kerjanya
Diubah atau misalnya tadinya
Optional, terus dijadiin
Required, ya udah tanpa
Harus ada kerjaan ekstra
Storybook-nya juga ngebaca dari component itu
Ikut ngadep detail props-nya
Oke, nah kalau
Ada teman-teman yang belum pakai, terus mau mulai
Pakai, gimana caranya? Langsung ini ya
MPM create ini ya
Langsung install di project masing-masing
Gitu ya
Yang officially supported sekarang
Apa sih, React, Svelte
Nah itu
Next, Preact, Angular, View
Svelte dari SvelteKit sama Web Component
Dan satu lagi ada HTML
Bisa loh, HTML saja
Bisa, dan gue pernah
Gue pernah bikin
Buat custom element, jadi
Bahkan nggak pakai stencil atau framework
Apa pun custom element mentahan
Itu dipakainya, jadi ada
Setup WordPress
Tapi pakai Elementor, dan
Sebetulnya itu nggak tahu siapa
Yang pokoknya nggak bisa dibongkar
Dari awal, tapi
Cuma kayak nambah fungsinality
Yang simple, itu kan overkill
Kalau beneran harus develop
Pakai React atau apa, hal-hal simple
Yang custom element
Custom element vanilla pun
Bisa, nah cuma ke preview-nya
Gimana kan, pusing ya? Yaudah
Storybook itu berguna banget ke lain
HTML-nya
Ini untuk SvelteKit contohnya ya
Terus habis itu
Kita perlu buat satu folder
Atau udah dibikinin ya?
Kalau kita pakai itu
Pakai create comment sih
Dibikinin
NPM create KDP
Atau PNPM create storybook
Dan lain-lain
Menarik ya
Jadi, kalau project itu
Bagus kan
Ada storybook-nya, terus kemudian
Ada dokusaurus-nya
Uwe, dokusaurus
Gak mesti dokusaurus kali
Ada yang lain juga
Yang penting, markdown base lah ya
Markdown base ya
Bisa diganti-ganti nanti, tapi Astro
Nggak ada ya
Belum ya, baru Astro
Astro yang pakai
Oh dia kan UI doang ya
Dia UI doang ya
Dut Astronya belum bisa
Tapi di install aja, kalau misalnya
Kita pakai
Bahkan cuma HTML
Misalkan pakai Spelt
Berarti kita tinggal install-nya aja ya
Atau pakai React bisa
Atau bahkan HTML doang
Tapi kita pakai Tailwind config
Gue pernah punya use case itu juga
Tailwind kan bisa bikin config yang
Dipalui sebagai package ya
Yang buat token-tokennya
Sama buat custom color
Udah bikin storybook buat itu
Jadi, cokelode-nya HTML biasa aja
Itu kan bisa di kopas, bisa dipakai di Astro
Tapi emang sekarang belum bisa
Directly baca .Astro
Oh, oke-oke
Blade, Blade itu apa?
Laravel ya?
Template
Ini kan back-end
Front-end itu
Front-end framework JavaScript ya
Ya itu, nggak bisa
Baca .PHP
Tapi ya bisa diakalin
Pakainya HTML itu tadi
Cuma buat CSS-nya
Ya di kopas aja kan
Any valid HTML kan bisa di kopas
Masukin ke .blade .php
Masa Laravel nggak ada
Storybook yang seperti
Storybook? Ada kali?
Ya cuma kalau ini kan
Fokus di UI-nya
Nggak tahu sih Laravel bikin sendiri
Beda ini dong mas
Beda arah
Ya beda kebutuhan
Beda scan-nya
Dia keunggulannya kan di
Ecosystem full-stack kan
Betul-betul-betul
Dia bikin produknya ya, dikuatin ke situ
Ini sama sekali dari back-end-nya
Oh, ada
Pasti ada
Saya yakin ada
Tapi ini nggak tahu ini buat apa ya
Oh ya buat ngebaca
Di template yang engine aja
Itu tetap pakai storybook
Headphone ya
Nggak tahu yang ini
Yang di atas nih
Blast, tadi juga ya sama ya
Yang tadi ini kodenya
Yang tadi ya
Kapan terakhir 3 bulan
Oke lah ya
Lumayan aktif kok
Storybook
Bentuknya kayak gimana?
Nggak ada ya?
Nggak ada contohnya dia
Oh dia pakai storybook
Ya iya, itu cuma storybook
Tapi biar bisa ngebaca
Dibalik lah ya
Itu HTML
Pake fungsionalitas
Yang buat HTML
Rapper ya, berarti ini ya
Hanya rapper
Rapper lah ya
Untuk membuat
Storybook
Iya
Silahkan
Kalau mau pakai
Mas Kaisa
Husky, dia pakai husky
Nah, apa lagi yang menarik nih
Dari storybook
Chromatic, kayak kalau dia mau visual
Dibasain kan, dia connect
Chromaticnya gampang banget sih sebenarnya
Karena kayak seamless, beneran seamless
Ini kan
Sebenernya produk nggak jubahkan sih
Kalau yang jubahkan itu kan, Next.jsnya gratis
Tapi versenanya dibikin ketergantungan
Kalau ini nggak
Mesti pakai Chromatic, cuma
Cuma dimudahkan
Integrasi Chromaticnya itu kayak
Kayak nggak pakai effort
Maintainer storybook itu
Digaji oleh Chromatic
Sama kan
Kayak Next.js, kalau misalkan deploy
Ke versenya kan
Gampang
Sumpah gampang
Kalau ke tempat lain ya, tricky
Sumpah gampang
Bahkan dia bisa ke browser stack juga loh
Bisa ke browser stack juga
Tanpa visual texting pun
Storybooknya tetap jalan
Tapi emang seamless
Dua hal yang terpisah ya
Produk semi jubahkan
Semi jubahkan, ya ini
Setengah ya, setengah jubahkan ya
Kerennya bisa ke browser stack juga
Ini bisa tes di multiple browser secara real device
Oke
Dan ada yang
Fremiumnya juga ya, ada yang gratisnya
Ada lah ya buat kamu ya
Jadi ini
Tujuan si Chromatic ini ngapain dia
Ngescreenshot
Atau apaan ya
Kayak jalanin play, right?
Ngescreenshot
Tapi hostil
Ngescreenshot
Terus compare
Ya UI-nya bagus
Mereka cloud service
Di hosting nih mereka
Dan kayak apa ya, ya lebih main
UI/UXC/DX/DX
Di developer experience
Jadi compare
Apa
Itu bisa integrate
Ke CI/CD pipeline
Jadi kayak di github pull request
Atau di isunya atau apalah
Ada komennya, terus memudahkan
Stakeholder kita, developer-nya nih
Atau ini yang berubah, approve atau enggak
Ya kayak ada tombol-tombolnya
Ya gitu lah, bikin enak
Oh ini ada pertanyaan nih
Kalau kita reject, ya gak bisa
Di merge dan lain-lain
Testing di semua browser kah?
Bisa di define, browser yang major
Atau browser yang mau kita pakai
Di device yang mana bisa di define di Chromatic
Dan di connect ke browser stack
Browser stack ya, buat
Ngecek semua browser
Nge-screenshot-nya pakai browser stack
Jadi setelah update X
Tiba-tiba breaking, tapi cuma
Di Safari versi
13 atau apalah
Itu kan cache case yang biasanya kita gak
Bisa nge-cache kan, kita belum tentu
Nangkep
Nah ini dibikin bagus
Interface-nya, terus dia bisa komen di github
Issunya, langsung udah data
Terima kasih
Oke
Oh ya
PRCA
PRCA
PRCA
Mana?
Itu tuh
Di tengah
Di tengah itu lho kan
Ini?
Ini musuhnya Chromatic
Tapi dia gak bikin storybook
Competitor ya
Oh jadi dia punya sendiri ya
I see
Kalau ini yang punya
Ini punya-nya browser stack
Browser stack
Oke
Nah cuma ngomong-ngomong Chromatic
Gue lumayan salut sih
Ini storybook kan udah bertahun-tahun ya
Cuma kayaknya makin, ya maksudnya
Aktif di-maintain, terus progress-nya juga bagus
Nah berarti kan
Bisa disimpulin, Chromatic-nya
Cuan ya, maksudnya income
Pemasukannya
Minimal tetep, bahkan naik
Bisa tetep nge-gaji apa
Nge-maintain storybook kan
Kalau misalnya mereka customer-nya
Sedikit atau gak untung kan
Storybook-nya bakal mati kan
Berarti orang kebutuhan
Visual testing yang sedetail
Dan sekompleks itu sebenarnya cukup besar ya
Banyak yang pakai
Ya lumayan kan
Kalau project yang
Yang tadinya
Well saya berkaca
Dari project yang saya maintain
Itu ada yang harus
WCRG compliance kan
Atau accessibility compliance
Jadi sebenarnya storybook yang dipakai itu
Untuk memastikan
Komponen yang kita shipping itu
Accessibility-nya
Komplai
Jadi ada proof-nya
Chromatic-nya
Yang beneran visual testing
Detail-nya itu berarti kan
Cukup banyak customer yang
Berbayar kan
Simplify banget untuk dari
Testing dari storybook ke chromatic ya
Storybook, nah itu terjebak ya
Ke tergantungan
Karena bukan terjebak
Apa istilahnya ya
Saving time
Berarti itu bagus kan
Maksudnya bikin produk commercial
Berbayar dan itu emang sesuatu
Yang dibutuhin berguna buat
Penggunanya customer-nya
Jadi maksudnya bukan ya kalau kata-kata
Dibak atau ketergantungan itu kayak
Konotasinya negatif kan ya
Kayak dikibulin, kayak dimanipulasi
Nah kalau ini kan nggak kan, maksudnya
Orang tadinya pakai storybook, integrate sama
Visual testing product
Hosted-nya Chromatic
Walaupun sebenarnya sendiri kan
Bikin script playwright
Atau papitir atau apa juga mungkin bisa
Tapi ini dimudahin banget
Pakai layanan Chromatic, jadi
Customer yang emang ada budget-nya ya udah
Kan ada kebutuhan sih sebenarnya
Kebutuhannya itu sebenarnya
Proof kalau accessibility
Kita itu
Dari kita time-to-time itu
Maksudnya setiap kali
Deploy aman
Dan ada proof-nya
Dan sewaktu kita shipping
Peace of mind sama trail
Kayak paper trail gitu kan
Lebih tempat ini paper trail
Udah, karena compliance itu
Paper trail
Jadi sebelum terjadi
Kena sew, kita sudah benerin
Pentingnya disitu
Oh iya
Kalau itu harus ya, mau nggak mau ya
Iya
Dan daripada kita
Nge-check satu persatu di semua device
Cape juga gaji
Lebih mahal dan ngabisin waktu
Anggap aja
Wow kita mau pakai Chromatic karena
Mau stay idealist, harus
Open source semua misalnya
Mereka gaji lah kita yang
Gak tahu cara bikin
Visual regression testing yang
Mumpuni gitu ya
Karena Chromatic kan sudah
Invest
Ribuan jam, ribuan
Udah ada sistemnya juga kan
Banyak banget, khusus hanya untuk itu
Sedangkan kita kan nggak ahli
Untuk membuat visual regression
Testing
Jadi ya mahal
Investin mana untuk
Membeli sebuah service itu
Pasti efisien membeli service kan
Ada trade-off lah
Dan dari sisi
Budget juga, kembali ke budget
Dan efisiensi
Lebih efisien kalau pakai
Service yang sudah ada dan bagus
Berarti mereka bisa nge-balance itu kan
Punya
Produk commercial, punya produk
Hosted commercial dengan segala
Kemudahannya
Mereka sebagian dilarikan ke
Open source kan bikin storybook, tapi dari situ juga
Dapat input
Ya oleh semua yang pakai
Storybook kan, kebutuhannya
Kebutuhannya UI
Component design itu kayak gimana ya
Dapat input juga buat bikin produk
Commercial, produk berbayar mereka
Juga bisa diimprove lebih bagus lagi kan
Karena datanya, apa inputnya
Banyak
Oke, ada lagi
Yang mau dibahas sekitar
Storybook
Ad-ons, bahas sedikit aja ya
Buku aja tuh, halaman ad-ons
Nah ini ada yang menarik
Ad-ons yang menarik apa
Aja kira-kira
Kalau yang wajib, kayaknya di install
By default ya itu
Tadi accessibility
Terus sisanya, itu yang popular sih
Ini ya
Kalau teams itu
Kalau yang by default
Dark mode, light mode doang
Tapi kan kadang ada yang pakai high contrast
Atau semacamnya
Itu juga udah lama kok, sekarang udah masuk
Di mainnya kalau nggak salah
Accessibility, yang tadi accessibility
Test runner
Oh yang centang itu
Centang biru tuh official kayaknya
Kalau yang
Standard ya itu tadi accessibility
Dark mode, light mode, tapi kayak kelihatannya
Ada diming yang lebih
Custom lagi
Yang itu tadi, kalau misalnya selain dark mode
Light mode, kita mau define
High contrast atau semacamnya
Yang berguna
Terus test runner, itu tadi
Oke, test runner itu untuk
Kalau kita udah punya existing test yang
Pake jazz atau testing library
Bisa dijalani dari storybook
Ini selera ya, kalau gue sih tetap
Lebih enak dari CLI aja sih kan
PNPM test atau PNPM test watch
Cuma kalau, ya mungkin
Ini lebih ke collocate sih
Apa, kayak di contoh
Landing page-nya tadi, jadi
Sambil ngejalanin test
Sambil lihat UI-nya kayak gimana
Jadi ya, itu bisa
Berguna juga
Terus yang oke juga tadi tuh
Scroll ke atas, mock service worker
Itu buat
Faking API call
Kalau misalnya
In the real world kan
Komponen yang, misalnya komponen
Udah di jahit lah, udah jadi satu
Udah jadi, apa tadi, template ya
Kalau pakai balasannya atomic design
Pasti ada, apa
Smart komponennya, kalau yang react tadi kan
Udah ada fetching-nya
Ya jangan, apa, kita pedel
Cuma pengen nge-test UI-nya, jadi
Bisa diatur biar enggak
Fetch ke API beneran
Tanpa kodang atik dari
Kode react-nya sendiri
Jadi nggak usah if
Lagi jalan, nggak
Kita nggak harus capai-capai ngedetek
Ini lagi jalan di storybook atau bukan
Kalau lagi jalan dari storybook
Fetch-nya ke fake data
Atau fake API, nggak usah kayak gitu
Jadi tetap nggak usah kodang atik
Oh, udah otomatis ya
Langsung ya
Kita nge-replace
Limpa request ke
Ya kita define aja API
URL-nya apa, direplace
Pakai apa
Sisanya jujur nggak pernah pakai
Kayak integrasi Figma, Zeppelin
Dan lain-lain
Zeppelin ini kayak Figma
Beda ya?
Ya, mirip-mirip gitu
Mirip-mirip ya
Kalau itu, addons-nya
Rata-rata use case spesifik banget sih
Yaitu kayak bentuk grid tertentu
Atau deeming tertentu
Tapi yang addons
Yang mungkin berguna juga
Cuma gue belum nyobain
Itu yang buat framework integration
Kayak yang apa?
Ada komponen-komponen
Yang khusus Next.js
Ada kode Next.js-nya
Nah, itu bisa di
Bisa ditimpal
Sama si
Storybook
Lupa namanya apa
Ada addons buat routing juga
Itu kan tadi ketengan kan
Misalnya satu per satu
Komponen, nah kalau mau
Simulate routing juga bisa
Cuma lupa namanya apa sih
Oke
Oke
Ada lagi kah?
Sebelum kita menuju
Ke segmen terakhir
Itu tuh ada komen berharap
Pemerintah kita ada UI UX
Storybook
Kalau pemerintah kita sih
Maaf-maaf ya gatau ya
Masih jauh kayaknya ya
Nah, kalau mau pindah keluarga negara
Ke Inggris, beneran ada tuh
Di private chat
Pemerintah UK itu
Punya design system sendiri
Dan itu didokumentasiin
Pakai Storybook
Buka aja
Open source ya gitu
Jadi semua
Situs pemerintah
Harus follow ini ya
Ya pake standar yang sama
Standar yang sama
Gitu dong, kalau engga nanti banner
Isinya foto
Foto pecah
Besar banget
Buduh banget
Terus itu lagi apa
Informasi yang dicari sulit banget
Terus engga dimenting
Loh, kok jadi undang-undang sih
Cuma kalau ada
Storybook gini, mengurangi budget
Pengadaan, nanti ga bisa bikin
Ga bisa propose budget bikin dari awal lagi
Karena komponen-komponennya udah ada semua
Waduh gimana ini
Ada saran untuk kami
Pemula belajar full stack?
Belajar partial stack dulu
Iya, jangan full
Jangan full ya
Fokus-fokus, belajar satu-satu
Mau back-end dulu boleh
Front-end dulu
Jangan langsung semuanya
Berat
Atau larapel aja, silahkan
Atau WordPress aja
Pake framework yang sudah full stack ya
Jadi belajarnya lebih gampang
WordPress aja dulu
Kan sudah ada full side editing
Sudah tinggal drag-and-drop
Tapi kayaknya iya deh, tetep aja
Pilih salah satu dulu, mana yang keliatan
Paling menarik
Front-end dulu atau back-end dulu, abis itu
Pelan-pelan ya
Dibuat lebih full
Iya, kan sekarang tuh
Cenderung lebih
Apa ya, kalau dulu kan
Misalkan kita belum, tools-nya belum terlalu banyak
Misalkan kita mau
Punya database, bingung
Dimana, harus punya temen yang bisa back-end
Kalau sekarang misalkan
Kita bisa pakai
Open API kan, misalkan ada API
Yang sudah terbuka, atau kita mau
Pakai semacam firebase, superbase
Gitu ya, yang sederhana
Datanya bisa kita input
Manual
Terus udah bisa di-consume
Begitu juga sebaliknya, kalau anak
Back-end, mau pakai front-end
Kan sekarang ada yang bisa drag-and-drop lah
Apa segala macam, banyak
Ya, macem-macem lah
Jadi
Apa ya, belajar
Setengah dulu atau
Satu bagian dulu juga
Gak ada masalah, kalau dulu mungkin
Nah, terus, ini
Tetep usahakan jadi T-shape
Developer kan, ada istilahnya
Berbentuk, itu maksudnya
Kita punya peketahuannya
Cukup luas, ya walaupun
Nggak dalam-dalam amat
Luas, terus ada satu bagian
Yang dalam
Yang lebih dalam
Oke
Oke
Kalau, apa ya, kalau ngejar
Pengetahuan terlalu dalam, terlalu skillful
Tapi luas banget, kita malah jadi
Palu gede, cuma, kayak apa
Nggak kuat-kuat banget di bagian
Manapun kan
Sama itu
Sama harus
Di-decide juga, ditentukan juga
Full stack itu apa? Ini kan
Kayak masih abu-abu kan
Full stack itu apakah front-end, back-end doang
Atau front-end, back-end,
DevOps, mobile
Itu komen naikin
Di bidik gue, maksudnya
Cyber security
Jadi, ditentukan dulu, mau belajarnya apa
Jangan belajar full stack, tapi full stack-nya juga nggak jelas
Definisinya apa, didefinisikan aja
Oh, saya mau belajar front-end sama back-end
Oh, saya mau belajar front-end, back-end sama
Mobile
Iya
Cuma, itu kan definisinya juga nggak
Nggak ada yang resmi
Nggak ada yang resmi
Nggak ada yang benar, nggak ada yang salah
Dari satu perusahaan ke perusahaan lain
Yang disebut full stack apa, atau front-end apa
Back-end apa, juga nggak
Sakut kan, kayak contoh Gopal aja tadi
Yang Ivan ngasih contoh
Storybook, apa
Front-end bikin storybook
Ivan sebagai back-end, sambil
Bikin skema atau data type-nya
Nanti Ivan yang
Nyambungin ke markup yang
Udah dibikin, nah
Kalau di tempat gue itu semua kerjaan front-end
Ya maunya back-end stop di skema
Cuma kan itu tergantung
Ya tergantung apalah
Workload atau tergantung jumlah orang
Tergantung macem-macem kan, jadi nggak
Karena dari sisi front-end
Mereka masih mikirin
Itu tadi
Masih mikirin, meskipun sudah diwiring
Mereka masih harus kayak
Mobile view, responsif
Accessibility
Dan
Macem-macem lainnya, kayak
Apa namanya, lebih
Itu aja hal itu
Browser compatibility, mereka itu
Sisi front-end, luas loh
Yang harus di mereka pikirin
Iya, tapi maksudnya apa
Yang gue alamin adalah
Selain mikir itu semua juga nyambungin
Ke skema, maksudnya itu kan
Kenapa, karena
Karena si developer yang
Abis bikin skema itu
Udah harus kerjain hal lain lagi, jadi
Maksudnya emang oke lah
Team
Manajemen itu kan bagi workload juga ya
Jadi ya emang kebutuhannya
Gitu, jadi nggak bisa
Dipukul rata
Karena nggak kebayang
Gua memperan end branding aja
Sebetulnya sih
Mid-end kali, box-to-box
Box-to-box, mid-end
Box-to-box
Mid-fielder
Ini kan
Ini kan konteks developer ya
Mid-ender ya
Box-to-box, mid-ender ya
Bisa dipakai lah ya
Dari depan-belakang
Secara instink, attacking lah
Di depan, tapi sebenernya
Kalau praktek lah, kalau sesuai kebutuhan
Maju-mundur, maju-mundur ya boleh lah
Unting beres
Jadi Safi dan Iniesta dong ya
Boca-boca yang nonton bingung gitu
Safi kan pelatih
Kaga nonton pas main
Ini ya banyak yang
Apa kabarnya yang nonton
Guardiola main
Nonton Guardiola penyiar rambut
Frank Raikert ya, Frank Raikert main
Juga keren dulu
Atau Van Basten
Oke
Cuma gue cium nuain lu inget
Pas Guardiola masih penyiar rambut sih
Ini gak penting sama sekali
Oke
Sekmen terakhir
Pilih topik, pilih topik
Ayo kita pilih ini
Ada beberapa
Mid-fielder aja lah, mid-ender
Eh by the way, Van
Minggu depan kita ini kan ya
Iya, jadi pilih topik lah
Buat itu, rekaman ya
InsyaAllah rekaman ya
Kita mau voting lagi ya topiknya
Mau voting?
Mau yang mana? Mau voting
Atau mau langsung tunjuk? Terserah
Voting lah demokratis
Sedikit sekali-sekali
Apa aja yang mau di voting?
Apa ya?
Problem solving tuh
Bagus tuh
Boleh
Problem solving
AI assisted coding
Jangan-jangan-jangan, simpan-simpan
Setembar, setembar
Semantik
Computational thinking ya
Computational thinking
Terus
Topik
Semantik versioning
Topik minggu depan
Computational thinking
Mendingan
Kan kita nggak live kan, jadi nggak
Begitu interaktif, nggak apa-apa
Terus tadi apa?
Yang kedua?
Yang
Semantik versioning juga
Terlalu pendek sih
Kalau nggak live nggak ada yang gomong
ECMA script 2025
Nah boleh, kita cuma bahas
ECMA
Jadi computational thinking nanti ya, disimpan ya
ECMA
Script 2025
Kita juga yang nantuin
Yang kedua? Ada lagi nggak?
Atau kita mau langsung veto aja?
Veto aja deh
Veto ya?
Katanya mau demokratis gimana sih
Veto aja
Gak bakat jadi pemimpin demokratis
Dependensi injection
ECMA script
Kemudian dependensi
Injection
Terus apa lagi?
Tadi kan ECMA
Sama satu lagi yang ada
Semantik HTML terlalu kecil ya
Istimasi
CSS unit, beda buku
Beda buku nggak sempet
Nggak sempet bacanya
Oh iya
Antara dua itu aja
Udah, dua aja ya
Gimana nih?
Kok nggak bisa di start?
Oh bentar, optionnya dikurangin
Dua, silahkan
Sekitar 5 menit kedepan ditunggu
Pollingnya di youtube
Teman-teman yang di linkin
Nggak bisa ya
Bisa kita bantu nggak?
Oh nggak bisa juga
Ya
Atau ngosotin di
GitHub issue
Discussion
ECMA script
67%
Wow 50/50, jangan sampai 50/50 lah ya
Kalau 50/50
Nanti kita hak Veto lagi
Hak Veto lagi
Akhirnya jadi supreme leader lagi
Supreme leader
60/40, let's go
Seru juga ngeliatin
Real time-nya
Emang bisa lihat di mana?
Di youtube
Youtube
Streamyard nggak mungkin
Nggak bisa
Udah di ini belum?
Balance-nya udah ditambah
Belum ke sini?
Balance apa tuh?
Balance ini, balance
Streamyard
Bayar gitu
Bayar mah udah
Kan kemaren kan
Overflow ceritanya
Iya buat tahun depan
Udah balik balance-nya, udah ditambahin
Nggak kelihatan, orang nggak ada balance-nya
Nggak ada
Ditambahinnya tahun depan kan berarti
Cuma kayak expire
Your subscription is active until
Blah-blah-blahnya
Kita harus cari ini lagi berarti ya
Cari sponsor
Sampai tahun depan
Yang mau sponsor, yang mau sponsor selanjutnya
Kantor-kantornya
Mungkin ada yang mau sih
Jadi kayak jualan di
Selling banget
Atau kalau ada yang butuh
Konsultasi
Seputar
Performance
Jangan ngejenjin yang aneh-aneh deh
Oh performance, ya udah ifang aja
Iya maksudnya
Mending
Capability sama
Mas Riza atau itu sama
Mbak Eka
Yang butuh training boleh
CSS tooling
Yang mau private
Kayaknya cari duit banget nih
Oke 2 menit lagi
Nggak sibuk kan
Berapa menit kita
Pokoknya sampai 21-25
Kurang lebih
Apa udah cukup?
Terus?
Menang lagi aja
Bener juga sih
Tapi
Bahas ini
Nanti dia sedih
Nanti dia sedih
Bahas ini
Bagaimana cara
Bikin workshop yang
Keren
Susah itu
Soalnya pembawaan dia keren banget
Kita nggak bisa nyiru itu
Susah banget
Gak menghipnotis sih
Dia sendiri
Yang menguasai materi jelas
Dan entusias
Kayak nge-delivernya itu bikin kita
Kehub
Kecantol
Yang tadinya nggak begitu niat untuk ngikut
Akhirnya jadi keren banget
Padahal kita udah tau itu sebenarnya
Fitur-fiturnya udah tau ya
Tapi begitu dia demokan itu
Kayak kita ini banget
Wow ya kita sekarang bisa
Bikin ini
Itu kan sebetulnya hal yang bisa
Dibaca kan artikelnya ada
Dispec juga ada itu hal yang
Ya oke kita bisa bikin ini
Cuma di-deliver dan ditunjukin
Dengan code dan
Ada outputnya juga kita bisa bikin
Ini itu dengan convincing aja
Ya jadi
Mungkin sedikit background sambil
Menunggu temen-temen yang voting
Kita waktu itu ikutan
Workshopnya di
Ioconnect ya
Di Beijing ya
Iya di Beijing ketemu
Sama Mas Adam Ajalnya langsung
Nah kalo temen-temen penasaran
Workshopnya materinya apa sih
Ada di Youtube cari aja
Saya posting nih ada
Jadi walaupun
Tidak tetap muka ya
Kalau kemarin kan kita langsung ketemu kan
Mungkin energinya agak beda
Tapi topiknya sama
Dia bikinin
Di rekam
Di rekam sesi workshopnya
Tapi di studio
Bukan pada saat itu
Kalo gak salah Pak Dika sempet
Nerekam ya tapi gak tau apakah
Di apa namanya
Di publish di
Youtube nya dia atau gak
Anyway
Anyway
Sudah nih hasilnya apa
Hasilnya adalah ECMAScript
67%
Jadi ditunggu aja
Minggu depan kita akan bahas tentang
ECMAScript 2025 ada fitur apa
Aja yang baru
Kemungkinan besar kita gak live
Jadi kita rekaman dulu karena
Evan tidak bisa hadir
Di alis lat saya
Untuk malam ini sekian dulu
Terima kasih banyak buat semuanya
Diskusinya seru
Mudah-mudahan kita ketemu lagi minggu depan
Di Selasa Malam jam
8 malam
Selamat malam semuanya
Sampai jumpa bye bye
Jika Anda mencari tau mengenai layanan web hosting terbaik
Kami pastikan Anda berada
Di tempat yang tepat
Dengan Domainesia dapatkan pengalaman
Memunakan layanan hosting yang lebih baik
Dengan SSD berperforma tinggi
Dalam infrastruktur cloud
Yang telah dioptimalkan untuk kebutuhan personal
Maupun bisnis
Teknologi ini memungkinkan Anda memperoleh
Layanan yang lebih stabil serta proteksi
Dari korupsi data
Hosting Domainesia juga telah mendukung
Node.js, Python, Ruby, Go
PHP, Java, serta binary Linux
Lebih dari 200.000 pelanggan telah mempercayakan
Layanan hosting di Domainesia
Kepercayaan yang kami jaga dengan
Garansi uptime 99,9%
Serta garansi uang kembali 100%
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #NgobrolinWEB! Malam ini kita akan membahas tentang Storybook. Masih bersama panelis tetap kita Eka dan Ivan. 🏷 Gunakan kode NGOBROLINWEBDN dan dapatkan DISKON 10% Untuk Pembelian Web Hosting DomaiNesia: Beli Web Hosting DomaiNesia disini: https://my.domainesia.com/ref.php?u=25754 🎁 DISKON 50% Cloud VPS Turbo dengan Kode Promo: NGOBROLINVPSDN Beli Web Hosting DomaiNesia disin: https://www.domainesia.com/cloud-vps/?promo=ngobrolinvpsdn Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
14 Des 2022
Ngobrolin Testing
Riza, Ivan, dan Eka membahas testing — atau pengujian, istilah yang diakui masih terasa asing di telinga. Definisinya se...
23 Jul 2025
Bedah Buku Problem Solving 101
Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini seba...
2 Okt 2024
Ngobrolin Drama Trademark & Open Source
Episode ini membahas drama perseteruan antara Matt Mullenweg (co-founder WordPress) dengan WP Engine, sebuah perusahaan ...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .