EP 106

Ngobrolin Alat Dokumentasi - Ngobrolin WEB

Bagikan:

Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.

Ringkasan Episode

Bantu Koreksi

Episode ini membahas tentang dokumentasi dalam pengembangan software, mulai dari konsep dasar, jenis-jenis dokumentasi, hingga berbagai tools yang dapat digunakan. Diskusi dimulai dengan pengenalan Documentation System yang terdiri dari empat jenis utama: Tutorial (learning-oriented), How-to Guides (problem-solving oriented), Explanation (teoretical/conceptual), dan Reference (API documentation). Episode mengulas berbagai tools populer seperti Docusaurus (React-based), Starlight (Astro-based), Storybook (untuk UI components), Swagger/OpenAPI (untuk API documentation), dan Google Code Lab (untuk step-by-step tutorial). Topik penting yang dibahas meliputi best practice "Docs as Code" di mana dokumentasi ditempatkan dalam reposisi yang sama dengan kode untuk memudahkan tracking, version control, dan code review, serta diskusi tentang bagaimana dokumentasi modern juga perlu dikonsumsi oleh AI tools seperti Cursor dan Copilot.

Poin-poin Utama

  • •Documentation System terdiri dari empat jenis: Tutorial (belajar step-by-step), How-to Guides (solusi masalah spesifik), Explanation (konsep/filosofi di balik teknologi), dan Reference (dokumentasi API/sintaks)
  • •Docusaurus adalah framework dokumentasi berbasis React yang paling populer (go-to solution) dengan fitur SSG, blog, dan dukungan MDX
  • •Starlight adalah template dokumentasi berbasis Astro dengan best practices dari dokumentasi Astro sendiri, mendukung multi-lingual termasuk bahasa Indonesia
  • •Storybook adalah tool khusus untuk dokumentasi UI components dengan fitur autodocs, accessibility testing, dan visual testing, mendukung berbagai framework
  • •Swagger/OpenAPI Specification adalah standar untuk API documentation yang berfungsi sebagai "kontrak" antara front-end dan back-end developer
  • •Best practice "Docs as Code" menyarankan dokumentasi ditempatkan dalam repo yang sama dengan kode untuk tracking, version control, dan menghindari dokumentasi terbengkalai
  • •Google Code Lab menawarkan format step-by-step tutorial yang user-friendly untuk workshop, dapat ditulis menggunakan Google Docs dan dikonversi menjadi HTML
  • •Dokumentasi modern tidak hanya untuk manusia tetapi juga untuk dikonsumsi oleh AI tools, sehingga struktur heading dan semantic markdown menjadi semakin penting
Transkrip Bantu Koreksi

0:00(musik)

0:11(Tinggalkan ringtone)

0:15Halo-halo, selamat malam.

0:19Weee!

0:20Right on time!

0:23(musik)

0:24Permintaan Irfan kemarin minggu lalu.

0:26Weee!

0:27(tertawa)

0:28Halo, Les.

0:30Pasti Eka ini lagi half time ini ya, makanya.

0:34Saya akan nontonin.

0:35(tertawa)

0:36Kenapa tim Les selalu live hari Selasa gitu ya?

0:38Karena sebenarnya hari Selasa itu udah jatahnya kita.

0:42Ngobrolin web.

0:43Ngobrolin web.

0:44Kenapa tim Les selasa juga?

0:46Bingung ya.

0:48Selalu bentok ya.

0:50Tapi menang ya.

0:51For sementara satu kosong untuk Indonesia ya.

0:52Menang, satu kosong bagus ini.

0:54Satu kosong mainnya bagus.

0:56Tapi Indonesia harus menang sampe akhir masa.

1:00Maksudnya telur pertandingan sisa harus menang.

1:02Maksudnya supaya bisa lolos.

1:04Ya, realistik.

1:05Kelihatannya kayak gimana ya.

1:07Cuma kalau menang.

Lihat transkrip lengkap

1:09Agak realistik tapi ya.

1:10Cuma put up some fight lah.

1:12Maksudnya lihat tiket jangan.

1:14Main bagus lah.

1:15Minimal main bagus.

1:16Ya.

1:17Mau menang atau kalah.

1:18Maksudnya kalah terhormat lah ya.

1:20Kalah dengan usaha.

1:21Yes.

1:22Kalaupun gak lolos, tapi ngasih yang terbaik.

1:25Nah.

1:26Hidup Indonesia.

1:27Menang aja.

1:28Sudah ada yang nonton nih Damar.

1:29Kenapa kamera?

1:30Ada apa dengan kamera kita?

1:32Something wrong?

1:33Damar, Damar, Damar, Damar.

1:35Tapi Damar ini apa namanya?

1:37Dia komennya itu jam 19.18.

1:40Sekitar 45 menit lalu.

1:44Engga.

1:45Sebelum mulai, pas baru mulai.

1:47Sebelum live.

1:48Ada apa dengan kamera?

1:49Mohon info, mohon info.

1:51Mungkin gak sengaja masa biasanya nyalain kamera.

1:54Eka nonton gak yang lawan Jepang kemarin?

1:57Engga, gak nonton.

1:59Itu nyebelin banget.

2:00Gak nontonnya gara-gara lagi ada Tim Bimmer lagi.

2:03Rik banget.

2:04Berarti gara-gara Eka gak nonton jadi kan.

2:07Gara-gara Eka gak nonton dia.

2:10Kambing hitam.

2:12Alat dokumentasi maksudnya kamera gitu.

2:18Oh.

2:19Oh iya benar juga ya.

2:21Saya baru nyadar.

2:24Benar, benar, benar.

2:27Engga, engga.

2:29Kan tadinya mau tulis ngobrolin dokumentasi.

2:33Tapi kan sebenarnya kita ngomongin tools kan.

2:36Usia itu kan bahasa Indonesia-nya kan alat.

2:38Jadi saya tambahin alat dokumentasi.

2:41Jadi kalau sedikit salah persepsi mohon maaf ya.

2:46Jadi ya itu dia.

2:47Malam ini kita akan bahas tentang...

2:49Memang musim mangga.

2:51Emang musim mangga?

2:52Minggo sticky rice.

2:54Lagi dimana-mana nih mangga?

2:56Bayang-bayang ya.

2:57Minggo sticky rice ya.

2:59Minggo sticky.

3:00Emang nih Jogja gak ada gitu jualan mangga?

3:03Apa?

3:04Ya ada lah.

3:05Kenapa gak ada mangga?

3:07Sedih banget.

3:09Ivan kan juga dulu laman Jogja kali.

3:11Masa gak ada mangga.

3:13Seumur-umur Jogja gak pernah makan mangga ya.

3:15Eka nya gak ke pasar magu Harjo kali.

3:19Ya ngapain orang tinggalnya dekat pasar banding?

3:22Salah.

3:23Bring Harjo, bring Harjo.

3:25Bring Harjo.

3:27Ya jadi mumpung lagi hal time.

3:30Nonton ngobrol di web dulu.

3:31Nanti kalau udah mulai.

3:33Buka dua-duanya.

3:34Kasih kabar ke kita ya.

3:35Kalau ada gitu ya.

3:37Kita gak boleh buka soalnya.

3:39Komen kunci.

3:40Ya kita gak boleh buka bahaya.

3:41Nanti gak konsen.

3:43Nanti diband.

3:45Nanti diband.

3:47Gak boleh ngobrolin bola.

3:49Oh iya.

3:51Nanti kalau udah 2-0 kabarin ya chat.

3:53Oke.

3:54Oh iya.

3:55Kalau gak 2-0 gak boleh kabarin ya.

3:57Oh gak boleh.

3:58Kita gak mau denger tuh.

4:00Kemarin tuh.

4:01Kita mau denger good news aja.

4:03Pas lawan Jepang kemarin.

4:05Itu lagi tim dinner.

4:07Di suatu restoran.

4:09Cuma bagian dari gedung.

4:10Nah sebenernya tuh teman nomber.

4:12Itu gak enak banget.

4:13Bener orang Tia.

4:15Akhirnya kalah lagi ya.

4:17Kalau menang sih seneng ya.

4:19Susah banget.

4:21Kalahnya cukup ini ya.

4:24Nah waktu di tim dinernya ada foto-foto gak?

4:27Ada.

4:29Nah maksudnya foto-foto ini pakai alat dokumentasi.

4:32Bagian dari dokumentasi.

4:33Alat dokumentasi.

4:42Ngomongin alat dokumentasi ya.

4:45Kita kan mau ngobrolin tentang itu.

4:47Nah sebenernya sebelum ke arah sana.

4:51Ini juga salah satu topik yang kita ambil dari

4:56dari GitHub kita.

4:59Yang salah satu cukup tinggi sih.

5:02Lumayan ini ya.

5:05Lumayan banyak yang vote ya.

5:08Dokumentasi ini.

5:09Jadi kalau teman-teman punya topik boleh langsung di kirimkan kesini.

5:16Jadi nanti ada yang vote, ada yang kasih komentar dan lain-lain.

5:20Tadi saya melihat ada yang submit mas Irfan.

5:29Oh ini basic web security.

5:32Baru lihat nih 11 jam yang lalu.

5:35Tapi kayaknya menarik ya.

5:39Tuh udah ada referensinya tinggal bahas.

5:43Enak ya.

5:45Kita meng-outsourcekan kerjaan kita.

5:47Gini nih.

5:49Tinggal kita bahas.

5:51Kalau perlu panggil orangnya ya.

5:53Jadi kita dari sini ada salah satu saya sih.

5:59Kan idea dari teman-teman juga kan ya.

6:01Kayaknya sempat dari itu yang Slidoo atau apa.

6:06Bukan yang Slidoo.

6:08Oh dari Slidoo kita pindahin kesini ya.

6:10Iya.

6:12Jadi nextnya kesini aja.

6:14Nah ngomongin dokumentasi lagi.

6:16Kalau apa namanya.

6:18Sebelum kita mulai ke tools untuk membuatnya.

6:22Nah dokumentasi itu.

6:24Kalau misalkan teman-teman bikin dokumentasi.

6:27Atau baca dokumentasi tentang library atau framework.

6:31Itu biasanya ada bagian-bagiannya.

6:35Ada 4 biasanya.

6:37Yang paling umum ya.

6:39Jadi dia modelnya itu disebut sebagai documentation system.

6:42Disini.

6:44Jadi ada tutorial.

6:46Kemudian ada how to.

6:48Ada explanation, ada reference.

6:51Reference ini kayak API.

6:53Kayak syntax ya.

6:55Code ya.

6:57Maksudnya bisa di auto-generate ya.

6:59Betul.

7:01Dari JS doc misalkan.

7:03Atau dari documentation generation yang lain.

7:06Nah kalau.

7:08Dan ini masing-masing juga ada bagian-bagiannya misalkan.

7:11Tutorial itu adalah learning oriented.

7:13Jadi kita belajar berdasarkan.

7:15Luh ada iklan.

7:17Berdasarkan.

7:19Kayak apa ya.

7:21Step by step.

7:23Mulai install dulu.

7:25Terus generate.

7:27Terus abis itu di edit yang mana gitu ya.

7:29Kalau how to itu.

7:31Kalau biasanya kita mau.

7:33Past base ya.

7:35Misalnya authentication.

7:37Misalnya kita punya meta framework.

7:39Authentication.

7:41Atau membuat routing.

7:43Atau how to.

7:45Redirect.

7:47How to.

7:49Yang bisa mencakut.

7:53Satu atau beberapa fitur dari.

7:55Si library atau framework.

7:57Itu kali ya.

7:59Jadi misalkan awalnya kita ikutin tutorial.

8:01Terus kita bikin aplikasi sendiri.

8:03Terus kita bingung nih.

8:05Gimana cara bikin autentikasi.

8:07Gimana caranya ngecek.

8:09Apakah username passwordnya benar atau salah.

8:11Dan lain-lain.

8:13Biasanya ada di how to guides.

8:15Terus kemudian kalau yang explanation.

8:17Kenapa misalkan.

8:19Filosofinya kali ya.

8:21Kenapa framework ini muncul.

8:23Tujuan dibuatnya apa.

8:25Gitu-gitu ya.

8:27Atau mungkin termasuk juga decision.

8:29Kenapa routingnya.

8:31Design architecture.

8:33Kenapa pakai cara kayak gini.

8:35Karena itu mengatasi masalah.

8:37Kayak htmx itu ada kan.

8:39Waktu itu kita lihat.

8:41Itu kan kayak ada penjelasannya.

8:43Tentang atar belakangnya.

8:45Betul.

8:47Docs ini kan ada referensi.

8:49Yang tadi kan referensi. Terus example ini kayak tutorial.

8:51Example ini kayak how to ya.

8:53Kalau example kan demo ya.

8:57Demo.

8:59Kadang-kadang dia jadi satu.

9:03Nggak semuanya terpisah.

9:05Misalnya dia jadi satu seperti ini.

9:07Nanti tiba-tiba disini ada tutorial.

9:09Atau apa gitu.

9:11Apalagi yang

9:13build ya.

9:15Salah satu contoh yang dokumentasinya

9:19lengkap dan detail banget.

9:21Ya, kayak core concept.

9:23Ini kan penjelasan ya.

9:25Mungkin ini tutorial.

9:27Nah, ini tutorial ada di bagian sini.

9:29Jadi nggak mesti terpisah.

9:31Tapi biasanya yang API

9:33yang penjelasan

9:35yang ini, yang referensi, biasanya ada sendiri dia.

9:37Terpisah.

9:39Maksudnya, dari

9:41ada

9:43ada sectionnya itu coba

9:45kembali ke bagian yang tadi.

9:47Kan itu

9:49yang di tengah itu kan

9:51practical step di atas, theoretical

9:53di bawah. Terus

9:55yang sebelah kiri untuk

9:57belajar. Untuk studying.

9:59Untuk megerjakan sesuatu.

10:01Jadi kalau misalnya mau

10:03cari apa?

10:05Mau buat tutorial atau

10:07dokumentasi yang

10:09langsung

10:11langsung, pokoknya

10:13pengen langsung bisa dipakai,

10:15praktek langsung untuk kerja gitu.

10:17How to, ya, berarti how to guide.

10:19Langsung, kalau belum

10:21kayak contohnya gitu. Yang tadi kayak

10:23mau bikin button,

10:25gimana, langsung ini contohnya, begini

10:27caranya. Nah, sedangkan kalau mau

10:29lebih

10:31dalam lagi, ya maksudnya

10:33kalau mau belajar lebih dalam, ya berarti

10:35kita kan belajar lebih dalam, berarti

10:37ke sebelah kiri.

10:39Nah, maksud dari

10:41bagan ini, sebuah

10:43dokumentasi yang

10:45baik,

10:47yang best practice-nya adalah

10:49kalau semua

10:51dokumentasi

10:53yang kita buat ini mencakup

10:55section ini.

10:57Jadi, tergantung user-nya. Kalau datang

10:59itu, ah, gue pengen tahu

11:01kalau pengen mau pakai Astro,

11:03baru mulai

11:05aja harus belajar teorinya, kan malas

11:07banget, ya, pengen tahu dulu ini hasilnya

11:09kayak gimana sih? Ya, langsung ke how to.

11:11Pengen dapat bayangan gambaran

11:13yang cepat aja bentuknya kayak gimana.

11:15Tapi begitu sudah

11:17nyampe.

11:19Untuk pengen tahu

11:21kenapa kayak gini, kenapa

11:23gitu, kenapa kok

11:25ini bagian yang beda,

11:27apa aja.

11:29Betul. Jadi,

11:31sebisa

11:33mungkin kalau bikin dokumentasi

11:35yang kita buat untuk

11:37produk, ya, mencakup

11:39empat hal ini.

11:41Semuanya. Oh ya, how to

11:43guides. Itu sering disebut sebagai

11:45recipe ya, kelihatannya. Salah satu

11:47yang pakai termini recipe

11:49itu Astro tuh, itu contohnya bagus

11:51deh, coba di private chat.

11:53Recipe. Ada di sini? Recipe.

11:59Ada, ada. Scroll aja

12:01ke bawah. Recipe. Oh, ini recipe

12:03and resource ya?

12:05How to recipes. Nah, terus menariknya

12:07mereka punya dua macam

12:09official recipes. Itu ya,

12:11maksud saya yang official di Docs.

12:13Tapi user

12:15saya, community bisa

12:17submit juga. Community recipes.

12:19Community. Oh, ada di sini ya.

12:21Ya. Tinggal submit di

12:23GitHub. Dokumentasi ini

12:25engineering sendiri ya.

12:27Maksudnya. Iya.

12:29Terpisah dari

12:31dari core

12:33core programmer, core

12:35developer-nya, terpisah

12:37dari implementation

12:39implementator-nya.

12:41Ini kayak satu ilmu sendiri

12:43gitu.

12:45Technical engineering,

12:47technical writer bahasanya kali ya.

12:49Filos ininya. Profesinya.

12:51Iya, iya. Kalau untuk

12:53nulis kontennya, iya.

12:55Tapi kalau untuk

12:57develop maksudnya untuk naro

12:59dimana

13:01ada yang bilang, disarankan

13:03satu repos supaya

13:05ikut, apa ya, ketika

13:07release ada atau ada fitur baru,

13:09dia ikut ke update juga. Bisa langsung

13:11ditrack ya? Iya, bisa langsung ditrack gitu.

13:13Kalau dibikin di repos sendiri

13:15jadi kayak silo

13:17aja terpisah. Ini ada

13:19ininya nggak? Ini ada kayak drop

13:21down, si Astra ini ada drop down

13:23versi-versinya nggak sih? Kayak versi

13:25yang berapa sebelumnya?

13:27Di kanan atas?

13:29Nggak ada.

13:31Gak kayak Laravel.

13:33Yang ada Laravel, ya kan?

13:35Apa? Yang pertama

13:37identik.

13:39Banyak sih. Cuma yang pertama gue inget.

13:41Perversi.

13:43Karena pernah juga kayak

13:45nemu sebuah dokumentasi, dicobain

13:47contohnya kayak WordPress,

13:49itu yang blog editor-nya,

13:51yang Gutenberg itu.

13:53Yang dirilis, yang versi

13:55terakhir. Terus gue cobain,

13:57"Oh nggak bisa, ternyata gue punya

13:59core WordPress-nya masih

14:01ketinggalan." Dan itu kan sudah

14:03yang maksudnya function itu belum ada.

14:05Jadi kadang suka

14:07lagi kan ada yang berbeda,

14:09yang berbeda, underscore,

14:11tuh tuh versi itu. Jadi

14:13kalau misalnya masih pakai

14:15versi 5, ya mungkin dokumentasinya

14:17berbeda. Kalo nggak salah

14:19dokusorus ada deh.

14:21Kita ngomongin tools, ya. Salah satunya dokusorus.

14:23Yang dipakai di React.

14:25React.dev ya.

14:27Pakainya dokusorus ya?

14:29Kayaknya.

14:31Aduh, nggak ada ya?

14:33Ternyata nggak.

14:35Oh, dia

14:37pakai ini, versiannya pakai

14:39subdomain.

14:41Banti kan dia sudah

14:43dililis, di-read-only,

14:45dibuat jadi read-only,

14:47repo-nya atau branching-nya.

14:49Kayak serangnya ya.

14:51Dokusorus.

14:53Coba kita lihat dokusorusnya ya.

14:55Ini salah satu tools yang

14:57terkenal juga. Tuh, ini kan ada di sini.

14:59Dokumentasi dokusorus pakai dokusorus ya?

15:01Iya kali.

15:03Itu

15:05buat tools banget kalo ternyata nggak

15:07pake.

15:09Apa istilahnya?

15:11Dogfooding.

15:13Pemakan makanan

15:15anjing sendiri.

15:17Itu aneh.

15:19Mungkin di-disable kali ya

15:21sama react-nya ya. Jadi nggak pake fitur

15:23ini ya. Jadi ini dokusorus kan

15:25dia ada ternyata ininya,

15:27versi-versinya.

15:29Bisa dipake atau nggak?

15:31Ya.

15:33Masih ada.

15:35Masih ada versi satunya.

15:37Go by example juga cukup populer.

15:39Go by

15:41example.

15:43Ini

15:45dokumentasi juga ya.

15:47Oh, ini contoh yang tadi.

15:53How to.

15:55Iya bener.

15:57Tapi ini lebih ke topik-topik.

15:59Example atau recipe?

16:01Example.

16:03Coba aja klik salah satu.

16:05Your parsing. Ini kayak

16:07contoh code ya.

16:09Contoh code ya. Oh iya, ini

16:11berarti kayak recipe tadi ya. Yang how to ya.

16:13Change logs

16:15termasuk dokumentasi nggak?

16:17Termasuk kayaknya.

16:21Termasuk.

16:23Tapi biasanya malah

16:25di satu halaman tersendiri ya.

16:27Biasanya kan ada.

16:29Coba deh. Karena

16:31di repo

16:33misalkan kayak github gitu dia ada kan.

16:35Nah, kalau contohnya kayak yang react nih.

16:39Yang react, dia

16:41ngasih link ke

16:43change log-nya di masing-masing versi.

16:45Nah, scroll ke bawah.

16:51Nah, itu releases

16:59atas.

17:01Atau sedikit. Nah, iya.

17:03Lari-nya kan kayak change

17:05log, MD kan?

17:07Lari-nya ke MD.

17:09Jadi di-release-nya

17:11di repo-nya, tapi tetap di-link

17:13dari website docs-nya.

17:15Jadi maksudnya bukan cuma

17:17major, tapi per minor

17:19sama

17:21bug fix-nya juga ke-track.

17:23Ini change log

17:25yang bagus tuh begini nih.

17:27Change log yang paling worst yang pernah gue

17:29nomorin itu adalah

17:31anak Android tuh. Menyakit jahantung.

17:33Kenapa emang.

17:35Ada aplikasi

17:37di Android atau di

17:39Play Store ya, Play Store.

17:41Atau bahkan kayak

17:43dulu, jaman dulu Samsung

17:45nyembunannya

17:47boleh lah ya, Samsung jaman dulu

17:49kalau misalnya dia ada update

17:51terus tulisan update-nya

17:53minor bug fixing.

17:55Dia cuma tulis minor bug fixing.

17:57Poin kedua, performance

17:59improvement.

18:05Tapi emang kalau di

18:07App Store dan di Play Store itu

18:09buat change log ya. Bukan buat

18:11kayak informasi buat end-user gitu.

18:13Kan end-user kalau tau.

18:17At least ada link

18:19ada link-nya yang menuju

18:21list lengkap dong, kalau misalnya itu

18:23OS update.

18:25Oh iya sih, kalau OS iya ya.

18:27Maksudnya harus ada technical

18:29reference.

18:31Di Play Store sih ya.

18:33Kalau di Play Store sih ya.

18:35Kalau Windows

18:37juga ada

18:39list-nya, KB apa

18:41KB apa gitu. Banyak banget

18:43list-nya itu.

18:45Bukan change log sih

18:49deskripsi update yang seriusnya

18:51sama kode-nya.

18:53Yang summary-nya ada di bagian

18:55update screen-nya, tapi begitu di click

18:57ada link-nya yang menuju

18:59list lengkapnya ada.

19:01Di website.

19:03Nah itu dikomen, kalau change log

19:07isinya pantun, itu kan yang kayak

19:09sebenarnya bukan change log sih, itu kan kayak

19:11deskripsi Play Store gitu kan, biasanya

19:13apa yang berubah. Cuma biasanya

19:15kan dibikin lucu-lucuan kan.

19:17Ya lucu-lucuan, bagi dari

19:19lucu-lucuan. Ini nggak tau nih,

19:21ini beneran atau

19:23becandaan?

19:25Nggak kelihatan nggak? Nggak kelihatan ya?

19:29Wah makin kecil.

19:31Ini mungkin

19:33open image, new type.

19:35Sengaja kali biar dibahas.

19:37Sengaja ya, biar viral ya.

19:39Highlight this please.

19:43ID only.

19:45ID only.

19:47As usual.

19:49Ini kan kayak brief-nya,

19:53copywriter-nya kan.

19:55Udah bukan technical lagi mulai.

19:57Ini change log,

19:59bukan kan sebenarnya kan,

20:01deskripsi aja kan.

20:03Kalau mau udah taruh change log juga

20:07terlalu teknis nggak sih?

20:09Kalau app store

20:11gitu kan buat umum kan.

20:13Iya, ini kan

20:15emang maksudnya nggak harus bullet point

20:17gitu juga nggak apa-apa kan.

20:19Sebenarnya mau paragraf atau apa.

20:21Kalau misalkan

20:23yang lagi heboh

20:25itu bang yang migrasi ke

20:27Eras kan, ditaro lah di sini.

20:29Peningkatan ke rumah 487 kali.

20:31Waduh, rame

20:37nanti.

20:39Rame nanti tuh.

20:41Itu yang bangnya ada

20:43gedung-gede-nya di Bintaro

20:45itu kan.

20:47Malas dilanjutin.

20:49Boleh sebut

20:51initial kalau nggak apa-apa?

20:55Apa lagi

20:57kalau pantunya ini

20:59buat lucu-lucuan ya.

21:01Buat menarik perhatian kali ya.

21:03Lebih ke buat menarik perhatian.

21:05Karena yang baca adalah end user

21:07dan apalagi kalau di Play Store

21:09aplikasinya kan closed source.

21:11Jadi yaudah lah.

21:13Yang paling enak itu isi

21:17upgrading,

21:19dokumentasi upgrading-nya.

21:23Banyak breaking change-nya, banyak list-nya.

21:25Itu initial-nya tuh.

21:27Namanya apa lah ini?

21:33Initial itu.

21:35Initial-nya emang namanya.

21:37Emang kepanjangannya apa?

21:41Gak tahu.

21:43Itu bukan initial, kependekan.

21:45Sudah pada tahu.

21:49Berarti pada ngikutin semua ya

21:51perkembangan.

21:53Perkembangan drama.

21:55Jadi salah satu tools yang udah kita

21:59lihat tadi ya, salah satunya adalah

22:01yang paling...

22:03yang paling banyak dipakai ya.

22:05Maksudnya paling

22:07bukan banyak dipakai sih.

22:09Paling go-to.

22:11Bukan nama perusahaan, tapi

22:13go-to

22:15documentation framework

22:17kali ya.

22:19Udah lama ada.

22:21Kalau ada yang mau bikin

22:23dokumentasi, yaudah pakai docusaurus aja.

22:25Betul. Karena satu,

22:27yang udah lama ada. Yang kedua, dia menggunakan

22:29React. Yang adalah userbase-nya

22:31cukup besar. Jadi yang paling banyak.

22:33Otomatis dipakai.

22:35Kalau misalkan di perusahaan kita pakai React, terus

22:37kita bikin dokumentasi, ya kita carinya

22:39yang React-based dong. Gitu kan.

22:41Jadi salah satunya adalah

22:43yang docusaurus ini.

22:49Kalau di Indonesia ada

22:51docusaurus tau gak sih?

22:53Apa itu?

22:57Dulu banget ada brand

22:59docusaurus yang jualan alat-alat itu.

23:01Alat-alat untuk

23:03happy birthday.

23:05Ketinggalan.

23:07Enggak, belum-belum. Kita baru ini

23:09bahas sedikit-sedikit.

23:11Baru mulai tools pertama, docusaurus.

23:13Saya taunya cuman

23:15swager. Oh iya, swager juga salah satu

23:17dokumentasi ya.

23:19Tapi kan itu cuman buat reference ya.

23:21Tadi kan ada

23:23codenya, ada bagannya.

23:25Itu cuman buat, mana itu?

23:27Yang kanan bawah.

23:29Reference, yes.

23:31Swager JSON.

23:33Kalau yang reference ini lagi

23:35itu si PHP doc.

23:37Iya, JS doc, PHP doc.

23:39Yang dia generate dari

23:41function-function atau

23:43metode-metode yang ada di kode kita

23:45kan ya. Swager.net

23:47Enggak.

23:49Swager itu umum ya. Generic ya.

23:51Buat semua bahasa kan ya.

23:53Bisa buat apa aja?

23:55Sambil dibuka aja. Swager.io.

23:57Ini untuk API documentation.

24:01Kalau kita bikin API

24:03kita bisa bikin

24:05API. Masih pernah lihat lah.

24:07Pasti pernah lihat bentuknya kayak gini nih.

24:09Udah umum banget.

24:11Tuh.

24:15Ya, mungkin

24:17di awal

24:19dari dulu kan ya. Gatau ya.

24:21Dulu kan ada PHP doc,

24:23ada JS doc, itu kan dulu dari

24:25Java ya. Java doc ya.

24:27Awalnya ya.

24:29Terus diadoptik

24:31ke bahasa-bahasa yang lain. Mungkin ini.

24:33Itu language agnostic kok.

24:35Deep Tools

24:37yang saya, ini adalah Sarata Tools

24:39yang saya pakai untuk mendamaikan

24:41antara front-end dan back-end.

24:43Tuh.

24:45Supaya tidak terjadi perang.

24:47Udah. Agree ya.

24:49Ini dokumentasinya ya.

24:51Agree ya. Ini kontrak ya.

24:53Saya terima parameternya ini.

24:55Integer.

24:57Deal.

24:59Gak, gue yang lain.

25:01Emang kayak gitu sih.

25:03Kalau di tim gue juga yang pertama

25:05dibahas. Itunya dulu.

25:07Sepakat dulu sama kontraknya.

25:09Nanti ya.

25:11Soalnya kan asing ya. Udah yang penting

25:13deal dulu. Ini pokoknya

25:15gak boleh pada bubar,

25:17gak boleh pada pergi sebelum

25:19setuju. Buat ngerjainnya

25:21nanti ya udah. Gue mau berenang dulu

25:23langsung karena pusing. Ada yang mau jemput

25:25anak dulu, ngapain sambil dikerjain?

25:27Aga nanti-nanti, gak apa-apa.

25:29Yang penting jangan ekstrim, ngilangnya.

25:31Boleh ngilang, tapi

25:33harus sepakat kontraknya dulu.

25:35Ya, kontrak.

25:37Harus sepakat kontraknya.

25:39Terus, ya.

25:41SPK, SPK, SPK.

25:43Apa tuh SPK?

25:45Surat pengambilan keputusan gitu.

25:47Surat, surat kan.

25:49Surat apa kendaraan gitu

25:51kalau deal untuk mau beli kendaraan.

25:53Ini suratnya lah, perjanjian kerja.

25:57Perjanjiannya, perjanjiannya.

25:59Karena kan kita kan tidak

26:01waterfall kan ya. Jadi gak

26:03nunggu orang baik yang selesai dulu.

26:05Nanti kalau misalnya

26:07gak cocok ya, tinggal salah-salahin aja.

26:09Salah-salahin siapapun yang bikinnya

26:11gak sesuai kesepakatan.

26:13Enaknya pakai Swagger ini bisa

26:15bisa generate dummy.

26:17Dummy, ya.

26:19Kalau skema nya udah jadi bisa generate dummy.

26:21Ada kemehnya otomatis kan.

26:23Iya.

26:25Ini menarik.

26:27Apa? Swagger adalah salah satu yang

26:29apa ya, yang kayak

26:31tools wajib kali ya.

26:33Iya, tools wajib kali.

26:35Kalau buat apa,

26:37udah ada tim front and back end,

26:39nah itu wajib. Kalo masih sendirian

26:41kayaknya belum ya.

26:43Kalo masih single fighter mah,

26:45ya,

26:47sepakat dengan diri sendiri aja.

26:49Sepakat dengan diri.

26:51Apakah bisa gak sepakat dengan diri sendiri?

26:53Ya kan ada peperangan

26:55batin.

27:03Oke, ini

27:05buat apa, ini adalah salah satu

27:07tools yang buat reference tadi ya.

27:09Jadi kalo misalkan API

27:11atau SDK

27:13documentation ya, ini

27:15pakai Swagger.

27:19Apa, open API

27:21specification ya.

27:23Terus tadi kita lagi bahas

27:25dokusaurus, nih

27:27dokusaurus. Oh ada yang baru tau juga ya.

27:29Padahal dokusaurus udah cukup lama ya.

27:31Ya kan

27:33walaupun udah sering liat, mungkin kan

27:35gak tau itu dibikinnya pake.

27:37Light mode dong, bosen banget sama

27:39dark mode.

27:41Wah.

27:43Kayak di belakang kuliah,

27:45apa kena sinar matahari.

27:47Gak ada gray mode gitu ya?

27:49Gak ada, setengah-setengah

27:51gak ada ya.

27:53Mendingan dark lah.

27:55Nah, cara installnya

27:57ya standar lah ya.

27:59Cara installnya, pake NPX Create

28:01dokusaurus, terus

28:03ada temp-tempnya juga loh dia.

28:05Inesquise TypeScript

28:07terus konfigurasinya.

28:09Nah, saya mau liatin project

28:11structure, jadi kalo misalkan

28:13aplikasi

28:15atau website-nya ini.

28:17Apa ini?

28:19Aplikasinya ini

28:21kita ada bloknya juga.

28:23Biasanya kan

28:25sebuah tools kayak React itu kan

28:27ada blog, ada documentation,

28:29ada apa lagi gitu ya?

28:31Ya, dua itulah ya biasanya ya.

28:33Nah, disini ada

28:35dipisahkan berdasarkan

28:37folder, jadi kalo ini untuk bloknya

28:39jadi si dokusaurus ini juga sebenernya bisa

28:41buat blok sih.

28:43Kayak ada section-sectionnya ya, bisa pakai section.

28:45Blok ini ya untuk

28:49markdown file yang isinya

28:51adalah

28:53article, kalo docs itu

28:55juga markdown.

28:57Tapi

28:59dia bisa

29:01ditampilkan di sidebar.

29:03Terus apalagi ada pages, ini

29:11standarnya

29:13SSR kali ya.

29:17Ada pages

29:19terus

29:21dia semua

29:23kayak ini kan, pakai static side

29:25generator bukan dia?

29:27Oh iya, SSG, betul-betul, dia SSG.

29:29Tapi bisa jalan langsung ya.

29:33Kalo gak dibuild, dia jalannya

29:35diserve langsung ya.

29:37Kalo dibuild, dia jadi

29:39static side, ada di folder

29:43build, nanti tinggal dipus

29:45aja ke GitHub pages, atau ke

29:47Vercell, atau Netlify, atau

29:49mau ke FTP, ya silahkan ya.

29:53Gitu.

29:55Jadi, kira-kira

29:57seperti itu. Dan ini juga sebenernya

29:59bisa digabungin sama

30:01aplikasi kita.

30:03Lu pakai Monorepo ya?

30:05Monorepo?

30:09Oh, ya itu tadi.

30:11Kayak dibahas

30:13tadi di awal, jadi satu

30:15repo sama kodenya sendiri.

30:17Sama kodenya kita, jadi

30:19supaya bisa lebih mudah

30:21track gitu. Jadi satu ya.

30:23Terus, selain dokusaurus, ini kan

30:29yang react-base ya, yang react ya.

30:31Ada apa lagi yang react-base?

30:33React-base, Astro.

30:39Oh Astro.

30:41Kalo Astro itu,

30:43kalo gak salah, ini dibuat dengan

30:45static. Gak, gak react sih, sebenernya gak

30:47bukan react. Bisa, bisa react, bisa.

30:49Bisa gak ya.

30:51Jadi, latar belakangnya

30:53si Starlight itu,

30:55Starlight itu yang sebenernya

30:57Astro sih.

30:59Dokumentasinya

31:01Astro itu kan, niat

31:03banget bikinnya. Jadi kayak

31:05niat dan community

31:07apa? Ya, sama kayak

31:09open source dan community

31:11run gitu. Ada maintainernya

31:13yang lead, tapi

31:15kontribusinya dari community

31:17dan di discord-nya tuh kayak ada

31:19satu channel sendiri

31:21buat

31:23kayak ngulik explore docs-nya,

31:25termasuk fitur-fiturnya, segala macem.

31:27Jadi, konon sih banyak yang nanyain

31:29apa?

31:31Nanyain sama nge-forging situs

31:33dokumentasinya Astro.

31:35Nah, dari situ dibikin kayak

31:37ini template. Ini sebenernya ya

31:39Astro site jadi kayak starter

31:41atau template untuk dokumentasi

31:43berdasarkan best practices yang

31:45dipakai di dokumentasinya

31:47Astro. Itu

31:49kan gue dulu sempet, apa,

31:51sering, karena lagi

31:53seneng-senengnya Astro, sering di discord-nya

31:55Astro. Jadi kayak sampai

31:57sidebar-nya kayak gimana yang

31:59tadinya sidebar-nya cuma satu, terus jadi

32:01ada sidebar di kiri, di kanan, itu aja

32:03kayak beneran dibahas banget

32:05per sidebar-an.

32:07Mirip-mirip ya, nggak jauh

32:11beda lah ya.

32:13Orang-orang yang familiar ya.

32:15Sama kayak multi-lingual.

32:17Ya, template multi-lingualnya tuh kayak

32:19ya apanya, udah well thought of.

32:21Oh, ada bahasa Indonesia.

32:23Wow.

32:25Ini yang pasti bikin

32:29ini nih, fans-nya Muse.

32:31Lagu Starlight ya.

32:35Gatau ya lagunya.

32:37Gatau.

32:41Enggak sih.

32:43Nggak, kan Astro kan temanya luar angkasa.

32:45Jadi dokumenkasi.

32:47Dokumenkasi

32:51namanya Starlight.

32:53Starlight.

32:55Oke, ini

32:57sebentar.

32:59Kok jadi bahasa Indonesia?

33:01Malah nggak enak ya. Karena nggak biasa sama

33:03kata-kata. Nggak biasa, nggak biasa.

33:05Nggak biasa sama terminal. Oh, dia pakai

33:07pages aja ya. Jadi ini adalah

33:09ini kan Astro. Ini AstroSight.

33:11Astro hanya Astro ya.

33:13Berbeda dengan ini kan. Ini agak beda

33:15strukturnya kan.

33:17Iya, karena Dokumenkasi kan

33:19kayak bikin framework sendiri.

33:21Tapi khusus untuk dokumentasi

33:23kalau Starlight itu

33:25nggak, maksudnya nggak bikin framework

33:27terpisah, cuma

33:29AstroSight dengan best practices

33:31dan kayak fitur, kayak komponen-komponen

33:33UI yang lazim dipakai

33:35buat situs dokumentasi.

33:39Yang buatan Anvoo.

33:41Ada nggak ya?

33:43Feedpress. Ini, Feedpress bukan?

33:45Oh, Feedpress.

33:47Buka-buka coba.

33:49Anvoo Universe.

33:51Anvoo Universe. Berarti ini

33:53sama ya modelnya ya. Di SRC

33:55Content Docs. Ada Markdown.

33:57Terus kalau kita bikin pages

33:59yang berbeda, pages

34:01gitu ya. Kalau mau block, berarti kita

34:03bikin content/block kali ya.

34:05Oh, gitu. Oh, iya, iya.

34:07Ya kan dia file-base

34:09router kan?

34:11Tapi itu kan content docs ya kan?

34:13Pages kan. Oh, pages berarti sendiri ya.

34:15Oh, iya.

34:17Pages itu special.

34:19Special ini.

34:21Special page.

34:23Nah, itu makanya ada custom.Astro.

34:25Custom page maksudnya.

34:27Oh, custom page.

34:29Nah, itu diarahinnya juga tetap

34:33balik ke AstroDocs lagi. Jadi kayak

34:35kelihatan yang nggak bikin sesuatu

34:37patternnya. Gak ada yang special gitu ya.

34:39Itu kata mas

34:41Josh Pring. Mas Yombing. Itu

34:43storybook buat dokumentas itu juga

34:45react-based itu storybook.

34:47Itu juga udah masukin tuh di Docs

34:49tadi.

34:51Storybook.

34:53Ini berhubung

34:55si Astro ini dia content

34:57apa ya? Framework yang fokus

34:59ke content kan. Jadi

35:01Markdown, Frontmatter,

35:03dan lain-lain itu udah pakai punya dia aja.

35:05Berbeda dengan React kan. React kan

35:07cuma komponen library.

35:09Jadi harus dibikin

35:11sebuah framework lagi.

35:13Iya, si DocuSaurus ini yang

35:15pakai MDX dia.

35:17MDX Markdown.

35:19Kalau disini dia

35:21pakai Markdown biasa.

35:23Ada MDX juga ya?

35:25Ada tadi boleh MDX.

35:27Bisa pakai MDX.

35:29Ya, ya, ya.

35:31Bisa, bisa.

35:33Terus

35:37satu lagi. Kita bahas satu lagi.

35:39Ada dulu saya pernah pakai

35:41yang dari SpellKit namanya

35:43Kit Docs.

35:45Kit Docs ini

35:49mirip-mirip juga kan.

35:51Ini SpellKit.

35:53Dari SpellKit.

35:55Jadi dia

35:57bikin...

35:59manual.

36:01Terus

36:03pakai Markdown juga.

36:05Ya, ini pakai SpellKit.

36:07Dia template-nya

36:09SpellKit sebenarnya.

36:11Kalau kita lihat disini kan.

36:13Yang ini.

36:15Enggak, nggak official.

36:17Ini

36:19buatan dari SpellKit.

36:21SpellKit itu kalau nggak salah, dia selain

36:23bikin Kit Docs, ada bikin apa lagi ya dia?

36:25Kalau cuma dua ini.

36:27Dua jester.

36:29Tapi sayangnya, Kit Docs ini

36:31udah setahun nggak update.

36:33Jadi nggak tau nih.

36:35Dia nggak ke-update ke Spell5 jadinya.

36:37Oh iya ya.

36:39Itu berarti salah satu

36:41pertimbangan juga ya. Makanya mungkin banyak

36:43orang yang pilih dokusurus aja ujung-ujungnya.

36:45Karena ya udahlah trusted

36:47kemungkinannya cukup besar bakal

36:49dimaintain terus.

36:51Starlight juga gitu.

36:53Kalau spell-nya sendiri,

36:55dokumentasi spell-nya sendiri pake apa?

36:57Ya pake spell.

36:59Dokus alurus.

37:01Oh kalau playground-nya, tutorial-nya

37:07baru pake tutorial Kit ya.

37:09Kalau dokumentasinya

37:11ini kayaknya bikin sendiri ya.

37:13Cari aja. Harusnya kan ada

37:15di GitHub kan. Cari aja.

37:17Oh untuk documentation site-nya.

37:19Pake JSON?

37:21Oh nggak bisa kelihatan disini ya.

37:23Di docs. Ada nggak?

37:25Folder docs atau apa gitu.

37:27Itu ada documentation tadi.

37:29Di spell.

37:31Spell def.

37:33Atas atas.

37:35Nah ya.

37:37Updated 2 jam yang lalu.

37:39Oh.

37:41Ini mah jangan kuatir.

37:43Nggak tahu dibawah.

37:47Itu kali ya. Di apps.

37:49Apps apps.

37:53Nah itu kit.

37:55Swell def.

37:57Swell.dev.

37:59Tadi apa?

38:01Tadi apa ya

38:03yang ininya?

38:05Docs.

38:09Swell.dev/docs

38:11Berarti beda ya.

38:13Beda ya.

38:15Itu tapi betul. Swell.dev.

38:17Itu berarti yang bawah. Swell.dev itu.

38:19Yang folder ke terakhir.

38:21Content.

38:23Docs.

38:25Iya ini dia.

38:27Spell.

38:29Coba index-nya apa isinya?

38:31Title.

38:33Docs.

38:35Iya. Markdown.

38:37Spell kan. Introduction.

38:39Overview.

38:41Markdown.

38:43Ada prometer juga.

38:45Tapi...

38:47Dependensinya.

38:51Kita lihat.

38:53Ya pakai Swell lah.

38:55Ya kali yang lain gitu.

38:57Nggak ada ya.

38:59Iya itu Swell.js.

39:01Blablabla.

39:03Namespace-nya.

39:05Dia bikin sendiri berarti ya.

39:07Dia bikin sendiri.

39:09Nggak seru ah.

39:11Bisa jadi drama.

39:13Bisa jadi drama.

39:15Ya.

39:17Nah coba buka feedpress deh.

39:19Ini kan universe-nya Swell.

39:21Feedpress itu ternyata yang buka.

39:23Yang bikin.

39:25Mas Evan Yu.

39:27Bukan.

39:29Anfu.

39:31Cuma Evan Yu.

39:33Universe.

39:35Evan Yu Brother.

39:37Oke.

39:39Terus.

39:41Ini.

39:43Documentation. Mana?

39:45Quick start.

39:47Sama juga.

39:49Ini kayaknya pakai...

39:51Semuanya rata-rata begini ya.

39:53Ini kayaknya pakai Astro.

39:55Nggak begini.

39:57Dokumentasi itu memang begini ya.

39:59Maksudnya best practice-nya.

40:01Harus menu di kiri.

40:03Terus di kanan itu apa?

40:05Content-nya.

40:07Ada section-section di halaman itu.

40:11Ya karena kalau bikin beda lagi.

40:13Nanti apa?

40:15Harus.

40:17Belajar lagi.

40:19Nah ini ada guide. Ada reference kan.

40:21Betul.

40:23Ada versi.

40:25Ada drop-down versinya juga.

40:27Drop-down?

40:29Oh ini.

40:31Cuma nggak bisa milih ya? Bisa nggak sih?

40:33Nggak ada.

40:35Dia cuma kasih tahu versi sekian.

40:37Ada multilingual.

40:39Ini ada light.

40:41Feedpress ya.

40:49Feedpress ini kan

40:51tapi bukan cuma buat

40:53dokumentasi kan.

40:55Dia lebih kayak

40:57Astro kan sebenarnya jatuhnya kan.

40:59Fast content centric websites.

41:01Cuma tadi di

41:03landing page-nya.

41:05Marketing copy text-nya.

41:07Tadi nyibut-nyebut

41:09documentation. Markdown to beautiful

41:11box in minutes.

41:13Walaupun nggak dipakai buat dokumentasi ya

41:15dia positioning-nya gitu.

41:17Ya Astro juga kan sebenarnya Starlight

41:19itu kan AstroSight.

41:21Jadi ya in a way Astro bisa

41:23dianggap sebagai tools

41:25buat bikin documentation site.

41:27Walaupun ya bukan cuma buat itu.

41:29Iya benar.

41:31Oke.

41:33Nah ini kalau

41:35kita mau lihat routing-nya

41:37gimana. Struktur folder-nya lah.

41:39File, structure,

41:41docks.

41:43Ini ya udah ada.

41:45Oh ya file structure ya.

41:47Sama di

41:49sebelah gini juga.

41:51Lebih simple ya, langsung di bawah docks dah.

41:53Semuanya di situ aja.

41:55Nggak ada SRC, content,

41:57something-something ya. Ini ada guide.

41:59Oh guide yang ini.

42:01Kalau mau bikin beda folder,

42:03bikin aja folder di dalamnya gitu.

42:05Nggak mesti docks gitu.

42:07Oh ada pattern-nya.

42:09Ini dia.

42:11Kalau

42:13dokumentasi dia slash docks

42:15gitu ya.

42:17Sudah goal belum?

42:19Udah, brace.

42:21Astro brace 2-0.

42:23Wah, huri.

42:252-0.

42:31Ini kita FOMO.

42:33Kita FOMO.

42:35Nonton satu babak doang.

42:37Bagus lagi mainnya.

42:39Lanjut, lanjut, lanjut.

42:41Wah, ini simple ya.

42:43Simple ya.

42:45Next-nya ada tools apa lagi?

42:47Itu tadi

42:49storybook.

42:51Oh, storybook, betul.

42:53Storybook.

42:55Kalau nggak salah,

42:57Spark juga bikin dia ya.

42:59Storybook ya?

43:01Storybook versi Spark.

43:03Ini Saudi Arabia yang ngalahin Argentina kan?

43:05Ya.

43:07Kita ngalahin.

43:09Eh, nggak boleh jengawa doang. Sejauh ini

43:11masih lagi

43:13ngalahin.

43:15Yang round pertama malah

43:17kita nahan imbang

43:19di sana kan, pas main tandang.

43:21Pas dilatih mancini lebih

43:23gokil. Anyway.

43:25Anyway.

43:27Fokus, fokus, fokus.

43:29Storybook ini

43:31sebetulnya agak beda dikit

43:33positioning-nya dibanding yang lain

43:35semua. Tadi kan ada Swagger tuh

43:37yang

43:39buat reference, tapi reference

43:41API-nya. Ini tuh

43:43bisa dibilang agak mirip

43:45kayak gitu, tapi buat UI component.

43:47Jadi sebenarnya dokumentasi untuk

43:51UI component, tapi dokumentasinya

43:53nggak se-holistic,

43:55nggak se-menyeluruh yang dibagian

43:57tadi. Karena ya udah, sebetulnya

43:59kalau by default, cuma

44:01ya cuma komponen-komponennya

44:03sama kayak variasi prop-nya,

44:05kombinasi-kombinasi

44:07prop-nya, prop dan state dari

44:09komponen itu sendiri.

44:11Tapi sebetulnya kalau mau

44:13dibuat dokumentasi yang lebih

44:15lengkap, itu ada

44:17fiturnya. Bentar mana ya?

44:19Bagus deh. Itu

44:21recommended banget. Tapi ini

44:23kayak

44:25fitur yang opsional sih.

44:27Wait.

44:29Apa tuh? Dari storybook?

44:31Iya.

44:33Wait, cari ini-nya dulu.

44:35Ah, kok lama sih?

44:37Kapan terakhir

44:39teman-teman pakai storybook?

44:41Baru ya?

44:43Masih pak. Masih maintain?

44:45Masih?

44:47Soalnya beberapa tahun

44:49yang lalu ya, nggak tahu sekarang, mudah-mudahan sih udah

44:51cepet ya. Berapa tahun yang lalu

44:53setup-nya itu lambat banget.

44:55Lambat banget. Masih lambat.

44:57Oh masih.

44:59Ya,

45:01tergantung kalau komponennya

45:03ratusan dan permutasi

45:05props-nya ratusan juga,

45:07mungkin lambat. Tapi kalau cuma buat

45:09yang simple-simple, ya

45:11puluhan lah.

45:13Udah jauh lebih cepet kok.

45:15By default, sekarang pakainya fit.

45:17By default, sekarang pakainya

45:19fit.

45:21Semua akan pindah ke fit pada waktunya.

45:25Refactor semua,

45:29refactor.

45:31Coba buka link yang

45:35autodocs deh.

45:37Autodocs.

45:39Ini bagian dari storybook

45:41juga ya berarti ya?

45:43Iya, fiturnya. Salah satu fiturnya.

45:49Nah, itu pakai MDX.

45:51Cuma kelebihan-nya adalah

45:53jadi storybook itu kan

45:55pakai namanya format

45:57.stories.tsx

45:59atau .jsx.

46:01Jadi dia ngambilnya,

46:03itu tuh ada contoh preview button-nya

46:05yang biru, itu preview-nya

46:07langsung ambil dari kode

46:09komponen kita sendiri. Jadi kayak

46:11dijadikan satu.

46:13Karena ini orientasinya UI ya,

46:15front-end. Jadi komponennya gimana,

46:17langsung dokumentasinya di situ.

46:19Props-nya itu ngambil,

46:21table props-nya itu ngambil dari

46:23TypeScript definition

46:25komponen itu sendiri.

46:29Nah, terus kita bisa nambahin sendiri

46:31pakai MDX.

46:33Nah, itu ponenya udah

46:35disediain komponen-komponennya,

46:37kita bisa nambahin sendiri pakai

46:39MDX.

46:47Cuma storybook itu

46:49karena saking banyak fiturnya,

46:51agak overwhelming. Kalo baru

46:53pakai tuh overwhelming banget.

46:55Banyak banget variannya

46:57kayak buat track, buat view, buat

46:59macem-macem. Jadi mungkin itu agak turn-off ya

47:01kalau misalnya belum pernah pakai.

47:03Terus ngeliat gitu kayak banyak banget.

47:05Tapi sebetulnya itu useful banget dan bagus

47:07kalo emang niat, kalo emang

47:09kita nyeniat pengen bikin dokumentasi yang

47:11lengkap itu bisa

47:13mendukung banget.

47:15Jadi bisa ada accessibility test-nya juga, kan?

47:17Bisa. Test-nya macem-macem.

47:19Visual test bisa,

47:21accessibility test bisa,

47:23jazz, enggak tau ya,

47:25kalo Vtest belum pernah coba

47:27jazz testing, dimasukin kesitu

47:29jadi satu tab juga bisa.

47:31Jadi kita nulis test route-nya

47:33saya biasa.

47:35Kita ngetik jazz biasa,

47:37cuma ada add-on-nya, ya kita bisa

47:39ngeliat di satu tempat aja, gitu.

47:43Bisa contohnya yang dari WordPress blog

47:45yang full misalnya

47:47yang sedang masih di-mainting untuk

47:49Gutenberg blog.

47:51Gutenberg?

47:53Ya, misalnya blog editor-nya

47:55si WordPress, seluruh

47:57komponen yang

47:59yang sah

48:01ada di sini, gitu.

48:03Bisa contohnya kalo misalnya

48:05langsung aja ke komponen deh

48:07yang di bawah, yang

48:09apa ya?

48:11Cuma nih sebelum ke komponen,

48:13ini juga bagus di storybook

48:15sebetulnya buat komponennya sendiri,

48:17tapi ini bisa dokumentasi

48:19yang tadi kan ada apa?

48:21Explanation ya, atau apapun yang jelasin

48:23pake kata-kata, gitu.

48:25Itu bisa kayak docs, introduction,

48:27itu pake MDX, kita ngetik aja,

48:29ngetik kata-kata biasa, jadi bisa jadi satu

48:31dengan relatif, gampang,

48:33mudeh.

48:35Nah, lanjut.

48:37Bisa turun ke, bawa ke komponen aja

48:39kayak contohnya kayak button, kayak apa

48:41yang ada.

48:43Bawa-bawa button group aja,

48:45itu coba, ada nggak

48:47button-nya? Button mungkin

48:49yang primary itu kan ada variation

48:51tuh. Button kalo di

48:53button kalo di

48:55drop-down lagi,

48:57di kiri, di kiri,

48:59karena ada variation tuh, primary,

49:01default, itu

49:03props-nya, jadi kalo misalnya pencet primary,

49:05tuh code is poetry itu

49:07primary-nya gitu, control-nya

49:09ada props-nya dia terima,

49:11itu semua,

49:13dan accessibility.

49:15Bisa diganti-ganti juga langsung, apa?

49:17Itu tuh props-nya kita

49:19bisa nyoba-nyoba, misalnya kalo

49:21itunya true, jadi

49:23kayak gimana.

49:25Terus accessibility,

49:27ke tab accessibility,

49:29nah, pass,

49:33terus bisa

49:35bisa dicek ya, kalo nggak

49:37pass, itu gimana.

49:39Kalo masih violation, WCAG

49:41pasal berapa yang kena?

49:43Pasal berapa.

49:45Terus kalo,

49:47batah component ini bisa

49:49menerima actions apa?

49:51Itu bisa di tab actions.

49:53Ada tab-nya tuh, actions

49:55kanan.

49:57Terus belanya accessibility?

49:59Nggak ada.

50:01Oh, kosong ya, kalo kosong-kosong.

50:03Itu buat men-stimulate

50:05apa? Kayak apalah

50:07input, kalo diklik jadi gimana,

50:09itu kayak ada simulasinya gitu.

50:11Buat interactive UI.

50:17Ini apakah

50:19si storybook ini

50:21berada di satu repo sama

50:23project kita atau terpisah?

50:25Satu repo. Jadi,

50:27semua, ya, jadi, waktu dia

50:29jadi kalo misalnya,

50:31jadi

50:33storybook ini satu repo.

50:35Jadi waktu si

50:37contohnya kayak actions button ini kan

50:39ada componentnya sendiri

50:41di package-package yang lain.

50:43Jadi waktu nge-generasi

50:45storybook ini langsung ngambil

50:47atau nge-import dari package

50:49yang itu dipake di dalam

50:51storybook ini.

50:53Jadi kalo disana update,

50:55kalo disana update, waktu kita nge-generasi

50:57storybook, auto-update semua.

50:59Tapi sebetulnya, ya,

51:01bebasi, meant to be, kayak

51:03dimaksudkan buat jadi satu repo.

51:05Karena, ya, biar co-locate aja.

51:07Kayak kita nulis, bikin UI

51:09component, bikin testing,

51:11bikin dokumentasi, ini disebutnya

51:13story kalo disini, itu kan kayak satu

51:15kesatuan ya, harusnya idealnya.

51:17Tapi prakteknya sebenernya misalnya

51:19kita publish component

51:21sebagai masing-masing.

51:23Misalnya setiap component jadi satu

51:25package, satu library gitu, misalnya

51:27kita nge-import

51:29di story-nya juga bisa-bisa aja sih.

51:31Maksudnya itu dengan gampang, nggak ribet.

51:33Jadi di file.stories.tsx itu

51:35kita nge-import

51:37UI component yang mau

51:39didokumentasiin. Jadi sebetulnya

51:41mau beneran literally dalam

51:43satu repo, atau pake

51:45monorepo system kayak apalah

51:47yarn workspaces atau

51:49PNPM atau semacamnya,

51:51atau literally kepisah, tapi

51:53kita nge-import UI componentnya

51:55dari PNPM itu

51:57tiga-tiganya bisa-bisa aja.

51:59Tapi kan

52:07pada saat kita ngejalanin ini kan lumayan

52:09berat kan ya. Itu apakah

52:11dijalani, nggak dijalani terus-menerus

52:13kan, pada saat proses

52:15development?

52:17Ya di CI/CD,

52:19jadi mungkin saat release, update

52:21sekalian.

52:23Sama bisa juga,

52:25ya itu kan tergantung juga misalnya

52:27kalau kita bikin component baru,

52:29nggak kita test development,

52:31si test runner-nya

52:33jalan terus, kita kayak sambil

52:35nge-save-nge-save, kita ngetik sampai

52:37itu benar. Nah kadang gue malah

52:39pake storybook ini karena males

52:41maksudnya misalnya bikin

52:43component react ya, daripada

52:45bikin kayak satu halaman,

52:47terus buat ngetest tampilan

52:49componentnya, ya bikin

52:51componentnya sambil nyalain storybook

52:53aja, terus sambil bikin button.

52:55Ya jadi apa, itu kita

52:57liat button yang kita bikin

52:59langsung di situ.

53:01Dan nggak tahu sih

53:03kalau yang baru nih,

53:05terutama begitu punya covid,

53:07nggak kerasa berat sih.

53:09Maksudnya

53:11kalau bisa ngejalanin kita sehari-hari

53:13pake apa gitu, Next.js, misalnya

53:15nge-develop pakenya Next.js

53:17atau semacamnya, itu

53:19pasti cukup mumpuni

53:21buat nyalain storybook.

53:23Jadi kayak

53:27sell storybook deh, dibayarkan ya.

53:29Ada alternatifnya nggak sih

53:31di storybook? Ada librarynya gratis.

53:33Ada banyak, tapi kayak

53:35nggak pernah ada yang take off deh.

53:37Di open source kan,

53:39cuma kalau mau pake

53:41cloud-nya dia aja bayar.

53:43Bayar, cuma kalau

53:45dihosting dia dan pake

53:47visual testing dari mereka.

53:49Jadi storybook itu project dari

53:51perusahaan yang namanya

53:53Chromatic. Nah yang commercial tuh

53:55Chromatic-nya. Storybook-nya itu

53:57project open source. Nah Chromatic-nya itu

53:59di visual testing. Chromatic-nya

54:01gampang banget.

54:03Sayangnya waktu saya udah coba

54:07udah suka gitu, terus

54:09client-nya nggak approve

54:11budget. Ya.

54:13Ya, nggak bisa main.

54:15Pindah deh

54:17ke persi.

54:19Sama aja.

54:21Persi ya masih

54:23bisa lah. Lebih masuk akal

54:25harganya, kata client-nya.

54:27Oke. Oh jadi

54:31untuk

54:33tools

54:35dokumentasi visualisasi

54:37seperti ini, itu

54:39si storybook masih

54:41paling populer ya. Belum ada

54:43yang masih de facto-nya lah.

54:45Masih go to-nya

54:47lah ya. Masih go to

54:49kalau misalnya mau bikin component

54:51library, ya

54:53go to-nya masih suka storybook sih.

54:55Kan dulu, pas masih...

54:57react doang.

54:59Kenapa?

55:01Components masih bisa

55:03react doang kan ya?

55:05Enggak. Enggak. Enggak. Enggak.

55:07Components.

55:09Asli gue pernah bikin buat custom

55:11elements.

55:13Bisa semua.

55:15So far gue coba

55:17masih react, jadi gue nggak tahu.

55:19Jadi ada yang unofficial

55:21bentar cari deh.

55:23Frameworks.

55:25Anfu nggak bikin Anfu?

55:27Coba cek dulu

55:29siapa tahu dia bikin.

55:31Atau dia dengerin

55:33podcast kita, ntar lagi jadi

55:35tuh. Tapi bukan Anfu

55:37sih. Nggak, maksudnya

55:39framework yang disupport

55:41oleh apa?

55:43Storybook

55:45officially adalah

55:47ini.

55:49Ada tadi kan

55:53di depannya?

55:55Betul. Ada.

55:57Storybook.

55:59Storybook.js.org

56:01slash docs slash

56:03get started.

56:05Ada semua. Ada 7.

56:07Ada 7 lagi nih?

56:09Iya. Ada listnya tuh dibuka di private chat

56:11nih.

56:13Nah, itu

56:21lengkap ada. Jadi apa?

56:23Dari bahasanya, yang atas ada react, view, angular,

56:25blablabla. Terus ada kayak

56:27variasi-variasinya. Ada

56:29react native.

56:31Wow.

56:33Spell, spell kit, web

56:35web, web, web, web, web, web.

56:37Tapi ini udah berubah jauh

56:39sih dari terakhir dicoba.

56:41Ya, apa? Drop down yang more. Itu deh.

56:43Diklik more. Atas

56:45more.

56:47Nah, tuh.

56:49Lengkapkan. HTML biasa aja bisa.

56:51Coba react quick solid. Ini yang baru ya.

57:05Oke.

57:07Dulu

57:09apa bedanya race.js dengan

57:11react ya?

57:13Nggak, ini kayak contoh jadi

57:15starter site-nya aja jadi

57:17gampang. Nggak usah nambah-nambahin sendiri.

57:19React, react polosan.

57:23Nggak pakai framework.

57:25Oke, oke.

57:27Nice.js ada nggak sih yang pakai

57:33spell?

57:35Siapa tahu?

57:37Siapa tahu mereka bikin

57:39framework agnostik gitu ya?

57:41Ya, yang framework agnostik ya ini doang nih.

57:45Nah, dulu ada nih namanya

57:47apa, kompetitornya

57:49storybook namanya

57:51Lado. Waktu

57:53storybook masih lelet, sempat

57:55cari-cari alternatifnya yang cepet kan.

57:57Nah, salah satu yang pernah dicoba

57:59Lado. Cuma nggak tahu nasibnya

58:01gimana akhirnya.

58:03Oke.

58:05Kayaknya pernah lihat juga.

58:072024.

58:13Masih aktif nggak?

58:15Last week masih-masih aktif.

58:17Masih itu?

58:19Iya, ada daftar.

58:21Tapi secara fitur, secara fitur

58:23kayaknya kurang ya.

58:25Makanya jarang.

58:27Ya, nggak se-extensive storybook.

58:29Tapi kalau emang pengen yang simple aja

58:31beneran literally cuma buat

58:33ngedokumentasiin dan nampilin daftar

58:35komponen, ya bisa sih.

58:37Cukup. Cuma abis

58:39storybook pindah ke feed dan

58:41jadi nggak lambat, gue ngerasa

58:43itu fast enough

58:45for my needs.

58:47Ya udah, akhirnya nggak pakai Lado lagi.

58:49Nggak sempat pakai, maksud saya.

58:51Terus sempat cari juga yang

58:53kayaknya Skotelinski deh yang bikin.

58:55Bukit namanya.

58:57Ya, bukit.

58:59Tapi sudah di archive.

59:01Jadi udah nggak

59:03dikembangin lagi. Ini aja baru coming soon

59:05tapi udah keburu di archive.

59:07Kayaknya nggak dilanjutin.

59:09Nah, iya sih, belum berkembang.

59:11Ya, malas dia.

59:13Kayaknya tadi nyari-nyari juga.

59:15Iya, mungkin karena itu juga tadi alasannya.

59:17Ya, mungkin akhirnya dia pakai storybook.

59:19Jangan-jangan storybook-nya udah cepet.

59:21Storybook-nya udah cepet-cepet.

59:23Akhirnya, ya udahlah, nggak usah lah, nggak pahin.

59:25Bukannya sekarang

59:27orang sudah mulai berali, daripada bikin

59:29sendiri, pakainya v0

59:31gitu.

59:33Jadi komponennya ambil yang sudah ada.

59:35Walaupun kodingannya dari v0 kan

59:37butuh ngedokumentasiin

59:39untuk usage-nya.

59:41Kasih dokumentasinya ke v0.

59:43Ini loh komponen

59:44Gombol dari sini.

59:45Baca aja, Nana.

59:47Tapi ini poin yang menarik juga.

59:51Baru ingat kemarin itu ada

59:53dibahas di podcast yang lain

59:55di JS Party, kalau nggak salah.

59:57Jadi, kalau dulu

59:59misalkan kita punya

1:00:01produk atau punya library

1:00:03framework dan lain-lain, itu kan

1:00:05kita bikin dokumentasinya.

1:00:07Untuk dibaca oleh pengguna kan.

1:00:09Orang.

1:00:11Nah, sekarang berhubung tools AI

1:00:13udah semakin banyak, kayak kursor

1:00:15udah bisa mengkonsumsi

1:00:17dokumentasi.

1:00:19Jadi, dokumentasi itu bukan hanya diperuntukkan untuk

1:00:21orang, tapi untuk AI juga.

1:00:23Tapi untuk LLM.

1:00:25Jadi, ada pemikiran kesana

1:00:27bahwa, ah, si dokumentasi ini

1:00:29nanti akan dikonsumsi oleh

1:00:31LLM atau co-pilot

1:00:33atau kursor atau apapun.

1:00:37Ada, ada, apa namanya, ada insight.

1:00:39Ada

1:00:41dimensi tambahan lah, gitu.

1:00:43Mungkin aja

1:00:45nggak perlu dibedain.

1:00:47Tapi juga mungkin struktur

1:00:49dan lain-lainnya harus diperhatikan juga, gitu kan.

1:00:51Kalau orang kan masih bisa nyari

1:00:53lompat-lompat, kan. Kalau misalkan si

1:00:55si AI kan, ya

1:00:57belum tentu, nggak tahu juga

1:00:59gimana cara kerjanya.

1:01:01Untuk, pada saat dia membaca

1:01:03dokumentasi itu kan, pakai RAG ya,

1:01:05salah ya.

1:01:07Kalau si kursor kan, ya.

1:01:09Jadi,

1:01:15semakin penting.

1:01:17Si dokumentasi ini semakin penting.

1:01:19Bukan cuma buat kita

1:01:21yang baca, tapi buat

1:01:23dikonsumsi oleh AI.

1:01:25Sama itu, berarti yang penting

1:01:27kita misalnya nulis di markdown kan, ya.

1:01:29Kalau, kadang kan

1:01:31orang nulis semantiknya kurang

1:01:33bagus ya, kurang rapih.

1:01:35Yang penting secara visual jelas.

1:01:37Cuma berarti, kalau untuk

1:01:39dikonsumsi AI, mungkin makin

1:01:41penting misalnya kayak header-nya,

1:01:43section-sectionnya itu harus pakai

1:01:45apalah, itu yang

1:01:47tepat. Terus

1:01:49heading-nya kayak heading level H1,

1:01:51H2, H3-nya, mesti betul.

1:01:53Harus lebih konsisten, ya.

1:01:55Harus lebih disiplin, gitu ya.

1:01:57Nggak boleh sembarangan level

1:01:59keberapa jadi ngaruh

1:02:01understanding-nya dia

1:02:03atau konteksnya dia jadi berubah,

1:02:05gitu mungkin ya.

1:02:07Nah, pengalaman

1:02:19teman-teman pakai

1:02:21udah pernah bikin

1:02:23dokumentasi dan pakai apa?

1:02:25Biasanya.

1:02:27Manual aja kah?

1:02:29Misalkan kayak tadi

1:02:31siapa spell tadi

1:02:33ya udah bikin aja, di sebelah kiri

1:02:35taro sidebar, terus dia

1:02:37akan for loop markdown

1:02:39yang ada, terus tampilin,

1:02:41gitu. Sederhananya kan

1:02:43gitu ya.

1:02:45Atau sudah pakai

1:02:47tadi banyak yang belum tahu juga ya, doku

1:02:49sorus banyak yang belum tahu,

1:02:51baru tahu sekarang.

1:02:53Teman saya ada

1:02:55bikin

1:02:57dokumentasi pakai

1:02:59elder.js.

1:03:01Elder, tapi bikin

1:03:03sendiri.

1:03:05Tapi ini buat

1:03:07altis

1:03:09situs yang kita pakai

1:03:11produk yang

1:03:13saya bekerja.

1:03:15Dia pakai

1:03:17elder.js,

1:03:19membaca

1:03:21semua dari beberapa repo,

1:03:23terus kemudian generate

1:03:25markdownnya,

1:03:27kasih times, jadi deh

1:03:29pakai elder.js.

1:03:31Oh, ada yang pakai Notion

1:03:33juga? Ya bisa aja sih,

1:03:35nggak ada masalah sebenarnya.

1:03:37WordPress juga banyak yang pakai.

1:03:39Iya, pakai WordPress.

1:03:41Cuma nggak enaknya kan kalau pakai

1:03:43WordPress kan?

1:03:45WordPress code block bisa nggak sih?

1:03:47Bisa, bisa aja. Biasanya pakai

1:03:49WordPress. Tetapi kan nggak enaknya

1:03:51kalau misalnya kayak

1:03:53kalau kita pakai

1:03:55misalnya

1:03:57untuk komponen kayak

1:03:59storybook atau tadi yang docu sorus,

1:04:01bisa jadi

1:04:03readme-readme-nya itu

1:04:05bisa kita susun, nggak mesti

1:04:07di folder docu sorus. Tapi readme-nya itu bisa

1:04:09berasal dari perkomponen

1:04:11yang kita. Masih-masing repo,

1:04:13masing-masing folder. Masing-masing package-nya

1:04:15kita lebih tepatnya. Misalnya plugin atau

1:04:17package-nya kita,

1:04:19kita ada readme-nya sendiri. Nanti dari

1:04:21waktu kita build,

1:04:23nge-source dari seluruh

1:04:25readme yang kita punya

1:04:27di dalam project

1:04:29dan ngebentuk sebuah aplikasi sendiri.

1:04:31Jadi, nulisnya

1:04:33cuma satu tempat. Kalau misalnya

1:04:35kalau misalnya kita pakainnya

1:04:39WordPress atau

1:04:41yang lain yang terpisah, ya

1:04:43aplikasi

1:04:45dokumentasinya sendiri

1:04:47untuk engineer, terus

1:04:49yang untuk

1:04:51publik,

1:04:53nulis lagi, gitu kan. Jadi

1:04:55double effort.

1:04:57Dua kali kerja.

1:04:59Itu

1:05:01kekurangannya

1:05:03kalau kita menggunakan

1:05:05entah itu repo atau web

1:05:07yang berbeda, atau

1:05:09pakai tools seperti Notion

1:05:11dan lain-lain.

1:05:13Karena ketika

1:05:15produk kita atau kode kita

1:05:17berubah, misalkan ada update,

1:05:19ada tambahan fitur, ada

1:05:21apa namanya, ada

1:05:23release yang baru,

1:05:25itu nggak ke-track.

1:05:27Nggak ke-track kalau dokumentasinya harus update

1:05:29juga. Terpisah.

1:05:31Terpisah. Jadi, semakin

1:05:33menyulitkan, kecuali

1:05:35kalau ada tim khusus

1:05:37yang

1:05:39handle, atau tetap

1:05:41aja sih. Tetap

1:05:43lebih disarankan secara best practice adalah

1:05:45dia berada di satu tempat supaya

1:05:47ketika ada update, ini dokumentasinya

1:05:49juga berasa butuh

1:05:51untuk di-update.

1:05:53Nah, ada satu lagi nih, dokumentasi

1:05:57yang totally different tuh, yang

1:05:59buatan Google.

1:06:01Tau? Tau? Tau?

1:06:03Google Code Lab.

1:06:05Google Code Lab.

1:06:07Oh iya, itu unik ya.

1:06:09Bisa dibilang,

1:06:11itu kan how-to.

1:06:13Oh iya, tutorial-nya.

1:06:15Kan bisa step-by-step.

1:06:17Iya, format Google Code Lab ini

1:06:21saya breakthrough lah, menarik.

1:06:23Bisa nulisnya pakai Google Doc

1:06:25lagi.

1:06:27Hah? Iya.

1:06:29Kalau

1:06:31ada formatnya ya dari Google Doc,

1:06:33terus itu tinggal jadi generic,

1:06:35jadi code lab.

1:06:37Ada tutorialnya code mana ya?

1:06:41Google Code Lab.

1:06:43Jadi yang khas itu kan

1:06:47format code lab itu adalah

1:06:49multi-step-nya ya. Sebetulnya

1:06:51sih, kalau overall kan

1:06:53nggak beda jauh dari

1:06:55tadi-tadi yang markdown

1:06:57base yang kita bahas kan.

1:06:59Cuma ini tuh kayak ada step-by-step

1:07:01nya gitu, sama ada indikator

1:07:03step-nya. Coba cari aja.

1:07:09Ini random example.

1:07:11Start.

1:07:13Ini, ini, ini.

1:07:15Ini tools untuk

1:07:17nge-generate code lab.

1:07:19Lo kok nggak jalan?

1:07:21Stora saya telat banget ya?

1:07:23Enggak.

1:07:25Enggak ya? Enggak.

1:07:27Saya putus-putus soalnya ini-nya.

1:07:29Ini tutorial, nggak

1:07:35step-by-step ini ya?

1:07:37Itu kok nggak kayak code lab

1:07:39pada umumnya?

1:07:41Bukan.

1:07:43Bukan.

1:07:45Cari yang web aja.

1:07:51Web semua. Ini kan udah

1:07:53kategori web nih.

1:07:55Oh iya.

1:07:57Paski, paski.

1:08:05Ada nggak paski?

1:08:07Enggak ada.

1:08:09Mana disini carinya?

1:08:13Itu

1:08:15filter webnya di close dulu coba.

1:08:17Oh ini, ini, ini.

1:08:21Ini ya?

1:08:27Sebelah kiri ya?

1:08:29Harusnya

1:08:31muncul tuh kan.

1:08:33Step-stepnya.

1:08:35Kalau ada teman-teman yang mau bikin

1:08:41begini.

1:08:43Ada yang mau bikin gini.

1:08:45Tools-nya ada tuh.

1:08:47Di chat ya.

1:08:49Bisa gen Anda sendiri.

1:08:51Oh, baru tahu Anda.

1:08:55Ada formattingnya.

1:08:57Dia pakai STL-80.

1:08:59Enggak pakai laptop ya?

1:09:01Google Doc.

1:09:03Oh, tetap ya harus ya?

1:09:05Iya.

1:09:07Enggak pakai Google Doc.

1:09:13Nulis seperti biasa. Semua orang bisa

1:09:15collaborate.

1:09:17Generate.

1:09:19Publication pakai zip ya.

1:09:23Nanti jadinya ini kok.

1:09:27Jadinya

1:09:29HTML kok.

1:09:31Bazel ini apa?

1:09:33Bazel kan tools,

1:09:35kayak tools monorepo-nya Google kan?

1:09:37Oh iya, iya, iya.

1:09:39Benar, benar, benar.

1:09:41Dan nggak tahu kenapa, kalau buat

1:09:47step-by-step itu, formatnya

1:09:49Codelapse itu

1:09:51secara mental,

1:09:53secara sikis kayak ngebantu banget buat

1:09:55bikin itu, terasa

1:09:57less overwhelming.

1:09:59Bahkan dengan, nggak tahu, apa, pendapat

1:10:01gue sih, bahkan dengan, maksudnya dengan

1:10:03konten yang sama nih, cuma pakai satu halaman

1:10:05kayak markdown yang ada

1:10:07section-sectionnya, ada

1:10:09apa, yang tadi yang sebelah kanan, sidebar kanan

1:10:11on this page, itu jadi kerasa

1:10:13wah, panjang, berat.

1:10:15Cuma kalau dipecah-pecah

1:10:17kayak formatnya Codelapse itu

1:10:19jadi kayak lebih

1:10:21misalnya kita mau ngasih workshop atau apa,

1:10:23itu kayak lebih user-friendly aja.

1:10:27Iya sih,

1:10:29benar.

1:10:31Dan ini contohnya, misalnya

1:10:35walaupun langkah-langkahnya banyak,

1:10:37itu kayak jadi lebih simple

1:10:39aja.

1:10:41Iya, karena kan satu langkah itu

1:10:43yaudah sih, ini aja gitu, jadi kita nggak

1:10:45wah, ini panjang banget

1:10:47gitu ya.

1:10:49Cuma mental

1:10:51ini aja.

1:10:53Ya, tadi kita ngomongin soal

1:10:55apa namanya,

1:10:57dokumentasi yang apa,

1:10:59mengomentari, ada yang

1:11:01menggunakan notion, ya itu bukan

1:11:03sesuatu yang salah, tapi

1:11:05kalau buat developer, ada

1:11:07artikel yang menarik, namanya

1:11:09Docs Ask Code, jadi

1:11:11sebisa mungkin dokumentasi

1:11:13di apa,

1:11:15di trade sebagai

1:11:17code juga.

1:11:19Kalau bisa dijadikan satu sama codenya.

1:11:21Jadi,

1:11:23ke track, ada question controlnya,

1:11:25terus formatnya ya

1:11:27markdown yang

1:11:29paling ini ya, paling

1:11:31sering digunakan,

1:11:33terus bisa di code review, dan bisa

1:11:35di test juga.

1:11:37Di test dalam artian, misalkan nih, kita punya tutorial

1:11:39atau punya dokumentasi yang

1:11:41menjalankan kode.

1:11:43Dan ketika

1:11:45sebuah API berubah,

1:11:47terus kodenya nggak jalan,

1:11:49itu gimana ngeceknya kalau di notion, bingung kan,

1:11:51harus copy paste manual, oh ini nggak jalan,

1:11:53ini ganti, gitu. Tapi kalau misalkan

1:11:55di, ya

1:11:57mungkin ada tools tambahan ya, pokoknya

1:11:59di kode, kita bisa

1:12:01bikin testnya untuk menjalani,

1:12:03untuk mengevaluasi

1:12:05code block, code block,

1:12:07apakah code blocknya masih jalan, sesuai

1:12:09dengan API yang

1:12:11baru atau nggak, kalau

1:12:13sesuai ya, nggak perlu

1:12:15di apa, nggak perlu di update,

1:12:17kalau nggak sesuai, mungkin CI-nya

1:12:19error, jadi harus di update juga.

1:12:21Itu kelebihannya sih

1:12:23di situ ya.

1:12:25Sama kalau ke pisah, kayak misalnya pakai notion,

1:12:27itu makin, kalau pas lagi baru

1:12:29dibikin, itu kan kita masih fresh

1:12:31bagian ini, misalnya apa,

1:12:33kode yang ini, dokumentasinya

1:12:35di sini, halaman ini atau

1:12:37section ini, kode yang itu,

1:12:39di section itu

1:12:41atau halaman itu, coba lihat

1:12:43kalau udah 6 bulan.

1:12:45Terus misalnya kita nambah fitur baru

1:12:47di kode, nah berarti kan

1:12:49abis itu kayak ada beban mental

1:12:51pas kita mau update docs kan,

1:12:53aduh ini mana yang diganti,

1:12:55nambahinnya di sebelah mana, kayak

1:12:57hal-hal yang dibilang

1:12:59teknis, itu kan belum masuk teknis ya, itu

1:13:01non-technis, nambahinnya di mana,

1:13:03halaman mana, section mana, itu kayak udah

1:13:05pikir malas duluan kan.

1:13:07Iya,

1:13:09betul. Itulah yang kadang-kadang

1:13:11yang sering kali membuat

1:13:13dokumentasi, project dokumentasi

1:13:15terbengkalai.

1:13:17Terbengkalai, gara-gara

1:13:19harus ke sana. Cepet urusin ya.

1:13:21Cepet ngurusin ya,

1:13:23jadi sebisa mungkin

1:13:25semakin dekat ke kode, semakin bagus.

1:13:27Gue memang

1:13:29code lab yang gue bikin, ada yang mau liat

1:13:31ini gak gue drive formatnya.

1:13:33Mau dong.

1:13:35Mampung

1:13:37nemuk nih, mampung nemuk.

1:13:39Waktu itu, gue juga

1:13:41sempet

1:13:43translate PWA ya, kalau gak salah.

1:13:45Itu pakai code lab juga gak ya?

1:13:47Jadi,

1:13:53gue bikinnya gini nih,

1:13:55pengenalan WordPress untuk

1:13:57pemula. Pernah

1:13:59ada di game Jakarta

1:14:01lah gitu, jadi gue cuma

1:14:03karena

1:14:05dia bilang, Mas

1:14:07Ivan ngadain workshop ya, pengenalan WordPress

1:14:09untuk pemula, tetapi

1:14:11satu hari ada 3 sesi

1:14:13workshop. Gue gimana

1:14:15ngajarin orang, 3 sesi

1:14:17workshop. Ya

1:14:19ujung-ujung gue bikin

1:14:21konsep, ya udah, gue bikin

1:14:23code lab-nya, gue sediain laptop-nya,

1:14:25terus gue suruh aja mereka

1:14:27ikutin satu-satu,

1:14:29dan gue jadi instruktor jalan-jalan

1:14:31bantuin satu-satu, gitu.

1:14:33Kasih kupon nanti, jadi

1:14:35tinggal ngikutin ini, sampe

1:14:37terakhir mereka sudah punya satu

1:14:39resepnya mereka sendiri, pulangnya,

1:14:41jadi

1:14:43workshopnya cuma kayak 1,5 jam,

1:14:45gitu, ikutin

1:14:47jadi kontennya

1:14:49sudah ada.

1:14:51Wait, ini kok malah jadi kayak agak nyambung sama

1:14:53topik minggu lalu gak sih?

1:14:55Apa? Mix dengan

1:14:57tools buat bikin

1:14:59slide atau presentasi. Kan sebenernya

1:15:01in a way, kalau buat pengguna use case yang ini,

1:15:03itu kayak overlap ya?

1:15:07Cuma, ini fokus ke

1:15:09protect. Maksudnya, itu langkah-langkahnya

1:15:11beneran bisa sambil diprotekin.

1:15:13Iya, betul.

1:15:17Google Docs-nya mana?

1:15:19Ini kan di GitHub ya,

1:15:21gue post ke GitHub,

1:15:23github.io, yang

1:15:25hasil akhirnya kan index.html

1:15:27doang nih begini.

1:15:29Hasil akhirnya.

1:15:31Setelah dibuild.

1:15:33Dan,

1:15:35tadaaa!

1:15:37Ini formatnya.

1:15:39Sebenernya dia sudah ngasih formatnya,

1:15:43gue tinggal clone template-nya.

1:15:45Hal-hal yang di sini tinggal diisi saja.

1:15:49Yang ini kan

1:15:51auto build ya,

1:15:53table of contents.

1:15:55Menarik ya.

1:15:57Tinggal ini, tinggal gue isip.

1:15:59Ini hal satu.

1:16:01Ini dia convert jadi HTML ya.

1:16:03Ini dia convert langsung jadi image loh,

1:16:05otomatis. Ini semua

1:16:07image-image yang ada di sini.

1:16:09Gue tinggal masukin file-file di sini.

1:16:11Pas kita build, dia masukin ke

1:16:13static assets atau

1:16:15jadi file-file.

1:16:17Kekurangannya nggak bisa video.

1:16:19Jadi kalau mau ada video, jadi GIF aja.

1:16:21Embed all.

1:16:23GIF, GIF.

1:16:25Jadi tinggal

1:16:27pen-time

1:16:29nulis di sini,

1:16:31dan bisa minta

1:16:33kan bisa masukin durasi

1:16:35juga nih, berapa lama kira-kira durasinya.

1:16:37Nanti dia counting itu durasinya.

1:16:39Ada durasi soalnya di atas.

1:16:41Oh, terus di total ya?

1:16:43Ya.

1:16:45Kalau di paling

1:16:47depan, kayak

1:16:49kok nggak ada lagi. Tadi ada sih di atas.

1:16:51Kalau misalnya di refresh itu ada di atas dia.

1:16:53Wow!

1:16:57Ya, tinggal

1:16:59nulis.

1:17:01Ya, ya.

1:17:03Ujung-ujungnya tinggal nulis sih.

1:17:05Tinggal mainin di konten

1:17:07aja. Jadi nggak usah

1:17:09maksudnya nggak usah mikir

1:17:11markdown, segala macam.

1:17:13Alternatif pakai code lab ini sebenarnya

1:17:15menarik juga sih kalau memang mau

1:17:17bagi

1:17:19untuk

1:17:21seorang yang kita mau

1:17:23ngasih untuk penulis kontennya itu

1:17:25less technical.

1:17:27Jadi nggak perlu tau

1:17:29markdown format.

1:17:31Biar nggak suruh gitcon, gitcon, blablabla.

1:17:33Ya.

1:17:35Berarti sama juga dong kasusnya

1:17:37kayak tadi ada

1:17:39yang pakai notion,

1:17:41kalau orang yang nulis dokumentasinya itu

1:17:43less technical.

1:17:45Ya, notionnya bisa dijadiin ini juga kan.

1:17:47Bisa dijadiin

1:17:49site juga kan, public site juga kan.

1:17:51Sama.

1:17:53Ya, bisa juga di import ke markdown juga bisa sih sebenarnya.

1:17:55Iya.

1:17:57Ya.

1:17:59Dan

1:18:01terus terangnya solusi ini

1:18:03jauh lebih mudah buat saya waktu

1:18:05saya kerjain ini kayak

1:18:07sistem kebut 2 malam

1:18:09istilahnya.

1:18:11Kayak 2 hari lagi mau event,

1:18:13baru saya mulai

1:18:15mau pakai tools apa ya, gitu loh.

1:18:17Lebih cepat ya, karena

1:18:21kita fokus ke kontennya,

1:18:23kontennya aja ya.

1:18:25Iya, kepikiran,

1:18:27udah mau pakai docusaurus, mau pakai ini,

1:18:29belum ada tutorial kelihatan, saya belum tau.

1:18:31Mau pakai docusaurus, atau mau pakai

1:18:33WordPress. Kalau WordPress, nyari

1:18:35themes-nya. Aduh, ribet ya.

1:18:37Pakai apa ya? Pakai apa? Terus

1:18:39Google Code Lab juga deh, karena udah

1:18:41pernah tau pakai Google Code Lab, pernah pakai.

1:18:43Ya udahlah, cepat aja

1:18:45yang penting konten kan, yang sampai

1:18:47saat tutup workshop itu

1:18:49sebenarnya peserta nggak peduli kita mau

1:18:51pakai. Yang penting mereka bisa

1:18:53next, next, next, next, jadi sebenarnya kan.

1:18:55Ya udah.

1:18:57Code Lab deh.

1:18:59Ini tutorial ala

1:19:03SwiftUI, yang mana ya?

1:19:05Boleh share

1:19:07URL-nya mungkin,

1:19:09tapi disamarkan URL-nya.

1:19:11Kalau langsung URL nggak bisa.

1:19:13Nah, ini menarik juga nih.

1:19:15Kalau

1:19:17buat collaborate antara

1:19:19front-end dan back-end, lebih cepat pakai

1:19:21tools kayak Notion nggak sih, dibandingkan

1:19:23kalau push

1:19:25atau commit dulu?

1:19:27Kalau front-end, back-end,

1:19:29developer sih.

1:19:31Kalau front-end, back-end, ya swagger tadi.

1:19:33Kalau dari pengalaman pribadi ya,

1:19:35maksudnya pengalaman kerja

1:19:37ya nggak apa-apa, maksudnya code-nya nanti

1:19:39push deploy belakangan kan nggak

1:19:41apa-apa sebetulnya.

1:19:43Kalau pengalaman, pertama

1:19:45bikin kontraknya dulu di swagger.

1:19:47Terus

1:19:49jaman dulu

1:19:51juga saya pernah pakai

1:19:53yang namanya Faker.

1:19:55Jadi ada satu

1:19:57dummy generator yang sudah

1:19:59bisa dibikin.

1:20:01Kita import skema-nya kita ke Faker

1:20:03itu, nanti

1:20:05si front-end itu tinggal

1:20:07pakai endpoint dari Faker.

1:20:09Jadi di REST API.

1:20:11Sembari kita build back-end.

1:20:13Dan kalau sudah jadi,

1:20:15saat nyambunginnya,

1:20:17mudah-mudahan yang terjadi adalah

1:20:19clog.

1:20:21Jadi tinggal mereka ganti

1:20:23REST API endpoint

1:20:25atau GraphQL endpoint-nya,

1:20:27idealnya

1:20:31nggak ada bug.

1:20:33Idealnya langsung connect idealnya.

1:20:35Meskipun yang

1:20:37terjadi adalah dari

1:20:39back-end,

1:20:41contohnya

1:20:43data kan kita nggak bisa

1:20:45selalu tebak. Kalau pakai Faker

1:20:47selalu ada data-nya.

1:20:49Meskipun dibilang string

1:20:51selalu ada.

1:20:53Jadi kalau pakai Faker itu

1:20:55misalnya string 150 karakter

1:20:57dia bakal random

1:20:59bisa antara 100 atau 150.

1:21:01Sedangkan saat

1:21:03kenyataannya

1:21:05bisa jadi kosong.

1:21:07Atau bisa jadi lebih.

1:21:09Jadi

1:21:11bug-nya itu

1:21:13banyak yang kenanya

1:21:15misalnya kayak data-nya nggak ada,

1:21:17kalau kosong jadinya.

1:21:19Ternyata kalau kosong alkohilnya

1:21:21nul atau apa yang beneran

1:21:23anis-rektif.

1:21:25Jadi nul, jadi kenapa kan error.

1:21:27Nah, itu back-end sih

1:21:29terus yang terjadi.

1:21:31Itu diware scope dokumentasi sih.

1:21:33Itu scope endpoint testing.

1:21:35Kalau itu kan

1:21:37konteksnya, ya, lanjut-lanjut.

1:21:39Ya, jadi masalahnya

1:21:41banyak di sana tuh

1:21:43setelah kena konten

1:21:45nyata, terjadilah

1:21:47bang.

1:21:49Nggak semuanya Faker bisa

1:21:51ditercaya.

1:21:53Betul. Konteksnya kan API

1:21:55documentation. Gimana kalau

1:21:57misalkan, ya tadi, tutorial

1:21:59documentation.

1:22:01Atau how-to atau apa. Tapi

1:22:03ada kolaborasi antara front-end sama

1:22:05back-end.

1:22:09Umumnya

1:22:11umumnya

1:22:15biasanya

1:22:17kolaborasinya tuh

1:22:19sering terjadi

1:22:21dari

1:22:23si front-end

1:22:25butuh data

1:22:27yang

1:22:29belum ada.

1:22:31Yang sering terjadi seperti itu.

1:22:33Contohnya

1:22:35telah dapat feedback

1:22:37dari klien, "Oh, di table ini

1:22:39kolom ini kayaknya salah

1:22:41sedikit. Lebih bagus kolom ini diganti

1:22:43data-end ini."

1:22:45Dan ternyata di rest API

1:22:47endpoint-nya belum ada data itu.

1:22:49Jadi

1:22:51harus minta back-end,

1:22:53merubah outputnya.

1:22:55Jadi biasanya

1:22:57sering seperti itu.

1:22:59Kalau untuk hubungan

1:23:01antar back-end dengan front-end.

1:23:03Kalau kolaborasi

1:23:05bikin dokumentasi

1:23:07antara back-end sama front-end.

1:23:09Belum pernah sih gua.

1:23:17Dokumentasi itu

1:23:19milik

1:23:21beda ini ya,

1:23:23beda divisinya.

1:23:25Biasanya defrel ya, defrel.

1:23:27Lead yang bikin.

1:23:29Oh, lead. Terus.

1:23:31Kalau gua malah

1:23:33belum punya pengalaman

1:23:35bikin apa pun bikin kode yang

1:23:37kita pakai orang banyak.

1:23:39Kerja di tim kecil, keuntungannya adalah

1:23:41ya karena

1:23:43yang kode literly cuma 3 orang.

1:23:45Ya, yang...

1:23:47Ya, baca aja tuh kode.

1:23:49Di awal ada kontraknya,

1:23:51habis itu

1:23:53mungkin yang

1:23:55head-to-head sama notion di komentar

1:23:57di pertanyaan awal tadi,

1:23:59karena konteksnya kerjaan,

1:24:01pakai tiket

1:24:03Gira.

1:24:05Pakai confluensi, ya nggak harus Gira.

1:24:07Jadi pakai apapun misalnya.

1:24:09Buat tracking ya.

1:24:11Masing-masing orang, front-end, back-end,

1:24:13ada tiketnya sendiri-sendiri.

1:24:15Apapun yang relevan

1:24:17sama kode spesifik kita,

1:24:19itu taruh di tiket

1:24:21yang bukan kode ya.

1:24:23Kalau kode, ya baca sendiri.

1:24:25Kalau misalnya

1:24:27props-nya apa aja,

1:24:29kalau misalnya UI, ya

1:24:31di JSDoc atau TypeScript Definition-nya

1:24:33aja. Lagi-lagi karena timnya kecil,

1:24:35silahkan baca sendiri. Tapi kalau konteks,

1:24:37ada sesuatu

1:24:39yang harus dijelasin,

1:24:41taruh aja di tiketnya.

1:24:43Terus terakhir, paling ujung banget,

1:24:45end-to-end testing doang.

1:24:47Jadi di awal ada kontrak,

1:24:49di akhir ada end-to-end testing,

1:24:51kalau ada notes

1:24:53tentang yang

1:24:55subjektif, masing-masing gimana kita

1:24:57develop atau mungkin ada sesuatu yang

1:24:59tricky atau apa,

1:25:01update komen-komenan di

1:25:03tiket JIRA, dan ya itu pokoknya

1:25:05antara kontrak di awal,

1:25:07end-to-end testing di akhir,

1:25:09di tengah-tengah antara tiket JIRA sama

1:25:11baca kode.

1:25:13Karena timnya kecil, run-end, back-end-nya

1:25:15ya baik-baik aja. Tapi belum tahu

1:25:17kalau 1, timnya besar banget,

1:25:19dan 2, bikin product

1:25:21yang dipakai,

1:25:23bikin library yang dipakai orang banyak.

1:25:25Nah, itu kan udah rumit lagi.

1:25:27Itu kan udah diluar

1:25:29pure perkara kolaborasi

1:25:31front-end, back-end juga kan, kalau dipakai

1:25:33orang banyak, use-case-nya banyak,

1:25:35nah itu baru lebih ribet.

1:25:37Kalau bikin product

1:25:39yang dipakai oleh end-user,

1:25:41terus

1:25:43pernah bikin dokumentasinya,

1:25:45ngalamin nggak?

1:25:47Oh, pernah sih,

1:25:49tapi dalam skala kecil banget.

1:25:51Ya, yang bisa di-install

1:25:53orang, gitu kan.

1:25:55Itu pas heketonan-heketonan astro

1:25:57yang menang setengah, apa?

1:25:59Menang setengah dia.

1:26:01Menang setengah dia.

1:26:03Itu bikinnya,

1:26:05ya bikinnya simple sih,

1:26:07cuma,

1:26:09tapi udah cukup memenuhi yang koden

1:26:11tadi, kayak sintaksinya apa aja,

1:26:13kenapa dibuat kayak gini,

1:26:15sama cara pakenya, kayak step-by-step

1:26:17tutorial, yang nggak ada cuma recipe,

1:26:19atau how-to. Tapi kan,

1:26:21kalau itu karena cukup simple,

1:26:23ya nggak ada kolaborasi

1:26:25kayak front-end, back-end, atau team-team

1:26:27yang beda, kan? Orang bikin,

1:26:29cuma bikin library simple,

1:26:31bikinnya juga sendiri, ya udah, cukup

1:26:33straightforward.

1:26:35Hmm, iya, iya, iya.

1:26:37Jadi intinya, supaya

1:26:39ke-track ada, misalkan ada

1:26:41sesuatu yang special case dan lain-lain,

1:26:43dokumentasinya ke-track itu, entar

1:26:45pakai jira, pokoknya

1:26:47di-track aja, entar pakai jira,

1:26:49atau tulisan serupa, misalkan

1:26:51GitHub issue juga bisa, kan?

1:26:53GitHub issue, itu bisa

1:26:55dijadikan dokumentasi juga,

1:26:57atau discussion, atau project.

1:26:59- Dan jajan lebih sering nggak terdokumentasi

1:27:01sih, kalau apa, konteks pribadi,

1:27:03ya apa, janjian

1:27:05meeting aja udah,

1:27:07ngobrol doang. - Di GitHub ada

1:27:09ada wiki soalnya.

1:27:11- Oh iya, di GitHub ada wiki.

1:27:13- Wiki ada. Kalau pakai jira,

1:27:15juga ada konfluensinya, kan, buat bikin

1:27:17doks, kalau... - Aduh, capek banget,

1:27:19pakai konfluensi. - Formatinya nggak enak,

1:27:21kalau bikin tabelnya, kayak...

1:27:23itu tabel, itu ekspektasinya, kan,

1:27:25kalau pakai arrow atau tap, itu pindah

1:27:27sel. Ini nggak pindah sel

1:27:29atau manualnya gitu.

1:27:31- Oh iya.

1:27:33Iya. Nah, ini ada

1:27:35apa, informasi dari Damar, sudah

1:27:37dilengkapi. Ini emang Apple

1:27:39gila sih, bagus banget sih,

1:27:41kalau ngeliat dokumentasinya.

1:27:43Mana dia? Duh, kok hilang? Ini.

1:27:45Nah, ini ya.

1:27:47Tunggu.

1:27:49Di bawah ini.

1:27:51Iya. - Wow.

1:27:53Apa flashnya

1:27:55secara visual,

1:27:57tuh kayak visueli peeling.

1:27:59- Ini tulisnya apa?

1:28:01Kita nggak bisa lihat ya, nggak open source ya.

1:28:03Ini closed source.

1:28:07Oh iya,

1:28:09kalau teman-teman, apa,

1:28:11punya... - Ini pakai swift buatnya,

1:28:13apa mas?

1:28:15- Swift web kali.

1:28:17- Wasm, wasm.

1:28:19- Ini beneran apa?

1:28:21- Nggak tahu.

1:28:23- Ini bener.

1:28:25Wasm, wasm.

1:28:27Refresh. Eh?

1:28:29Nggak ada wasm.

1:28:31- Nggak ada.

1:28:33Itu CSS doang kali.

1:28:35- Pakai view.

1:28:41- Buat tiko pasang, sungguh bisa.

1:28:43- Iya.

1:28:45Buat teman-teman yang punya, apa,

1:28:47perangkat Apple, yang

1:28:49Macbook, atau Mac mini, atau

1:28:51apa, yang

1:28:53desktop itu,

1:28:55kalau bingung ya, bingung mau

1:28:57belajar apa, teman-teman bisa

1:28:59belajar Swift, si Apple

1:29:01itu menyediakan namanya Playground.

1:29:03Ini seru banget.

1:29:05Kayak main game. Ini bagian dari

1:29:07tutorial juga kan ya.

1:29:09Jadi kita belajar kode, sambil

1:29:11main game, itu bisa di install, ada

1:29:13di App Store, tinggal download gratis kok.

1:29:15Di tablet juga ada.

1:29:17Jadi kalau mau belajar, bingung mau belajar

1:29:19bahasa apa, belajar Swift dari sini.

1:29:21- Maksudnya gue bisa kasih anak gue main ini dong.

1:29:23- Exactly.

1:29:25- Nanti tiba-tiba jadi developer Swift.

1:29:27- Nggak apa-apa.

1:29:29- Terus ngata-ngatain

1:29:31developer web.

1:29:33- Nggak apa-apa.

1:29:35- Dengan kakak sama bapaknya sendiri.

1:29:37- Oh, pakai view katanya.

1:29:39Yang tadi pakai view.

1:29:41Keren juga ya.

1:29:45Nah ini.

1:29:47Dan dia kayaknya

1:29:49target audience-nya itu

1:29:51anak-anak soalnya game kan.

1:29:53- Iya, mereka

1:29:55sedang berusaha mengubah

1:29:57generasi.

1:29:59- Iya.

1:30:01- Nanti dia disuruh jalan kesini

1:30:03dengan pakai kode

1:30:05gitu, pokoknya keren lah.

1:30:07- Niat banget ya. Ini kayak butuh

1:30:09skill tersendiri buat apa?

1:30:11- Lego, Lego kan ada juga kan?

1:30:13Lego begini.

1:30:15- Dan udah beyond yang tadi

1:30:17kadren dokumentasi kan, sebenarnya ini tutorial.

1:30:19Tapi kayak tutorial yang udah

1:30:21ekstra banget yang butuh skill tersendiri kan

1:30:23buat nge-breakdown

1:30:25Swift itu sendiri.

1:30:27Kan kalau tutorial basic Swift atau

1:30:29getting started with Swift

1:30:31itu pasti banyak. Tapi ini nge-breakdown

1:30:33dalam format game yang

1:30:35menarik buat banyak orang, termasuk

1:30:37anak-anak atau orang yang awam loading

1:30:39udah skill set tersendiri itu kayaknya.

1:30:41- Yang jelas ini yang bikin

1:30:43kontennya bukan developer sih.

1:30:45Ada kolaborasi sama

1:30:49- Technical writer.

1:30:51- Ada technical writer. - Atau kayak apa sih?

1:30:53Kayak human-centric design, blablabla.

1:30:55Itu loh yang punya yang jenis-jenis

1:30:57yang title-nya aneh-aneh.

1:30:59- Ada

1:31:01- Instructor something gitu.

1:31:03Instructor apa gitu. Ada itu istilahnya tuh.

1:31:05Jadi dia memang tugasnya untuk

1:31:09mendesain sebuah

1:31:11pembelajaran dari A sampai

1:31:13Z sampai Finis.

1:31:15Dari start sampai Finis bentuknya

1:31:17terus pasti aset-asetnya

1:31:19ini yang susah kan.

1:31:21Susah dibikin gitu.

1:31:23Terus jalan ceritanya

1:31:25dan lain-lain. Jadi ya

1:31:27memang ini

1:31:29udah di luar ranah kita.

1:31:31Tapi ya, patut dicoba.

1:31:33Karena tutorial juga bagian dari tutorial.

1:31:35-

1:31:39Gue tadi barusan ngomong soal Lego

1:31:41juga ada Lego education kan.

1:31:43Begitu liat harganya

1:31:45kok mahal.

1:31:47- Pendidikan itu

1:31:49investasi mahal.

1:31:51- Tidak. Lagipun kok sih. Apa tadi

1:31:53technical writer, blablabla.

1:31:55- Tapi nggak lima ribu dolar juga kan.

1:31:57Ada sih yang

1:31:59900an atau 200an dolar.

1:32:01Tapi lima ribu dolar.

1:32:03- Legonya sendiri ada costnya.

1:32:05Itu buat tadi yang kayak

1:32:07expertisnya

1:32:09blablablanya mahal.

1:32:11- Ini masalah wipe-nya tadi.

1:32:13Karena dia ada

1:32:15layout shift-nya banyak banget.

1:32:17Waktu gue buka di mobile.

1:32:19Yang muncul dulu itu

1:32:21yang lima ribu dolar.

1:32:23Ah, lima ribu dolar.

1:32:25Tapi setelah dibiarin, baru

1:32:27muncul yang lain-lain.

1:32:29- Yang 100 dolar. Nah itu

1:32:31CLS-nya bukan CLS karena kesalahan

1:32:33nggak ngerti. - Emang sengaja kali ya.

1:32:35- Orang

1:32:37by now.

1:32:39Segampang itu.

1:32:41- Iya. Ini juga salah satu

1:32:43problem ya. Kalau pakai notion

1:32:45atau apapun di luar kode yang dibuat

1:32:47back-end atau front-end

1:32:49atau apapun biasanya suka beda.

1:32:51Makanya semakin dekat kodenya

1:32:53dengan dokumentasi itu semakin bagus.

1:32:55Jadi dia menghindari hal-hal seperti itu.

1:32:57Oke.

1:32:59- Cukup.

1:33:01Cukup dan kita menang 2-0.

1:33:03- Iya.

1:33:05Tapi kartu merah satu.

1:33:07- Oh.

1:33:09Kartu merah tuh di hitungnya

1:33:11nggak boleh mainnya. Berapa kali sih?

1:33:13Satu kali atau dua kali ke depan?

1:33:15- Dua.

1:33:17Kartu kuning dua kali,

1:33:19satu kali.

1:33:21- Oke deh. Kalau gitu

1:33:23terima kasih buat semuanya

1:33:25yang sudah ikut Nimrung malam hari ini.

1:33:27Ada banyak

1:33:29tools yang bisa kita cobain

1:33:31untuk ke depannya. Apalagi

1:33:33kalau teman-teman yang butuh buat dokumentasi

1:33:35untuk internal ataupun untuk end user.

1:33:37Kita ketemu lagi minggu depan dengan

1:33:39topik yang berbeda. Selamat malam.

1:33:41Selamat istirahat. Sampai jumpa.

1:33:43- Bye bye.

Suka episode ini?

Langganan untuk update episode terbaru setiap Selasa malam!

Langganan Sekarang
Diskusikan episode ini di GitHub

Episode Terkait

Ngobrolin Manajemen Kode Sumber - Ngobrolin WEB
EP 61

13 Des 2023

Ngobrolin Manajemen Kode Sumber - Ngobrolin WEB

Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...

Ngobrolin Dokumentasi - Ngobrolin WEB
EP 143

10 Sep 2025

Ngobrolin Dokumentasi - Ngobrolin WEB

🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Mari membahas tentang berbagai alat untuk membuat dan menampilkan dokumentas...

Rahasia Dibalik Konfigurasi File: INI, XML, JSON, YAML, TOML - Mana yang Terbaik? - Ngobrolin WEB
EP 62

19 Des 2023

Rahasia Dibalik Konfigurasi File: INI, XML, JSON, YAML, TOML - Mana yang Terbaik? - Ngobrolin WEB

Video ini akan membawa Anda dalam petualangan menjelajahi berbagai format file konfigurasi yang populer di dunia teknolo...

Komentar