Bedah Situs - Ngobrolin WEB

2:03Kita diam-diamin.

2:05Oh iya, satu kalimat berhenti, satu kalimat berhenti, abis itu dipotong-potong kan.

2:10Jadi kurang natural. Makanya akhirnya ngambil yang pertama, yang salah itu.

2:15Justru sengaja dibikin lucu. Karena spiritnya ngobrol di nuet kan.

2:20Jadi spontan aja, spontan.

2:24Uhui, belum ada uhui.

2:27[tertawa]

2:31Efek uhui.

2:33Oke, jadi malam ini tanggal 8 April 2025.

2:40-Bahas apa? -Bahas tarif.

2:42-Tarif gak? -Tarif.

2:45[tertawa]

2:49Kalau beli buku, udah mahal ini sekarang.

2:52Atau beli tiket pesawat. Semakin jauh ya.

2:56Mimpi untuk ikutan Google I/O semakin menjauh ya.

3:02-Iya. -Apa-apa mahal?

3:05Termasuk I/O China juga, kayaknya gak bisa.

3:09Terima kasih.

3:13Jangan pesimis gitu dong.

3:16Pesimis-pesimis karena sudah ada executive order dari US World ini.

3:22Untuk kayak membatasi perusahaan Amerika untuk tidak berjagang atau kolaborasi dengan non-aliensi.

3:34Non-aliensi.

3:38Jadi, daripada kita ngomongin tarif, malam hari ini kita bahas tentang bedah situs.

3:49Bedah situs. Ini segment apa? Ini edisi perdana.

3:53-Segmen baru. -Segmen baru.

3:56Sebenarnya kita sempat waktu Imre, kan kita bahas website-nya ya.

4:03Aplikasi web-nya kan ya. Tapi itu kan lebih ke narasumber ya.

4:07Ini narasumbernya bukan bedah situsnya, cuma lebih ke Imre jelasin cara dia belajar.

4:13Sekaligus kita lagi cari target kita selanjutnya.

4:17Malam ini kan malam versi perdana nih buat bedah situs.

4:20Kalau misalnya temen-temen ada situsnya mau dibedah, kasih aja hashtag #bedahsitus.

4:25Nah, #bedahsitus nanti kita cari dari hashtag, nanti kita bisa masukin.

4:31Jangan nyusahin diri sendiri.

4:34Jangan nyusahin diri sendiri lho kok. Screen-nya hilang.

4:37Bentar ya, cari screen dulu ya.

4:39Nah, atau kalau mau membuat pekerjaan kita lebih gampang,

4:44temen-temen bisa menuju kesini, github.com/orks/ngobrolin/discussions.

4:53-Di sini ada... -Kesana Indo aja.

4:55-Ya, kan ada itu di situ. -Bisa juga.

4:58Nah, di sini ada bedah situs. Masukin aja.

5:01Masukin aja URL-nya. Jadi malam ini berhubung...

5:08Bukan kred sendiri ngepost sendiri.

5:10Ya, emang namanya kan pilot project.

5:13Apa namanya? Greenfield. Eh, bukan dog-fooding ya?

5:18-Dog-fooding. -Apa sih, ada istilahnya?

5:20Biasa kalau di Indonesia tuh...

5:22Apa sih, aneh mu itu yang asal-asal, soalnya eating your own dog food.

5:28Nah, ngapain makan-makan anjing.

5:30Scratch your own itch.

5:33Iya. Jadi malam ini kita akan coba...

5:40Kita ada bedah buku, bedah situs.

5:43Iya, bedah buku ini cukup luar biasa.

5:46-Eh, sudah dua kali kan? -Beda orang.

5:50-Beda buku kan sudah dua. -Beda buku dua kali.

5:53Beda orang yang kemarin, beda Imre.

5:56-Oh iya, itu beda developer. -Beda orang.

6:00Oh iya, dia budak developer jadi nanti.

6:04Sama ini, kita mau ini nih, pengalaman horor ya.

6:09Kalau teman-teman punya pengalaman horor, misalnya.

6:12Malam Satu Suruh itu tanggal berapa tuh? Bulan Juni ya?

6:15Ya, episode Malam Satu Suruh, kita cerita seram.

6:19Cuma cerita seram ini mungkin agak sensitif ya.

6:22Kita kayaknya perlu setting email adres anonim.

6:27-Oh iya, benar. -Yang misalnya, saya nggak sengaja.

6:30Apalah, nge-push API key di repo.

6:34Ya, mana ada orang yang mau nge-post di sini.

6:37Iya sih, harus anonimus ya.

6:40-Bener, bener, bener. -Ya, kalau mau kasih nama di email,

6:43nggak apa-apa, tapi kan by default kanan aja.

6:46Oke, nanti kita bahas lagi tentang diskusi itu di akhir ya.

6:52Sambil memilih topik berikutnya.

6:54Jadi topik malam ini karena belum ada,

6:56saya nyumbang project pribadi.

7:00-Project kita bersama. -Cepet banget.

7:03Ini adalah webnya Ngobrol In Web.

7:08Eh, ini meta banget nggak sih episode Ngobrol In Web?

7:13-Ngabahas website. -Ngabahas website, Ngobrol In Web.

7:17-Website, Ngobrol In Web. -Tinggal dipindahkan.

7:19-Circular ya, circular dependency. -Komen pertama, butuh dipindah domainnya.

7:26-Butuh dipindah domainnya. -Komen kedua, baru sample request.

7:30Barusan 5 menit lalu.

7:32Sebelum masuk stream ya, baru sample request.

7:37Ya, nanti aja sambil dibahas.

7:39Oke-oke, nah ini adalah showcase ya, kumpulan episode.

7:47Sebenarnya tujuan utamanya adalah ini sebenarnya, feed.

7:52Feed ini adalah RRS feed yang compatible dengan podcast format.

8:01Jadi ada title, description, terus ada episode-nya.

8:06Item ini episode, episode berapa, episode berapa.

8:09Dan ada publication date-nya, terus ada ID-nya,

8:16terus ada URL-nya ke podcast-nya.

8:19Sehingga sekarang teman-teman bisa buka di Spotify.

8:26Ngobrol In Web sudah ada di Spotify.

8:30-AWS-nya siapa itu? -AWS-nya saya, pribadi.

8:38-Kok nggak ada? -Itu?

8:42-Tepuk tangan dong. -Tepuk tangan.

8:47-Like and subscribe ya. -Iya, bisa komen juga.

8:52Di sini ternyata udah ada fitur komentarnya juga.

8:55Jadi, kan yang awalnya ini adalah sebenarnya tujuan, bukan tujuan ya.

9:01-Source dari... -Komen kedua.

9:05-Komen kedua? -Iya, BF Case-nya nggak jalan.

9:10-Back Forward Case. -Ketawa nih.

9:14-Iya, langsung PR lah. -Bagus-bagus.

9:17-Iya, yang PPR. -Bagus-bagus.

9:20Nah, tadi mau ngomong apa ya? Karena ini kan sumber datanya adalah dari YouTube playlist.

9:32Karena ini video kan, sebenarnya bukan podcast yang formatnya audio doang.

9:37Jadi ini adalah dari playlist. Dan YouTube nggak ada, itu tidak menyediakan fit ini.

9:42Jadi harus buat sendiri.

9:44Nah, makanya kayaknya butuh, selain butuh website ya butuhnya sebenarnya tujuan utamanya kesitu.

9:51Dan juga biar bisa dipamerin lah di showcase ke kalau ada yang mau sponsor kan.

9:59Wah, ini website-nya udah beberapa episode udah kelihatan gitu kan.

10:03Terus apa lagi ya? Terus ya...

10:07-Itu ada database nggak? Itu maksudnya langsung narik dari... -Aka database.

10:11Nanti, eh, bentar kita tuh bahas fitur ya satu persatu gitu ya? Nanti sambil buka kodinya.

10:19Nah, yaudah nanti aja bahasnya.

10:21Ya, ini kan halaman depannya hanya dibatasi ke 20 sekian episode nih.

10:28Berapa nih? Ya, hitung sendiri lah ya.

10:30Kalau semua episode berarti ini, ini semua nih.

10:33Panjang sampai ke bawah tuh, sampai episode satu.

10:37Kalau dicari, nah ini masih ada bug nih.

10:39Kalau misalkan kita mau cari kata, harus di-enter dulu baru keluar.

10:45Jadi dia nggak auto ini, nggak auto apa namanya, nggak live-search ya istilahnya.

10:51-Iya, itu. -Iya.

10:53Itu masih nge-bug sedikit, terus apa lagi? Udah.

10:59Ini about, ya. Ini juga generated by AI kontennya.

11:06Dan website-nya juga generated by AI, mostly, sebagian besar.

11:11Di sini saya pakai berbagai macam AI, mulai dari Cloud Code, Github Copilot,

11:18Either chat, Amazon Q Developer CLI.

11:21Testing-nya juga dibantu sama AI, dokumentasinya juga dibantu sama AI.

11:26Jadi hampir semua kerjaannya AI.

11:33Saya cuma bagian nge-review aja.

11:36Oh, mantap. Tepu tangan tuh.

11:41Oh, perlu ya. Nggak usah lah. Malu itu sebenarnya.

11:44Kalau di-click satu episode, gimana?

11:49Di-click satu episode ke detail page. Detail page-nya masih nampilin iframe.

11:54Belum pakai yang iframe yang ringan itu. Harusnya nanti diganti.

11:59Catatannya juga masih ngambil dari video detail-nya.

12:06Ya, dari video detail-nya.

12:08Nah, ini pengennya nanti kita bikin aja markdown di satu folder, gitu ya.

12:13Nanti mungkin bisa jadi kayak ada transcript-nya atau ada catatan tambahannya.

12:18Oh, direpo satunya tuh.

12:21Kan sempet bikin, cuma terbungkala dikit cuma maksudnya berarti ya nanti tinggal sebagian yang udah ada tinggal dipindahin aja.

12:29Iya, dipindahin aja.

12:31Nah, pengennya sih ke depannya juga dibikin semacam semi-automatis.

12:37Jadi dia bikinin transcript sendiri, AI lah, pakai apa gitu ya.

12:44Kayak whisper, jadi transcript, dari transcript jadi summarize.

12:48Pengen, ya.

12:50Nah, cuma kalau yang transcript itu, kalau kita nyebut nama, kayak nama framework itu, itu perjalanan saya sih.

12:58Kalau teknologinya, coba dari teknologinya.

13:02Teknologinya, pakai Elixir, Phoenix, Live View, sama Postgre.

13:08Oh, berarti ada database.

13:10Ada database, jadi kalau, ya ini masih belum terlalu secure sih.

13:16Kalau misalkan ada episode baru, saya bisa tambahin sync di sini, nanti dia akan syncing ke database.

13:22Ini semua orang bisa melakukan.

13:24Semua orang bisa, ya udah dimatikan dulu, sekarang gimana?

13:27Iya, nanti kita bikin methodnya post lah ya.

13:30Kita bikin methodnya post, pakai password lah, apa gitu ya.

13:33Tapi sekarang begitu.

13:34Sekarang lah, ini orang pendek nonton, pendek nyobain semua, jebol.

13:38Iya, jebol ya.

13:42Kalau episodenya udah ada, dia nggak itu kok, dia apa namanya, nge-query dulu.

13:47Skip.

13:48Iya, skip.

13:50Terus ada CI-nya, kalau ngeliat di, apa namanya, di GitHub-nya itu ada CI-nya,

13:57walaupun sempat ngaco gara-gara si AI-nya mengubah konfigurasi database.

14:07Cuman berarti AI-nya ada bahaya juga ya.

14:12Kelewat satu kan, kelewat ini apa kok, error mulu ya tuh, error-nya banyak tuh.

14:18CI update database.

14:21Baru ketahuan, baru di sini.

14:24Ya dan kadang emang apa ya, AI assistant itu kadang suka aneh-aneh.

14:32Review dulu dong, itu PR-nya Eka, di review dong.

14:37Oh PR-nya Eka, boleh.

14:40Ini nih, soalnya kalau ngomong soal AI bikin keubahan ngaco,

14:44dari sekarang juga nyoba iseng wipe folding, kayak suruh bikinin test,

14:49nyoba Honoo, Honoo API, enak banget.

14:52Ya suruh buatin testnya, buat apa sih, kayak authentication, blablabla.

14:57Ya jalannya normal, cuma maksudnya dia tiba-tiba bikin test suite-nya,

15:03mindahin secret invariant variable, dimasukin ke dalam test-nya,

15:08beneran jadi string gitu.

15:10Jadi kalau orang yang meleng, nggak teliti, cuma suruh generate test,

15:15jalanin test-nya, test-nya passing semua, terus di-commit, yaudah, selaruh.

15:20Jadi kayak, maksudnya overall kerjanya bagus, bukan jelek.

15:25Cuma kayak dia ngelakuin satu atau dua hal yang fatal.

15:30Iya, kadang-kadang begitu.

15:33Nah ini hanya bisa dilakukan oleh orang yang mahir, ini ya, tailwind ya.

15:40Oh iya, ini pakai tailwind juga, jadi cocok lah ya.

15:45Itu gue nge-pool request-nya langsung edit di GitHub web-nya dong, nggak dijalani.

15:52Harus itu ya, harus nge-jalani, harus install-install ya.

15:56Gak tahu caranya, malas, yaudah coba di-browser kan.

15:59Coba aja sekarang dibuka, kayak responsif yang mobile,

16:02pasti itunya kan nightmare-nya kepotong, sama window-nya jadi ke-stretch,

16:07apa, viewport-nya jadi ke-stretch, bencet yang, nah.

16:13Nah itu, ya gitu lah.

16:16Yaudah, langsung di-fixis itu, terus.

16:20Langsung aja, di-accept dah.

16:23Percaya, percaya, percaya, langsung accept.

16:26Harus percaya.

16:28Merge, merge dulu ya.

16:30Merge, squash and merge.

16:32Gua tambahin protected branch ya.

16:34Oh iya, siap-siap.

16:36Sudah.

16:37Biar nggak langsung nge-push ke main semuanya.

16:40Ya, mungkin cerita pembuatannya sedikit ya,

16:45jadi kan banyak dibantu AI, oh iya, untuk UI-nya juga dibantu sama AI.

16:49Untuk UI-nya, pakai bold.

16:55Jadi awalnya tuh bentuknya begini, yang versi awalnya.

16:58Wah, belum-belum udah versi awal kan.

17:00Terus selang beberapa minggu, selang beberapa hari lah ya, nggak sampai seminggu ya,

17:07pas lagi demo-in bold juga di satu acara, jadilah ada website,

17:16tapi website-nya website restoran yang pernah saya tunjukin, yang bentuknya kayak tadi.

17:22Jadi kita bikin website restoran dan temanya neo-brutalis, gitu ya.

17:31Tapi silah keren banget.

17:34Loh, mana?

17:36Kok nggak jalan?

17:38Belum start application.

17:40Ya, ini biasanya dia start otomatis loh, reload ya.

17:46Nah, dari situ, nah ini kan baru mulai lagi dia.

17:50Dari situ akhirnya saya download ini, di-export kan, download.

17:57Terus dari download, taro di folder project-nya misalkan /docs/something gitu ya.

18:04Terus dari situ saya kasih tahu ke waktu itu pakai copilot,

18:10saya bilang ini ada contoh project, aplikasinya TypeScript.

18:14Tolong design-nya diambil, dipindahkan ke project Elixir.

18:24Karena kan beda ini kan, beda teknologi kan, akhirnya jadilah seperti ini.

18:34Dari yang udah ada, jadi salah satu kegunaannya,

18:38walaupun misalkan v0 atau bold.new itu, nah ini dia.

18:42Bold.new itu dia menghasilkan aplikasi yang mungkin Next.js lah, atau ini VT ya kalau nggak salah ya.

18:52Tapi kita bisa ngambil desainnya aja, kita implementasi ke project yang lain dengan teknologi yang berbeda.

19:00Berarti kan sebenarnya dia tinggal ngambil class name-nya kan, dia ngambil CSS-nya aja kan.

19:07Ya, maksudnya logic-nya si AI-nya.

19:12Jadi dia mungkin dia ambil ini, oh ini background kalau untuk, apa namanya, untuk button putih.

19:20Sama-sama pakai Tailwind nggak? / Sama-sama pakai Tailwind.

19:24Ya gampang kan, berarti tinggal si box-nya, masing-masing kart-nya tinggal dipakein class name-nya itu kan.

19:32Masa yang terjadi di balik layar. / Betul.

19:35Ya, tapi kan setidaknya dia tetap harus tahu. / Iya, dia harus nyari kart-nya, elemen atau komponennya yang mana.

19:45Elemennya apa, terus dan juga ini-nya kan sebenarnya udah ada.

19:49Design basic-nya udah ada kan, ini udah ada list-nya, udah ada detail page-nya kan.

19:54Terus cuma diminta untuk mengubah konsep view aja, jadi seperti ini, ya style-nya aja.

20:01Kita pakai bahasa Inggris apa bahasa Indonesia di ini ya? / Iya bahasa Indonesia.

20:08Bahasa Indonesia aja ya? / Bahasa Indonesia.

20:11Sudah, terus apa lagi yang menarik ya? / Oh di PR-nya, di website-nya.

20:19CI-nya itu berarti build-nya di remote ya? Di GitHub Action. / Di GitHub Action.

20:28Server, server gimana nih? / Server di, saya pakai Coolify.

20:34Ada yang tahu Coolify? Coolify itu versi open source-nya Heroku.

20:42Jadi saya punya namanya paas.riza.world, disini bisa login, nanti kelihatan tuh.

20:55Pasword-nya... / 1-2-3-4. Pasword-nya rahasia.

21:04Pake OTP, biar aman. Terus untuk ininya pakai docker, docker file.

21:19Mana dia? Ini nggak apa-apa kan kalau dilihatin kan? / Nggak apa-apa. / Ya harusnya nggak apa-apa.

21:29Kalau nggak boleh dia udah hidden. / Iya, jadi post green-nya disini, terus apa yang perlu dilihat disini ya?

21:42Inilah tampilannya. Jadi bikin project baru, terus siapin environment variable-nya,

21:50konek ke GitHub supaya bisa itu, webhook.

22:01Jadi kalau ada perubahan, ada pull request dll. dia akan otomatis deploy, ulang.

22:07Itu free atau apa? Berbayar si hosting? / Pullify-nya free. Pullify-nya free, tapi kan kita harus ada hosting-nya ya.

22:17Harus ada VM-nya. / VM-nya di? / VM-nya di AWS. / Mahal dong.

22:25Pakai kredit, bukan ada kredit. / Berarti kita terima sponsor nanti untuk membayar ini ya?

22:37Yang pertama ada isu tarif, kemudian yang kedua US Dollar semakin tinggi.

22:45Jadi solusi untuk hosting lokal kayaknya bisa jadi pilihannya ya.

22:50Sponsor, sponsor, ayo silahkan. Hostingan lokal boleh.

22:58Berapa kali bolak-balik prom? Bolak-balik prom banyak sih bolak-balik.

23:06Dan pakenya juga ganti-ganti. Ada yang pakai CLI, ada yang pakai co-pilot, berkali-kali sih.

23:14Itu iseng aja pengen nyoba? Atau emang maksudnya ada spesialisasinya kayak co-pilot jago di cloud, jago di apa?

23:23Enggak, iseng aja nyoba. / Oh, kirain serumit itu setup-nya.

23:30Enggak, sebenarnya yang sehari-hari dipakai itu di co-pilot. Cuman kemarin itu ada, begitu ada, kan AI perubahannya cepat banget kan.

23:40Tiba-tiba, wah Gemini 2.5. / 2.5, yang jago banget. / Buat coding, kan? Buat coding.

23:48Ah, cobain lah. Tolong bikinin Dockerfile, wah bisa dia.

23:52Ya lah, cuma kalau bikin Dockerfile kayaknya model yang nggak sepintar itu bisa buat common use case.

24:00Maksudnya ini kan juga bootstrap dari starter ya, kelihatannya ya.

24:04Iya, benar-benar. Terus, apa lagi ya. Terus tiba-tiba ada cloud code, cobain ah, cobain.

24:19Ternyata harganya lumayan mahal. Akhirnya berhenti, nggak pakai. Beberapa minggu nggak pakai, tiba-tiba di-email sama Anthropic.

24:28"Kok kamu udah nggak pakai lagi? Ini saya kasih 40 dolar." Akhirnya pakai lagi, ngabisin. Sayang, nggak dipakai.

24:36Ya gitu lah, jadi buat eksperimen sekalian. / Itu ada direct GDI dapat tuh, bisa dipakai buat gimana ya?

24:45Dapat, bisa, bisa. Iya, pakai Vortex ya. Bisa juga tuh. / Iya.

24:49Ntar deh, nggak mau apply juga tuh. / Ya, ya, ya. Lumayan 500 dolar. Tergantung prom-nya betul, tergantung prom-nya, tergantung modelnya juga.

25:04Saya juga ganti-ganti model, nggak pakai Sonnet doang, tapi sempat pakai OpenAI juga.

25:16Jadi kalau misalkan di VS Code kan, misalkan kita buka apa ya? Misalkan kayak Readme lah ya.

25:23Tuh, di sini ada Cloud, di sini ada AIDER, ada semua lah pokoknya ya.

25:27Misalkan ini, kalau saya buka di sini kan, bisa pakai Sonnet atau 4.0.

25:36Nah, kadang-kadang yang 4.0 lebih bagus, terutama untuk solving problem biasanya.

25:43Tuh, kalau ada error ada apa, 4.0 lebih bagus dibandingkan Sonnet.

25:48Kalau untuk generate code, biasanya saya pakai Sonnet dulu awalnya. / Ini kursor ya?

25:54Bukan. / Apa nih? / VS Code. / Oh, VS Code.

25:59Tapi side panelnya itu GitHub Copilot ya? / Iya, ini Copilot. Jadi Copilot itu, ini kok cuma tinggal satu ya?

26:10Sebelumnya itu, dia ada dua sebenarnya. Ada Copilot Chat yang khusus buat nanya aja, ada Copilot Edit.

26:18Nah, ini sebenarnya Edit nih. / Itu klik di bawah, di kanan bawah. / Oh ganti ya?

26:27Iya, ganti UI. Dulu di sini. / Berkembang terus.

26:34Kalau Edit itu dia otomatis nge-edit file-nya langsung. Kalau Ask itu dia nanya, cuma nanya aja.

26:41Agent, ya agentik ya, agentik. Kok jadi ngomongin AI ya? Bukan ngomongin web-nya ya? / Ngomongin AI.

26:49Ngomongin AI. Udah, iya tantangannya itu tadi ya. Tantangannya baru pertama kali konsumsi YouTube Data API,

26:59terus ambil data playlist-nya, terus singkat database, terus juga file, kalau untuk podcast yang di Spotify kan butuh mp3.

27:08Jadi ada proses konversi dari YouTube video ke audio.

27:19Ini kalau nggak salah saya pakai YouTube DLP. Iya, DLP. Mana ya? YouTube, nah ini.

27:31Ada nggak ya di sini? Nah, ini. Ini, terus... / Oh itu dijalani di dalam server-nya, server-site-nya.

27:47Iya, jadi di Docker-nya juga ditambahin. Dia install GTDLP-nya dulu.

27:54Terus dari sini nanti... / .ex itu apa sih? / Extract Audio.

28:00Ini Extract Audio, jadi audio only. Nggak perlu videonya, terus audio formatnya mp3. / Oh bukan, maksudnya file-nya, file extension-nya.

28:09Ada .ex. / .ex itu Elixir. Ada .ex, HTML, ini HTML. / Elixir. / Format HTML.

28:21Kalau .ex.s itu script-nya. Jadi ini jalan di runtime, kalau ini di compile dulu. Yang .ex itu di compile dulu.

28:29Kalau .ex.s itu yang jalan di runtime. Jadi dia ada dua tipe.

28:34Biasanya untuk konfigurasi kebanyakan, sama untuk testing. Testing-nya juga menggunakan .exs.

28:40Udah, dari sini dia download, taruh di satu folder lokal, abis itu ada perintah lagi yang upload ke S3.

28:54Mana dia? Nggak ada ya? Ada kan? Upload.

29:00Nah ini, upload audio. Yang ini-ini juga semuanya minta bantuan AI.

29:07Jadi abis bikin ini, pasti in the jalan, udah fix baru minta AI lagi untuk bikinin dokumentasi.

29:15Jadi Elixir itu bisa buat bikin API endpoint juga ya? / Bisa.

29:27Oke. Aduh, ini kok ngaco banget sih. / Apaan?

29:33Apa yang ngaco? / Sisi-sisi-sisi-situsnya. / Oh iya? Kenapa?

29:43Hah? Nggak, normal kok. / Nggak, maksudnya di testing-testing-nya. / Oh testing.

29:51Ya. Terus juga kemarin sempet mau implementasi view transition, tapi kayaknya AI-nya masih belum terlalu ngerti.

30:01Tiba-tiba web-nya blank, kosong gitu. Jadi awalnya ada kayak nge-glitch gitu, tiba-tiba hilang. Akhirnya nggak jadi.

30:10Terus juga performance belum dilihat sama sekali, belum diperhatikan sama sekali. Ini kalau kita mau nge-check performance-nya dimana?

30:18Ya, yuk biar saya yang... / Silakan.

30:22Yang bedah performa. / Lumayan kan? Dapat ini gratis kan? Performance Suggestion gratis kan?

30:28Jadi kalau temen-temen punya website, boleh ya. Lumayan. Dapat konsultasi gratis dari pakar performance dan pakar UI.

30:44Jadi masih baru ini ya. Baru desktop-nya aja ya.

30:49Baru desktop, iya. / Kalau kayak... / Tampilannya gila ya?

30:53Jelek. Kalau mobile-nya, mobile-nya jelek. / Kamu makanya di-merge.

30:58Udah? Belum ya? / Belum. Sudah gua up-proceeding.

31:02Belum di-merge. / Iya, tapi belum di-merge.

31:05Tapi dia udah, si Elixir-CI-nya nge-build, tapi kayaknya buat brands yang terpisah. Nggak tahu setelannya gimana ini.

31:13Ini udah di-approved kan? Merge pull request-nya? / Coba pull request-nya di-approved. Udah. / Udah? Ini udah?

31:21Sudah gua approve. Tinggal di-merge.

31:27Oh, dia ada dua ya. Buat Codespace juga ya.

31:35Kayaknya itu kan CI-nya. CI-nya bikin deployment buat branch-nya sih. Jadi masing-masing branch, ada itunya sendiri nggak?

31:44Kayaknya nggak. / Ini maksudnya kan sudah di-approved ya.

31:49Sama nanti kita bikin supaya orang bisa main. Oh, sudah bikin dev container juga ya. Good, good, good.

31:55Ini bagian dari yang ini nih. Di issues, coba klik issues. / Dev X? / Iya, saya lagi improve dev X-nya.

32:06Salah satunya, Docker, Docker Compose karena ada database, dan juga dev container.

32:14Teman-teman bisa langsung main nih. Langsung open kitabspace, langsung jalan tuh.

32:18Tapi hati-hati ya. Bayar ya. Ada free tiernya. / Ada freenya sekian.

32:28Jangan ditinggal jalan. / Gak apa-apa, dia otomatis mati kok kalau 5 menit atau 10 menit nggak di-open-in.

32:38Dia... / Gak di-peduliin? Mati? / Iya, dia shut down sendiri kok. Jadi tenang aja. Mereka nggak sekejam itu.

32:48Itu berarti kalau code space itu berarti personal ya? Ke account personal kita ya, ngambilnya?

32:53Yes, yes, yes. Bukan ke mobile. Tiba-tiba ada billing gitu. Orang kita nggak masukin kata kredit.

33:02Mungkin lah masukin kata kredit aja nggak. Nah itu berulang. / Oke, sekarang kita cek performance ya.

33:10Jadi, biasanya saya cek performance itu nggak ke page speed dev, nggak ke GT matrix. / Jadi gimana caranya?

33:18Saya langsung buka dev tool. Ini kita desktop aja ya, karena mobile-nya jelek.

33:29Iya. Mobile-nya terlalu brutal. Ini juga jelek sih, banyak space. / Gak apa-apa. / Iya nggak penting.

33:41Itu nggak apa-apa space. / Kalau terlalu lebar, malah capai nggak sih? Nanti kita bacanya. / Bukan horizontal space.

33:47Apa? Horizontal yang atas ini, atas-bawah. / Kalau di mobile jelek sih kalau kegedean. / Iya, harusnya dikecilin ya.

33:54Beda desain kali. / Jadi biasanya kalau saya main-main ya, sebelum buka, jadi ada performance type,

34:02tapi sebelum kita kesana, saya biasanya cek-cek aja dulu, klik dulu, load, oh cepet. / Itu networknya di Throttle?

34:11Iya, saya biasanya suka pakai fast 4G di Throttle. Jadi klik network, ada pro preset, atau mau nambah preset juga bisa,

34:27nambah wifi juga bisa, segala macam. / Jangan lupa balikin abis ngecek, nanti bingung sendiri. Kenapa ya ini?

34:36Tanya ke Slack kalian lambat nggak? Nggak, tahunnya kita lupa.

34:42500 Error. / Yang suka saya lihat itu konsol, ada nggak JavaScript Error atau apa yang Error?

34:48Set Manifest hilang? / Iya, maksudnya nggak ada Set Manifest.

34:53Tapi ini Errornya internal server Error, bukan 404. Jadi kayaknya rewrite rule atau something happen.

35:03Jadi tolong dicatat. Kalau saya sama junior, tolong dicatat.

35:10Tanyain deh, jadi juniornya penting.

35:15Terus cek dulu di network tab, klik, refresh, dilihat bawahnya, berapa banyak sih ininya, request-nya kecil banget ya?

35:27Kita ngasih di bawah nggak ya? / Iya, kecil. Bisa di gedein nggak? Bisa di klik.

35:34Di hitungnya, tombol plus aja, tombol plus, komen plus.

35:39Klik di itunya, di panel ini.

35:44Bawah ini kelihatan nggak ya? 1,49 byte ya? Karena ada 37 request total,

35:51yang di transfer dari network 1,4 megabyte setelah di uncompres, unzip 1,5 mega, dan dem content loadednya selesai dalam 2,16 second.

36:09- Oh ya tanya Elixir Phoenix, ini dia otomatis, apa sih kayak nge-build, kayak nge-compress, minify segala macem, itu di handle dia semua?

36:21Jadi kayak minify-minify asset gitu udah include juga ya?

36:27- Betul. Ada di docker file kok, ada ininya, komennya kelihatan.

36:33- Aset, aset itu, aset compiler. / Yang kedua saya lihat, kok saya cuma lihat 2 image tapi yang di-download banyak banget image.

36:45Sudah ada kan loading lazy, nah tolong dicatat.

36:51- Kita semua jadi juniornya Ivan ini. - Oke, apa tadi? Yang pertama, site manifest, 500 error.

37:03Terus yang kedua, image lazy load.

37:15Ini, saya biasanya cek dulu ini, ada javascript kan, ada javascript, saya klik kanan, terus open in source panel.

37:30Saya cari, saya hunt down dulu javascriptnya, load-nya gimana nih, saya cari di, bisa gak sih, dulu ada sih ini kayak goto element itu bisa, tapi sekarang gak.

37:49- Goto source gitu atau apa? / Iya, nah, which is sudah good ya, sudah dipakai differ, jadi gak render blocking.

37:57Good, thumbs up. Jadi sudah differ, kalau tadinya gak bisa differ atau asing, biasanya kalau gak butuh-butuh amat, ya di-diver aja, atau load di footer.

38:18Kita kayaknya pernah bahas ini di episode apa gitu, yang soal pesen makanan. / Terus sudah ada skema data, thumbs up lagi, keren.

38:30- Betul-betul ini sebuah di handle sama framework-nya sebetulnya kan ya, kayak termasuk apa, kayak hasilnya. Tapi berarti maksudnya itu framework cool stack yang bagus kan, maksudnya bukan cuma server, bukan cuma back-end, tapi front-end-nya juga dia beneran detail kan.

38:50Terus, pakai Google phone dan Google phone-nya sudah di-preconnect, bagus, thumbs up. Dan sudah menambahkan display swap, jadi tidak ada phone blocking.

39:10Phone-nya waktu nge-load typography, dia gak nge-blocking, nanti setelah phone-nya selesai di-download, di-swap. Good, thumbs up. / Ini AI, ini kerjaannya AI.

39:22Tapi kan Mas Riza jadi supervisi, jadi thumbs up buat Mas Riza. / Kalau jelek, yang disalahin Mas Riza juga. Dan bagusnya emang display swap itu dari Google phone-nya kan emang ada, itu tuh yang kayak copyface-nya buat pikokas, emang sudah pakai itu. / Sudah ada ini.

39:41Paking itu, jadi sudah best practice. Yang dapat display swap, berarti... / Tapi tidak semua orang melakukannya. Kadang ada yang pernah saya nemukan, dia gak pakai preconnect, jadi lebih lama aja untuk ngeresolve phone-nya.

39:57Nah ini bukan orang yang bikin. / Good, good, nothing else. Oke, dari network. Oke, kecilan ya? / Kecil. / Oke. Dari network, biasanya saya lihat dulu ini, yang di sisi docs-nya gini kan.

40:17Biasanya di ini, saya lihat timing. Ada timing, biasanya kalau... TTFB, bahasa simpelnya TTFB. / Time to? / Time to force buy.

40:33Jadi bisa kelihatan, TTFB-nya bagus atau tidak. Dari setelah request send dan waiting. Jadi TTFB-nya, servernya Mas Riza itu 215 ms. Jadi which is, mantap.

40:49Sebagai rule of thumb, 500 ms itu sudah yellow. / 500 itu yellow, Bu. / Ya, 400 ms itu batas akhir green.

41:07Ya, batas akhir green lah ya. Jadi sebisa mungkin di bawah 500 ms. / Jadi misalkan di bawah 500 ms ini jadi yellow gitu, warnanya? / Nggak, itu kayak best practice TTFB aja.

41:22Oh nggak ada ini ya. / Untuk ada di web.dev, ada web vital. Jadi TTFB itu ada range-nya good, yellow, sama worse. Jadi di atas 700 ms itu sudah.

41:41Karena kalau udah TTFB-nya kelamaan, ya everything else lama. Oke, terus kita lihat. Yang lain saya lihat ini biasanya gini, saya tambahin lagi protocol.

42:02Protocolnya H2. Berarti sudah HTTP2. Sebenarnya sudah ada HTTP3. Lebih bagus lagi kalau sudah bisa HTTP3.

42:16Terus kita lihat lagi CSS. Sarah, CSS yang ini. CSS-nya sudah, apa namanya? CSS-nya sudah, oh ini sudah HTTP3. Lihat nih kalau yang gini.

42:39Tapi dari ini dari YouTube pastinya kan. YouTube-nya sudah HTTP3, H3-nya. Nah, sekarang kan banyak request dari YouTube.

42:51Dari I.YT.IMG ini kan. Tapi yang kita pre-connect, si YouTube itu nggak ada. Jadi saya bisa, tolong dicatat tambahin pre-connect dari I.YT.IMG itu.

43:09Jadi lebih cepat lagi nanti kayak DNS prefix. Jadi sebelum semuanya didownload, dia sudah DNS prefix. Karena akan ketahuan.

43:17Mending lazy load image-nya atau di-pre-connect. Lazy worker. Pre-connect domain-nya. Jadi di-warm dulu DNS-nya.

43:28Jadi kelihatan nanti di timing. Ada DNS lookup kan, initial connection. Ya kan. Nah, lihat ini yang pertama ini.

43:43Terlihat initial connection. Terus yang kedua sudah nggak ada. Lihat. Nah, kalau misalnya tadi kita warm, dia kayak, ini font, ini font dari Google.

43:57Ini, sorry, ini, ya. Oke, font. Kalau kita misalnya dia sudah kita DNS prefix atau pre-connect, kita bisa menghilangkan DNS lookup ini. Sama initial connection.

44:16Begitu. Jadi kita selanjutnya, image yang selanjutnya, kita sudah nge-cache. -Hanya sekali aja ya? -Ya, sudah open connection.

44:28Oke, selanjutnya. Oke, baru kita ke performance tab. Ada performance tab di sini. Nah, di performance tab ini sebelum kita record,

44:47ini dia bisa, kerennya yang baru adalah bisa kita lihat layout shift terjadi di mana. Interaction. Jadi kalau misalnya mau ENP,

44:59tapi kalau saya klik-klik ini, kelihatan ya, dia ngerecord. Dan berapa millisecond. Jadi kalau misalnya terjadi apa namanya, banyak script yang membuat,

45:17contohnya slider atau accordion, swipe, apa lagi, tab. Kalau pakai JavaScript yang heavy-heavy, kalau misalnya tab-nya diklik,

45:31waktu-nya bisa lebih kayak contohnya, ini dibagi dengan refresh rate. Jadi kalau misalnya monitor kita itu 60 refresh rate,

45:48yang mata kita bisa lihat kan 60 Hz. 60 fps. Dan itu sekitar 60 Hz ya. Betul ya? -Kurang lebih ya. -Betul ya.

46:01Jadi saya lupa hitungannya, tetapi di bawah, saya lupa lagi, ENP itu kalau misalnya dia sudah nggak bagus,

46:13nanti dia akan merah sendiri di sini. Kalau misalnya kliknya kelamaan. Jadi pengaruhnya di situ, kalau terjadi interaction,

46:23misalnya kalau accordion dipencet dan kelamaan, dan itu membuat jadi feel lagging kan. Accordionnya diklik, kelamaan.

46:31Dan user bakal ngeklik sekali lagi, terus nanti accordionnya buka, langsung tutup lagi. Itu annoying banget sih.

46:37Betul. Nah, selanjutnya saya lihat layout shift. Wah, terjadi layout shift nih. -Ada ya? -Gak kelihatan kan?

46:45Nah, kita bisa lihat nanti dimana layout shift-nya. Kita masuk ke, saya suka pakai CPU-nya, saya throttling ke empat kali aja.

46:55Nggak usah yang heboh sampai enam kali kalau kayak Motorola G4. Jadi kalau misalnya record, saya record. -Record and restart, refresh.

47:07Ya, dia providing. Jadi di sini kita bisa lihat FCP, first content full pane, last content full pane,

47:17dan layout shift dan interaction to next pane. Nah, saya klik sidebar-nya. Di sini tuh timeline, di sini network request,

47:31di sini main thread, nggak kelihatan ya. Saya gedein. Nah, di sini, saya ulang ya, network request, dari atas deh.

47:51Ini kayak pane. -Loading page. -Ini pane, pane process nih. Jadi ada, kalau yang pink itu adalah CSS,

48:03kalau gray itu idle, hijau itu image, kalau kuning itu JavaScript. Kalau yang merah-merah ini,

48:19artinya blocking time. Dan istilahnya render blocking. -Main thread-nya lagi ke pane, berarti.

48:31-Dan ada juga merah long-task. Nah, lebih tepatnya long-task. Yang merah-merah di atas ini long-task.

48:37Lebih dari berapa? 50ms ya. Eh, berapa? -Dan di sini dia 400ms. Kelihatan ya, 400ms? -Ya. -Okay.

48:49Saya kecilin dulu yang di bawah karena ini terlalu detail. Lihat ya, di bawah ada, saya gedein.

48:57Ini bisa didrag bagian mana? Sets. -Untuk zoom ya? -Iya. Untuk, ini kan time frame ya. Time frame bisa di,

49:07kalau saya pakai mouse-nya, ya, ini saya bilang bug aneh ini. -Iya, itu ya? Wills-nya? -Iya. -Bukan.

49:19Nge-bug, si ininya nge-bug, nggak tahu kenapa. -Oh, di hilang ya? Harus di record lagi? -Ya udah lah, nggak apa-apa lah.

49:27Tuh, somehow dia nge-bug, si Chrome-nya nge-bug. Anyway, saya pakai wheel, karena ada wheel kiri-kanan,

49:38saya suka pakai wheel kiri-kanan itu buat geser-geser biasanya. -Zoom in, zoom out. Apa geser-gesernya?

49:45-Zoom in ya. Something is wrong. Kayak mesin saya langsung panas deh. Kayaknya ada proses yang berjalan somehow.

49:57-The memory leaking. -Iya. Oke, terus kita lihat ada fcp, lcp, dcl. Ini first content full pane, largest content full pane, don't content loaded, sama page load,

50:17window.load, ini window.load event disini. Jadi, kalau pakai fast 4G, situsnya ini sekitar 4 second lah selesainya semuanya di-download.

50:33Oke, kita bahas satu-satu. Kalau yang ada merah begini artinya render blocking. Jadi, yang pengen tahu lebih dalam tonton render blocking bisa baca

50:51artikelnya Mas Ilya Grigorik tentang critical rendering path di chrome.dev. Ilya Grigorik critical rendering path, biar tahu apa maksudnya render blocking.

51:12Dan css itu termasuk render blocking. Jadi, setelah page di-load, css di-download, jadi dia menemukan css dan dia harus download dulu css-nya dan

51:26dia uncompress dulu dan dia parsing dulu sebelum melanjutkan semua proses yang lainnya. Dan itu ada reason-nya di behind itu. Jadi bacalah critical rendering path.

51:42Dan sudah pernah kita bahas di salah satu episode kalau nggak salah. Oke, sekarang kita bahas sedikit mengenai lcp. Yang paling sering kan dari core web vital lcp, cls, dan imp.

52:00Ini dia lcp, imp, dan cls. Nah, kita bahas ini dulu deh tadi yang saya bilang cls ya. Kita bisa lihat layout shift culprits. Kalau culprits itu bahasanya

52:15jelik banget tapi ya, lucu sih. Culprits itu penyebab tersangka. Nah, kerennya si performance tab yang baru ini dia sudah bisa ngasih tau worst layout shift-nya itu terjadi di

52:36detik ke 2,27 bagian ini. Nah, bisa di-hover, kelihatan nggak? - Terus kelihatan. - Tuh, kelihatan tuh. Dia jadi jif. Dia akan kejap-kejap.

52:54- Oh, swap ini ya? Swap font? - Font display swap. Iya, betul. Font display swap jadi di sini. - Oh, font-nya kurang compatible ya? Kurang apa?

53:09- Ya, mungkin bisa cari yang namanya nanti font... - Ada tools-nya kan yang kita kena bahas. - Iya, tools-nya untuk kalau pakai font X ini,

53:25berapa kerning gun spacing, letter spacing yang harus kita gunakan supaya tidak terjadi layout shift. - Kayaknya di Google Docs kita ada deh, tapi somewhere malas nyari.

53:37- Tapi ini juga nggak terlalu... - Nanti di salah satu video. - Masih hijau kan? - Iya, masih hijau. Betul. Nah, terus kita bahas LCP.

53:50Karena itulah yang paling sering digembar-gemburkan para ahli expert di bidang performance lah biasanya.

54:02Oke, LCP-nya kita pengen tahu. LCP itu nggak selalu sama di semua device. LCP itu bisa jadi di desktop berbeda, di mobile berbeda,

54:21dan misalnya sama-sama artikel page. Bisa jadi saat LCP-nya itu title, bisa jadi image, atau bisa jadi video. Jadi tergantung. Tergantung kondisi.

54:33Selama page-nya loading, LCP itu bisa berubah-ubah. Jadi sebisa mungkin LCP-nya itu dari sisi desain, kita sudah menentukan, oh kita mau bagian inilah menjadi LCP. Jadi kita bisa optimize lebih pasti.

54:54- Untuk menentukan LCP. - Bisa mencana algoritma Lighthouse menentukan. Ternyata LCP-nya malah teksi yang dinamik.

55:03Iya, sudah capek-capek dibikin image-nya kecil. Ternyata ya LCP-nya, titlenya yang segeri gaban.

55:10Untuk mengetahui LCP bisa ada banyak. LCP-by-face, LCP-by-request ini, Render Blocking Request, Network... Ini mempengaruhi semua LCP.

55:20Pertama kita lihat LCP-by-face. Kita pengen tahu LCP-nya apa sih gitu ya. Kita bisa klik di LCP ini.

55:29Largest Contentful Paint. Ternyata image yang ada senyumannya Eka tuh yang jadi LCP.

55:38Nah, kita cari tahu bagaimana cara kita ingin memundurkan si LCP ini. Tentunya kan kita lihat ya dari sisi request.

55:52LCP itu yang ada senyumnya Eka. Mungkin yang ini kali ya. Yang ini. Ya, yang ini. Kita lihat dia request-nya telat.

56:03Ya, dia request-nya telat. Dia harusnya, kalau kita ingin dia lebih cepat dan LCP-nya turun, tentunya dia harus di sebelah kiri ya.

56:13Setelah browser ngelihat, dia harus di-party dan segera di-download. Jadi LCP-by-face bisa kelihatan.

56:21LCP ini dipengaruhi time to first byte. Jadi ada 900 milliseconds sebelum LCP-nya ditemukan.

56:29Resource load delay. Karena ada parsing-parsing segala macam, 60 milliseconds cepet lah. Jadi nggak usah terlalu di pikirin amat.

56:40Nah, masih ada resource load duration dan render delay. Ini yang bisa kita optimize. TTFB-nya bisa kita optimize.

56:50Resource load duration-nya bisa kita optimize dan render delay bisa kita optimize. Caranya ya itu.

56:55Pertama bisa pakai, kalau kita sudah tahu dua ini yang kita mau benerin, kita bisa pertama membuatin dua ini loading.

57:09Bukan lazy load, jangan pasang lazy load karena justru harus cepat ya. Jadi LCP-by-discovery kita bisa lihat di sini.

57:21Kita perlu menambahkan fetch priority high dan jangan di-lazy load. Itu akan membuat LCP bisa lebih cepat lagi.

57:33Oh iya, ini pengalaman pribadi juga ngomong-ngomong fetch priority high. Kalau web ini sih, karena web personal dan semua di satu halaman,

57:42ya udahlah ya, nggak bakal kenapa-napa. Kalau kalian web-nya component-based, misalnya banner, terus dikasih fetch priority high

57:55karena ya itu ada keperluan buat LCP atau semacamnya, jangan lupa tinggalin notes atau dokumentasikan somewhere.

58:03Kalau suatu hari ada rombak layout, taunya banner itu yang tadinya di atas turunin ke bawah karena yang atas adalah lainnya,

58:12itu nanti malah bikin buyar semua LCP dan lain-lain karena fetch priority high-nya padahal yang below default pengalaman pribadi.

58:24Nah, sudah waktunya. Kita lanjut. Mau? Karena saya mau bagikan satu tips yang bisa membuat ini jadi lebih baik. Langsung.

58:41Wih, mahal ini. Ini ilmunya mahal ini. Dari tadi ini harus diperhatikan ya. Kita bisa klik kanan di dokumen, klik kanan, overwrite content.

58:57Oh, ini yang kemarin dibagi ya? Ya, saya sudah pernah set up sebentar. Saya harus ganti dulu ya. Sebentar-sebentar. Karena kelihatan semua.

59:14Ganti ke desktop ya? Ganti ke Chrome aja? Bukan. Ini konten-konten yang saya tidak mau tunjukin harus dihapus dulu.

59:30Hmm. Ya, ya, ya. Sebentar, sebentar.

59:49Eh ini copyright ya? Udah jangan lama-lama sih. Sebentar, saya ganti dulu posisi. Ini aja, jadi nggak copyright.

1:00:08Tung, copyright, tung. Jadi nggak konsen, Ivan. Malah yang ditampilin, yang rahasia, yang dihilangin, yang mau ditunjukin.

1:00:21Kebalik ya. Kita sambil baca komentar dulu ya. Mantap, iya mantap. Ini mahal nih. Topik malam ini ilmunya mahal. Jadi harus dicatat ya.

1:00:40Maaf lahir batin. Jangan lupa mengundang-undang. Eh makasih ada gue di TRI ya nggak?

1:00:52Sob-sodara, kemarin di studio Sob-sodara. Pengen Sob-sodara.

1:01:00Sob-sodara, tolong dicatat. Iya, ilmu malam ini luar biasa mahal. Jadi tolong dicatat ya, teman-teman ya.

1:01:12Jadi kita bisa dari network klik kanan, overwrite konten, dan kita bisa langsung overwrite index HTML-nya.

1:01:24Jadi yang tadi kita mau lakukan apa tadi? Contohnya kita mau pre-fetch. Pre-connect.

1:01:36Kita mau, pre-connect itu base domain-nya aja, maksudnya semua yang di dalam domain itu otomatis udah warm. Udah anget. Ya betul. Kita bisa tambahin di header ya.

1:01:54Link, pre-connect, yang sama. Tapi beda domain-nya doang.

1:02:06Iya, oke. Lalu yang kita bisa langsung save, dan yang ini kita bisa edit. Fetch Priority.

1:02:26Fetch Priority. Hi. Hi. Loading. Eager.

1:02:42Oke. Kalau kita ganti disitu, disini juga harusnya berubah. Mana dia? Oh, salah ya. Bawah lagi, bawah. Bawah lagi.

1:02:58Epsiode berapa itu? Epsiode satu. Epsiode satu. Bukan. Epsiode berapa ya? Design pattern. Cari aja design pattern. Nggak bisa pukain ya.

1:03:12Kenapa nggak konek ya? Harusnya diubah. Harusnya diubah yang di dalam source. Kita ganti aja sini. Fetch Priority. Hi.

1:03:30Terus kita bisa loading Eager. Eager. Terus, itu kan ada image yang kedua tuh. Satu lagi. Iya satu lagi.

1:03:42Kiri-kanan-kanan yang memang di atas. Dua itu. Above default ya. Dan yang lain kita bisa buat loading Lazy. Lazy. Tapi banyak banget. Harus copy paste semua.

1:04:00Udah sisanya diapus aja dulu. Bisa. Bisa. Ya bisa sih. Contohnya. Sudah, nggak usah semua. Save. Terus kita. Harus di-save ya? Control + S gitu?

1:04:20Iya. Control + S atau Cmd + S. Terus kalau di-refresh. Oh oke. CSS-nya ilang. CSS-nya ilang. Karena CSS-nya.

1:04:31Kena Lazy lho. Nggak. Kena. Bukan. CSS-nya. Error. Itu ada error tuh. JavaScript-nya.

1:04:39Karena. Not found. Wait. Kenapa not found? Oh karena saya tadi ganti ya. Ganti. Karena itu ya. Cache ya. Karena baru push.

1:05:00Karena baru di deploy ya? Kayaknya iya. Baru selesai deploy. Refresh dulu. Oh iya tau. Barusan banget berubah nih.

1:05:09Saya ganti begini caranya. Di-enable-nya dimatiin dulu. Terus. Oh baru di. Ini diambil. Copy URL. Terus di. Mana si script-nya ini ya?

1:05:34Itu. Atas. Atasnya. CSS. Oh JS. CSS-nya juga kayak gini ya? Iya. CSS juga berubah. Iya. Tadi CSS-nya juga. Itu JS ya.

1:05:50Oh atasnya. Kebetulan karena saya, eh karena berubah di tengah jalan saat demo. Ini kalau demo tuh ada aja. Ada aja. Terus enable.

1:06:04Udah. Enable lagi. Kalau kita load. Tadah. Kita langsung. Check lagi. Berubahannya. Kita bisa kesini. Dan record.

1:06:20Oh di record pun yang kalau dari versi HTML markup lokal. Dari yang sudah di overwrite. Betul. Wah cantik. Si dia jadi. Wow. Di depan.

1:06:34Iya tadinya kan nunggu apa nunggu ke blocker sih. Karena saya nggak hapus ya. Kalau nggak hapus kan. Ini kan kalau kita mau hapus semua. Kita bisa bandingin dari. Oh dari yang sebelumnya.

1:06:50Kan ada nih garisnya. Iya kan. Ya. Sedangkan kalau yang. Dia blocking dulu ya. Yang baru. Sudah tidak ada garisnya. Karena fetch priority high. Dan lcp-nya meningkat tajam tuh.

1:07:04Turun. Dua dari ya. 2,13 ya. Bekurang lah. Jadi 1,7. Nah. Karena kita loading lazy. Sebagian tadi ya. Sebagian besar. Jadi lebih cepat lagi. Ya. Yang ini saya males.

1:07:20Tetapi yang ini kelihatan ya. Yang itu ya. Jadi belakangan. Nggak perlu di download gitu ceritanya. Ya seperti itulah demo singkat saya. Luar biasa. Tolong dicatat.

1:07:34Tolong dicatat. Tolong diperbaiki. Klien besok minta ini udah live ya. Tolong.

1:07:50Udah live. Jadi dari tadi juga udah live. Makanya yang di production. By the way fix ini cuma di local overrides nya ya. Jadi yang saya lakukan sebelum saya push kodenya.

1:08:10Karena commit segala macam. Itu saya testing nya itu pakai local override aja dulu. Handler nya saya roba. Local override. Kalau kira-kira hasil lendernya seperti apa yang saya mau.

1:08:24Yang bisa bikin cepat. Nah. Kalau sudah dapat pattern nya. Barulah dipindahin ke kode. Kode aslinya. Yes. Oke. Mantap.

1:08:36Episode isinya ada geng semua. Nggak lah. Harus ada tulangnya lah. Harus ada geng semua.

1:08:44Berarti pull request harus nambah nih dari saya nanti nih. Harus belajar lagi seer. Itu dia. Sambil-sambil.

1:08:56Nggak lah. Gue ngapain jalanin lokal di code space aja entar. Sekalian. Sekalian perbaiki ritminya. Kalau ada yang mau cobain jalan di lokal.

1:09:08Kalau ada. Ya. Kalau temen-temen juga mau ikutan. Emang code space bisa jalanin elixir juga? Kan dia pakai docker. Kuat nggak ya tapi ya.

1:09:18Jebul. Kalau yang free. Yang free kuat nggak ya? Iya. Only one way to find out kan. Ya berarti dicoba aja.

1:09:29Kuat-kuat-kuat. Saya pakai yang dua core untuk WordPress bisa kok. Kuat ya. Kan pas key nya saya harus pakai WordPress kan.

1:09:39Dan install dockernya WordPress, database main skill segala macam. Bisa. Docker bisa kok. Meman ya. WordPress sama elixir beratnya.

1:09:48WordPress sama elixir emang setara ya beratnya. Kan ada pose gray nya juga kan ini. Ada pose gray ya. Betul.

1:09:56Ya sama lah. Kurang lebih ya. Nah tadi kan baru LCP ya. Masih ada INP. Masih ada CLS. Paling nanti jadi episode saya di Google IO.

1:10:13Kasih. Episode contoh palu basah sama sop saudara. Asli. Bisa nih. Apalagi dari sekarang bisa nggak nih? Kita dibolehin kemakasan nggak nih Mas Dito?

1:10:29Ada budget nggak? Ada budget nggak? Tanyaannya bukan Dito lah. Mas Denang lah. Kita bersikap itu yang apply ke Medan.

1:10:43Apply ke Medan direject karena nggak bisa menerima speaker dari luar Medan. Kok bisa ya? Nggak tahu.

1:10:55Mungkin untuk yang built with AI mungkin berbeda. Budgetnya. Kalau Google IO beda lagi kan.

1:11:02Kan kalau BWAI kita bisa bikin sendiri kata Mas Riza.

1:11:09Iya bisa kalau mau. Ini tadi perubahannya. Tergantung kalian gimana. Ini perubahannya tadi dari Eka ya. Ini ya. Yang naikin ke atas ini ya.

1:11:25Coba kecilin deh. Cukup kan. Oke. Begitulah untuk malam ini. Cukup lah ya. Cukup.

1:11:41Sudah banyak ilmu yang dibagikan terutama performans belajar banyak sih. Jadi teman-teman juga mudah-mudahan belajar banyak.

1:11:50Sebelum kita udahan, seperti biasa kita mau pilih topik buat minggu depan. Kira-kira kita mau bahas apa.

1:12:01Ada di discussion. Topiknya apa. Dokumentasi. Semantik versi ini. Buku.

1:12:21Csp. Csp mana sih. Csp apa aja gue lupa. Astro bukannya udah ya kita ya?

1:12:35Iya. Udah ya. Kita close aja ya. Eh lupa udah belum sih. Astro lima. Kayaknya udah deh. CLA.

1:12:51Eh tapi belum bahas astro lima. Pas itu malah yang baru adalah astro empat. Cuma gak bisa habis-habis kayak gitu ya.

1:12:57Yang gak usah di close ya. Biarin aja. Oh iya sama ini. Kemarin baru ubah episode sembilan lima.

1:13:06Salah. Beda ya. Beda nomor episode ya. Sembilan enam berarti. Sembilan enam.

1:13:12Enggak juga. Sembilan empat. Salah ya. Wah beda ini ya. Beda cara perhitungan.

1:13:21Soalnya kan gak bisa. Soalnya gak bisa ini berdasarkan jumlah dari yang ada di playlist.

1:13:31Kan gak ada nomornya kalau di Youtube playlist kan gak ada nomornya.

1:13:37Tadi kita mau bahas apa nih? Yang security ya? Bukan? Coba balikin lagi yang activity ya.

1:13:46Yang ini mau bahas browser policy. Ya dipolling aja browser policy atau bentar apa ya.

1:13:56Ionic framework ini dari dulu cuma gak ada yang belum dapet bintang tam. Belum dapet vote ya.

1:14:07CLI design? CLI design itu apa sih? Ya boleh masukin juga. Boleh yaudah antara dua itu voting apa.

1:14:19Oke sebentar sebentar. Itu voting CLI design dong. Tolong pencetin.

1:14:27Huh? CLI design. Pencet disini? Oh enggak gak bisa. Di Youtube. Kok lambat ya Youtube-nya.

1:14:38Kok gak bisa? Tergantung beliau. Ini ditunggu episode-nya. Oh episode untuk performance lagi.

1:14:51Nanti di Google I/O masing-masing daerah. Expanded. Iya.

1:14:59Nanti saya mau bawa performance. Ini Dui ini dari daerah mana? Ikutan GDG apa nih kalau boleh tahu?

1:15:08Wah Youtube-nya ini loh. Gak bisa dibuka. Gak bisa buka Youtube. Tuh. Kenapa gitu? Muter-muter.

1:15:21Palu? Wow. Jauh ya. Lumayan ya. Kalau Palu GDG terdekat itu Makasar bukan? Makasar. Yang luar pulau itu cuma ada di mana sih?

1:15:40Buka-buka Youtube-nya. Iya kayaknya. Coba buka browser lainnya. Palu, Palu Basah. Palu dan Palu Basah.

1:16:00Palu Basah. Dekat Manado. Oh di atas ya. Di bagian atas ya. Manado. Coba kita buka Youtube disini.

1:16:10Biasanya disebelahnya Ray. Hah? Jadi sebelum Ray kan ada Do. Please stay. Bahasan buat minggu depan. Tadi apa?

1:16:34CLI Design. Browser. Eh CSB apaan? Content Security Policy ya browser. Browser Security. Apa lagi? Satu lagi. Cukup. Dua itu aja.

1:16:53Buku. Buku Broking Algorithm. Buku. Bedah Buku. Start Polling. Kita punya waktu tiga menit. Dua menit. Tiga menit.

1:17:07Tiga menit. Silahkan CLI Design atau Browser Security. Wah CLI Design. Jokes bapak-bapak. Oh iya selalu.

1:17:27Ini apa? Bedah Buku ya. Wah kalian saling kenal. Kenal lah ya satu komunitas kan ya harusnya ya.

1:17:44Browser Security. Bedah Buku 14%. CLI Design 29%. Gimana cara polling ya? Oh iya bikin polling gak bisa. Gak bisa itu ya. Gak bisa mencek polling ya.

1:17:58Gak bisa. Iya gak bisa. Emang kalo KPU, anggota KPU gak boleh milih ya? Ya kalo di channel Youtube-nya KPU. Itu kan beda. Kalo pemilihnya KPU polling Youtube gak bisa.

1:18:14Ayo kita tunggu sampe 21-20. Teman-teman Pak Lu apa kabar? Dui Funksi. Nama panjangnya Dui Funksi. Itu namanya Fullstack. Funksinya banyak.

1:18:35Developer Dui Funksi. Developer Fullstack sebenernya ya. Ada yang kalo function itu super function ya. Satu function bisa handle banyak hal.

1:18:47Bukannya gak boleh ya? Apa sih namanya? Boleh. Tidak disarankan. Kan bukan function ini. Bukan function development. Eh function bukan pattern. Jadi semuanya satu function.

1:19:05Apa kan python begitu? Satu function main. Tapi jalanin semua. Boleh boleh boleh. Semua juga gitu kan ya?

1:19:19Semua yang singletone juga. Semua kan dalam satu singletone. Satu objek. Iya sih. Gak ada yang ngelarang juga. Satu menit lagi. Ayo silahkan. Sembilan vote.

1:19:40Masa cuma 9 orang? Kita yang nonton berapa nih? 11. Oh 11. Kalau gak login bisa nge-vote gak sih? Gak bisa ya? Gak bisa kayaknya.

1:19:59Coba pake akun lain. Akun kloningan. Akun kloningan. Browser security gas. Browser security kayaknya yang menang nih. 56%.

1:20:17Berat. Yang gue paling enak itu yang menang. Kita belajar dulu berarti ntar. Ini apa sih? Di thread-nya ada penjelasannya gak? Skopnya apa?

1:20:33Enggak. Ini kan Ivan yang suggest kan? Iya kita lagi di tengah-tengah ngomong ngebahas sesuatu. Terus biar gak ke sidetrack kayak masukin aja di topic kita bahas besok-besok.

1:20:51Cuma bahas suatunya itu exactly apa lupa pas yang bahas osint itu security. Oh harus nonton lagi kan videonya. Berapa sih topiknya di github? Satu.

1:21:04Oh ada nih keterangannya CORS, CORP, COOP. Oh bahas course ya. Bahas course, corp, COOP sama co-app. Yang ini nih. Browser security. Iya bahas tentang fungsi course itu apa.

1:21:22Terus yang kita tau kan kebanyakan course kan. Yang ini ternyata ada banyak lagi yang lain. Boleh lah. Bukan gak semuanya harus yang kita sharing.

1:21:32Kita harus belajar bersama juga kan ceritanya. Yes betul. Udah lewat 2-1 ya. Kita tutup ya. Jadi pemenangnya adalah browser security untuk minggu depan.

1:21:44Minggu depannya lagi mungkin CLI design. 40%. Langsung gitu aja kali ya. Dari pada kita polling lagi.

1:21:56Oh biar gak tiap episode polling ya. Boleh, boleh. Iya. Oke kalau gitu. Untuk malam ini kita cukupkan sampai di sini. Terima kasih banyak buat semuanya.

1:22:08Terima kasih banyak juga buat Ivan yang sudah memberikan ilmu mahalnya. Luar biasa. Kita belajar performance malam hari ini.

1:22:17Sebenarnya tau teorinya sebenarnya tau. Cuman panel performance itu sendiri udah kayaknya overwhelming banget ya.

1:22:29Banyak banget item-itemnya. Kalau mau belajar itu kayak belum-belum udah takut duluan.

1:22:35Dilihat karena udah kebiasa kan. Kalau Ivan mau udah biasa, udah sehari-hari. Iya. Konsepnya sama-sama. Konsepnya sama-sama apa? Konsepnya dari tulisnya yang berkembang.

1:22:48Justru tulisnya yang berkembang. Kalau tambah helpful ya. Tambah helpful tapi karena belum pernah pake gak familiar.

1:22:55Kalau tadi sih semua sinteksnya, kodingnya sih ya biasanya emang udah tau caranya bikin kayak gitu. Cuman ya selama ini gak pernah pake performance panel

1:23:06buat nunjukin dan ngejelasin aja. Keuntungannya di satu tim run-end cuma satu, udah semua langsung percaya gak usah ngejelasin apa-apa.

1:23:16Perlu pake lighthouse C-I gak? Buat presentasi ke client, iya pake itu. Cuma untuk nge-debug, untuk ngejelasin, ya pake performance panel.

1:23:30Kan kalau ke client kan masih butuh score. Kalau di performance panel kan gak ada scoring. Nggak ada score.

1:23:40Hanya untuk nge-debug. Performance panel itu buat nge-debug.

1:23:46Oke, oke. Yaudah kalau begitu. Kita pamit. Selamat malam. Selamat istirahat. Sampai jumpa minggu depan. Bye bye.