Ngobrolin Linter - Ngobrolin WEB ep51

2:40ya kayak kata Mas Irfan minggu lalu ya, kerjaan kan jawabnya hal yang harus dipikirin,

2:48itu banyak pertimbangannya, banyak nggak bisa seenaknya, tiba-tiba ngulik,

2:52"Wah ada state management baru atau apa ya?" Nggak mungkin.

2:56Terus tiap hari kalau di kerjaan ngobrolnya ya sama teman yang pakai tag-tag yang sama.

3:02Lah iya namanya satu tim.

3:05Nah jadi maksudnya yang apa, cara mikirnya, terus alurnya, ya gitu-gitu.

3:12Bisa dibilang gitu-gitu aja, dan itu aja karena emang ada tanggung jawabnya.

3:15Tapi ini tuh kayak kita setiap minggu bahas macam-macam tuh kayak excuse aja,

3:20jadi bisa nyari-nyari, bisa ngulik, nyari hal baru, kalau ada yang menarik,

3:26ya bisa kita baca lebih lanjut lagi, kita coba.

3:28Dan kadang kalau harus mecahin suatu isu di kerjaan atau personal project,

3:35itu kadang beneran kebayang sesuatu yang kita pernah bahas, oh iya itu kan dulu pas di wizard testing pernah bahas X.

3:43Kayak apa ya, kalau Carlo ngomong atau misalnya kadang baca komen dari chat atau teman-teman yang nonton,

3:51itu kayak lebih masuk aja dibanding ya baca sendiri, sebenarnya kan bisa ya,

3:55baca artikel bisa, nonton video YouTube sendiri juga bisa.

4:00Biasanya speednya kali dua lah biar cepet lah dilancat-lancatin.

4:04Itu kan kayak suka belum tentu masuk, ya masuk pun nggak terlalu mendalam.

4:09Tapi kalau formatnya ngobrol gini kayak lebih masuk aja sih.

4:13- Betul, betul. - Dapat sudut pandang yang berbeda ya.

4:15Plus beberapa hal kayak kita pernah bahas API, pernah bahas module bundler, pernah bahas macam-macam,

4:22justu waktu kayak lagi ada kena di project sesuatu, oh iya kan pernah bahas di ngobrolin,

4:27saya langsung buka adalah videonya atau catetan kecil, catetan kecil kita, ya ini dia, ini dia, gitu langsung dapet.

4:35Iya, iya, iya. Kalau saya sih yang mungkin yang agak berbeda karena beberapa,

4:41saya pernah bikin podcast juga kan beberapa kali kan, podcast pertama ngundang Nara Sumber,

4:46podcast kedua yang ceritanya developer juga ngundang Nara Sumber kan.

4:49Jadi ngobrol berdua, satu Nara Sumber saya yang interview.

4:52Itu tadi yang saya garis bawahi dari Ivan adalah jadi lama-lama jadi kayak beban gitu.

4:59Wah harus cari Nara Sumber nih, harus siapin schedule dan lain-lain.

5:02Kalau ini kan pokoknya seminggu sekali waktu yang ditentukan,

5:09terus juga materinya juga nggak perlu disiapin, nggak perlu siapin pertanyaan macem-macem,

5:15bahkan kita ngundang Nara Sumber juga kita nggak, maksudnya pertanyaan apa, kita akan bahas topik ini secara general,

5:23tapi yang detail-detail pertanyaannya juga nggak terlalu itu mengalir aja kan gitu.

5:27Dan sering ngundang nyiapin pertanyaan yang dibahas. / Malah nggak ditanya gitu ya, kadang-kadang.

5:34Iya malah keasikan topik yang lain. Jadi kayak apa ya, ya nggak ada beban itu,

5:38jadi bukan sesuatu yang wah harus dikerjain pokoknya seminggu sekali nggak.

5:42Jadi kayak ngumpul aja, temen bertiga ngobrol udah gitu.

5:46Atau kalau ada Nara Sumber ya, mungkin kita agak sedikit persiapan kayak sama Thomas gitu kan,

5:51itu pertanyaannya harus kita kirimin, Giseline dan lain-lain itu kita harus prepare gitu kan.

5:56Tapi ya selain itu ya udah, bahkan kayak sekarang juga kita mau bahas apa ya, bahas linter, bahasnya apa,

6:04ya udah kita ngobrol aja gitu. Jadi bahkan sebuah topik yang belum kita tahu pun kita bisa bahas gitu.

6:11Jadi inilah yang menarik, sisi menarik dari format kayak gini karena ya saya baru islanya baru bikin yang seperti ini,

6:21baru ini gitu dan ternyata it works. Kuncinya satu, harus ada temen. Biasanya kalau misalkan kita mau commit,

6:27apa ya, konsisten, itu harus ada temennya. Kalau sendiri itu susah.

6:31- Kalau sendiri pasti excuse-nya banyak. - Plus temennya juga harus commit.

6:35Iya betul. Kan kalau misalkan ada temen kan nggak enggak gitu.

6:41Iya sama lah, visinya sama kan, tujuannya sama gitu. Jadi udah enak lah, udah cocok lah gitu.

6:47Oke, kita sudah 6 menit dan kita baru ngobrolin tentang acara ini. Nanti kita rencananya akan ada episode khusus ya.

6:59Ada episode khusus kita bahas tentang perjalanan acara ini. Nanti di 2 episode mendatang, di episode ke 53.

7:09Karena ini kebetulan 2 episode mendatang kita rekaman, jadi tidak live. Karena ini teman-teman saya...

7:19- Team member. - Keluar kota, keluar negeri.

7:24Jadi kita rekaman, kita rekaman 2 episode ini. Terus nanti episode yang live itu kita akan ngobrolin tentang ngobrolin web.

7:32- Oke. - Ngobrolin, ngobrolin web.

7:35Iya ngobrolin, ngobrolin web. Nah malam hari ini kita akan membahas tentang static code analisis atau yang lazim dikenal sebagai linter ya.

7:49- Linting. - Linting.

7:52Dan tahu nggak commit yang paling sering itu apa?

7:57- Commit yang paling sering? - Package test.

8:00Salah, fix linter error, fix linter error. Sudah di submit, ya gagal linternya.

8:10Terus benerin fix linter, commit message nya fix linter error push lagi.

8:15- Terus masih gagal fix linter error push lagi. - Di reject ya kalau linternya error ya.

8:22- Ignore error. - Ignore error. Nanti diberikan satu error nya ditambahin error, eh nggak boleh ignore.

8:30Sudah capek-capek benerin linter, terus ternyata ininya bot CICD nya down.

8:42Terus gimana linternya? Get commit, allow empty, push lagi.

8:50- Pengalaman pribadi nih kayaknya. - Iya, karena kadang ya elah ini bot sudah lama jalannya.

9:01Terus kemudian sudah mau buru-buru, nggak mau jalan, mau nge-trigger nya gimana yaudah.

9:08Get commit tapi allow empty commit, allow empty. Jadi commit nya commit kosong supaya nge-trigger.

9:15Isi mesej nya trigger linter. - Oke, anyway. - Itu curcol, itu curcol.

9:28Jadi Static Program Analysis atau Static Code Analysis adalah sebuah program

9:36yang melakukan analisa terhadap aplikasi atau kode kita tanpa di eksekusi.

9:43Tanpa dijalankan, tanpa di eksekusi. Perform without execution.

9:48Jadi kalau misalkan kita jalanin kodenya, bisa aja error. Apalagi JavaScript gitu.

9:56Atau bahasa yang nggak ada typenya, interpreter yang kalau error itu user bisa lihat.

10:07Nah, itu kan bahaya ya. Jadi misalkan kayak typo, salah ketik, terus formatting dan lain-lain gitu kan.

10:15Si usernya bisa lihat, wah ini typo. Jadi fungsi dari Static Code Analysis ini adalah

10:23mencegah hal itu sedini mungkin. Jadi ketika kita, apakah kita nyalain di kode editor kita,

10:31terus tiba-tiba ada garis merah gitu atau garis kuning, warning, dan lain-lain. Atau ketika kita

10:38push tadi seperti kata Ivan, itu ada linter yang berjalan atau Static Code Analysis ini berjalan.

10:44Dia cek kode kita, apakah sudah sesuai dengan kaidah-kaidah yang disepakati bersama di perusahaan.

10:51Kalau sudah berarti lewat, kalau tidak berarti direject. - Biasanya disepakati perusahaan

10:57kita ini yang siapa yang setup di awal. - Oh iya. - Disepakati pembuat library yang digunakan

11:04oleh teman kita yang men-setup project di awal. - Sampai kadang, ini siapa sih yang setup?

11:10Ya Allah, ini aja tuh nggak perlu. Bikin susah. - Biasanya begitu.

11:18- Kadang-kadang juga, ih ini susah amat ya, siapa sih yang setup begitu. Saya sendiri. Saya sendiri.

11:28- Get blame. - Karena kadang-kadang kan awal project itu kan kita masih idealis kan.

11:35Kalau udah di deadline, udah beda lagi tuh kasusnya tuh. - Tenggantung trendingnya kemana.

11:41- Ternyata trendingnya RBNB, yes Lina, pake-pake. - Jadi ini salah satu apa ya, salah satu aplikasi

11:56atau program yang biasanya ditandemkan dengan code review. Kalau ada code review, biasanya itu barengan.

12:05Atau sebelumnya ya, sebelum code review, biasanya ada di jalankan. - Tergantung workflow.

12:13Jadi kalau di tempat saya, cuma beda project, beda kadang. Slightly different ya, jadi mereka punya caranya masing-masing.

12:24Ada yang betulnya jangan nge-tag orangnya dulu sebelum linturnya benar.

12:32Jangan submit code review dulu sebelum linturnya benar. Ada yang fine-fine saja.

12:41Tapi semua project rata-rata kalau linturnya nggak pas, nggak boleh di-mode.

12:48- Nah, static analysis sendiri itu kalau dari referensinya Ken Seedot, salah satu influencernya JavaScript,

12:57dia meletakkan static analysis itu di bawah unit testing. Jadi kalau misalkan teman-teman belum testing ya minimal banget ya.

13:07- Early check itu static analysis ya. - Static analysis ya.

13:13- Sebetulnya ini kalau sudah testing, kalau sudah testing kan codenya dijalankan kan?

13:21Kalau ini kan sebelum code dijalankan kan. Jadi unit testing juga termasuk, ya termasuk code kan.

13:29Kita nulis testing itu kan code, jadi code itu ya bisa di analisa juga.

13:34- Nah, kan ini semua sebetulnya kan bagian dari QA kan, quality assurance ya. Kita tuh selalu mikir QA itu kayak satu step atau satu hal doang.

13:52Padahal kan sebetulnya nggak ya istilah, walaupun mungkin prakteknya QA, ada satu orang khusus QA,

13:58tapi kan sebetulnya kalau secara apa, philosophy, quality assurance itu kan luas banget ya, memastikan kualitas kode kita.

14:07Nah, ini kayak di contoh ini kan di satu sisi yang paling dasar, paling simpel, mulai dari static analysis.

14:14Dari situ kan udah bisa apa ya, memastikan hal-hal dasar lah minimal di dalam kode kita, kualitasnya baik.

14:24Jadi sebelum dijalankan pun, ada hal-hal yang wah ini bakal repotin, ini nggak sesuai konvensi, nggak sesuai standar,

14:31atau penamaannya misalnya bisa bikin ribut nantinya. Misalnya di global scope kita punya satu variable namanya A,

14:38terus di scope bawahnya lagi ada A juga. Itu kan tanpa dijalankan, ya bisa error, bisa nggak, nggak tahu, ini kan belum dijalankan.

14:47Tapi kan itu suatu saat bisa nge-repotin kita. Jadi static analysis itu bagian dari memastikan kualitas kode kita,

14:56aplikasi kita di paling dasar. Nah, sebaliknya di paling ujung tadi yang paling atas puncaknya kan, apa, end-to-end ya.

15:03Di ujung jadi, dijalankan semua dari awal sampai akhir. Nah, jadi QA itu kan jadi ada yang static, ada yang dynamic,

15:11ada yang automated, ada yang manual. Jadi kayak sebetulnya kan code review itu kan semacam, ya code review kayak cuma

15:20kalau teman kita baru lihat kodenya, belum dijalankan, itu kan sebenarnya kayak linting juga tapi pakai manusia ya.

15:26- Iya, betul. - Jadi itu tadi masuk akal sih yang Ivan bilang sebelum di, apa, ISlin-nya harus lolos dulu.

15:33Kita pakai jasa komputer lah, automated library untuk nangkep atau ngecek hal-hal yang bisa ditangkap programatik.

15:43Kalau itu udah beres, baru dicek sama manusia. Iya, terus habis itu kalau code review sih pasti sambil dijalankan juga ya,

15:50pasti dijalankan, pasti ada testing lain-lainnya. Cuma itu kayak langkah. Itu linting atau ISlin itu jadi masuk akal.

16:00Ini make sense banget kalau kita memandangnya sebagai bagian dari proses QA. Nah, dulu banget, soalnya pengalaman pribadi sih

16:08pas belajar ya, belajar sendiri juga, terus baca tutorialnya ya. Maksudnya nggak lengkap ya, loncat-loncat lah sesukanya.

16:14Terus lihat ISlin itu buat apa tuh, sebenarnya sampai lama kayak nggak ngerti ini, apaan sih ngerepotin banget.

16:20Udah dikomplain sama TypeScript, dikomplain sama ISlin juga, ignore-nya caranya lain-lain.

16:26Kalo ngomongin ignore, pre-tier bisa diignore, TypeScript bisa diignore, ISlin bisa diignore.

16:33Tapi maksudnya kita balikin, berarti ISlin itu tujuannya adalah memeriksa kualitas dan standarisasi gaya penulisan kode.

16:43Gaya penulisan kode, iya. Seperti yang Eka sebutkan tadi ya, kalau kita ngomongin static code analisis dan juga linter,

16:56kalau di JavaScript, satu tools yang sudah pasti temen-temen tahu adalah ISlin kan.

17:04Tapi sebelum itu, sebelumnya ada beberapa, ada JShin, ada JSlin, ada standard JS, walaupun standard JSnya ada sedikit berbeda ya.

17:23Tapi di awali, kalau nggak salah JShin ya, JShin dulu apa JSlin dulu ya?

17:29Ini kenyakitnya, apa orang bikin library open source ya, kayak cuma hurufnya diganti dikit-dikit, ada JSlin, ada JShin.

17:38Next, next.

17:40Iya betul. Nah ini, tujuannya juga sama ya, static code analisis for JavaScript.

17:46Karena apa ya? Karena JavaScript ya memang bahasa yang sudah cukup jadul.

17:52Kalau bahasa-bahasa yang modern sekarang itu biasanya formater dan linter itu terkadang sudah diinclude, sudah dimasukkan ke dalam bahasa sebagai satu platform gitu.

18:04Jadi kayak Go itu ada Go formater gitu kan, Go FMT dan lain-lain gitu.

18:10Jadi berhubung JavaScript jaman dulu, mungkin kita, JavaScript yang sendiri dibikin bukan untuk bikin aplikasi yang kompleks.

18:19- Jadi mereka merasa belum. - Bikinnya seminggu banget ya? Bikinnya 10 hari.

18:2410 hari gitu kan. Setelah itu berkembang sampai sekarang orang bisa bikin aplikasi di back-end, di front-end, di IoT, embedded system, dan lain-lain.

18:35Akhirnya butuh lah tools-tools seperti ini yang akhirnya muncul dari komunitas, itu justru dari komunitas.

18:40Dan yang paling populer adalah JSlin ya, JSlin.

18:46Loh, kok nggak bisa diketik. Nah ini dia, JSlin.

18:50Ini yang paling terkenal. Cuman sebelum itu ada JShin, dan bahkan ternyata JShin ini masih dikembangkan sampai tahun lalu.

18:59- Masih di update sampai. - Masih di update sampai 2022.

19:03Tidak abandoned ya, artinya ya. Masih bisa dipakai gitu ya.

19:10Dan kalau lihat di sini, masih. Kalau lihat di sini juga nggak main-main sih yang pakai, nggak tau nih, pakainya di mana ya. Mozilla, Wikipedia, Facebook, Twitter.

19:21- Kodenya Mozilla 5 tahun lalu. - Iya, bisa jadi dulu dipakai, habis itu sekarang mereka udah migrasi kan nggak di update juga kan.

19:29Jadi fungsinya sama, cuman mungkin ekosistemnya berbeda.

19:34Yang membuat JSlin berkembang seperti sekarang salah satunya adalah banyak plugin-plugin yang bisa kita gunakan jadi lebih...

19:40- Extendable banget. - Extendable.

19:42- Ada JSlin juga. - Dan sebetulnya ada TSlin.

19:45Kalau TSlin relatif baru ya. Terus kayaknya akhirnya nggak dikembangkan aja tuh, gimana ya nasibnya.

19:53- Digabungin ke JSlin aja kali ya? - Diperkaitin ke EO, diintegrasiin sama JSlin.

20:02- ISlin, betul. - Pakai TypeScript ISlin.

20:07- Nah, JSlin sendiri masih dikembangkan sampai bulan lalu, masih ada commit.

20:15- Jadi ini masih aktif ya. - Minimal patch lah kali.

20:18- Masih aktif, minimal patch. Ya pokoknya tidak di-abandon walaupun yang pakai juga mungkin tidak sebanyak ISlin.

20:27- Tapi yang menarik adalah... - Mungkin nggak ada user baru, tapi kan existing user

20:32nggak harus migrasi semua ke ISlin. Gimana yang menarik?

20:37- JSlin ini yang bikin adalah si Pak Douglas Crockford, ada yang tahu ini?

20:42- Yang bikin buku JavaScript yang tipis. - Yang tipis apa yang tebal?

20:50- Kan ada memes-nya tuh ya. Buku tebal, definitive guide, terus ada buku yang tipis ya.

20:58Ini coba kita lihat ya, bukunya apa ya judulnya ya? Javascript The Good Parts.

21:05Ada memes-nya di sini? Oh nggak ada ya. - Kok mirip script Javascript?

21:15- Masa? Nah ini, jadi Javascript The Definitive Guide itu tebal sekali ya.

21:25Nah, si Pak Douglas ini bikin yang tipis-nya aja, Good Parts-nya aja.

21:30- Good Parts-nya... - Sedikit sekali.

21:33- Itu satir ya, dia kan mencandain bahasanya sendiri, guide-nya tuh tebal banget, susah banget.

21:42Maksudnya kan banyak yang harus dipajarin. Good Parts-nya sedikit.

21:46- Jadi beberapa hal yang bagus-bagus saja diambil. - Kalau satu, yang satu itu yang di-beautify,

21:57yang kecil itu yang sudah di-aglify. - Dia yang bikin dan masih aktif sampai sekarang,

22:06yang minimal masih di-maintain lah ya. Nah, ISLIN ini yang de facto.

22:13Jadi kalau teman-teman biasanya bikin project gitu ya. - Ya lucu banget tuh itunya.

22:19- Iya, animasinya ya. Kalau bikin project kayak dulu create track app atau create feed,

22:27NPM create feed gitu ya, pakai feed dan lain-lain, itu sudah include biasanya.

22:34Jadi tanpa ditanyain lagi. Eh, ada ditanyain ya? Mau pakai ISLIN atau enggak?

22:40- Tapi biasanya default-nya pasti aktif. - Aktif ya, default pertanyaannya ya.

22:45Jarang sekali kita menjalankan NPM init ISLIN sekarang. Kalau dulu saya sempat beberapa kali

22:52kalau bikin project, biasanya masih pakai NPM init apa atau ISLIN init dulu ya, zaman dulu ISLIN init.

22:59Terus abis itu bisa pilih mau style-nya Google, JavaScript style Google atau JavaScript style Airbnb,

23:10yang paling terawal kalau di JavaScript style Airbnb. - Configure ISLIN favorite kita semua.

23:15Bukan favorite sih, cuma saya sering di include dulu kan kayak 2019, 2020.

23:21Iya, kalau nggak salah, iya. Minimal 2020 tuh kayaknya semua starter, starter lah, DIM lah, template lah,

23:31apalah, pokoknya yang kayak gitu tuh pakenya ISLIN config Airbnb. Pertama saya bingung,

23:36ini kenapa keurusannya Airbnb di sini? Ternyata pas dilihat karena open source juga dilihat,

23:42oh ternyata mereka publish config ISLIN yang dipakai di produknya mereka sendiri.

23:48- Loh, testimonialnya beliau. - Iya, kita baru gosipin dia tadi ya, motivator.

23:56Nah, dulu awal-awal saya agak rebel, saya nggak milih Google atau Airbnb, tapi saya lebih milih standard JS.

24:04Ada yang pakai nggak standard JS? Salah satu perbedaan, perbedaan antara ISLIN konfigurasi dengan standard JS.

24:14Standard JS ini udah di include semuanya, jadi ada formator, ada style guide-nya yang tadi Airbnb atau Google,

24:22nah, tapi standard JS ini tidak menggunakan titik oma. - Kekunya dia sendiri?

24:26- Iya, salah satu perbedaannya, jadi nggak pakai titik oma. Jadi kalau ada titik oma, dia apus sama dia.

24:32- Tapi dia nerdahood pakai pre-tier juga, maksudnya dia punya konfigurasi dengan pre-tier.

24:37- Kita bukan teman, Mas Riza. Kalau Mas Riza pake ini, kita bukan teman. Kita bukan teman.

24:41- Gak, bukan teman. - Kita rumit, bukan teman.

24:46- Dulu.

24:51Tapi berhubung lama-kelamaan kan pakai standard JS, terus berpikir kalau saya, biasanya saya ngajar gitu kan,

25:04mengajarkan teman-teman yang baru gitu kan, ternyata lebih cocok pakai titik oma.

25:10Akhirnya saya beralih ke Yeslin yang menggunakan titik oma, tapi saya tetap ngetiknya nggak pakai titik oma.

25:15Begitu di-safe, baru ditambah titik oma. - Baru kita teman.

25:19- Baru kita teman lagi ya. Temenan lagi ya, siap. - Iya.

25:25- Nah, ini dia JavaScript style guide, linter, n-formator jadi satu. Jadi nggak perlu pakai konfigurasi.

25:32- Pakai pre-tier? Enggak? - Eh, Anda udah pakai Yeslin kalau nggak salah. Kalau nggak salah Yeslin deh.

25:41- Kan pre-tier baru. - Apa? Sekarang udah sendiri ya?

25:43Iya, pre-tier lumayan baru. Apa? Jangan-jangan dia udah bikin sendiri ya?

25:47- Iya, kirain kalau sekarang kan Yeslin ada integrasinya, Yeslin pre-tier biar kalau pre-tier dipake ketengan,

25:55dia pakai sendiri kan dia nge-mark error. Nah, kan sebenarnya Yeslin ada pre-tier, ada integrasi pre-tier-nya kan

26:02biar kalau misalnya ada error di apa? - Ya biar nggak berantem.

26:07- Biar nggak di semprot 2 kali kan, biar sekali aja di itu sama Yeslin. Nah, kirain maksudnya si standar JS itu

26:14tadi kayak gitu ya, Pak? Bukan ya? - Dia pakai Yeslin ya, pasti.

26:18- Oh. Cuma dia pakai Yeslin. Jadi kayak, kayak inilah konfigurasi, jadi kayak misalkan konfigurasi Airbnb,

26:28tapi dibungkus sama dia supaya kita nggak perlu install, nggak perlu pilih konfigurasi, oh maunya, apa,

26:35pakai Yeslin RC gitu, Yeslin rc.json atau apa gitu. File konfigurasi.

26:40- Zero config lah ya, jadi kayak apa? - Zero config, ya. Jualannya zero config.

26:43- Ya. Jualannya zero config. - Please enable default, zero config, nggak usah mikir deh langsung jalan. Nah, giliran

26:48tiba-tiba nanti ada yang harus di-customize, pusing. - Pusing, ya. Nah ini.

26:54- Tapi ya, maksudnya apa ada manfaatnya? Bisa apa? Getting started quickly.

27:00- Iya. Usage-nya juga ya tinggal jalanin aja, npx standar gitu. Ampir, ya, sama lah. Under the hood-nya di belakang layarnya

27:11kita set up Yeslin juga, jadi Yeslin dan konfigurasi yang menggunakan si standar JS ini, yang disepakati oleh si standar JS.

27:22- Dan kalau sudah pakai IDE, dia bisa autosave, bisa langsung auto-format. - Autosave, iya. Biasanya begitu.

27:30Jadi kadang-kadang kita nggak nyadar, ini kita pakai Yeslin, kita pakai Prettier untuk formater,

27:35karena sudah di-set up di Visual Studio Code atau di project-nya atau di Visual Studio Code-nya editor atau editor yang lain, gitu.

27:45Nah, terus apa lagi? Ada lagi yang baru-baru. Yang baru-baru itu ada yang namanya Roam beberapa waktu yang lalu ya.

27:59- Yang bikin tuh apa ya? Yang bikin apa gitu? Ini nggak jelas ya. Maksudnya pembuatnya Roam itu orang yang pernah bikin live dari open source terkenal.

28:11- Iya, has been archived. Jadi ceritanya gini, Roam itu beberapa tahun yang lalu kan dia announce kalau bikin project yang namanya Roam,

28:24itu berangkat dari tools-tools yang digunakan di Facebook kalau nggak salah, meta ya. Mungkin yang bikinnya juga dari orang sana.

28:31Nah, lalu beberapa minggu yang lalu saya dengar kabar bahwa Roam ini berubah nama menjadi Bayom. Padahal Roam ini sudah sempat dapat funding gitu-gitulah.

28:42Entah kenapa, mungkin ada sesuatu hal akhirnya sekarang berubah menjadi Bayom namanya.

28:47Yang logonya mirip sekali seperti Remix. Bukan logonya, font-nya yang ini. - Ya, logotype kan.

28:59- Logotype, iya. Nggak tahu kenapa dia berubah nama, kenapa. - Teori konfigurasi.

29:09Ini mereka bikinnya kalau nggak salah menggunakan Rust untuk bahasanya. Jadi yang di jual adalah kecepatannya.

29:18- Sudah pernah nyoba, Mas? - Belum.

29:21- Mereka juga all-in-one nih. Designed to replace Babel, ESLink, Webpack, Pretier, Jest.

29:28- Iya, ini lebih all-in-one lagi. - Iya, dari testing, static analysis, compiler, transpiler.

29:37- Formatter. - Oh, ini ada ceritanya ternyata ya.

29:41How it started. Before explaining the reason for the fork, I'd like to give some context.

29:48Jadi dia, ini siapa nih orangnya? Ini ya, Emanuel Stopa ini ya. Dia join Roam project.

29:55Projectnya ditulis dengan TypeScript. Kemudian, tuh, di license under meta, OSS Umbrella.

30:04- Oh, gitu. - Ya kan. Meta is excellent incubator for OS project,

30:10but some people didn't like it. At least in my impression.

30:14- Masih ada yang kebedatan, karena takutnya kan kepentingan.

30:19- Terus, NPM package Roam belong to other person. - Wah, gimana nih.

30:24- So in ownership change, there were already a lot of version number used.

30:28Jadi mungkin namanya itu udah dipake sama orang lain dengan package yang berbeda. Mungkin ya.

30:34- Ya. - Atau dipegang sama si meta juga? Mungkin ya. Mungkin. Nggak tahu juga nih.

30:39- Another person sih. Kayaknya nggak ya. Jadi pihak ketiga yang nggak ada urusannya sama dia ataupun meta.

30:47- Ya. Setelah projectnya keluar dari OSS Umbrella. - Keluar ya, maksudnya nggak.

30:56- Keluar, kemudian mereka bikin. - Ngerjain itu tuh intinya nggak berhasil, nggak berhasil.

31:03- Iya. Mereka bikin perusahaan nih, Roam Tools Incorporated. Kemudian akhirnya tidak berhasil ya.

31:12Because I believe from the mission. So I decide to quit my job and join the adventure.

31:18In few weeks I join Roam Tools Incorporated as full-time employee work on developer tools as my daily job.

31:26For me it's like dream comes true. Not all start up, many succeeded.

31:31- Nggak berhasil ya. Berarti gagal ya. - Iya. PHK itu tadi tuh apa, lay off semua, bubar.

31:39- Bubar. Dia join Astro. Ini Astro yang kemarin. Iya dia join Astro. - Astro Metaframe Work.

31:45- Metaframe Work. Full-time. Terus abis itu kayaknya nih saya curiganya Bayom ini adalah

31:53Incorporatednya hilang. Jadi ini jadi huli community project. Kayaknya ya.

31:59- Ya. - Nah, dia tetap mampu ke Roam.

32:03- Masih passion sih. Masih pengen. Cuma gak bisa dijalanin sebagai perusahaan komersil.

32:08- Tidak bisa. Iya. Tidak bisa di monetisasi lah ya. - Tetep harus kerjain somewhere.

32:11- Tapi pengen. Dia pengen bertahanin. - Nggak. Jadi Conflict of Interest juga kan.

32:18Kalau dia kerjain Roam, ibaratnya masih kerjain punya nya sih Roam Tools Incorporated.

32:23- Jadi dia udah kerja di Astro. - Oh ada asosiasi sama Metaframe.

32:30- Jadi bisa Conflict of Interest. Mungkin ya. Dan melanggar kontrak.

32:35- Tapi yang belum beda apa? Apakah kebetulan logonya kayak remix?

32:39- Nah itu. Itu banyak kontroversi juga di Twitter ya. Nah ini yang dijual adalah VES.

32:44Karena dia pakai Rust tadi. Simple Zero Configuration. Scalable.

32:49Optimized. Batteries Included. Karena semuanya udah ada TypeScript, JSX, dll.

32:55Nggak perlu di install plugin-plugin lagi. Cara pakenya gimana? Kita lihat.

33:00Saya belum pernah pakai soalnya. Install biasa lah ya. Standard ya.

33:05Save. Def. Kemudian. - Sekarang tuh di petunjuk instalasi udah bisa pakai BUN ya. BUN.

33:12- Oh iya. Oh iya bener. - Bisa diinstall di BUN.

33:16- BUN? BUN atau BUN sih? - BUN.

33:20- Nggak tahu. Ini nanti perlu ada pronunciation guide ya. Kayak dulu Vite juga kan orang ada yang baca Vite apa Vite.

33:27- Wah ternyata bacanya Vite. Basah Perancis artinya Vite.

33:32- Oh si BUN ini ternyata ini ya. Bisa buat installer juga ya.

33:38- Bisa lah. - NPM. Penggantinya NPM juga. Eh bukan pengganti, alternatif dari NPM juga ya.

33:45- Tapi bisa bahas BUN. - Bisa, bisa.

33:49- BUN dan NPM belum pernah kan? - Belum, belum. Udah ada yang pakai belum?

33:54- Belum. Ntar gue coba deh. Habis dari sini gue coba. - Mantap.

34:00Konfigurasi nggak ada. Ini bisa pakai init aja. Terus abis itu kita bisa set up juga. Eh tadi katanya zero configuration ya.

34:10- Rules-nya apa? - Ya nggak zero-zero amat lah.

34:15- Ini mirip-mirip juga ya. Seperti eslin ya. Enable True. Rules-nya Recommended True.

34:20- Cuma jadi satu aja semua. Itu tadi yang kayak linker, formater.

34:25- Oh iya. Jadi kita nggak perlu nambahin di NPM script. Di sini udah bisa jalanin biome check sama biome format untuk formatting.

34:33- Udah. Kalau kita mau pakai editor konfig bisa pakai facebook juga bisa. - Oh iya nggak usah pake name command sendiri ya.

34:38- Jadi dia udah ada command line sendiri. Ya eslin juga bisa sih. Eslin apa ya? Eslin nama file ya? --fix gitu kan?

34:52Iya. Sama aja sih. Sama aja. Dan sudah ada VS Code extension juga. CI setup juga udah pasti bisa.

35:03- Jadi editor belum ya. Kalau editor aneh-aneh. Berarti belum bisa. Kalau eslin itu kan salah satu keumbulannya yaitu ekosistemnya kuat banget kan.

35:12Jadi selain VS Code itu sebetulnya integrasinya yang kayak Sublime Text lah, Vim lah, Emacs lah, ada semua.

35:21- Aman. Maksudnya orang pake developer pake apapun dia support. - Itu. Ada semua dia. Eclipse juga ada. - Masih ada ya orang pake Sublime Text, Eclipse dan lain-lain.

35:33- Bukannya kalau Eclipse itu Jetbrain bukan? - Bukan. Jetbrain itu IntelliJ.

35:41- Oh iya IntelliJ betul. - Visual Studio. Bracket. Ada yang masih pake bracket dari Adobe?

35:47- Editor. - Bahkan nggak pernah dengar sama sekali baru sekarang ini.

35:53- Build Tools juga bisa pake grant tuh? Masih bisa? - Baru loh itu bracket.

35:58- Bracket lumayan baru. Dia launchingnya barengan Sublime Text 3. - Bentuknya kayak kurawal kan? - Kurawal ya.

36:07- Iya bracket kan. - Mau pake command line juga bisa, dikonekin ke source control juga bisa, ya itu lah.

36:17Dan yang menariknya di sini banyak preset-preset ya. Banyak preset. Dan juga preset-presetnya bisa didistribusikan ke NPM.

36:30Jadi configurable, semua modular. - ESLin Preset React kalau mau menjahit.

36:37- Iya kalau misalkan temen-temen nge-fan sama Cancidot, dia punya sendiri itu presetnya.

36:42Jadi kita bisa install, ESLin Preset Cancidot misalkan, nanti kita bisa ngikutin gayanya dia.

36:51- Tapi nggak. - Dia kan bikin banyak tutorial ya, workshop, jualan kursus juga.

37:01Jadi ya lebih praktis aja kali ya kalau misalnya kita coding kan, kalau kita ngikutin tutorial atau kursusnya, program lesson-nya dia kan kita nge-forkodenya yaudah.

37:12Mungkin dia bosan juga kali ditanyain orang ini setting lesson-nya kayak gimana.

37:17- Iya. Kalau temen-temen mau konfigurasi secara manual, file konfigurasi bisa ditaro di .eslin.rc.js, eslin.rc.jjs, yaml, yml, json, atau bisa ditambahkan dipakai json juga sebenarnya.

37:36- Yang semuanya di root folder. - Iya semuanya di root project. Kenapa semua harus di root folder, jadi sampah. Kenapa nggak di konfig.

37:47- Slash-config gitu ya? - Iya. Kenapa semua nggak, pada bikin masing-masing gitu, slash-config, dumb aja semua ke slash-config, kenapa harus di root folder, semuanya jadi sampah.

37:57Bayangin dari eslin, eslin ignore, rtrc, rtrignore, docker, dockerfile, dockerignore, git, gitignore, apa lagi itu semua tuh.

38:15- Kalau pakai turbo repo atau nx atau sejenisnya bisa dipinggirin semua di import. - Tapi bisa kan sebenarnya kan kalau pakai command line kan.

38:27Konfigurasinya kita tulis aja, -jconfig/myconfig.json. - Iya kalau sudah sampe banyak-banyak ininya.

38:36- Tapi settingnya konfignya ya harus di file. - Iya, tapi kalau kita konfig sendiri misalkan, eslin.rc.js, terus kita tambahkan prefix untuk folder-nya konfig. Bisa nggak? Belum tahu juga nih.

38:53- Nggak bisa. - Nggak bisa ya? - Nggak bisa dong. Kecuali kita bikin sebagai package. Kita gimana caranya nih misalnya entah kita pakai turbo repo atau apalah kayak local, apa linking, apa namanya soft link, hard link.

39:09Kita nge-link karena kan itu package. Bisa, kita bisa meng-extend keunggulannya eslin kan ya itu. Ada ekosistemnya, kita bisa pakai library. Nah kalau kita mau ngakalin di lokal nih biar lokalnya nggak penuh .file, ya kita ngakalin soal-alah-alah itu library.

39:29Jadi ya misalnya pakai yarn workspaces ya. Entah turbo repo atau yarn workspaces itu kan bisa dipakai buat apa sebenarnya di lokal itu di-link kayak soal-alah-alah itu apa, install suatu package atau dependency.

39:46Ini contoh konfigurasinya. Jadi ada extend. Kita bisa extend seperti yang tadi kita udah bahas. Kita mau pakai rule siapa yang recommended, atau pakai react, atau typescript dalam hal ini. Terus parsernya juga kita bisa pakai parser yang lain.

40:06- Bubble? - Bubble, ya. Ada swx, ada banyak-banyak. Disini ada ts-config juga, ada plug-innya juga, dan beberapa rules. Rules di sini kita bisa tambahkan. Mau pakai titik koma, mau width-nya 80, atau berapa bisa ditambahkan di rules di sini.

40:28Jadi ini kalau rules ini bakal meng-overwrite semua yang kita extend. Jadi kita bisa extend punya yakin C-dots, bisa punya Airbnb. Misalnya kita udah cocok nih sama hampir semua rules-nya. Cuma ada satu atau dua aja yang pengen kita override.

40:44Nah itu gak usah. Kita gak usah bikin library juga atau apa. Langsung di override disitu aja. Itu pasti menang. Pasti paling... - Dipatuhi yang paling rule sini ya? - Iya. Itu yang paling kuat.

40:58Yang lagi yang sering jadi jemahkan Batman bagi saya itu adalah kalau pakai third party atau external ini ya. Jadi JavaScript-nya saya itu kan diatas ekosistem WordPress. Dan WordPress itu kan punya library-nya sendiri.

41:17Itu JavaScript. Ya sudah. Bukan. Bukan soal linternya. Jadi library-nya si WordPress itu yang JavaScript sudah di-expose via WP.APA. WP.DATA. Jadi global.

41:30Tapi kan waktu kita nulis JavaScript kan pengennya import package-nya. Tapi package itu kan gak install. Gak perlu di-install. Gak perlu di-bundle kan. Karena sudah ada di host. Jadi WP kita bisa nge-compile itu. Karena dia bisa nge-detect... - Karena ada, literally ada.

41:50Ya tinggal di-convert ke global. Jadi sebenarnya gak perlu di-transpile. Gak perlu di-bundle. Dia sudah ada bundlenya sendiri. Tapi si linternya kita gak ngerti. ISLIN-nya gak ngerti. Jadi harus pakai import resolver.

42:06Dimana si ISLIN harus baca konfigurasi WP kita. Nah itu panjang ceritanya. Jadi waktu ISLIN bingung. "Ini kode lo gak bisa gue resolve." Gitu katanya.

42:24Gimana gitu. Di node modules gak ada. Tetapi di WP bisa gitu. Karena WP under the party. Jadi sebagai external module. Berarti si ISLIN harus baca, harus dia harus baca WP configuration supaya dia bisa mengerti, "Oh ternyata itu sudah ada. Bisa gue resolve."

42:51Namanya ISLIN import resolver. - Coba mana lihat? - Nah ini contohnya. Eh apa? Lihat ISLIN import resolver.

43:16- Iya. Resolver WP. ISLIN import resolver WP. Kalau resolver TypeScript ada juga tuh. Nah ini dia.

43:28- Iya ini pernah, habisnya setengah hari. - Aduh. Paling sebuah beresko soal yang sedia perumbutan, soal setup. - Cape ya.

43:47Nah ini urusannya itu. - Ya pertanyaan saya, kalau tadi kan kita udah bahas si static ini berada di paling bawah kan. Apakah dengan menggunakan TypeScript kita masih perlu static code analisis?

44:06Tok juga TypeScript bisa mendeteksi typo kan. Hal-hal yang dilakukan oleh ISLIN bisa kan? - Masih ada role line juga kan. Contohnya space.

44:21- Oke contohnya. Contohnya gini deh. Ada kalau static analisis kan ada dua. Pertama apa tuh namanya? Bahasa skrennya itu stylistic. Nah stylistic role-nya.

44:40ISLIN itu ada stylistic role. Yang mau pake space, mau pake tab. Kalau mau pake sebelum kurung, harus ada spasi atau engga. - Mau pake double quote, single quote.

44:52- Iya. Jadi stylistic role atau coding style itu sendiri, itu tidak di handle sama TypeScript. Serta selanjutnya, yang data type itu lebih mending pake TypeScript.

45:07- Iya. Tapi apakah bukan kalau styling code itu lebih ke formatter, pre-tier, dan lain-lain?

45:15- Itu lemakannya. Kalau dulu dulu pas belajar tuh yang tadi sempat bingung kan sebel lagi udah kudu pre-tier ignore, TS ignore, ISLIN ignore, kayak dimarahin di semprot tiga orang sekaligus gitu, merah-merah kemulakan.

45:44Tapi sebetulnya ada bagian yang overlap. Nah kalau format, stylistic itu kan tadi mencakup formatting. Nah itu kan yang di cover pre-tier, kayak spasi atau tab.

45:57Nah itu bisa perang juga ya. Pakai titikoma atau tanpa titikoma itu kan format. Formatting adalah bagian dari style. Tapi style itu kan mencakup hal lain juga. Jadi style itu supersetnya kali ya. Kayak stylistic kan juga nama variable. Nama variable kan harus di-enforce.

46:18Boleh nggak sih? Harus camel case, snake case, ya itu kan yang atur ISLIN juga. - Kalau kita bikin konstan kan ada yang punya preferensi kalau konstan yang pure, yang nggak di dalam meta atau fungsin apapun, boleh pakai, apa itu yang huruf gede semua namanya apa? Angry case, bukan.

46:38- Apa huruf besar semua? - Konstanta. - Ya huruf besar semua. - Nah itu kan bagian dari preferensi ISLIN kan ada yang membolehkan hanya kalau apa, atau nggak boleh sama sekali, semua harus konstan, camel case.

46:55Itu kan nggak bisa dihandle oleh prettier kan. Tapi itu bagian dari style juga. - ISLIN lebih dari cuma stylistic. Cuma masih bisa buka. Contohnya kalau variable konstan, itu kan harus immutable.

47:11Jadi kalau misalnya si programmer-nya, si developer-nya assign value kedua kali ke const kan harusnya nggak boleh. Itu dikonsumsi sama ISLIN rule. - Itu type script juga dong, bisa dong.

47:32Bisa juga ya? Oke, no class assign, contohnya. - Ada hal-hal yang gini, misalnya kita pakai lab, berarti kita punya ekspektasi suatu saat itu akan di reassign-nya.

47:45Kan kalau, tapi kita nge-define pakai lab, nggak di reassign nih misalnya. Sama type script kan nggak apa-apa, nggak error. Itu kan nggak masalah. - Kalau ISLIN, marah. - ISLIN nggak bisa. Maksudnya bisa ada opsinya misalnya kita pengen menge-enforce biar dari awal kita intensional, ini mau di-resign atau nggak tentuin di awal.

48:05Berarti style itu bisa dibilang kayak apa ya, decision kali ya. Jadi hal-hal yang memudahkan kita ngambil keputusan. Jadi kayak itu dipikir dan disepakati di awal.

48:20Nanti pas kita coding, ya udah kita nggak usah mikir lagi. Maksudnya karena kita ngikutin rules, apa, aturan-aturan yang udah disepakati dan bisa dilihat di ISLIN config.

48:31Oh itu juga tuh, kayak no-console. Type script-nya nggak usah type script. - No-confusing error itu apa coba?

48:41This allow error function where they could be confused with comparisons. No-console ini juga penting. Kadang-kadang kan kita suka sering console-lock, nggak sal. - Lupa dihapus. - Sampai masuk ke production, lupa dihapus. Jadi diingatkan. Ini penting.

48:55Tapi saya ada shortcut, kalau saya CL, type, langsung console-lock, langsung di belakangnya, ISLIN disable.

49:05Aturan dibuat untuk dilanggar, ya kan? - Otomatis. - Ada rules, tapi orang akan selalu menemukan cara untuk melakukannya. - Tapi tetap butuh console-lock kan, kadang. Bukan kadang, sering. Sering butuh console-lock.

49:25Yang buat dibaging dan mengganggu user, gitu kan. - Ya, apapun itu kan kita jadi apa ya, kayak ini memudahkan komunikasi sih.

49:37Maksudnya kita pengennya coding-nya gimana nih? Ya walaupun bisa dilanggar, tapi minimal itu ada in writing ya. Maksudnya kan ada file-nya, kita bisa lihat rules apa aja yang aktif.

49:46Perkara dilanggar, di-ignore atau enggak, itu belakangan. Apa ya, mungkin sifatnya lebih opinionated juga kali ya, ISLIN rules.

49:56Jadi kalau apa, criteria itu formatting kan, ya jelas concern-nya perkara format ya, kayak spasi atau apalah.

50:03Tape, kalau TypeScript, mendeteksi error dan memperketat ya strict typing. Nah kalau ISLIN itu meng-cover banyak unsur-unsur itu. - Coding style.

50:17- Iya, coding style, preferensi dan cenderung opinionated kan. - Memang khusus untuk dibuat opinionated itu.

50:30- Iya. Kalau nggak suka, ya bikin sendiri gitu kan. - Kalau nggak suka, di-overwrite aja bisa kan.

50:36- Overwrite. Dan untuk TypeScript sendiri, sebenarnya dulu ada namanya TSLIN ya, membuatannya Pahlandi ya.

50:42Terus sekarang sudah bergabung bersama TypeScript ISLIN. Jadi udah ada apa namanya ya, rule atau apa ya, istilahnya ya.

50:55- Ya, integrasi sih. - Ya, terintegrasi langsung dengan ISLIN.

51:00Jadi kita nggak perlu install terpisah, kita cukup tambahkan di konfigurasi-nya aja.

51:06Mana tadi konfigurasi? - Extend.

51:10- Extend, ya di Extend, contoh konfigurasi-nya seperti ini, kita Extend bisa pakai, nah ini Extend, pakai TypeScript.

51:20- Bisa koma, bisa lebih dari satu ya Extend. - Bisa lebih dari satu, ini bisa array ya, bisa list.

51:27Terus nanti kita tambahin. - Oh, bisa kasih tau juga IS yang kita support.

51:35- Iya, IS-nya 2021, IS6 dan lain-lain bisa di... - Dulu sempat sampai IS 2015 kan ya?

51:44- Ya kan? - Iya. - Nah, gratis ya ISLIN, berarti udah lama juga.

51:51- 2015 sih ya. - Lama, 2015 udah lama.

51:54- Kita lihat ya, kapan pertama kali dia... - Udah, udah tua banget ya.

51:59- Eh, nggak bisa diklik. GitHub-nya mana? - Atas, atas.

52:05- Oh ini. - Ah, bawah.

52:07- 9000. Gimana caranya nge-check comic pertama? - Nggak, bawah, karena ada releases tuh.

52:17- 300. - Wuh, udah 300 release, anjir.

52:21- Banyak banget. First version-nya tahun berapa nih? 31.

52:30Nih, release pertama, 2014. 2015 lah, 31 Desember, hari terakhir 2014.

52:41- Berarti udah hampir 9 tahun ya. Saya jalan 9 tahun. Kita setahun aja kayak, wow.

52:50Ini yang bikin lagu-lagu itu 9 tahun. - Iya, itu dia. Ini contohnya kalau...

52:55- Ini bagus ya, dipertimbangin dengan baik ya. Maksudnya versi IS itu kan ngaruh ke...

53:01itu salah atau nggak. Jadi kayak asing-await kan baru muncul IS.

53:06- Baru muncul, betul. Iya. - Atau yang lebih baru apa ya, kayak...

53:11- Itu yang pake... - Optional.

53:13- Optional. - Release, gitu.

53:15Nah, itu kan kalau dipake di pake standar yang IS lama, ya itu salah.

53:20Tapi kalau misalnya kita udah update pake IS, kita mengkonfigurasi pake IS versi baru,

53:26ya nggak masalah. - Iya. Ini ada contoh.

53:31Kalau misalkan kita menggunakan ISlin di editor kita ya, contohnya.

53:34Misalkan kita lagi nulis, sebelum kodenya kita eksekusi pun, dia udah ada warning.

53:40Ini sudah desain tapi tidak digunakan. Yang B ini apa?

53:45Pakai string harus pakai double quotes. Dan bisa langsung di fix.

53:51- Itu menarik sih menunjukkan apa, sisi opinionatednya rules ISlin.

53:57Kalau misalnya apa, dari pre-tier kan nggak apa-apa. Maksudnya itu...

54:01- Boleh, boleh aja. - Dari TypeScript juga boleh.

54:04Nah, di ISlin ini kita bisa nentuin rules suka-suka kita.

54:09- Betul. - Project apa ya? Project open source apa? ISlin rules-nya paling ketat ya?

54:16Ngapain-ngapain nggak boleh gitu. Yang ketat maksudnya kayak gitu tadi.

54:22Itu kan sebetulnya nggak apa-apa, mau pakai literal lah, mau pakai double quotes lah.

54:27- Tapi kayaknya nggak punya masalah sih. - Itu kan sudah kayak aturan...

54:33- Biar standar. - Misalnya kalau kita pakai itu sudah masuk ke IDE, kan sudah IDE.

54:39- Sudah otomatis. - Kita masih ngoding aja.

54:42- Kayak tadi misalkan, pokoknya harus titikoma. Iya, harus titikoma.

54:47Ya udah, kalau yang nggak suka titikoma, ya nggak usah ditulis.

54:49Nanti begitu CTRL+S, udah dia tambahin sendiri gitu kan.

54:54Jadi ya inilah, bisa menjebatani kedua belah pihak gitu.

55:01Kalau misalkan ada yang nggak suka petik 2, ya udah tulis aja petik 1.

55:06Nanti difix kan otomatis sama si ISlin-nya kan, jadi petik 2.

55:10Jadi sekaligus juga mempermudah kita ngecek hal-hal yang supaya sesuai standar

55:21yang sudah ditentukan oleh tim lah atau oleh orang sebelum kita atau sama tim lead kita.

55:26Orang pertama yang menginisiasi proyek, yang set up.

55:32- Siapapun yang set up projeknya. Biasanya sudah habis si set up, projek ini 3 tahun.

55:38Udah nggak tahu siapa itu, ya elah, ini kan lampau banget ya nggak ada yang update.

55:44- Harus bersih-bersih tahunan. - Bersih-bersih tahunan.

55:50- Makanya saya sering menyebut diri saya Janitor. Tukang bersih-bersih.

55:56- Tukang bersih-bersih. - Udah update-update bersih-bersih.

56:00Terus konflik, ya. Bersing lagi.

56:06- Oke. - Banyak curcol nih malam ini saya.

56:10Habis deploy sih capek nih saya. - Oke. Apa lagi yang mau kita bahas dari ISlin?

56:19- Favorit, rules favorit di ISlin. Ada nggak?

56:24Kalau gua ini nih, short import. Kelihatan nggak sih? Kesihatan nggak sih?

56:29- Oh iya, gua suka tuh. - Short import.

56:33- Paling enak nih. - Oh, otomatis.

56:35- Kan kita biasanya, kalau nggak pakai ini kan malas kan, pusing.

56:41Apalagi kalau buat kita yang ada bawaan rada apa ya sebelah aja.

56:48Gak konsisten mau ngurutin alfabetical, terus kalau external library taro mana,

56:56terus kalau kalau iya apanya import lain, modul-modul lokal taro mana,

57:04itu kan kalau apa, sebenarnya nggak apa-apa sih.

57:09Sebenarnya di-compile juga ya. Jadi kan sebetulnya udah nggak masalah,

57:14kita ngeliatnya sebel. Masalah nggak penting sih. Penting nggak penting sih.

57:19Meng-enforce biar rapih. Ini tergantung jenis-jenis importnya.

57:28Rules-nya juga bisa di-customize, suka-suka kita.

57:35- Oke. - Terus kelihatan ada juga yang kalau, di contohnya nggak ada sih,

57:45cuma ada plug-innya kalau nggak salah yang lebih rapih lagi, lebih detail lagi,

57:51order-nya. Include kalau build-in modules, urutannya gimana,

58:01external modules, internal dari lokal, blablabla.

58:06Oh, ini enak banget kalau di-combine sama pre-tier, ya itu tadi nggak usah mikir,

58:12pokoknya kalau pas aja import-import, command save, langsung rapih semua. Enak lihatnya.

58:20- Tadi kita belum lihat ini ya, konfigurasi Airbnb ya.

58:26ESLint, Airbnb. Itu apa aja sih penasaran?

58:32- Saking populernya mereka tuh kayak ESLint konfig-nya doang aja, kayak panjang banget detail,

58:41terus kelihatannya banyak yang minta. Mungkin mereka juga punya itu internal yang nggak pakai React.

58:46Jadi ada orang pengen pakai konfig mereka, cuma tanpa React, karena nggak pakai React.

58:52- Ada base-nya, jadi kayak ESLint konfig, Airbnb base, atau semacamnya.

58:57- Oh, ini ya? Base. - Oh iya, itu.

59:01- Nah, ini kita lihat. Duh, kok nggak ada?

59:08Dimana kita mau lihat isinya apa aja? Rule-rule-nya? Ini cara pakai.

59:14Cara pakai. Apa di rules? - ESLint.

59:22- Style. Panjang ya, array bracket new line, array element new line, array bracket spacing.

59:31- Rapih banget gitu. - Rapih, emang di-maintain sih buat perusahaannya juga kan.

59:37- Jadi ini kayak style guide lah ya. Kalau di anak desain itu kan ada desain sistem kan.

59:45- Coding style. - Coding style.

59:49- Coding standard. Nah, tuh coding standard bahasanya.

59:53- Kalau misalkan kita join Airbnb, ya udah, harus pakai ini gitu kan.

59:57Makanya dia butuh didokumentasikan juga, seperti ini.

1:00:01- Dan itu malah jadi gampang ya, mengurangin kerjaan buat tim yang harus on-boarding developer baru.

1:00:09Ya walaupun tetap, maksudnya mungkin dari segi komunikasi atau workflow.

1:00:13- Satu mau pakai coma, satu nggak pakai coma, suka-sukanya aja.

1:00:17- Tetap harus on-boarding, tapi kalau buat rules-nya, detail-nya ya suruh baca aja sendiri.

1:00:22Maksudnya kalau udah diterima kerja di Airbnb kan, pasti maksudnya minimal ngerti caranya ngebacakan.

1:00:28Nanti baru kalau ada yang mau di clarify, baru tanya. Cuma, eh, buat sendiri.

1:00:34- Ini, oh, udah di archive ya. Google juga punya kan.

1:00:42Jadi ada dua pilihan kan kalau kita pakai Yeslin init ya.

1:00:46Ada Google, ada Airbnb. Yang paling terkenal memang Airbnb. Ini Google, tapi udah di archive.

1:00:54Dia udah masuk. "There are several rules in Yeslin's recommended ruleset that Google style is not opinionated."

1:01:01Jadi masing-masing perusahaan punya opini masing-masing ya.

1:01:06Tapi di mana ini? - Ya, ini semua kalau masuk, udah masuk ranah rules, kayaknya ya itu semua udah opini sih.

1:01:12- Iya, oh iya benar. Nah ini dia. - Karena kalau yang, maksudnya kalau di tadi kan ada formatting,

1:01:17ada pre-tier, ada typescript. Nah kalau yang apa, type checking, enforce yang kayak gitu-gitu

1:01:23yang bisa bikin error, itu kan udah domainnya typescript.

1:01:26Tapi kalau soal apa itu, sisanya stylistic ya, opinionated.

1:01:32- Iya, ini ada beberapa kayak neutral, retral, terus apalagi yang no use of fast.

1:01:40- Apa sih yoda? Ada rule yoda. - Oh yoda, yoda itu dulu si worker suka pakai itu.

1:01:48Jadi kalau yoda rule itu, value-nya di depan, value-nya di depan, kalau kondisional, value-nya di depan misalnya.

1:01:58- Oh value dulu, ah. - ABC sama dengan, sama dengan variable-nya.

1:02:02- Oh, oh itu yoda. - Yoda style ya.

1:02:06Itu dulu sempat tenar di kalangan WordPress, komunitas WordPress untuk mencegah, mencegah nge-assign rule

1:02:20tidak sengaja di PHP. Contohnya kalau kita mau bikin rule-nya, misalnya variable-nya, variable-ku

1:02:30sama dengan, sama dengan isi value-nya, tetapi ternyata waktu kita moding, sama dengan, sama dengannya itu

1:02:38kurang satu sama dengannya. Akhirnya nge-assign rule kan.

1:02:42- Oh, biar nge-assign aja. - Kalau misalnya di Bali.

1:02:45- Itu error. - Itu error.

1:02:46- Error. - Kalau di Bali jadi error.

1:02:48- Benar juga ya. - Bisa, bisa mengurangi masalah itu.

1:02:55- Jaman itu sebelum ada, sebelum ada PHP, CS, tenar.

1:03:01- Camel case, error, properties, never. Jadi si Google style ini nggak pakai camel case.

1:03:09Gimana nih maksudnya? - Maksudnya camel case.

1:03:13- Ini nggak boleh pakai camel case. - Camel case itu yang huruf depannya kecil atau besar?

1:03:21Kecil ya? Berarti dia pakai underscore, snake case.

1:03:25- Depannya kecil, terus kalau kata kedua, besarnya, tengahnya besar.

1:03:30- Berarti dia pakai snake case ya, si Google ini? - Bisa jadi.

1:03:36Eh belum tentu, bisa jadi, bisa jadi. Apalagi, camel case sih.

1:03:42- Apa? Camel case nggak mungkin, nggak mungkin.

1:03:45- Coma, spacing, error. - Pascal case, Pascal case.

1:03:51- Coma, dangling, multiland, dll. Teman-teman bisa lihat-lihat sendiri ya.

1:03:56Nah, selain java script. - Iya, kalau Google pakai Pascal case,

1:04:00soalnya kalau YouTube, Y dan T nya besar. - Gede.

1:04:04- Oh, gitu. - Nih, streamnya, S dan Y nya besar.

1:04:10- Nah, selain code analisis untuk java script, karena di web juga kita berkutat dengan HTML dan CSS,

1:04:24kita juga ada, CSS juga ada namanya styling ya. - Iya, styling.

1:04:29- The Mikey CSS linter that helps you avoid errors and enforce convenience.

1:04:35- Salah satu, maintainernya kerja bareng saya di perusahaan saya.

1:04:40- Wah, mantap. - Siapa namanya?

1:04:43- Coba dia. - Abot.

1:04:46- Maintainer Guide. Mission. - Bukan, Abot.

1:04:50Kalau Abot, nggak ada orangnya ya, sudah lah.

1:04:54- Ini, siapa nih? Dari 604 orang, kontributor.

1:05:02Di row kedua, yang paling kiri, row kedua paling kiri.

1:05:07- Ini, yang paling kiri ini? - Ya, network.

1:05:10- Stephen Edgar, human made. Mantap. - Mantap.

1:05:18- Jadi, dia adalah linter untuk CSS, karena CSS juga ada strukturnya kan,

1:05:26harus kurung kurawal, pakai titik koma, terus ada mungkin pakai petik,

1:05:33petiknya petik satu, petik dua. - Tergantung.

1:05:36- Tergantung. Bisa dua-duanya juga ya. - Iya.

1:05:39- Bisa dua-duanya juga ya. Jadi, ada yang... - Nah, bisa.

1:05:42Yang paling saya suka dari sini, dia bisa ngebagusin CSS kita,

1:05:47bukan secara formatting ya, jadi bisa nge-detect, nggak boleh misalnya,

1:05:51tiga level deep. Nah, itu udah, udah susah, udah lagi lama diparsing.

1:06:00- Iya, iya, iya. Benar-benar. - Nggak performa.

1:06:03- Jadi, buat pengingat juga ya, eh, di warning gitu ya, jangan melakukan ini,

1:06:08karena ini akan merusak performance dan lain-lainnya.

1:06:12- Iya. Betul. Tuh, tools to test and improve performance. Betul kan?

1:06:17- Iya. - Nah, sedikit cerita styling.

1:06:22Ini styling 14 ke bawah, 14 dan ke bawah, itu suka berantem sama pre-tier.

1:06:27Jadi, kalau misalnya saya save, pre-tiernya benerin, stylingnya ngamuk.

1:06:33- Ya, nyawasin lagi. - Atau saya benerin stylingnya,

1:06:38pre-tiernya ngamuk, terus saya mau ikut yang mana, gitu.

1:06:41Akhirnya bisa, akhirnya ya, ujung-ujungnya stylingnya ngalah,

1:06:46saya harus bikin beberapa. - Dari si pre-tiernya.

1:06:50- Jadi, udah deh, pre-tiernya di setting, terus stylingnya di setting juga

1:06:55supaya bisa kompar. Di styling 15, coba buka tadi styling,

1:07:02styling yang tadi, migrating to 15. Jadi, semuanya, nanti, ya,

1:07:12migration guide. Di migration guide, saya lagi kerjanya soalnya.

1:07:17- Oke. - Migration guide.

1:07:19- Masih lagi... - Ini dia ada pre-tiernya

1:07:21per-stylistic role, ya. Semua rata-rata stylistic role yang harus tadi

1:07:26yang pakai Qtip 2, Qtip 1 itu dia udah nggak peduli lagi soal stylistic, ya.

1:07:32Dia lebih peduli sama non-stylistic role, ya, tadi kayak performance,

1:07:37robustness, externability, segala macam.

1:07:39Itu dia udah pre-kit semua stylistic role dan itu akan dialihkan ke external tools

1:07:49seperti pre-tier. - Oh, pre-tier berarti bisa buat CSS

1:07:52dan HTML juga, ya, berarti ya. - Pre-tier bisa CSS?

1:07:56- Bisa, ya, bisa semua, berarti ya. Bisa banyak dia, ya.

1:08:01Jadi, ya, buat teman-teman, mereka 15, jangan kaget nanti kalau banyak ada pre-Qtip.

1:08:10- Hmm. - Nah, cuma...

1:08:16- Dua gimana dengan HTML? - Pakainya tailwind sih.

1:08:19Jadi, maksudnya, apa, kalau pun ada custom styling, nggak se rumit itu

1:08:23yang sampai butuh tailwind sih. Jadi, selama ini, jujur,

1:08:27belum pernah pake. - Hmm. Kalau HTML ada nggak sih?

1:08:32Lintarnya? - HTML Beautify.

1:08:35- Beautify? - Iya.

1:08:39Nggak butuh Beautify, eh, kalau saya, Pak, dari situ kan ada dari siapa lain

1:08:45HTML Beautify. - Dan kelihatan kalau menulis HTML,

1:08:51emang ada apa ya, yang perlu di-enforce apa ya? Kayaknya nggak ada.

1:08:56- Kayak, misalkan, nambahin alt, alt untuk image, misalkan.

1:09:02- Oh. - Belum ada sih.

1:09:06- Nggak ada ya? - Cuman sih, kalau pakai, bentar,

1:09:08kalau pakai ISML, ada accessibility, ya? - Kalau pakai Svelte, ada.

1:09:11- Iya, ada. - Iya, kayak misalnya, kalau pakai apalah,

1:09:14react, Svelte, itu kan ada plugin buat accessibility, tapi ada nggak sih?

1:09:21- Prettier bisa sih buat HTML. - Ada nih, markuplin namanya.

1:09:26- Oh, markuplin ya. Kayak kreatif ya. - Kreatif itu sound.

1:09:29- Nggak kreatif sama sekali bikin nama. - Jadi apa nih, rules-rules-nya, coba ya.

1:09:35Understand, add here, rule name. Rule name-nya apa aja nih, contohnya?

1:09:41Rules, oh, pakai plugin, ya nggak kelihatan rules-nya ya.

1:09:48Using preset, ada preset apa? Recommended, oh, sama juga ya, ada markuplin.

1:09:56- Itu ada, I like. - Standard, security,

1:10:00terus tentunya apa, abis preset nggak ada? - Itu ada.

1:10:05- Must not duplicate ID. - Oh, ya, make sense sih.

1:10:10- Tap index ATTL only. - Kalo sudah templating, susah.

1:10:15- Udah, iya. Require H1, use UL, require HTML length, require video muted, dan lain-lain.

1:10:29Kayaknya jarang yang pakai ya. - Iya, karena jarang orang nulis markup HTML langsung.

1:10:37- Iya, misalnya kalau JSX, entah pakai Ria atau pakai yang lain, udah ada tuh ESLint laginnya.

1:10:45- Udah ada. - Pake swell juga, udah ada.

1:10:47Sekarang kurang-kurang orang, masih udah tercover itu. - Betul, betul, betul.

1:10:53- Ada lagi nih yang perlu. - Kalo spell sendiri, ESLint-nya sama nggak rule-nya?

1:10:59Beda kan? Karena dia, ininya agak beda kan, komponen dot spell-nya kan.

1:11:03- Kayaknya beda syntax-nya. - Iya, beda syntax, ya. Berarti ada ESLint rule untuk,

1:11:07khusus untuk spell juga ya, berarti. - Iya.

1:11:11- Jadi masing-masing framework punya rules-nya masing-masing juga, sama kayak perusahaan.

1:11:17Alright. - Bentar, ada satu lagi nih yang kelihatannya.

1:11:23Perlu di... tadi mesti kita belum sempet bahas. - Apa tuh?

1:11:28- Tadi kita udah bahas config ya, cuma kan belum sampai detail.

1:11:32Nah, ini yang kalo kita pake ESLint buat project kita,

1:11:39kemungkinan bakal perlu ini selain... ya tadi kita udah liat kan, kita bisa meng-overwrite

1:11:47pake a-by rules, aturan yang misalnya kita nggak cocok atau nggak setuju atau nggak relevan kita pake...

1:11:56kita extend kunyanya Airbnb, tapi ada satu-dua rules yang nggak sesuai sama kebutuhan kita.

1:12:01Kita bisa overwrite di rules. Nah, tapi ada jenis overwrite line-nya.

1:12:06Ini tadi maksudnya kita bisa customize pake rules kita sendiri.

1:12:11Nah, ada lagi nih properties-nya namanya overwrite. Nah, ini bukan berdasarkan rules,

1:12:16cuma kita mau bikin kecualian berdasarkan jenis file. Kan kadang misalnya kita di perang

1:12:23tab versus space, kita pakenya tabs ya, misalnya kalo lagi encoding.

1:12:28Tapi misalnya di kode kita ada markdown, atau MDX, atau YAML, atau apalah yang kita nggak pengen

1:12:35itu di-enforce pake tab. Nah, kan daripada tiap buka disalahin, terus apa?

1:12:41Tiap auto-format juga berubah semua, kita bisa meng-customize ini.

1:12:47- Apa bedanya sama... oh, beda ya, editor config. - Kita customize jenis ininya.

1:12:54- Gak, yang maksudnya... - Bisa editor config juga, nggak tahu.

1:12:58- Ini kan... - Nah, maksudnya editor config kan formater.

1:13:01Formater, dan ini supaya jangan nggak salahin formaternya kita yang ada di editor config.

1:13:07Oh, bedanya, kita bisa meng-overwrite rules ESLin apapun. Kalo contoh tadi,

1:13:13perkara space apa, space versus tab, saya emang bisa di editor config.

1:13:17Tapi kalo ini kan bisa untuk rules ESLin apapun itu.

1:13:21Atau misalnya kita pake module yang... apalah module-nya, format-nya misalnya masih pake...

1:13:27misalnya kita meng-enforce arrow function ya, misalnya kita suka arrow function.

1:13:31Kita misalnya mau pake format yang modern nih, arrow function.

1:13:36Tapi ada module-module lama yang udah dari dulu, dan misalnya kita emang mutusin

1:13:43itu nggak perlu lah semuanya function, apa name function-nya nggak perlu di-write semua nih.

1:13:48Yaudah, tinggal masukin ke folder tersendiri, terus kita exclude di sini.

1:13:54Biasanya juga, saya ada use case-nya, ada legacy code JavaScript yang sudah di-compile yang lama.

1:14:02Ya, nggak perlu di-write, tinggal di-import aja file-nya se-abrak-abrak, di-copy, tapi nggak mau tuh.

1:14:09- ESLin kita ngeganggu itu. - Mana-mana?

1:14:12- Ignore. - Ignore semua satu folder.

1:14:18Iya dong, itu sudah lampau, nggak perlu jangan dipegang-pegang dah, itu pokoknya jalan aja.

1:14:23Oh, tapi kalau emang udah di-minify semua, ya bisa di-ignore aja satu file.

1:14:27Kalau misalnya kasus, kan ada kasus yang kita cuma pengen meng-ignore salah satu rules aja,

1:14:32tapi sisanya masih perlu di-periksa.

1:14:35Jadi itu tadi tetap bisa, ada kalanya perlu pakai overwrite.

1:14:42Oke, ada lagi yang mau dibahas?

1:14:45Sudah, cukup.

1:14:48Oke, kalau begitu, terima kasih banyak buat semuanya yang sudah nonton.

1:14:53Kita sudah bahas tadi tentang berbagai apa, tentang apa itu linter atau static code analysis, jenis-jenisnya,

1:15:02sejarahnya sedikit, yang kita taunya juga sedikit gitu, dan beberapa rules-rules linter yang biasa kita gunakan.

1:15:10Tips and trick, ada style-in juga.

1:15:15Mudah-mudahan materinya atau apa yang kita bahas malam hari ini bermanfaat juga buat teman-teman.

1:15:24Kita ketemu lagi minggu depan, seperti biasa di setelah samalan jam 8 malam.

1:15:29Sampai jumpa, bye-bye.