Serba Serbi Pengujian: Vitest, Jest, dkk - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini membahas serba-serbi pengujian atau testing, spesifiknya akan membahas Vitest, Jest, dkk. Ayo bergabung bersama Ivan dan Eka di sesi malam nanti. 🔔 Yuk mari ramaikan! Dimulai pukul 20:00WIB ya. Episode kali ini merupakan hasil kolaborasi dengan @domainesia_. Gunakan kode promo: NGOBROLINWEBDN buat diskon 10% langganan hosting atau kode promo NGOBROLINVPSDN buat diskon 50% langganan Cloud VPS Turbo dan dapat digunakan berkali-kali! Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode ini membahas serba-serbi testing di ekosistem JavaScript, mulai dari alasan kenapa testing penting sampai perbedaan jenis-jenisnya. Pembahasan menyinggung konsep testing trophy/pyramid, kapan unit test cocok dipakai, serta kapan lebih masuk akal menggunakan integration atau end-to-end testing untuk memastikan alur bisnis tetap aman. Ngobrolin juga mengulas tool dan praktik populer seperti Vitest vs Jest, snapshot testing beserta pro-kontra dan konflik yang sering muncul, serta strategi coverage dan CI/CD agar kualitas tetap terjaga. Di sisi lain, ada diskusi tentang trade-off: biaya maintenance, over-testing, dan kapan "cukup" itu cukup. Beberapa contoh praktik seperti Playwright, mocking, dan visual/regression testing ikut dibahas untuk konteks real di proyek.
Poin-poin Utama
- •Testing dibahas dari sisi tujuan: mengurangi risiko bug dan menjaga alur bisnis tetap aman
- •Konsep testing trophy/pyramid dijadikan kerangka memilih jenis test
- •Perbedaan unit, integration, dan end-to-end testing serta kapan masing-masing dipakai
- •Perbandingan tool seperti Vitest dan Jest termasuk isu performa dan migrasi
- •Snapshot testing dibahas lengkap dengan manfaat, potensi konflik, dan kapan sebaiknya dihindari
- •Coverage dan CI/CD dibahas sebagai cara memantau kualitas, tapi tidak jadi satu-satunya patokan
- •Playwright, mocking, dan visual/regression testing disebut sebagai praktik yang relevan di proyek modern
Transkrip Bantu Koreksi
0:00[musik]
0:18Dapatkan hanya di Domain Asia
0:20[musik]
0:31Halo, halo, halo
0:34Wih kok cuma berdua
0:36Selamat malam
0:37Gak ada ya?
0:38Kenapa ada suaranya?
0:40Cek, cek, cek ada suara
0:42Oh ada
0:44Oh
0:46Setnya soundboardnya gak ada
0:48Halo selamat malam semuanya
0:50Selamat malam
0:52Gimana kabarnya?
0:54Muda-muda sehat ya
0:56Nggak, gak sehat
0:58Sehatnya sih gak tapi pusingnya iya
1:00Gak pusing
1:02Iya
1:04Lagi ini ya
1:06Lagi ada horror lagi ya
1:08Cloudflare mati ya
1:10Iya
1:12Cloudflare mati
1:14Cloudflare mati
1:16Tidak ada yang bisa saya lakukan
1:18Cuma memantengin
1:20Status page
1:22Ketengah internet mati kali ya Cloudflare mati ya
1:24Nggak sih
1:26Jadi
1:28Beberapa klien
1:30Dari
1:32Lima
1:34Empatnya
1:36Nyalak, satunya mati
1:38Empatnya ini sepertinya
1:40Enterprise
1:42Jadi gak ada
1:44Cloudflare
1:48Oh Cloudflare
1:50Cloudflare mereka ini klub sendiri ya
1:52Nggak ada tergantung
1:54Cloud provider lain ya
1:56Infrastructure sendiri kan maksudnya
1:58Iya mereka infrastructure sendiri
2:00Alternatif dari
2:04Cloudflare yang
2:06CDN
2:08Yang biasa kita pakai gratis itu
2:10Oksinya apa aja ya
2:12Ini cuma dia doang yang memberikan gratis ya
2:18Caching
2:20Anti DDoS
2:24Ada sih
2:26Yang gratis ya ada
2:28Mike CDN kan ada
2:30Jarang
2:32Masih belum terlalu populer ya
2:34Ada-ada beberapa yang
2:36Kalau Cloud provider besar
2:38Pasti ada semua ya
2:40Free CDN namanya
2:42Ada kan
2:44Kalau yang gak terkenal
2:48Begitu lebih sering
2:50Begitu lebih sering down lagi
2:52Kalau si
2:54Cloudflare kan dia gak cuma
2:58CDN kan dia juga
3:00Proxy ya
3:02Oh iya benar benar benar
3:04Sekarang kita ke semua website
3:06Buat apa
3:08Nyiga scraping itu kan
3:10Cloudflare yang ada
3:12Tau kan yang
3:14Apa namanya
3:16Anti DDoSnya
3:18Anti DDoS juga Firewall ya
3:20Kalau
3:22CDN murah nih hanya untuk static fire
3:24Banyak yang
3:26Ya gratis
3:28Ya gratis dalam tahap bandwidth
3:30Tertentu ya
3:32Premium ya
3:34Tapi kan butuhnya yang Anti DDoS
3:40Yang apa namanya
3:42Kalau sampai se complete
3:44Cloudflare ya cuma
3:46Cloudflare yang ngasih
3:48Se complete
3:50Cloudflare cuma
3:52Ya cuma Cloudflare
3:54Tapi Cloudflare itu
3:56Mahal loh
3:58Kalau yang berbayarnya mahal ya
4:00Iya
4:02Jadi
4:08Kalau masih
4:10Boot strapping
4:12Atau masih baru mulai pakai Cloudflare
4:14Yang free ya bisa-bisa
4:16Sudah melejit
4:18Nah siap-siap aja itu budget
4:20Harga Cloudflare itu
4:22Ya dibatasi per bandwidth ya
4:24Atau gimana untuk yang free
4:26Ya nanti
4:28Dia silent
4:30Nggak silent sih
4:32Dia akan
4:34Dia akan punya
4:36Datanya kan kalau misalnya kita udah mulai
4:38Naik tuh nanti datang tuh ininya
4:40Datang tuh accountnya tuh
4:42Ini sudah harus naik
4:44Kalau misalnya kita masih tetap di situ
4:46Kita bisa di-cut off
4:48Bisa di-ban sama dia
4:50Ya dia yang punya sistem
4:52Kita numpang kok
4:54Halo-halo
4:56Halo
4:58Cloudflare sekarang down
5:00Iya
5:02Yang kerjaannya pakai Cloudflare ya
5:04Enak udah, nggak usah kerja
5:06Kalo orang down
5:08Iya
5:10Jadi malam ini kita live
5:12Dari LinkedIn
5:14Halo temen-temen LinkedIn, dari YouTube
5:16Kita ada 2 versi nih sekarang lagi nyoba
5:18Ada yang portrait dan ada yang
5:20Ranscape ya
5:22Jadi
5:26Kalau temen-temen yang
5:28Yang portrait berarti sekarang muka kita digepengin
5:30Di tengah gitu
5:32Oh kiri kanan ya
5:34Iya di apa
5:36Mobile first
5:38Jadi sekarang
5:40Broadcast video aja responsif ya
5:42Iya
5:44Nah penasaran nih
5:46Pengen tau temen-temen yang
5:48Yang nontonnya portrait version
5:50Berapa banyak ya
5:52Pengen tau aja
5:54Atau jangan-jangan lebih rame ya
5:56Kalo liatnya di HP
6:00Ya by default
6:02Dapatnya portrait kan
6:04Kecuali emang sengaja di rotate
6:06Enggak
6:08Jadi si YouTube ini dia
6:10Ada 2 versi live
6:12Mau versi yang portrait apa yang landscape
6:14Oh user nya
6:16Yang nonton short kali ya
6:18Yang nonton short dapet
6:20Notifnya atau dapet
6:22Ada info live nya
6:24Itu yang portrait kali ya
6:26Nggak tau juga sih
6:28Makanya penasaran
6:30Kita coba malam ini
6:32Kalo, berarti bisa kita
6:36Ini videonya bisa juga diputar di tiktok
6:38Di Shopee gitu kan
6:40Jadi bisa lewat-lewat di jalan orang
6:42Bisa kita download dari YouTube
6:44Trus kita upload lagi dari tiktok
6:46Dan Shopee gitu ya
6:48Sekalian jualan konten
6:50Shopee, kok Shopee
6:52Kok Shopee sih
6:54Kita jualan apa
6:56Jualan konten
6:58Ya harus buka toko berarti
7:00Di Shopee, nggak bisa sembarang upload video doang
7:04Oh kita jualan hosting
7:06Seperti Dominicia
7:08Kita jualan Dominicia aja
7:12Jangan jualan hosting
7:14Soalnya harus buka perusahaan dulu jualan hosting
7:16Ngewah dulu
7:20Apa nih jualannya hari ini
7:22Jualannya hari ini kalo temen-temen
7:24Yang mau beli hostingnya
7:26Dominicia
7:28Temen-temen bisa pake promo code
7:30Ngobrolin WebDN
7:3250% untuk semua paket web hosting
7:34Siklusnya berlaku satu atau dua tahun
7:38Nah yang mau nyobain cloud VPS
7:40Yang turbo tapi ya
7:42Itu ada diskon 50%
7:44Jadi temen-temen bisa pake promo code nya
7:46Ngobrolin VPSDN
7:48Diskonnya berlaku untuk semua paket
7:54Dan semua siklus
7:56Dan bisa dipake
7:58Lebih dari satu kali di akun yang sama
8:00Bikin akun baru gitu ya
8:02Langsung aja ke
8:04Cek ke dominicia.com
8:06Dan pake kodak cocernya
8:08Tapi jangan malam ini ceknya
8:10Lagi down juga
8:12Soalnya
8:14Dominicia down ya
8:16Pake cloud flare soalnya
8:18Pake cloud flare
8:20Pake cloud flare ternyata
8:24Kita kabari dulu
8:28Terima kasih buat dominicia
8:30Untuk dukungannya ya
8:32Semoga baru ya
8:34Song clip
8:36Kalau kemarin Super Mario
8:38Ting
8:40Lebih enak yang ini ya
8:42Itu terlalu banyak ya coin-annya ya
8:46Jadi malam ini
8:52Kita mau bahas lagi
8:54Tentang testing
8:56Testing
8:58Storybook kita pernah bahas
9:02Itu bagian dari testing juga
9:04Visual testing
9:06Terus
9:10Kalau automasi web
9:12Kita pernah sama Jiseline
9:14Tapi itu lebih ke browser automation ya
9:16Ada testing apa lagi kita?
9:24Bahas testing apa lagi ya?
9:26Oh episode 12
9:28Tentang testing secara umum
9:30Kenapa testing
9:32Apa aja yang di testing
9:34Jenis-jenisnya
9:36Trophy ya
9:38Testing trophy
9:40Ya gitu-gitulah ya
9:42Oh ya testing trophy nya
9:44Cancy dots
9:46Kalau dulu kan testing piramid
9:48Terus dia ubah ya jadi
9:50Oh sempat ada
9:52Terusnya jadi testing
9:54Takos ya
9:56Kayak chip-chip yang segitiga itu lho
9:58Terus akhirnya dia ubah jadi trophy
10:00Lagi ngapain?
10:04Lagi ngobrol
10:06Ini kayaknya sama temen yang dari Portrait ya
10:08Belum pernah ya
10:10Selamat datang ya buat yang baru nonton ya
10:12Ini
10:14Acara ngobrolin
10:16Teknologi web
10:22Tapi emang kalau nontonnya dari Portrait
10:24Maksudnya jadi
10:26Reach audience baru
10:28Atau gimana?
10:30Kayaknya ya
10:32Nice
10:34Oh boleh dong, di like, di subscribe
10:40Di share ya
10:42Donasi juga boleh sekalian
10:46Tidak menolak
10:48Jadi sebenarnya malam ini
10:50Yang pentingnya itu adalah
10:52Update sebulan yang lalu ya
10:54Sekitar sebulan yang lalu itu
10:56Getes
10:58Getes itu launching
11:00Versi keempat
11:02Publikasi versi keempat
11:04Merilis versi terbaru
11:06Versi keempat
11:08Terus kita penasaran nih
11:10Apa yang baru
11:12Dan
11:14Gimana tentang
11:16Ecosistem testing
11:18Secara umum ya sampai sekarang ya
11:20Kan kita belum bahas
11:22Tentang
11:24Kalau dulu kan ada side press
11:26Terus kemudian muncul playwright
11:28Sebelumnya ada testing library
11:30Can see dots juga
11:32Nah ini
11:34Apa namanya
11:36Kita mau liat malam ini kira-kira
11:38Perkembangan testing
11:42JavaScript itu sudah sampai mana
11:44Salah satunya ya Vtest dan juga
11:46Bantusan di video
11:48Ternyata pada ngebully bro
11:52Oh pada ke portrait semua
11:54Di lempar ke portrait semua ya
11:56Emang bisa ya
11:58Ya makanya ini baru kan tadi dibilang
12:00Nah cuma kalau jadi
12:02Kirain cuma jadi kaya
12:04Dua format tapi satu stream
12:06Komennya sama
12:08Streamnya beda
12:10Jadi dua stream yang berbeda
12:12Oh iya ya ini yang komen dari
12:14Portrait semua ya
12:16Sama berarti nanti like sama komennya
12:18Gak pecah jadi dua kan
12:20Kayaknya iya
12:22Coba kita liat ini ya
12:26Ya namanya expert
12:28Kurang ini dong ya
12:30Makanya
12:32Kurang oke ya
12:34Coba buka satu lagi ya
12:36Kalau buat anggap aja
12:38Ebi testing sih cuma berarti
12:40Ya video idea nya
12:42Beda
12:44Oh ya
12:46Video idea nya beda
12:48Cukup kali ini aja
12:50Cukup sekali aja lah
12:52Jadi kalau temen-temen yang di
12:54Portrait mau biar
12:56Nggak kelewatan minggu depan
12:58Disubscribe dulu
13:00Sama nyalain notifikasinya ya
13:02Tapi rame yang di
13:04landscape gimana dong
13:06Eh yang di portrait
13:08Justru rame ya
13:10Oh ada tandanya ya
13:12Ada tandanya ya
13:14Di komen kita tuh ada gambar
13:16Kotak gitu
13:18Oh iya komennya gak muncul
13:22Ya gitu lah kita lagi coba-coba ya
13:26Tadi buka
13:28Di landscape buka dari app
13:30Tapi gak ada komen tau-tau ada yang nongol di layar
13:32Di highlight begitu buka channel
13:34Oh di highlight ya berarti
13:36Bukan komen
13:38Bukan yang di highlight itu komennya
13:40Oh komen yang di highlight
13:42Nah terus tadi mas Jain
13:44Mas Jain bingung kenapa di komennya
13:46Di komen yang apa
13:48landscape kosong
13:50Tapi kok ada komen yang dinaikin ternyata
13:52Komennya di portrait
13:54Ada-ada
13:56Terus kenapa
13:58Iya kenapa mas Jain di
14:00Ikutan di portrait juga
14:02Pindah ke portrait ya biar
14:04Ya biar goyup
14:06Ya biar rame
14:08Cuma ini apa orang productnya youtube
14:10Ada-ada aja nih pasti
14:12Ide-ide nya orang product
14:14Iya
14:16Ya waktu di launching
14:20Live youtube yang
14:22Portrait memang
14:24Kabarnya
14:26Trafficnya
14:28Lebih tinggi, ngerisnya lebih banyak
14:30Makanya malam ini
14:32Saya coba
14:34Ternyata memang benar
14:36Banyak orang-orang baru ya
14:38Karena maksudnya mungkin biar
14:40Ini kan cara biar creator
14:42Pada nyoba
14:44Giming-gimingin creator biar
14:46Pada pakai
14:48Portrait mode ini kan
14:50Betul-betul
14:52Oke
14:56Tapi untuk format
14:58Obrolan kita sama ada layar
15:00Segala kayaknya kurang cocok ya
15:02Di portrait ya
15:04Kita coba aja ya
15:06Jadi kecil banget
15:08Ya makanya ini kita coba aja ya
15:10Sambil langsung bahas ya
15:12Sambil langsung bahas
15:14Kita share screen dulu
15:16Entire screen
15:18Nah
15:20Tadah kecil banget
15:22Kecuali screen yang di share juga
15:26Portrait
15:28Ya mungkin ya
15:30Agak kurang enak sih
15:32Gak bisa
15:34Gak bisa ya
15:36Harus punya monitor yang bisa
15:38Di rotate ya
15:40Aduh keribet
15:42Aneh banget
15:44Ya
15:46Kalau teman-teman yang
15:48Di portrait gak kelihatan
15:50Pindah aja ke landscape ya
15:52Udah sekarang biar di portrait semua aja dulu
16:00Biar apa
16:02Buat mancing aja
16:04Buat nyari traffic
16:06Selebihnya
16:08Pindah ya
16:10Jadi pemantiknya
16:12Sebenernya ini
16:14Vtes Flash 4
16:16Release sekitar bulan lalu
16:18Terus kita penasaran
16:20Dengan Ecosystem
16:22Testing secara umum di JavaScript
16:24Terutama ini testing aja lah
16:28Untuk unit testing ya
16:30Yang secara umum kan luas banget ya
16:32Kita juga udah pernah berapa kali
16:34Sekarang unit testing aja
16:36Oke unit testing aja ya
16:38Nah itu kan sama komennya tuh lah
16:40Udah versi 4 aja
16:42Iya
16:44Emang terakhir pakai versi berapa
16:46Eka terakhir pakai berapa? Tiga ya
16:48Tiga cuman emang gak terlalu
16:50Gue gak serajin itu mantengin
16:52Ecosystem testing sih
16:54Yang penting pakai aja gitu ya
16:56Kan pakai dan lupakan
16:58Karena sudah matcher
17:00Sudah matcher
17:02Iya sudah matcher
17:04Jadi untuk perpindahan versi pun
17:06Maksudnya saya pakainya 3
17:08Terakhir hanya sekedar main-main ya
17:10Jadi bukan
17:12Production
17:14Terakhir itu 3 dan
17:16Nyaman, enak aja pakainya
17:20Simple, belum coba sih 4
17:22Dibandingkan dengan
17:24Testing library apa
17:26Nyamannya dibandingkan apa
17:28Yang
17:30Oh iya bisa nih
17:32Ide nya mas Zain
17:34Oh yang di share screen nya
17:36Doang ya
17:38Iya tapi yang landscape nya jadi
17:40Tendek juga
17:42Iya iyalah
17:44Tapi gak apa-apa sih
17:46Lebih enak ini ya
17:48Berarti kita bisa digede ini
17:54Oh enggak
17:56Nanti aja lah
17:58Nggak bisa ternyata
18:00Fix in production
18:02Kembali ke
18:04Pernyataan Ivan tadi
18:06Lebih nyaman dibandingkan
18:08Testing apa
18:10Jazz atau sebelumnya moka
18:12Apalagi kalau dibandingkan sama moka ya
18:14Enak-enak di test
18:16Nah bentar dari awal deh
18:18Gue belum pernah
18:20Nyobain pakai moka sih
18:22Moka gimana, sesungsara apa
18:24Moka enak loh
18:26Dibandingkan jazz
18:28Gue lebih prefer moka malah
18:30Enggak ya
18:32Gue ga pernah pakai moka
18:34Di front-end
18:36Kalau di back-end
18:38Moka mantap lah
18:40Kalau di front-end gak tau
18:42Karena kan
18:44Begitu react muncul
18:46Jazz ikutan kan
18:48Apalagi create track app udah ada jazz nya
18:50Gak begitu mulai
18:52Begitu mulai
18:56Main-main test
18:58Mainnya jazz
19:00Kalau moka
19:04Saya bikin moka dimana ya
19:06Sampai lupa apa aja yang dipakai
19:08Keren loh
19:10Moka itu ada reporter
19:12Namanya yang testing
19:14Passing fail itu ada yang
19:16Itu bisa dilucu-lucuin
19:18Ada gambar kucing
19:20Itu yang terbang-terbang
19:22Itu keren
19:24Nah kalau gue
19:30Moka gak pernah
19:32Karena pertama kali belajar
19:34Defaultnya doka perunya jazz
19:36Abis itu mulai tahun lalu sih
19:38Akhir tahun lalu gue inget banget tuh
19:40Pas yang versi 3
19:42Baru mau launching, baru beta
19:44Cuma ya keliatannya
19:46Emang major release mereka
19:48Akhir tahun gitu
19:50Akhir tahun lalu pake fit test
19:52Langsung simple aja
19:54Langsung simple banget dibandingin jazz
19:56Kayak hampir gak ada
19:58Library tambahan yang perlu di install
20:00Config nya juga minimal
20:02Haa itu apa lucu amat
20:04Nyan cat ya
20:06Nyan cat, ini ada
20:08Plugin nya, jadi kalau
20:10Kita tes nya passing
20:12Dia happy
20:14Itu doang sih
20:16Itu doang yang bikin dia
20:18Enak
20:20Kalau
20:24Tes
20:26Balik lagi ke Ivan
20:28Tadi kan dibandingin sama jazz
20:30Apa yang membuat fit test ini
20:32Bisa keluar kata-kata nyaman
20:34Kan API nya sama
20:36Bahkan fit test yang nyontek
20:38API nya jazz kan
20:42Apakah zero configuration nya
20:44Atau lebih cepat
20:46Atau apa
20:48Pake jazz
20:50Misalnya kalau kita udah
20:52Pake jazz ya kan
20:54Bikerasi nya gampang
20:56Bikerasi nya gampang
20:58Somehow gue merasa
21:02Fit test lebih cepat daripada jazz
21:04Nah baru mau bilang
21:06Kayaknya belum pernah
21:08Sejujurnya belum pernah bandingin
21:10Sama lagi testing
21:12Dengan kode yang sama
21:14Gak bisa compare langsung apple to apple ya
21:16Tapi
21:18Maksudnya gak pernah yang beneran sampe
21:20Computer yang sama
21:22Computer yang sama
21:24Kalau pake jazz berapa detik
21:26Fit test berapa detik, sejujurnya belum pernah sih
21:28Cuma ya itu feel nya
21:30Kayaknya lebih cepat dan ringan aja
21:32Sama ya itu
21:34Sama kayak Ivan
21:36Kebetulan
21:38Jadi
21:40Kalau kita mau
21:42Pake jazz
21:44Bukan apa-apa
21:46Yang sama
21:48Kayaknya
21:50Bukan apa-apa
21:52Yang sama
21:54Kayaknya
21:56Bukan apa-apa
21:58Yang sama
22:00Kayaknya
22:02Bukan apa-apa
22:04Yang sama
22:06Konfig
22:08Gak perlu itu tambahan
22:10Eventualnya ada sih
22:12Buat ngerender doma atau apa
22:14Cuma set up nya biar bisa jalan
22:16Dulu itu jauh lebih minimal
22:18Kita beruntung berarti ya
22:26Si Streamyard nya
22:28Gak pakai Cloudflare
22:30Kalau gak down
22:32Iya gak bisa
22:36Atau Youtube gak pakai Cloudflare ya
22:38Ya jelas lah
22:40Mokka lebih memperhatinkan
22:46Buat asserting dom
22:48Oh iya bener
22:50Mokka memang di front end nya
22:52Ribet ya
22:54Karena kan Mokka ini awalnya
22:56Kalau kita ngomong origin story nya
22:58Dibuat untuk node
23:00CS ya
23:02Yang apa BN
23:04Saya pakai Mokka
23:06Buat CLI
23:08Ininya saya
23:10CLI Tools yang kemarin itu
23:12Tools yang pakai ERGS
23:14Yang Cloudflare
23:16Ya Cloudflare CLI node
23:18Cloudflare tools yang saya bilang
23:20Cloudflare lagi
23:22Tapi ini CLI command ya
23:24Untuk connect API
23:26Besting nya sama cover nya
23:28Saya pakai Mokka
23:30Mokka Istanbul ya
23:32Gak pakai Istanbul
23:34Saya cuma pakai Mokka
23:36Cover nya pakai Istanbul
23:38Harus dong
23:40Sudah pakai
23:42Karena gak pakai dom domen
23:44Cepet aja untuk assesnya
23:46Cepet ya
23:48Mokka itu cepet
23:50Jazz itu
23:52Berasa agak lambat
23:54Vitesse berasa cepet
23:56Berasa react
23:58Berasa bloat it
24:00Emang react bloat it
24:02Ya lumayan
24:04Ya kalau react nya ditambahin semua
24:08Packet-packet jadi bloat it juga
24:10Ujung-ujungnya
24:12Mas Zain yang pernah coba nih
24:16Karena migrasi ratusan test dari Jazz ke Vitesse
24:18Improvement 2-3 kali
24:20Lipat
24:22Lebih cepat
24:24Ya memang berasa lebih cepat
24:26Eka nya ketutup ya
24:28Kalau ada komen
24:30Di vertical
24:32Dapat salam dari mas
24:38Willy yang domen Asia
24:40Ya maaf katanya
24:42Kalau Flirnya lagi daun jadi domen Asia
24:44Gak bisa dibuka
24:46Dan sayang banget katanya mas Teza lagi pakai baju domen Asia
24:48Oke ini nih
24:56Kita mau bahas yang mas Zain
24:58Highlight ya
25:00Vitesse yang baru itu ada browser mode
25:02Nah apa itu browser mode
25:04Kita liat sama-sama
25:06Ini enakan gini apa enakan gede
25:08Bebas
25:14Penonton kan banyak yang
25:16Banyak yang vertical ya
25:18Jadi kita malam ini versi vertical
25:20Dulu ya
25:22Jadi versi 4 ini
25:26Sebenernya dari versi 3
25:28Udah ada browser mode
25:30Cuma experimental
25:32Pake flag
25:34Ya kayaknya pernah coba
25:36Skill-less
25:38Ya gak tau ya kalau use case nya yang rumit banget
25:40Ya bermasalah
25:42Tapi sebenernya normal-normal aja sih
25:44Cuma emang belum
25:46Cukup mature
25:48Buat dimasukin ke stable aja
25:50Browser mode ini apa
25:52Sebenernya
25:54Bisa di browser headless ya?
25:56Enggak beneran ada UI nya
25:58Di render
26:02Oh kayak saya press yang UI ya
26:04Gak pas nyoba itu kayak nyoba skill-less doang
26:12Karena liat pose
26:14Entah pose apalah
26:16Ya maksudnya apakah itu nyambungnya sama JS
26:18Kan Vitesse juga sebetulnya
26:20Kita bisa konfigurkan
26:22Bisa pakai JS DOM
26:24Bisa pakai HP DOM
26:26Nah terus itu tuh browser UI nya
26:28Exactly pakai apa gak tau sih
26:30Cuma kalau mau ngetes kayak dokumen
26:32Atau apa lah web API
26:34Global-global yang kayak window
26:36Dokumen gitu itu ada
26:38Jadi bisa ngetes local storage
26:40Nah cuma exactly
26:42Cara kerjanya gimana
26:44Gak pernah tau dan gak pernah ngecek
26:46Jadi sekarang mending di cek aja
26:48Gak kelihatan
26:50Gimana cara kerjanya sih
26:52Gak kelihatan
26:54Jadi kita sekarang lagi kayak
26:56Mencari titik tengah
26:58Yang nyaman buat kita di desktop
27:00Dan nyaman juga
27:02Buat di mobil
27:04Nyamanya
27:08Experimental mode
27:10Test on production
27:12Test on production
27:14Real mean test on production ya
27:18YOLO
27:20Emang kalau leka tes dimana
27:24Gak usah ditest udah
27:28Gak usah ditest
27:30Pakai perasaan, pakai feeling
27:32Kayaknya ini gak error gitu ya
27:34Oke
27:36Ini ada beberapa pilihan provider
27:38Ada playerat, ada web driver IO
27:40Dan preview
27:42Dia bisa pakai play
27:44Udahik
27:46Preview apa preview
27:48Oh dari vitasnya sendiri ya
27:50Gak tau
27:54Playerat aja yang umum ya
27:56Wait
27:58Kalau preview dia pakai web driver
28:00By die
28:04Oh browser
28:06Web driver IO
28:12Itu kelihatannya playerat cuma untuk
28:14Kita mau jalanin di system
28:16CICD
28:18Jadi kalau cuma di lokal ya
28:22Itu vitas browsernya aja
28:24Kayaknya ya
28:26Import based vitas browser
28:32Oh iya iya benar benar
28:34Apa yang dia bukus
28:36Pakai apa
28:42Anyway
28:44Wah ini berarti
28:58Justru malah kayak
29:00Storybook testing yang pernah kita bahas kan
29:02Cuma ini ya
29:04Di lokal kalau yang punya
29:06Chromatic
29:08Di storybook itu kan
29:10Dia ada kayak service nya
29:12Terus dibikin UI nya sendiri
29:14Dibikinin UI buat compare
29:16Tapi maksudnya kalau kita mau
29:18Bikin sendiri visual regression
29:20Testing sekarang bisa ya
29:22Berarti pakai vitas
29:38Mawadatu Riza
29:40Halo Riza, oh mangilannya Riza bukannya
29:42Taman namanya
29:44Saya masih bingung
29:46Penggunaan testing biasanya pada
29:48Pakai di case apa aja
29:50Jangan mention
29:52Jangan pakai contoh counter ya
29:54Jangan pakai contoh counter
29:56Hello Riza
29:58Tuduh app
30:00Hacker news clone
30:04Kalau di real world sih
30:06Kalau kerjaan gue pakenya
30:08Aku pakenya cukup simple sih
30:10Maksudnya nggak terlalu rumit
30:12Jadi kalau kayak yang pure function
30:14Kayak yang contohnya apa ya
30:16Logic lah
30:18Logic kan macem-macem ya
30:20Misalnya data user yang masuk
30:22Ini itu dia statusnya
30:24Sebagai admin
30:26Kayak user status admin
30:28Atau moderator atau apa level-levelnya
30:30Terus dia authorize atau nggak
30:32Buat melakukan sesuatu
30:34Ya bagusnya dipisah logicnya
30:36Ada logic yang reusable
30:38Bisa dipakai di berbagai tempat
30:40Nah itu ya
30:42Apa harus ada test suite-nya
30:44Biar ngecek test-nya
30:46Funksinya apa
30:48Berfungsi betul kan
30:50Itu sebagai bagian dari acceptance criteria
30:52Contoh real lagi apa ya
30:54Misalnya user mau daftar
30:56Register
30:58Kalau regionnya beda kan
31:00Umur apa kayak usia
31:02Yang boleh sign up itu beda-beda ya
31:04Jadi ya udah dibikin case-case-nya
31:06Terus kalau ganti
31:08Apa
31:10Kalau ganti language atau lokal
31:12Apa lokal itu kan format date-nya juga
31:14Misalnya yang ditampilin
31:16Bisa lain-lain
31:18Ya pokoknya apapun yang logic yang kayak gitu
31:20Itu by default gue bikin unit
31:22Unit testing-nya sih
31:24Sama kalau UI component
31:26Itu jujur nggak terlalu rumit
31:28Jadi nggak beneran
31:30Di tes case-by-case
31:32Karena apa
31:34Kalau yang end-to-end itu dibikin oleh
31:36Developer lain dan itu pakai selenium
31:38Atau apa punya end-to-end
31:40Tapi kalau per component-nya misalnya
31:42Apa ya, text input
31:44Button atau semacamnya
31:46Cuma ngecek di render dengan betul
31:48Tanpa error atau nggak
31:50Sama ya itu paling biasa ngecek satu
31:52Apa, satu text label
31:54Atau apalah, jadi ngetest bahwa
31:56Komponennya berhasil
31:58Dikantilin sesuai
32:00Ya sesuai yang kita mau
32:02Cuma misalnya kayak ada state-state-nya yang ditoggle
32:04Isu-nya berubah itu jujur
32:06Gue nggak pernah bikin testing-nya sih
32:08Itu
32:10Kalau contoh penggunaannya
32:12Mungkin Ivan Risa
32:14Kalau saya
32:16Component testing
32:18Jadi ya
32:20Kayak si Eka bilang tadi
32:22Kalau misalnya
32:26Di render
32:28Button di render
32:30Nanti hasil render-nya
32:32Di sesuai
32:34Di cek bisa kerender apa nggak
32:36Lalu
32:38Snapshot
32:40Kalau Jazz kan ada snapshot testing
32:42Di Vtes juga ada
32:44Compatibel ya snapshot
32:46Nah ini yang meng
32:48Oke saya jelaskan dulu
32:50Snapshot testing-nya gunanya
32:52Yang saya pakai gimana
32:54Jadi misalnya
32:56Saya generate sebuah
32:58Kalau page mungkin kegedean ya
33:00Karena bisa macam-macam state-nya
33:02Anggap aja
33:04Search bar
33:06Search bar ya kan
33:08State-nya search bar itu
33:10Misalnya kalau di render jadi component search
33:12Search bar itu di render
33:14Ada hasil HTML-nya kan
33:16Terus HTML itu di snapshot
33:18Jadi kalau misalnya
33:20Ada perubahan
33:22Ada kelas yang nambah
33:24Maka
33:26Di test yang berikutnya akan ada
33:28Dia akan lempar
33:30Warning atau error
33:32Ada perubahan HTML nih
33:34Lu mau pakai
33:36Ini bener nggak? Kalau bener
33:38Snapshot-nya di update, kalau nggak bener
33:40Berarti ada yang salah
33:42Di dependensi
33:44Di dependensi search bar itu
33:46Ada menambahkan HTML tertentu nih
33:48Gitu
33:50Namun
33:52Yang terjadi ya
33:54Itu gunanya
33:56Jadi bisa early detection
33:58Kalau terjadi
34:00Salah perubahan rendering
34:02Atau salah rendering
34:04Nah itu bisa ada cerita horror-nya
34:06Atau apa
34:08Kalau udah reflex
34:10Wordcut-nya itu u update
34:12All snapshots
34:14Terus kalau kita buru-buru
34:16Dan ah kayaknya bener u berubah semua
34:18Padahal itu bukan
34:20Itu ternyata salah
34:22Jadi ya itu human factor ya
34:24Itu misalnya kesalahan
34:26Tapi maksudnya itu
34:28Feedfold-nya snapshot testing itu
34:30Kalau udah muscle memory
34:32Kalau udah merah
34:34Betul
34:36Kita commit
34:38Kita commit kan
34:40Commit-nya ke git kan, ke repo kan
34:42Karena snapshot itu disimpan semua kan
34:44Yang terjadi adalah
34:46Seringnya saya update, sana update
34:48Beradu snapshot-nya
34:50Misalnya 1 team
34:52Nge-update
34:54Different component
34:56Tetapi
34:58Component A sama
35:00Component B itu dipakai
35:02Dibikin search bar tadi misalnya
35:04Anggap aja 1 text
35:061 button ini over-simplified
35:08Ya kita ya, karena component kita kan
35:10Bisa jadi kompleks ya
35:12Over-simplified, jadi saya update button
35:14Sana update text
35:16Input-nya
35:18Nah, yang terjadi adalah
35:20Dia submit snapshot-nya dia
35:22Saya submit snapshot saya
35:24Kan konflik
35:26Nah, ujung-ujungnya
35:28Terakhir adalah
35:30Kerjaan saya itu
35:32Kebanyakan benerin snapshot
35:34Ngebenerin
35:36Konflik gara-gara snapshot
35:38Nah, itu yang saya horror-nya disitu
35:40Kenapa saya nggak suka pakai
35:42Snapshot testing
35:44Saya tinggalin
35:46Cuman
35:48Iya, itu harus di-use sparingly
35:50Maksudnya
35:52Kan itu auto-generate ya
35:54Maksudnya itu konsepnya bagus
35:56Tapi maksudnya snapshot itu
35:58Snapshot bisa inline
36:00Bisa generate
36:02Itu loh yang di folder tersendiri
36:04Underscore-underscore snapshot
36:06Bisa banyak
36:08Kalau case-nya banyak
36:10Ya, itu file-nya jadi banyak
36:12Nah, itu berarti kita yang harus mikir
36:14Mana yang perlu generate snapshot file
36:16Mana yang perlu di-inline
36:18Dan behavior-nya gimana
36:20Dan bukan cuma HTML sih
36:22Apapun ya
36:24Misalnya kita cuma pakai pure function
36:26JavaScript
36:28Kita mau meng-convert misalnya
36:30Kita nge-grab data
36:32Dari API, REST API
36:34Terus mau kita tampilin di
36:36UI, di front-end
36:38Misalnya component card
36:40Posting, blog post
36:42Artikel atau post
36:44Terus mungkin behavior-nya lain-lain
36:46Misalnya kalau
36:48Kalau user nge-post sebagai
36:50Individu, itu tampilannya
36:52Avatar si user
36:54Tapi misalnya
36:56Kalau kayak Facebook atau apalah
36:58Atau Twitter, misalnya nge-post dari
37:00Community atau group
37:02Itu kan avatar-nya avatar
37:04Community-nya kan, misalnya
37:06Gajik yang
37:08Ya, yang molah men-transform
37:10Data dari API
37:12Nah, itu bisa
37:14Daripada ribet nge-snapshot
37:16Resulting dom-nya
37:18Yang misalnya kita punya
37:20Pure function buat, yaitu
37:22Apa, meng-convert data
37:24Dari REST API yang segambring
37:26Jadi data yang lebih ramping untuk ditampilin
37:28Di UI card-nya, kayak cuma title
37:30Avatar, sama summary
37:32Nah, itu kan kita punya
37:34TypeScript atau JavaScript
37:36Function tersendiri, bisa kita snapshot
37:38Si object-nya itu aja
37:40Jadi bukan keseluruhan
37:42UI yang di-generate
37:44Ya, lagi-lagi itu choice sih, maksudnya
37:46Jawaban sakti developer
37:48It depends, tapi maksudnya
37:50Dari unit testing itu bisa generate
37:52Snapshot untuk dom-nya
37:54HTML-nya, kayak Ivan bilang tadi
37:56Bisa juga, ya HTML
37:58Object aja, jadi JSON
38:02Itu untuk snapshot
38:04Dari snapshot itu bisa dijadikan
38:06Oh, satu lagi
38:08Pakai jazz
38:10V-test juga bisa
38:12Untuk visual regression testing
38:14To match snapshot
38:16Jadi ada, dia bisa
38:18Nge-capture halaman
38:20Atau nge-capture komponen itu
38:22Terus nanti si
38:24Komponen itu bisa disimpan dan
38:26Dimatch
38:28Terakhir
38:30Yang paling sering ya
38:32Unit testing, jadi per-function
38:34Yang seperti si Eka
38:36Bilang tadi, per-function itu
38:38Bisa ditest masing-masing
38:40Yang saya utamakan, saya test itu
38:44Yang function-function yang
38:46Yang ada
38:50Business logic-nya aja sih, nggak semua
38:52Function saya test
38:54Kayak helper-helper, saya malas
38:56Ngetest helper, jadi lebih kara
38:58Integration testing lah ya
39:00Jadi saya nggak mau sebut unit testing
39:02Karena unit testing itu artinya
39:04Per-function, per-unit
39:06Per-functionnya di-test
39:08Lebih tepatnya bilang
39:10Per-function
39:12Per-module
39:14Jadi
39:16Misalnya
39:18Modul
39:20Etucard
39:24Etucard
39:26Jadi kalau misalnya
39:28Function etucard-nya, ini bukan
39:30End-to-end ya, jadi function etucard-nya itu
39:32Bisa dimocking
39:34Datanya, kalau saya masukin data ini
39:36Statenya ke update apa tidak
39:38Saya bisa ngecek statenya ke update
39:40Barang yang sama, di-add dua kali
39:42Dia akan nambah kuantitinya atau nggak
39:44Yes, exactly like that
39:46Jadi saya test-nya
39:48Integration
39:50Bukan unit testing
39:52Saya paling mah bikin unik, tapi
39:54Sebenarnya kalau
39:56Nge-review, nge-review PR
39:58Suka bilang tambahin dong unit testing
40:00Tapi kalau saya bikin unit testing malas
40:02Kan ada LLM
40:06Itu yang suruh buat
40:08Sekarang itu
40:12Itu repetitif buat LLM
40:14Unit testing itu kan repetitif ya
40:16Jadi itu salah satu contoh use case yang
40:18Bagus buat LLM
40:20Kalau boleh pakai
40:22Suka ngomong sih sama
40:24Colleague yang lain
40:26Aduh ini
40:28Function kan ini sudah mulai ribet deh
40:30Nanti kalau mau direfactor pasti susah
40:32Mending lu bikin unit testing
40:34Di sebelah sana kayak udah menggrutuh nih
40:36Ya Elam
40:38Bikin unit testing lagi
40:40Terus akhirnya dia balas
40:42Nanti dia nge-review PR gue
40:44Ini juga, ini kayak perlu unit testing ya
40:46Gua bikin lagi unit testing
40:48Balas-balasan
40:50Iya
40:52Nah ini ya
40:54Itu kalau ngomongin mau unit testing
40:56Atau integration testing itu ada
40:58Artikel menarik dari
41:00KenC.Ya silahkan dibaca
41:02Nah, kembali
41:04Ke pertanyaan ya
41:06Sebenernya ini pertanyaannya adalah
41:08Apa ya
41:12Sebenernya fungsi testing itu untuk apa kan
41:14Ini saya setuju sekali nih
41:16Bisa buat dokumentasi
41:18Jadi case apa aja
41:20Yang di tes adalah case yang berhasil
41:22Dan juga case yang gagal
41:24Kalau berhasil itu apa ya
41:26Test itu kan kayak kita
41:28Sebenernya kata-katanya
41:30Agak kurang, bukan kurang sih
41:32Test itu kan uji coba
41:34Pengujian gitu kan
41:36Kalau ada lagi
41:38Mas Hap yang berbeda dia menggunakan
41:40Kata-kata spek
41:42Jadi kita nulis spesifikasi
41:44Dari sebuah program atau fungsi
41:46Spesifikasi
41:48Ya, jadi misalkan
41:50Kita mau bikin
41:52Fungsi tadi add to cart
41:54Memastikan kalau
41:56Barangnya sama
41:58Kalau di add 2 kali 3 kali
42:00Maka nambah quantity
42:02Tapi kalau barangnya berbeda
42:04Quantity nya tetap, tapi nambah item
42:06Itu kan
42:08Keinginan kita kan
42:10Sesuai ekspektasi kita
42:12Kalau barangnya sama, quantity nya nambah
42:14Kalau barangnya berbeda, item nya nambah
42:16Itu yang di tes
42:18Sebagai salah satu contoh
42:20Karena mumpung karena ingat shopping cart ya
42:22Saya tuh pernah
42:24Membuat tes buat
42:26Shopping cart juga
42:28Tetapi karena
42:30Ada sistem kayak bundling
42:32Jadi ada bundling kalau
42:34Beli 3 gratis 1
42:36Atau
42:38Beli 2 diskon
42:40Wah, ada diskon nya juga
42:42Ya, maksudnya ada
42:44Promo kayak beli 3 gratis 1
42:46Nah, yang susahnya itu adalah
42:48Ini
42:50Toko kacang mata
42:52Dan jualan contact lens
42:54Jadi jualan contact lensnya
42:56Mata kanan, mata kiri bisa dibeli
42:58Berbeda
43:00Berbeda
43:02Akhirnya
43:04Akhirnya, saya yang bisa lakukan
43:06Mata kanan dan kiri juga bisa lain kan
43:08Mata kanan dan kiri bisa beda minus nya
43:10Dan kiri ada plus nya
43:12Jadi kalau di contact lens itu kan sepasang
43:14Jadi kalau misalnya dia
43:16Kaki kanan kiri gak bisa ya
43:18Iya, kaki kanan kiri
43:20Bisa juga ada yang bisa beda loh
43:22Iya tapi jarang lah
43:24Di banding mata
43:26Ada, makanya bisa beri custom
43:28Sepatunya custom
43:30Maksudnya statistically insignificant
43:32Lanjut
43:34Jadi, karena
43:36Basis logicnya
43:38Terlibat, akhirnya
43:40Saya dan tim itu memulai dengan
43:42Membuat logicnya dulu
43:44Kalau misalnya
43:46Beli sekian, hitungannya sekian
43:48Beli sekian, hitungannya sekian, beli sekian, hitungannya sekian
43:50Lalu, kerjakan lah
43:52Programnya, atau logicnya
43:54Code nya
43:56Lalu bikin lah testnya
43:58Nah, salah satu
44:00Keunggulan, kalau kita sudah
44:02Buat kode dan ada testnya
44:04Itu kayak
44:06Merasa selamat, oh kode kita jalan
44:08Kedua
44:10Confident ya, yakin ya
44:12Iya, kedepan untuk maintenance
44:14Atau merubah sesuatu
44:16Refactor
44:18Refactor, atau mau menambahkan logic lain
44:20Memastikan
44:22Kalau logic kita yang lama gak rusak
44:24Minimal
44:2890%
44:30Masalah itu sudah ditangani
44:32Dan ditangkap sebelum masalah itu
44:34Terjadi, meskipun
44:36Masih ada faktor X yang lain ya
44:38Yang
44:40Isu yang edge cases yang
44:42Gak ke cover, atau memang
44:44Harus dirubah
44:46Tetapi, 90%
44:48Masalahnya sudah
44:50Kalau kita punya
44:52Testing, integration testing ini
44:54Cepat kita dapat
44:56Sebelum dia terjadi masalah di production
44:58Sama, ada bonus
45:02Confident sih
45:04Kayak kalau use case yang Ivan bilang tadi
45:06Itu kan pasti logicnya
45:08Ditulis, ya misalnya
45:10Kalau JavaScript, TypeScript dev ya
45:12Pakai TypeScript, maksudnya
45:14Ada fungsinya terpisah kan
45:16Bayangin ribetnya kalau
45:18Pas kita lagi develop
45:20Setiap mencoba betul atau enggak
45:22Kita harus beneran dari UI
45:24Dulu, misalnya kita punya Next.js
45:26App, atau React App, atau apalah
45:28Terus kita harus jalanin app-nya
45:30Yang mana nyambung ke API
45:32Terus kita harus add to cart
45:34Beneran, buat ngecek
45:36Product yang betul, diskonnya
45:38Betul, ribet
45:40Udah ribet, makan biaya
45:42Makan biaya, maksudnya cost
45:44API, ya ribet juga
45:46Harus jalanin
45:48Aplikasi UI-nya
45:50Nah kan, kalau ada
45:52Unit testing itu, kalau
45:54Kaya test driven development, tulis aja
45:56Dulu, masing-masing
45:58Test-nya semua, biar kosong
46:00Dulu, sambil di terminal, jalanin
46:02Watch, nah itu kan merah
46:04Semua, apa, jadi
46:06Kita nggak harus
46:08Kita nggak harus bikin di console
46:10Log, atau semacamnya
46:12Dari browser dulu, kita belum berurusan sama
46:14Browser lama sekali, kita mastiin
46:16Logic-nya berfungsi
46:18Sesuai ekspektasi, ya udah kan enak
46:20Sambil ngetik di IDE
46:22Sambil liat
46:24CLI di samping kita, satu per satu
46:26Makin lama, hijau semua
46:28Nah, di situ kita tahu
46:30Siap buat, ya kalau pun kita mau
46:32Ngetes, disambungin ke UI
46:34Minimal kan, fungsinya udah jalan semua
46:36Buat convenience juga
46:38Lebih percaya diri, intinya
46:44Code-nya kita yakin
46:46Bahwa code-nya itu sesuai dengan harapan kita
46:48Ini, Dita
46:50Yakin, deploy
46:52Dengan lebih percaya diri
46:54Kalau pede, berarti bisa dong
46:56Deploy hari Jumat
46:58Berani nggak?
47:00Kalau terpaksa
47:02Terpaksa saya, deploy-deploy aja
47:04Tapi dengan syarat
47:06Kalau ada apa-apa, gue cuma bisa rollback
47:08Tapi gue nggak mau beres-beresin
47:10Ada syarat
47:14Ini juga kalau udah isu kan, enak
47:16Nyalahin, ngeblame
47:18API-nya tuh, kayaknya
47:20Karena kita bisa langsung ngecek kan
47:22Jalanin aja, apa
47:24Semua unit testing yang udah kita bikin
47:26Kayak apa
47:28Ya itu fungsinya jalan dengan betul atau nggak
47:30UI-nya kerender atau nggak
47:32Ini jalan, API-nya kali tuh
47:34Service-nya, atau infra-nya
47:36Kita bisa lebih cepat
47:38Nyalahin orang lain
47:40Nyalahin teman kerja lain
47:42Dan ini juga, selain lebih
47:44Percaya diri, lebih percaya diri juga
47:46Kalau kita mau refactor
47:48Ada perubahan code, seperti yang Ivan sebutkan tadi
47:50Itu sangat penting
47:52Jadi pastikan
47:54Sebelum refactor
47:56Test-nya
47:58Berjalan baik dulu
48:00Atau bahkan
48:02Kalau ada bugs
48:04BDD
48:08Bugs Development
48:10B-I-P-D-D
48:16Untuk memastikan supaya bugs-nya nggak muncul lagi
48:18Kita perlu menulis
48:20Testing untuk
48:22Memastikan bugs-nya nggak muncul kan
48:24Maksudnya gimana, gimana
48:28Jadi misalkan ketemu bugs nih
48:30Terus
48:32Untuk supaya
48:34Kadang-kadang kita perbaiki
48:36Bugs-nya, nggak kita test
48:38Bugs-nya udah bener atau belum
48:40Terus kita perbaiki bugs yang lain, regression tadi
48:42Jadi biasanya
48:44Testing-nya juga ngetest
48:46Bahwa bugs ini tidak terjadi lagi
48:48Kan biasanya
48:54Kalau ada bugs, pasti ada
48:56Steps to reproduce
48:58Steps to reproduce
49:00Ada laporan
49:02Kalau misalnya laporan bug yang
49:04Ticket misalnya, ada bug nih, ada issue
49:06Yang pertama kali cara
49:08Nge-reproduce bug-nya itu gimana
49:10Yang susahnya itu udah dapet ticket, kalau
49:12Bug-nya itu intermittent
49:14Walaah itu
49:16Gak bisa reproduce, nanti aja
49:18Ada bug nih
49:20Tapi nggak bisa reproduce, kita bisa lihat nih hasilnya
49:22Salah nih
49:24Terus cara reproduce-nya gimana, nggak tahu
49:26Itu susah
49:28Tapi biasanya kan
49:30Kalau normal bug ya, bug
49:32Steps to reproduce
49:34Si A ngapain, ngapain step-step-step-step
49:36Oke, hasilnya
49:38Yang terlihat ini, harusnya
49:40Expected result-nya begini
49:42Nah itu
49:44Selanjutnya
49:46Kalau misalnya sudah
49:48Biasanya
49:5050/50 sih kadang
49:52Saya minta, oh bikinin lah
49:54Bikinin lah test-nya untuk
49:56Prevent supaya bug itu
49:58Tidak terjadi lagi
50:00Atau test-nya diperbaiki
50:02Wah, tanyaannya bagus-bagus malam ini
50:06Luar biasa
50:08Kayaknya short lebih banyak ini deh
50:10Lebih gampang
50:12Artificially inflated sama Youtube
50:16Biar pada pake bukan short
50:18Sebagai seorang programmer, sejauh mana saya harus
50:20Menulis script test
50:22Dan sampai batas mana saya bikin unit test
50:24Tergantung tanya siapa sih, coba tanyakin si dots
50:28Kalau tanyakin si dots, harusnya bikin semua
50:30In real life
50:32Semua case ya
50:34Semua case
50:36Tercover lah gitu ya
50:38Bener gak?
50:40Itu, kalau unit test-nya
50:42Kalau unit test
50:44Makanya yang namanya coverage ya
50:46Kalau Mocha dengan Istanbul
50:48Ada coverage kan
50:50Sampai semua
50:52Function-nya itu ada
50:54Testing-nya
50:56100%
50:58Coverage, bahkan ada sampai
51:00Dijual kan itu, maksudnya kata-kata itu
51:02Dijual?
51:04Misalnya kenapa
51:06Projek kita bagus
51:08100%
51:10100% coverage
51:12Ada kata-kata itu
51:14Jadi marketing
51:16Biasanya
51:18Midget Hub kan
51:20Ada button-nya yang misalnya ijo
51:22100% testing
51:24Dan bukan biasanya ya
51:26Salah satu praktik yang sering
51:28Di pipeline CICD juga bisa
51:30Dibuat, gak bisa nge push
51:32Sampai semua kode
51:34Cover sama test
51:36Nah ini ada cerita lucu nih
51:38Bukan horor sih ini, agak semi-comedy
51:40Sama Mas Zain dulu
51:42Pas bikin apa?
51:44Bikin
51:46Awal
51:48Orgabantu warga
51:50Buat apa?
51:52Itu bantuan
51:54Bantuan pas lagi jaman lockdown
51:56Nah itu
51:58Ada sistem kayak gitu
52:00Jadi kalau coverage-nya
52:02Gak 100%
52:04Atau apa
52:06Gak bisa nge push
52:08Atau gak bisa nge merge, ya lupa apanya
52:10Semacam itu, padahal itu kan
52:12Time sensitive banget ya, maksudnya
52:14Gak bisa tunggu, ya maksudnya
52:16Info butuh bantuan
52:18Atau mungkin tersedia bantuan
52:20Gak bisa ditunda ke besok-besok
52:22Itu kebetulan, pas gue yang
52:24Bikin
52:26Terus berusaha ngakalin
52:28Personally ngakalin
52:30Kode yang gak ke cover itu kayak
52:32Dikomben, jadi satu line
52:34Dengan kode yang udah ke cover test
52:36Buat ngakalin sistemnya
52:38Gak bisa
52:40Terus akhirnya keliatannya di override
52:42Jadi biar bisa
52:44Push dulu
52:46Maksud Aska
52:48Itu salah satu
52:50Cerita lucu dari
52:52Coverage
52:54Tapi sejujurnya
52:56Kalau di in real life
52:58Apa ya
53:00Itu tergantung masing-masing tempat juga sih
53:02Kebetulan kalau gue
53:04Kalau di tempat kerja sekarang
53:06Gak se-strict itu
53:08Yang penting
53:10Bisa mertang jawabin aja
53:12Karena sebenarnya di luar itu ada end to end
53:14Jadi kayak ada beberapa
53:16User story yang misalnya dari awal
53:18User bisa mendaftar
53:20User bisa memblocose
53:22Atau kalau mungkin diterapin
53:24Di e-commerce, ya user bisa
53:26Itu udah ada
53:28Testing end to endnya
53:30Ya kalau itu mati
53:32Langsung kayak itu dijalani otomatis
53:34Setiap hari atau setiap
53:36Sekian jam ya apanya
53:38Secara periodik, jalanin otomatis
53:40Jadi ya
53:42Kalau itu affected
53:44Kalau story-story yang paling
53:46Kalau case yang paling penting affected
53:48Ya kita bakal tau
53:50Dan suruh betulin
53:52Itu lebih kayak kesadaran
53:54Ga kesadaran sih, maksudnya
53:56Ga ada task
53:58Ga ada penugasan secara spesifik
54:00Harus
54:02Bikin testing yang meng-cover
54:04Seluruh folder
54:06Ya itu kalau gue sih
54:08Standard pribadi nya itu setiap function
54:10Ada testnya
54:12Kadang yang ditest cuma
54:14Happypad-nya doang juga
54:16Atau Happypad 1, Error 1
54:18Jadi error-nya tuh ya yang obvious lah
54:20Pokoknya cuma buat
54:22Tapi
54:24Karena pake TypeScript selalu
54:26Try catch, iya ngetest aja
54:28Catch nya jalan atau engga
54:30Kalau UI
54:32UI component cuma ngetest
54:34Di render atau engga
54:36Oke
54:38Untuk prevent
54:40Error rendering aja ya
54:42Untuk prevent misalnya kayak
54:44Fail to render
54:46Biasanya ngerender
54:48Ini kenapa tiba-tiba engga muncul
54:52Kalau dari perspektif user
54:54Atau punya yang diluar team dev
54:56Ga muncul itu kan error-nya dari mana
54:58Ga tau bisa dari infra
55:00Maksudnya tiba-tiba kosong
55:02Apakah dari infra atau nyanyian dari front-end
55:04Maksudnya shell-nya engga keload
55:06Gara-gara hal bodoh apalah
55:08Kesalahan di UI
55:10Maksudnya react nya misalnya salah render
55:12Ya meminimalisir hal
55:14Seperti itu
55:16Ya
55:18Nah ini juga bagus nih pertanyaan
55:20Lanjutannya nih
55:22Kalau bikin testing
55:24Gini apakah dari PM
55:26Kayaknya engga ya
55:28Kalau testing itu dari developer ya
55:30Dan masuk ke timeline development juga
55:32Artinya ada
55:34Ada kekhawatiran kalau kita bikin test
55:36Lebih
55:38Jadi waktu pekerjaannya jadi lebih lama
55:40Bukan khawatir lagi
55:44Tapi sudah pasti lebih lama
55:46Ada statistiknya
55:48Kalau kita buat test
55:50Untuk developmentnya itu
55:52Akan 30 persen lebih panjang
55:54Itu saya pernah dengar
55:56Gimana gitu
55:58Kalau kita nyediin test
56:00Jadi dari 10 hari jadi 13 hari
56:02Rata-rata ya
56:06Rata-rata
56:14Jadi itu happy path
56:16Sama error satu itu
56:18Pasti akan ada overhead
56:20Mau sedikit
56:22Sekecil apapun pasti ada overhead
56:24Tapi
56:26Maintenance ke depannya itu
56:28Pay off sih menurut saya
56:30Untuk maintainnya
56:32Sampai
56:342 tahun, 3 tahun, 5 tahun
56:36Payed off bener-bener
56:38Kalau engga ada test
56:40Aduh kacau balau deh
56:42Kalau mau ngerfaktor
56:44Karena gini
56:46Lebih mahal biaya
56:48Kita ngetes manual
56:50Satu persatu
56:52Jauh lebih mahal
56:54Karena gini
56:56Kalau misalnya kita ngetes
56:58Kalau kita bangun sebuah
57:00Anggap aja sebuah
57:02Studio
57:04Studio yoga
57:06Studio zumba
57:08Studio exercise yang ada check outnya
57:10Simple aja
57:12Check out membership
57:14Blood life apa
57:18Bloodnya
57:20Business itu adalah
57:22Check out
57:24Berarti secara kita nge-development
57:26Setiap kali kita
57:28Mau deployment
57:30Untuk memastikan
57:32Check outnya tidak bermasalah
57:34Kita harus test check outnya
57:36Manual
57:38Seminggu sekali
57:40Kalau sebelum lagi hotfix
57:42Itu waktu kita
57:44Dihabiskan mungkin
57:46Dari 10 menit
57:4815 menit hanya untuk ngetes
57:50Business critical
57:52Check list
57:54Ada listnya
57:56Business critical
57:58Ngetes itu mungkin 15 menit setengah jam
58:00Tapi kalau itu repetitif
58:02Itu akan jadi banyak
58:04Sedangkan kalau kita bisa automate
58:06Dengan testing
58:08Yang hal
58:10Yang basic
58:12Atau sederhananya yang sudah harus
58:14Tercapai itu sudah di automate oleh
58:16DCICD
58:18Sebelum
58:20Sebelum PR nya di merge
58:22Sudah ketahuan kalau ada masalah
58:24Itu save waktu
58:28Dan waktu adalah uang
58:34Saya setuju sih
58:36Jadi lebih ke
58:38Lebih ke apa namanya
58:40Ya memang waktu yang dibutuhkan untuk
58:42Menulis kode dan maintenance
58:44Kan kode testing itu
58:46Juga harus di maintain kan
58:48Pasti ada overhead atau ada
58:50Waktu lebih
58:52Waktu yang dibutuhkan lebih
58:54Banyak dibandingkan kalau kita
58:56Nulis implementasinya saja
58:58Tapi coba bayangkan
59:00Di apa ya
59:02Coba bayangkan lebih lama mana
59:04Kalo ketika kita nulis
59:06Implementasi kode
59:08Tapi gak pake testing
59:10Terus tiba-tiba ada bugs
59:12Critical yang tidak tertangkap gara-gara kita lupa
59:14Terus bugsnya 2 tahun kemudian
59:18Kita udah lupa ini harusnya gimana
59:20Itu sih yang kayak lebih intangible
59:22Kayak 2 tahun kemudian
59:24Ada bug dari suatu kode
59:26Yang bikin
59:28Udah gak tau dimana
59:30Udah gak kerja disitu maksudnya
59:32Gak bisa ditanya langsung atau kalaupun ada
59:34Orangnya lupa dulu ini buat apa
59:36Dan maksudnya gimana
59:38Kalo kita gak tau ini maksudnya
59:40Buat apa dan gimana
59:42Ngebetulinnya juga lebih abstrak lagi kan
59:44Nah testing itu
59:46Salah satu cara mengurangi
59:48Masalah itu
59:50Mending 2 tahun
59:52Orang baru mau launching gitu ya
59:543 bulan project mau launching
59:56Tiba-tiba ada bugs critical besok harus launching
59:58Harus mular lagi
1:00:00Dan sebagian besar project IT
1:00:02Molar ya salah satunya karena ini juga
1:00:04Jadi mungkin
1:00:06Ya waktu estimasinya akan lebih
1:00:08Panjang tapi
1:00:10Kalau dibandingkan dengan
1:00:12Gak pake testing, terus abis itu
1:00:14Harus bug fixing
1:00:16Itu kayaknya saya lebih memilih
1:00:18Mendingan lebih panjang nulis testing aja
1:00:20Kenapa? Karena bug fixing itu
1:00:22Stressful loh
1:00:24Itu mental
1:00:26Team itu
1:00:28Terkurang abis disitu
1:00:30Jadi mendingan
1:00:32Cepet nulis testing daripada
1:00:34Kena mental
1:00:36Ngurusin bugs gitu dan bugsnya juga
1:00:38Kadang-kadang kalo kita gak pake
1:00:40Testing perbaiki bugs
1:00:42Yang ini malah error yang
1:00:44Di tempat lain gitu
1:00:46Karena gak ada testingnya
1:00:48Jadi jauh lebih panjang kita perbaiki bugs
1:00:50Dibandingkan dengan
1:00:52Tadi 30% atau
1:00:54Ada waktu lebih yang di gunakan untuk
1:00:56Bikin testing
1:00:58Begitu
1:01:00Dan kalo nyambung sama
1:01:02Pertanyaan yang tadi
1:01:04Kalo bisa sih jangan diakhir
1:01:06Development kayak gitu karena pasti ada aja
1:01:08Pasti nanti bakal kekat itu
1:01:10Gak bakal dikerjain
1:01:12Jadi ya
1:01:14Yaudahlah testing gak usah dulu gitu ya
1:01:16Sama aja kayak dokumentasi ya
1:01:18Kalau sudah di skip
1:01:20Pasti akan di skip
1:01:22Selamanya
1:01:24Yes
1:01:26Iya
1:01:28Iya
1:01:30Jadi maksudnya gimana caranya kita sebagai developer
1:01:32Minta buy-in
1:01:34Waktu bikin fitur itu sendiri
1:01:36Ya selain biar gak
1:01:38Kekat kayak tadi kita juga masih
1:01:40Ingat, maksudnya masih fresh
1:01:42Terutama kalo ada logic yang aneh-aneh lah
1:01:44Bukan aneh, maksudnya yang kurang
1:01:46Instinctif, kurang intuitif
1:01:48Misalnya ini harus di reject
1:01:50Kalau begini-gini-gini
1:01:52Nah mumpung kita inget ya kita harus bikin
1:01:54Testnya juga
1:01:56Yes, pilihannya mau repot
1:01:58Di awal atau di belakang, betul
1:02:00Mendingan di awal ya
1:02:02Masih fresh, masih semangat
1:02:04Gila yang udah mau launching tiba-tiba
1:02:06Kena bugs kan
1:02:08Deg-degannya kayak apa gitu
1:02:10Apalagi kalo misalkan
1:02:12Udah siap semuanya
1:02:14Bia yang dikeluarkan udah banyak
1:02:16Tiba-tiba gak jadi launching
1:02:18Jadi kerugiannya bukan hanya dari sisi
1:02:20Aplikasinya tapi dari sisi
1:02:22Perusahaan secara umum
1:02:24Dan betul
1:02:26Menyakit dalam gak ada alasan
1:02:28Topik minggu lalu sih
1:02:30Apa yang
1:02:32Lebih baik scope-nya dikurangin ya
1:02:34Apa sih yang dari buku
1:02:36Dari buku Get
1:02:38Getting real ya
1:02:40Kalau misalkan tadi dari
1:02:42Pertanyaannya kan, wah ini waktunya
1:02:44Lebih panjang, yaudah fiturnya dikurangin
1:02:46Tapi yang penting gak ada testingnya
1:02:48Itu sih
1:02:50Ada juga loh menariknya
1:02:56Bikin testing
1:02:58Dan memang
1:03:00Learning curve untuk
1:03:02Testing itu
1:03:04Tapi ada
1:03:06Serunya
1:03:08Jadi kita bisa
1:03:10Kalo sudah ketagihan ya
1:03:12Ini aja pengen bikin testingnya
1:03:14Bisa ketagihan loh
1:03:16Karena kayak jadi pengen
1:03:20Describe if blah blah blah
1:03:22Describe
1:03:24Shoot return one
1:03:26Shoot return two
1:03:28Atau shoot render
1:03:30Terus kita describe
1:03:32Terus bikin, oke komponen ini kira-kira bisa ngapain lagi ya
1:03:34Kita bisa mikir
1:03:36Explore
1:03:38Kayak
1:03:40Contohnya kalo mau bikin
1:03:42Error, error message
1:03:44Ya kan banyak juga yang bikin error message ya
1:03:46Terjadi ke apa?
1:03:48Terjadi kegagalan, silahkan coba lagi
1:03:50Error messagenya gitu doang
1:03:52Tapi gak half full
1:03:54Half full ya, gak mau bantu ya
1:03:56Akhirnya kita bisa moding
1:03:58Oke lebih baik, oke jadinya
1:04:00Kalo gagalnya koneksi
1:04:02Errornya begini
1:04:04Karena fatal error
1:04:06Di back end
1:04:08Errornya begini, kalo gagalnya karena
1:04:10Something else errornya begini
1:04:12Mikirin error aja kita bisa
1:04:14Berapa steps gitu
1:04:16Nah
1:04:18Jadi
1:04:20Kalo sudah ketagihan, hati-hati ya
1:04:22Bikin testing tuh bisa sampe
1:04:24Hal-hal yang gak penting juga bisa ditesting
1:04:26Nah itulah
1:04:28Nanti perlu yang namanya balance
1:04:30Apa tadi ada
1:04:32Ada pertanyaan sampai tahap mana
1:04:34Tahap mana ya
1:04:36Sampai sedalam apa
1:04:38Yang kita perlu buat
1:04:40Kalo mau penganut
1:04:42Full coverage
1:04:44Tapi kalo saya yang
1:04:46Praktikal
1:04:48Saya akan buat yang namanya
1:04:50Business critical
1:04:52Checklist
1:04:54Dan itu sudah di komunikasikan
1:04:56Dengan klien dan disepakati
1:04:58Bersama
1:05:00Business akan ancur
1:05:02Atau tidak jalan, kalo salah satu
1:05:04Fitur ini
1:05:06Broken
1:05:08Jadi kita
1:05:10Pastikan checklist itu
1:05:12Semuanya full coverage
1:05:14Untuk checklist itu
1:05:16Kalo hal-hal yang lain
1:05:18Kalo ada waktu dibikin, kalo gak ada waktu
1:05:20Bisa skip dulu
1:05:22Jadi optional lah bahasanya
1:05:26Kalo lagi punya waktu yang banyak
1:05:28Dan mau have fun ya bikin
1:05:30Kalo gak ya
1:05:32Tinggal
1:05:34Si code reviewernya bilang
1:05:36Oke ini kayaknya butuh deh mending lu bikin
1:05:38Kan ada
1:05:40Ada temen yang lain yang untuk melihat
1:05:42Situasi kayaknya
1:05:44Si komponen ini
1:05:46Fitur ini perlu lu bikin deh karena
1:05:48Kedepannya kita mau reflektor
1:05:50Bisa jadi kan dia punya
1:05:52Input itu
1:05:54Kalo misalnya udah tau oh ini bakal kita reflektor
1:05:56Mending bikin dulu
1:05:58Testingnya jadi saat reflektor
1:06:00Kepala tenang
1:06:04Tuh kan
1:06:06Malah lebih
1:06:08Enak ngurusin testing daripada fixing box ya
1:06:10Jadi yang Ivan sebutkan tadi
1:06:12Itu adalah salah satu
1:06:14Testing bukan
1:06:16Hanya digunakan untuk
1:06:18Menjaga ekspektasi tapi
1:06:20Testing digunakan untuk mendesain fungsi
1:06:22Atau mendesain aplikasi
1:06:24Yang mau kita buat
1:06:26Kalo misalkan kita langsung implementasi kita bingung kan
1:06:28Ini fungsinya namanya apa
1:06:30Parameternya berapa
1:06:32Returnnya apa
1:06:34Nah itu yang bisa ditest dan itu adalah bagian dari
1:06:36Spesifikasi atau design tadi
1:06:38Jadi kita
1:06:40Ketika kita menulis implementasi kode
1:06:42Kita udah
1:06:44Tidak dari blank canvas lagi
1:06:46Oh udah tau
1:06:48Nama fungsinya udah ada kan udah dipanggil ditest
1:06:50Jadi tinggal
1:06:52Diimplementasiin aja isinya
1:06:54Returnnya string kak atau number kak
1:06:56Atau apa
1:06:58Lebih jadi lebih clear
1:07:00Karena kita udah menuangkan
1:07:02Desain apa ya
1:07:04Coretan-coretan kita
1:07:06Di testing gitu
1:07:08Tapi kalo data type saya sudah jarang
1:07:10Ngetest data type lagi sih karena sudah
1:07:12Karena sudah pake TS ya
1:07:14Type script ya
1:07:16Ya bukan
1:07:18Maksudnya itu apa
1:07:20Saya gak bikin any any misalnya
1:07:22Ya itu kan salah satu contoh aja
1:07:28Wah seru ya
1:07:30Ngomongin testing ya
1:07:32Malah vtest nya gak kita bahas ya
1:07:34Iya banyak sendiri
1:07:36Karena jazz nya juga
1:07:38Down
1:07:40Iya jazz nya saya buka jazz.io
1:07:42Down jadi mau compare
1:07:44IPI nya jadi susah
1:07:46Cari perkara aja ya si Cloudflare ya
1:07:50Tapi ada yang nanya Cloudflare nih
1:07:52Sebenernya ya gak ada hubungannya
1:07:54Sama test tapi kan
1:07:56Mungkin si Cloudflare nya
1:07:58Nggak ngetest sebelum produksi
1:08:00By the way saya di background masih urusan
1:08:04Cloudflare ini
1:08:06Ada langkah P3 sih untuk mengendal
1:08:08Case macam ini gak ada
1:08:10Kita menyerahkan kepada cloud provider
1:08:12Termasuk juga kayak kemaren
1:08:14EWS ya bermasalah kita gak bisa
1:08:16Berbuat apa-apa
1:08:18Kecuali kita punya
1:08:20Dua pun
1:08:22Kalau Cloudflare bermasalah kita switch
1:08:24Masalahnya gini
1:08:26Kalau kalian Cloudflare nya masih gratis
1:08:28Ya udah diam aja
1:08:30Itu kita gak bisa complain
1:08:32Kalau enterprise
1:08:34Bisa complain karena mereka punya SLA
1:08:36Bisa dapet
1:08:38Keringanan biaya ya
1:08:40Discon
1:08:42Ini udah lewat SLA mereka
1:08:44Iya udah lewat SLA
1:08:46Udah lebih 2 jam
1:08:52Enterprise nyala semua loh
1:08:54Hebat kan
1:08:56Prioritas
1:08:58Prioritas P0
1:09:00Ini saya
1:09:02Klien yang saya handle
1:09:04Enterprise
1:09:06Jadi pada up semua
1:09:08Bagus-bagus aja cepet
1:09:10Gak ada masalah
1:09:12Ada yang baru lagi ya
1:09:18Didi itu bukan
1:09:20Test driven development ya
1:09:22Type driven development ya
1:09:24Ya type itu juga bagian dari dokumentasi kan
1:09:26Jadi kita bisa kebayang
1:09:28Oh, returnnya ini
1:09:30Segala macem
1:09:32Jadi lebih berserah
1:09:34Eh tadi kan
1:09:36Saya sempat nanya diawal kan
1:09:38Ada gak sih alternatifnya Cloudflare gitu
1:09:40Kayaknya bisa dibilang gak ada ya
1:09:42Karena
1:09:44Tergantung Cloudflare disini
1:09:46Teman-teman pake buat apa dulu
1:09:48Apa saja
1:09:50Ada proxy, ada DNS
1:09:52Ada firewall
1:09:54Yang gratis ya
1:09:56Tunnel
1:09:58Ada serverless nya dia
1:10:00Ya banyak sih service nya
1:10:04Cuman kayaknya yang buat
1:10:06Yang umum sih kayaknya
1:10:08Firewall proxy sama
1:10:10DNS kali ya
1:10:12Turnstile nya kan banyak yang pake
1:10:14Turnstile itu loh
1:10:16Kayak kapcah-kapcah
1:10:18Oh kapcah, iya iya
1:10:20Buat anti-stem ya
1:10:22Iya
1:10:24Itu juga banyak
1:10:26Chat gpt aja error
1:10:28Bener gak sih
1:10:30Masa sih
1:10:32Chat gpt.com
1:10:34Oh iya bener
1:10:36Karena challenges nya pake Cloudflare
1:10:38Iya dia pake Cloudflare challenges
1:10:44Kena juga
1:10:46Berarti
1:10:48Ada masalah ini turnstile ya
1:10:50Langsung
1:10:52Ya nyangkutnya just a moment
1:10:54Oh masalahnya sekarang pake try
1:10:56Penasaran
1:10:58Salah satu
1:11:00Yang belum pernah saya coba
1:11:02Try
1:11:04Nah pertanyaan nya buat teman-teman
1:11:06Pertanyaan nya buat teman-teman yang nonton
1:11:08Ada berapa
1:11:10Visual Studio 4 yang terinstall
1:11:12Di laptop sekarang
1:11:14Ada kursor
1:11:16Ada kursor
1:11:18Winsorce
1:11:20Masih
1:11:22Kilo juga
1:11:24Kalo kilo kan extension
1:11:26Extension ya
1:11:28Dipakainya di VS Code
1:11:30Sekarang cuma 3
1:11:32Cuma 3 ya
1:11:34Woi
1:11:36Ricky 2
1:11:38Kursor dan VS Code
1:11:40Tiga kayaknya
1:11:42Kursor
1:11:44VS Code
1:11:46Sama Kiro
1:11:48Yang AOS punya
1:11:50Kiro
1:11:52Tapi sekarang kebanyakan
1:11:54Pake yang CLI sih bener
1:11:56Sama kayak Mazain ya
1:11:58Pake Cloud Code
1:12:00Atau saya pake AMP Code
1:12:020
1:12:04Pake New Film
1:12:06Keren ini keren
1:12:080
1:12:10Nggak ada VS Code
1:12:12Nggak diinstall sama sekali
1:12:14Cuma pake film
1:12:20Orang udah pake New Film
1:12:22Dia masih pake film ya
1:12:24Gapapa juga sih
1:12:26Bebas
1:12:28Saya masih pake
1:12:30Notepad ++
1:12:32Masa
1:12:34Notepad ++
1:12:36Masih install
1:12:38Masih install
1:12:40Saya pernah
1:12:44Pernah mengganti Notepad ++
1:12:46Jadi Z
1:12:48Saya nggak suka pake Z
1:12:54Karena dia berisik
1:12:56Karena ada AI-AI-nya
1:12:58Sublime saya punya
1:13:00Jadi dua-duanya ada
1:13:06Begitu di save ada popup
1:13:08Suruh "Purchase"
1:13:10Ya maksudnya kalau
1:13:12Di apa namanya
1:13:14Kalau si Sublime kan
1:13:16Nggak bisa dipakai buat
1:13:18Kalau saya lagi
1:13:20Lagi screen share
1:13:22Atau lagi
1:13:24Apa namanya
1:13:26Lagi live presentasi kan
1:13:28Kalau muncul kan, malu juga ya
1:13:30Karena nggak bayar sampai sekarang
1:13:36Ya nggak butuh bayar juga kan
1:13:38Kalau Jet Brand, Jet Brand nggak termasuk
1:13:42Jet Brand beda lagi
1:13:44Kita punya Jet Brand kan
1:13:46Kalau mau gratisan
1:13:48Ada
1:13:50Jet Brand itu kan sempat mengeluarkan versi
1:13:56Ringgannya kan
1:13:58Yang mau menandingi VS Code kan
1:14:00Tapi kayaknya nggak take off ya
1:14:02Momennya nggak itu ya
1:14:06Momennya nggak dapet dia
1:14:08Ya, begitulah
1:14:12Cukup kita bahasa apa ini
1:14:14Cukup, nggak bayar si test
1:14:16Apa lagi yang menarik, lanjut ke
1:14:18Inblowsernya dulu yuk
1:14:20Inblowsernya
1:14:22Kayaknya inblowsernya
1:14:24Inblowsermode ya
1:14:26Ya udah, buka aja
1:14:28Eh, mana ya? Ini kan?
1:14:30Buka browser
1:14:32Why?
1:14:34Ini kan?
1:14:36Oke, bentar
1:14:38Itu kan dia, itu di blog post update-nya
1:14:40Buka tentang browser
1:14:42Oh iya, yang di sini ya
1:14:44Oke
1:14:46Motivation
1:14:50Untuk membantu memperbaiki
1:14:52Testing workflow dan mencapai
1:14:54Result tes yang lebih akurat
1:14:56Ini
1:15:00Untuk API testing kita
1:15:02API allows developer to run
1:15:04Test in native browser environment
1:15:06Ini beneran
1:15:08Ada browser-nya beneran di render
1:15:10Bukan men simulasi DOM
1:15:12Oh
1:15:14There are different
1:15:16Place, ada berbagai
1:15:18Cara mengetes udah JavaScript
1:15:20Ada yang men simulasi
1:15:22browser environment
1:15:24Simulasi browser environment
1:15:26Ada yang
1:15:28Pakai web driver atau
1:15:30High press
1:15:32Ada yang pakai playwright
1:15:34Yang jalanin
1:15:36Atlas browser ya
1:15:38Papa petir ya
1:15:40Eh bukan
1:15:42Papa petir
1:15:44Papa petir
1:15:46Iya, jadi ini
1:15:48Apa?
1:15:50Ini dimana sih mas Liza? Di
1:15:52Y-nya ya
1:15:54Di guide browser
1:15:56Di guide browser
1:15:58Oh
1:16:00Yang getting started
1:16:02Nah
1:16:04Coba ada screenshotnya tuh
1:16:06Di open new
1:16:08Aja, di open image-nya
1:16:10Kurang gede ya
1:16:12Iya, nah
1:16:14Uy gede banget
1:16:16Nah, jadi bisa
1:16:18Bisa liat jalan langsung di browser
1:16:20Centang-centang gitu dia jalanin
1:16:22Dan hasilnya, kita langsung bisa
1:16:24Lihat visualnya, hasil render-nya
1:16:26Kayak jasmine jaman dulu dong
1:16:28Jasmine udah ada ini jaman dulu
1:16:30Sebelum jadi jes
1:16:32Udah pernah pake jasmine
1:16:34Tapi gak sebagus ini sih
1:16:36Cuman bisa buka di browser aja
1:16:38Iya kali ya, gak pernah pake jasmine soalnya
1:16:42Bentar
1:16:46Ini berarti
1:16:48Ini berarti
1:16:50UI yang ada di terminal
1:16:54Dah ke sini gitu
1:16:56Atau gimana
1:16:58Tapi ada screenshotnya ya
1:17:00Ini browser beneran ya
1:17:02Oh
1:17:04Cuma exactly gimana, gak tahu sih
1:17:08Cuma misalnya kalau
1:17:10Itulah kayak window, apapun yang di global window
1:17:12Itu aman
1:17:14Pasti ada yang, soalnya selama ini juga
1:17:16Kalo pake JS Dom atau Happy Dom
1:17:18Kan suka, kalo udah mulai ngetes
1:17:20Web API, suka ribet kan
1:17:22Ada yang apanya ada
1:17:24Apanya gak ada, karena misalnya web API
1:17:26Itu kan belum tentu semua
1:17:28Diimplement semua, nah kalo ini beneran
1:17:30Punya
1:17:32Global object tuh ada semua
1:17:34Jadi kayak punya ini
1:17:36Ada visualnya ya
1:17:38Bisa jalan di browser, jadi gak
1:17:40Kita tahu kalo ada error, ada yang
1:17:42Salah atau gimana, bisa kelihatan di browsernya ya
1:17:44Ada visual
1:17:46Betul, jadi kayak
1:17:50Storybook kali ya
1:17:52Storybook kan
1:17:54Model storybook ya
1:17:56Ini live kah
1:17:58Live
1:18:00Ini live
1:18:02Setiap sasa malam
1:18:04Jam 8 malam
1:18:06Jangan lupa ya
1:18:08Bisa pake browser API, bukan yang
1:18:10Versi node nya, iya karena kalo yang
1:18:12Kayak JS Dom gitu kan
1:18:14Jalannya di node JS ya
1:18:16Kalo ini beneran browser oke
1:18:20Wah seru ya
1:18:22Harus dibahas lebih dalem ini
1:18:26Jadi pengen nyobor
1:18:28Pake nya gimana
1:18:30Install
1:18:32Ini ya
1:18:34Vtes Init Browser
1:18:36Terus
1:18:38Perfigurasi
1:18:40Pakai apa
1:18:42Provider nya apa dulu
1:18:44Pilih provider nya, siapa dulu
1:18:46Driver
1:18:48Yang apa tadi dia bilang
1:18:50Preview
1:18:52Saya gatau, preview itu apa sih
1:18:54Preview itu kayak punya dia
1:18:56Coba
1:19:00Preview itu apa penasaran dari tadi
1:19:02Yang ini kan
1:19:04Ini
1:19:06Nama browsernya
1:19:08Kayaknya deh
1:19:10Ah kena juga
1:19:12MPM nya
1:19:14Gak bisa buka website
1:19:16MPM
1:19:18Ada-ada aja
1:19:20Kenak deh
1:19:24GitHub kena juga?
1:19:26Enggak ya GitHub ya
1:19:30Vtes ya
1:19:32Enggak mau liat
1:19:34Yang browser, oh gak ada Vtes
1:19:36Vtes apa sih ininya?
1:19:44Nah ini dia
1:19:46Mau liat
1:19:50Repo nya, buka yang tadi
1:19:52Jadi jangan buka NPM
1:19:54Bukanya disini, ada gak preview
1:19:56Preview
1:19:58Nggak ada
1:20:00Kayaknya external
1:20:02Soalnya you can choose either
1:20:08Preview, play right, or
1:20:10Webdriver I/O, jadi head-to-head nya
1:20:14Play right
1:20:16Oh, ini deh
1:20:20Browser preview
1:20:22Buatan Vtes juga
1:20:24Cuma di package terpisah
1:20:26Kayaknya deh
1:20:28Coba aja buka akun
1:20:30GitHubnya Vtes deh
1:20:32Gak ada ya
1:20:36Di website saya ada talk tentang
1:20:38Relatable test with AI
1:20:40Disitu ada contoh repository dengan Vtes
1:20:42Coba ya
1:20:44Mas Zain ini apa?
1:20:48Zain Fatoni
1:20:50Nama lengkap ya?
1:20:56Yes
1:20:58Kenang banget
1:21:00Oh di website nya ya
1:21:02Ini ya
1:21:06Dari website nya aja, terus ada
1:21:08Talk
1:21:10Wah, lengkap ya
1:21:12Yang mana?
1:21:14Judulnya Relatable test
1:21:16Mana?
1:21:22Ini ya
1:21:26Relatable test ya
1:21:28Terus
1:21:30Repo nya mana?
1:21:32Oh, terakhir
1:21:34Ini pakai apa nih?
1:21:38Ini ya, bukan
1:21:40GitHub nya
1:21:42Oh, ini
1:21:44Ini
1:21:46Tik-tik aja
1:21:48Manjang banget
1:21:50Kenapa tadi gak di sub aja ya
1:21:52Di GitHub
1:21:54Terus SRC
1:21:56Eh, mana?
1:21:58Testing nya
1:22:00Kok gak ada testing?
1:22:02Oh, belum semua
1:22:06Coba source
1:22:08Source, coba source
1:22:12Itu itu ya
1:22:14Tim masing-masing komponen nya gak sih?
1:22:18Itu test
1:22:20Button
1:22:26Yang mana browser?
1:22:28Bukan ya?
1:22:32Ini maksudnya sudah
1:22:34Apa namanya?
1:22:36Kalau misalnya dijalankan
1:22:38Bisa coba liat
1:22:40Package.json nya
1:22:42Ada komen apa
1:22:44Buat jalanin dia
1:22:46Pakai
1:22:50Package json ya
1:22:52Package json
1:22:54Test
1:23:00Biasa, review
1:23:02Bukan
1:23:04Di test run dong
1:23:06Nah, itu di config nya ada setting
1:23:12Ada nge-set browser nya
1:23:14Kalau, apa?
1:23:16Contoh testing nya
1:23:18Oh iya, ini pakai playwright ya
1:23:20Itu, terus
1:23:24Berarti tinggal dijalankan kan
1:23:26Terus muncul browser nya gitu kan
1:23:28Terus ini di VT setup
1:23:30Ada ngemocking
1:23:32Window
1:23:34Ini bukan mock ya
1:23:36Jalan-jalan
1:23:38VT setup
1:23:40Nah, itu tuh
1:23:42Line 14
1:23:44Terus, contoh testing nya
1:23:58Harus berguru langsung ini
1:24:00Jalanin aja
1:24:04Gede gak
1:24:06Tarikannya
1:24:08Harus rap itu dulu
1:24:10Gak bisa pakai ini, pakai
1:24:12Apa tuh namanya?
1:24:16Sandbox
1:24:18GitHub
1:24:20Codespaces
1:24:22Bisa gak?
1:24:24Browser dalam browser dong
1:24:26Oh iya ya
1:24:28Mari kita clone aja
1:24:32Kalau NPM nya bisa jalan, coba aja
1:24:34Bener juga
1:24:36Oh iya, ini lupa
1:24:46Matiin dulu
1:24:48Share lagi
1:24:50Window nya
1:24:54Gedean ya
1:24:56Sorry
1:24:58Belum, kecilin nya gimana
1:25:00Cukup ya
1:25:04Belum gede
1:25:12CD
1:25:14Rally
1:25:16NPM install
1:25:18Bisa gak?
1:25:22Gak bisa ya NPM install
1:25:24Eh tapi
1:25:28Registrinya sama aja
1:25:30Gak tahu
1:25:32Ini bisa
1:25:34Cepet banget ya pakai Boonit
1:25:36Boonit install
1:25:38Nah kalau Boonit mungkin punya server sendiri
1:25:42Kalau
1:25:44Fail
1:25:46Gimana ini
1:25:50Test watch
1:25:52Test 32 watch
1:25:54Oh
1:25:56Boon run
1:25:58Test 32 watch
1:26:00Tapi fail kan, emang sengaja fail ya
1:26:04Oh playwright nya gak ada
1:26:08Tuh dependensinya belum ke install kali itu
1:26:12NPX playwright install
1:26:16Iya
1:26:18NPX
1:26:20Gede banget itu
1:26:22Iya karena ada easy browser nya
1:26:24Playwright
1:26:26Pakai
1:26:28Salah ya
1:26:30Playwright, salah ya
1:26:36Play
1:26:38Play
1:26:40Boon nya juga down
1:26:48Weh
1:26:50Ini kecepatan internet master ya sakti nih
1:26:52Gak pakai Cloudflare soalnya
1:26:54Ini dia, oh Colmium ya
1:27:02Eh padahal punya lho
1:27:04Dia nginstall lagi
1:27:06Udah pernah install soalnya playwright
1:27:08Kayaknya ya by project deh
1:27:12Kalau kita jalanin pemandangan disitu
1:27:14Ya semua disitu doang
1:27:16Oh semua di download
1:27:18Iya
1:27:20Ampun bang, ampun
1:27:22Satu lagi
1:27:24Dia download apa ya kini
1:27:26Safari
1:27:28Webkit
1:27:30Makanya sekarang tuh
1:27:34Jadi
1:27:36Web developer jaman sekarang itu
1:27:38Harus
1:27:40Lebih banyak bandwidth ya
1:27:42Ketimbang jaman dulu
1:27:44Nah ini udah
1:27:46Oh di jalanin semua
1:27:48Nah ini
1:27:50Chromium
1:27:52Udah
1:27:54Muncul gak ini popup
1:27:56Enggak
1:28:00Ya pasti browser mode nya gak jalan
1:28:02Blaser mode nya gak jalan
1:28:06Maksudnya
1:28:08Gak di popup
1:28:10Ininya, harusnya kan
1:28:12Popup
1:28:14Kayaknya harus vitess UI deh
1:28:16Coba aja cari komennya vitess UI
1:28:18Vitess
1:28:22Run coverage
1:28:24Bukan coverage ya
1:28:26Oh
1:28:28Karena
1:28:30Headless tadi
1:28:32Ada headless
1:28:34Coba buka itu nya mas
1:28:36Zain
1:28:40Headless nya
1:28:42Wait, saya baca dulu
1:28:44Getting started
1:28:48Ini browser
1:28:50Vitess UI
1:28:52Iya
1:28:54Coba
1:28:56Ke ininya
1:28:58Ke vitess config nya mas Liza
1:29:00Pakai vim aja
1:29:04Vitess config nya
1:29:10Ini vitess setup
1:29:12Bukan
1:29:14Bukan vitess setup
1:29:16Berarti di package json
1:29:18Bukan vt
1:29:20Berarti di package json nya
1:29:22Tadi test nya di gabung
1:29:24Ke package json
1:29:26Ke vitess
1:29:28Gak ada
1:29:30Yang browser Chromium tadi di mana?
1:29:32Di vitess
1:29:36Ada vitess config
1:29:40Ada vitess setup
1:29:42Oh bukan ya
1:29:44Vt
1:29:46Vt
1:29:48Bentar ya
1:29:50Vt.config.js
1:29:52Vt.config.js
1:29:54Ini nih
1:29:56Browser kan Chromium
1:29:58Itu yang headless
1:30:00Ya
1:30:02Sama bentar
1:30:04Belum
1:30:06Coba
1:30:08Apa lagi?
1:30:10Saya lihat dulu
1:30:12Vt.config.js
1:30:18Browser apa?
1:30:20Config browser
1:30:22Provider
1:30:24Oh
1:30:26Headless nya udah false ya?
1:30:28Nggak, wasan dimatiin
1:30:30Nah udah, coba dijalani
1:30:32Harusnya
1:30:36Mau tes aja?
1:30:38Nggak ada
1:30:44Oh udah, ada
1:30:46Ntar
1:30:48Langsung ketutup gara-gara error
1:30:50This is bug in vitess
1:30:56Ketemu bugnya
1:30:58Apa nggak mau di npm kali?
1:31:00Kayaknya gara-gara
1:31:02Tadi ada yang pakai ben, ada yang pakai npm
1:31:06Iya
1:31:08Sama kayak udah
1:31:10Muncul, cuman ini kan window
1:31:12Kita coba share screen semua ya
1:31:14Full ya
1:31:16Cepet muncul abis itu ketutup lagi
1:31:18Ada ya, ada
1:31:20Watch ya
1:31:22Watch
1:31:24Ini kan, ini muncul
1:31:26Kita tutup lagi karena nggak watch
1:31:28Ceput tangan dulu doang
1:31:30Sangur tuh
1:31:32Ya udah, yang penting udah bisa jalan
1:31:34Kalau dia kan
1:31:36Kamalu nggak bisa tidur, penasaran kan
1:31:38Kepikiran
1:31:40Tapi ini UI-nya nggak ada di sini
1:31:42Gambar UI-nya nggak ada ya
1:31:44Cuman di klik satu-satu
1:31:46Di button
1:31:48Klik itemnya
1:31:50Di play
1:31:52Ini ada gambarnya?
1:31:56Ada error nggak?
1:31:58Lihat console error, nggak ada
1:32:00Oh jadi item
1:32:02Iya, kok jadi item?
1:32:04Kok jadi daftar?
1:32:06Run salah satu katanya
1:32:08Ini, oh
1:32:10Loh putih
1:32:12Oh itu ada skin tab
1:32:16Ada tadi
1:32:18Karena dia jalanin sekaligus semua
1:32:24Salah satu yang ini mas
1:32:26Render with default
1:32:28Props, coba
1:32:30Run itu button yang render with default
1:32:32Ya itu, run salah itu
1:32:34Ya, nggak bisa
1:32:36Cepat banget
1:32:38Kok terlalu cepat
1:32:40Ini ya berarti
1:32:42Testingnya terlalu cepat, jadi nggak kelihatan
1:32:46Diperlambat bisa nggak
1:32:48Slow mode gitu
1:32:50Ada ya
1:32:58Bisa bisa kelihatan ini lho
1:33:00Kelihatan
1:33:02Nggak kelihatan saya
1:33:06Oke lah
1:33:08Cukup lah ya
1:33:10Coba di rumah masing-masing
1:33:12Udah dikasih itu sama Mazzain
1:33:14Oh iya, saya share ininya ya
1:33:16Apa namanya
1:33:18Gith-nya
1:33:20Iya, link-nya
1:33:22Di sini
1:33:24Kalau saya bisa
1:33:28Oke
1:33:30Cukup ya
1:33:32Untuk malam ini ya
1:33:34Udah setengah jam kita
1:33:36Udah puas
1:33:38Baru browser mode doang
1:33:40Main-main browser mode
1:33:42Vtes sama
1:33:44Bantengin Cloudflare nih sampai malam nih
1:33:46Kayaknya saya
1:33:48Oke
1:33:50Seperti biasa sebelum kita udahan
1:33:52Kita mau
1:33:54Poting material
1:33:56Dari buat minggu depan
1:33:58Kalau ada yang punya ide
1:34:00Boleh di-share
1:34:02Update-an Getting Real
1:34:06Udah lama nggak soal AI ya
1:34:16Mau AI
1:34:18Bahas AI
1:34:20Bahas web AI ya
1:34:22Boleh
1:34:24Oh iya, kemarin itu lagi ada
1:34:26Apa
1:34:28Di Youtube-nya
1:34:30Chrome
1:34:32Web AI Summit ya
1:34:34Ini
1:34:40Baru ada video baru tuh
1:34:42Web AI Summit
1:34:48Jason Muras
1:34:50Jason Muras
1:34:52Web AI nih
1:34:54Ada GPU, ada
1:34:56Apa lagi
1:34:58Saya penasaran yang ini sih
1:35:00Building Web AI Playbook
1:35:02Ya udah, topiknya
1:35:06Web AI Summit aja
1:35:08Topiknya Web AI aja ya
1:35:10Web AI Summit
1:35:12Nanti
1:35:14Maksudnya kalau ada
1:35:16API-nya yang masing-masing
1:35:18Kayak Summarizer atau apa bisa dipikin
1:35:20Bisa
1:35:22Bahas browser
1:35:26Udah
1:35:28Udah pernah kita, episode berapa browser
1:35:30Browser
1:35:32Kita sampai historinya ya
1:35:34Sejarahnya juga kita bahas
1:35:36Sampai buka Wikipedia yang ada
1:35:38Timeline
1:35:40Timeline-nya
1:35:42Episode berapa
1:35:44Episode 14
1:35:46Episode 14
1:35:482 tahun yang lalu ya
1:35:503 tahun
1:35:52Namanya ngobrolin browser
1:35:54Bahas 10-stack query
1:35:5610-stack menarik sih
1:35:58Kita udah bahas 10-stacks
1:36:00Kita udah pernah bahas 10-stacks ya
1:36:02Kan 10-stacks yang general
1:36:04Kan universe-nya banyak banget ya
1:36:06Udah
1:36:08Boleh-boleh
1:36:10Boleh ditulis dulu
1:36:12Di discussion
1:36:14Nanti kita voting-voting
1:36:16Kalau banyak yang suka juga
1:36:18Silakan voting
1:36:20Disini
1:36:22Terus
1:36:24Bahas buku 5 Coding
1:36:26Nanti dulu
1:36:28Beda bukunya nanti ya Mas Zain
1:36:30Nanti kita undang lagi, tenang aja
1:36:32Masukin dulu ya
1:36:34Oke-oke
1:36:36Bahas browser
1:36:38Apa lagi yang mau dibahas browser
1:36:40Kita udah
1:36:42Kemarin udah cukup banyak ya
1:36:44Kalau ada yang baru mungkin
1:36:46Oh ini
1:36:48Bahas browser
1:36:50AI browser kan
1:36:52Dan banyak dapet
1:36:54Flash dari
1:36:56Ecosystem work
1:36:58Tiap sebentar muncul browser baru
1:37:00Yang isinya AI
1:37:02Jadi gini
1:37:04Perusahaan yang bikin
1:37:06Browser
1:37:08Berusaha memasukkan AI ke dalam
1:37:10Browsernya
1:37:12Bikin AI, berusaha bikin browser
1:37:14Untuk AI-nya
1:37:16Nanti akan ada
1:37:18Ketemu di tengah-tengah nih
1:37:20Antara capelok-mencapelok
1:37:22Atau
1:37:24Beli-beli, mungkin ada yang dibeli
1:37:26Ada yang membeli
1:37:28Kita lihat aja, persaingannya seru sih
1:37:30Persaingannya seru
1:37:32Lay off ya
1:37:34Waduh, bukan yang itu Pak
1:37:36Oh beda ya
1:37:38Membeli ya, membeli
1:37:40Akuisisi
1:37:42Iya, akuisisi
1:37:44Katanya beli-beli
1:37:46Itu duitnya
1:37:48Nggak ada serinya
1:37:50Ternyata, tumbang juga
1:37:52Tumbang juga ya
1:37:54PWA, PWA apa lagi yang mau dibahas
1:37:56Aduh
1:37:58Ya, udah
1:38:02Matcher juga itu
1:38:04Conqueror, Conqueror kita bahas tuh
1:38:06Di episode ke 14
1:38:08Conqueror itu adalah
1:38:10Nenek moyangnya webkit, nenek moyangnya safari
1:38:12CSS query? Udah
1:38:18Eh, belum ya?
1:38:20Belum, kita bahas CSS playnya
1:38:22Kita bahas CSS unit jadinya
1:38:24Oh iya
1:38:26Kita bahas CSS unit, itu juga panjang banget
1:38:28Besok-besok saja
1:38:30CSS query, iya nanti kita bahas CSS query
1:38:32Thank you, thank you Kaisa
1:38:34Oh Kaisa kemarin bikin
1:38:36Ininya apa? Posting di
1:38:38GitHubnya keren banget
1:38:40Udah kayak bikin artikel aja
1:38:42Udah kayak
1:38:44Artikel, Ladybird
1:38:46Kita sempat bahas Ladybird juga
1:38:48Apa? Yang, walaupun belum
1:38:52Ada update-nya kan
1:38:54Ladybird baru aja mereka announce, mereka sudah lulus
1:38:56WPT testnya mereka
1:38:58Udah lulus, berapa persen
1:39:02WPT, web platform testnya
1:39:04Mereka tuh udah kayak unit testnya
1:39:06Browser testingnya mereka
1:39:08Sudah lulus
1:39:10Berapa persen gitu, kayak 90%
1:39:12Tapi belum ada binary-nya
1:39:14Belum bisa di download buat macOS
1:39:16Harus build sendiri
1:39:18Mereka juga janjinya jual 1026 juga kok
1:39:20Bukan tahun ini
1:39:22Kalau nggak salah ya
1:39:24Ya nggak apa-apa, kalau bisa lebih cepat kan
1:39:26Kan pengen coba
1:39:28Maksa
1:39:30Ngomong gampang ya
1:39:32Gampang, silahkan pull request
1:39:34Nanti dia tinggal bilang kita ya, silahkan pull request
1:39:36Gampang
1:39:38Tuh, targeting summer
1:39:402026
1:39:42First alpha version
1:39:44Terus, bahas desktop sih
1:39:48Menarik sih bahas desktop
1:39:50Eh, by the way, kalau mau coba
1:39:52Back to
1:39:54Ini sebentar, kalau mau bahas browser itu
1:39:56Kalian coba browser yang
1:39:58DCLID
1:40:00Links
1:40:02Coba pakai links
1:40:04Bagus
1:40:06Ada yang baru kemarin
1:40:14Yang modern
1:40:16Bukan yang baru, yang modern
1:40:18Itu juga
1:40:20Di CLI juga
1:40:22Tapi kalau buka di links
1:40:26Kalau misalnya
1:40:28Client render
1:40:30Pakai react atau semacamnya
1:40:32Gak SSG, nggak SSR
1:40:34Kalau pakai CSR
1:40:36Gak bisa, nggak ada JavaScript
1:40:38Gak ada JS
1:40:40Sudah discussed
1:40:42Sudah
1:40:44Di awal, di tengah dan
1:40:46Random-random
1:40:48Setiap berapa menit sekali
1:40:50Kita bahas
1:40:52Setiap berapa menit lagi kita bahas
1:40:54Kita buka website, tiba-tiba down kita bahas
1:40:56NPN packets registry
1:40:58Gak bisa dibuka
1:41:00Chachi PT nggak bisa dibuka, sponsor kita
1:41:02Kali ini Dominicia
1:41:04Gak bisa dibuka juga
1:41:06Tengah juga ya
1:41:08Tapi mudah-mudahan segera
1:41:10Udah selesai ya
1:41:12Udah mulai ada yang benar
1:41:14Udah, Dominicia udah bisa dibuka
1:41:16Jadi temen-temen kalau mau
1:41:18Itu jangan lupa ya
1:41:20Kalau mau purchase ya, jangan lupa pakai
1:41:22Promocode ya
1:41:24Oke, sekian dulu untuk malam ini
1:41:26Kita ketemu lagi minggu depan
1:41:28Di waktu yang sama
1:41:30Selamat malam, selamat siangat, bye-bye
1:41:54Performa tinggi dalam infrastruktur cloud
1:41:56Yang telah dioptimalkan untuk kebutuhan personal
1:41:58Maupun bisnis
1:42:00Teknologi ini memungkinkan Anda memperoleh
1:42:02Layanan yang lebih stabil
1:42:04Serta proteksi dari korupsi data
1:42:06Hosting Dominicia juga telah mendukung
1:42:08Node.js, Python, Ruby, Go,
1:42:10PHP, Java, serta
1:42:12Binary Linux
1:42:14Lebih dari 200.000 pelanggan telah
1:42:16Mempercayakan layanan hosting di Dominicia
1:42:18Kepercayaan yang kami jaga dengan
1:42:20Garansi uptime 99,9%
1:42:22Serta garansi uang kembali 100%
1:42:24Buat website Anda lebih mendunia
1:42:28Segera berali ke hosting Dominicia
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
25 Nov 2025
WebAI - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini membahas AI yang dapat dijalankan di web browser atau istilah kere...
16 Des 2025
CSS Wrapped - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Malam ini kita akan membahas CSS Wrapped, sebuah rekapitulasi perkembangan C...
4 Nov 2025
Kisah-kisah Menyeramkan dgn @zainfathoni - Ngobrolin WEB
🗣️🕸️ Selasa malam waktunya #ngobrolinWEB! Bertepatan dengan malam selasa kliwon, kita akan membacakan kisah-kisah meny...