Diskusi Bebas - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode ini membahas tentang pengalaman tim dalam beralih dari StreamYard ke Vdo.Ninja, sebuah tools streaming open source berbasis teknologi WebRTC. Diskusi kemudian bergeser ke topik performa website dengan audit Core Web Vitals (INP, CLS, LCP) yang dilakukan di kantor. Topik utama yang dibahas adalah WCAG accessibility audit level 2.1 AA, termasuk aspek legal seperti ADA (Americans with Disabilities Act) di Amerika dan regulasi yang mulai mewajibkan aksesibilitas di Eropa. Episode juga membahas tantangan dalam menjalankan audit accessibility yang mencakup development, design, konten, dan QA.
Poin-poin Utama
- •Vdo.Ninja adalah alternatif open source untuk StreamYard yang menggunakan teknologi WebRTC, memberikan solusi streaming yang lebih fleksibel dan terjangkau
- •Core Web Vitals audit memerlukan perhatian pada tiga metrik utama: INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), dan LCP (Largest Contentful Paint)
- •WCAG 2.1 AA adalah standar aksesibilitas yang menjadi fokus audit, meskipun tidak selalu wajib secara hukum tergantung yurisdiksi
- •ADA (Americans with Disabilities Act) di Amerika mencakup produk digital dan website, terutama untuk toko online dan fasilitas publik yang melayani banyak orang
- •Eropa telah mulai mewajibkan standar aksesibilitas WCAG untuk perusahaan enterprise, menunjukkan tren global menuju web yang lebih inklusif
- •Accessibility audit tidak hanya tentang development, tetapi juga mencakup design, konten, dan proses QA yang membutuhkan kombinasi automated testing dan manual review
- •Tantangan dalam audit accessibility meliputi struktur semantik (heading levels, sections), kontras warna, dan kebutuhan QA yang tidak sepenuhnya bisa di-automate
0:17Halo.
0:20Oh sudah on air.
0:23Udah, ada tulisannya.
0:26Oh iya iya.
0:29Hai hai hai.
0:30Masa?
0:32Tapi ada bunyinya nggak?
0:33Dengar, dengar.
0:35Halo.
0:39Halo.
0:41Selamat malam, kita berubah tulis.
0:45Maaf, agak telat sedikit jadinya.
0:50Satu menit lah waktu itu.
0:53Hah, masa nggak ada?
0:58Bisa ada, bisa ada ininya, bisa ada konek ke YouTube-nya, keren.
1:04Iya, keren ya.
1:06Halo.
1:10Namanya Filio.Ninja.
1:15Hah, masa?
1:23Iya, masa.
1:26Tapi saya bisa lihat Mas Liza.
1:28Iya, karena kita di sini bisa.
1:31Di screen-nya saya itu bisa lihat Mas Liza.
1:33Screen video.Ninja.
2:28aHhHhHhHh.
2:50Halo.
2:57Mas Liza, berapa tahun lagi?
2:59Sembilan.
3:07Masa ya?
3:09Tapi bisa dengar suara Mas Liza?
Lihat transkrip lengkap
3:17Keluar.
3:18Oh, ini bisa nih.
3:20Coba dibuka kacamata. Mungkin gara-gara kacamata baru.
3:29Eh, kan bisa lihat statistik juga loh, keren banget.
3:41Mana?
3:42Pencet di surut kanan atas, bisa lihat statistik buat nerds.
3:48Oh iya, udah muncul.
3:51Inbound connections, outbound connections, blablabla.
3:55Remote Peer Info. Eh, kok cerita suaranya Mas Liza tuh nggak kebroadcast ke live YouTube-nya deh?
4:01Enggak.
4:03Kayak ada empat ya?
4:05Iya.
4:06Kok lonjong?
4:07Ya, biar agak kurus.
4:10Kurus ya?
4:12Akhirnya bisa ada suaranya. Halo, halo, halo.
4:16Visual dan audio Mas Liza nggak ada.
4:24Ah, audionya nggak ada.
4:26Ada deh kayaknya sekarang, barusan refresh.
4:39Ada empat dirinya, ada dua Mas Liza.
4:50Ada, ada suara.
4:53Kenapa jadi nggak ada suaranya semua? Halo, halo.
4:55Ada, tapi jadi double.
4:58Oh, ada?
4:59Nggak, kalau di kita double, di YouTube-nya bener.
5:02Tapi suaranya double ya?
5:03Ya udah, kita biasain diri aja.
5:06Sebentar, berarti yang ini nggak usah pada suara.
5:11Sekarang udah double. Eh, masih double?
5:13Enggak.
5:14Coba di YouTube ada nggak? Tanya dulu ke chat.
5:18Oh iya, di YouTube kedengaran nggak suara saya?
5:24Ini gimana sih pakenya? Kayaknya nggak mengerti.
5:27Halo, halo.
5:29Teman-teman semua ada siapa nih? Ada Agung, ada Abdul, ada Mik Jeff.
5:35Aman, akhirnya. Udah keringetan nih.
5:39Sudah keringetan.
5:44Cerita dulu dong, ini tulis apa nih?
5:46Kok 7 juta ganti, kenapa?
5:51Sorry, suaranya hilang lagi.
5:53Apa? Cerita dulu, apa?
5:55Ini tulis apa dan kenapa kita nggak mengganti ini?
5:59Kita kan tadinya pakai StreamYard.
6:02Terus ternyata StreamYard itu semakin lama, semakin mahal.
6:06Iya.
6:08Jadi kita coba tulis baru namanya Vdu.Ninja.
6:13Dan ini open source ya?
6:17Dan ini open source dan menggunakan teknologi web yaitu WebRTC.
6:22RTC.
6:23Itu dia.
6:25Tadi siang kita cobain sama Mas Yohan juga bertiga, lancar ya?
6:31Dan kita mendalami tools ini ya, apa isinya, terus gimana, berapa koneksinya.
6:40Terus itu ibarat loading kan kalau lagi cuma nunjukin ke teman sendiri, pokoknya nggak cuma lokal, deploy pun deploy staging site yang masih pakai IP doang, semua lancar.
6:51Testing juga jalan semua, giliran top road, ada aja pasti masalahnya.
6:57Ini juga berlaku ya berarti tadi?
6:59Benar juga ya.
7:03Jadi malam ini kita ngapain selain pamer tools baru?
7:10Kita ngobrol-ngobrol aja sambil menunggu pertanyaan dari teman-teman semua.
7:15Oh iya, teman-teman punya pertanyaan ya.
7:19Oh iya.
7:21Kan gini ya.
7:23Udah berapa?
7:25Udah hal-time.
7:27Hal-time babak satu kelar.
7:31Oke, semoga menang ya Indonesia ya.
7:33Sejauh ini masih seri, nah tadi nonton pakai link yang bukan seharusnya.
7:40Eh tiba-tiba di tengah-tengah mati, terus pas nyalah lagi, di refresh, berubah jadi Korea Utara lawan Qatar, aduh pusing bus.
7:48Oh.
7:50Gik, cara nontonnya gimana?
7:52Wah ya jangan disini dibahas ya.
7:55Kalau yang resmi, vision push.
8:00Kalau di Australia hari Q1 masih main gak sih?
8:04Itu tahun berapa?
8:08Sekalian aja, sekalian aja Mark Bosnitz, siapa ya? Siapa namanya dulu?
8:13Mark Bosnitz, tau lagi gue.
8:16Ada Tim Cahil, Tim Cahil.
8:19Ini jebatan banget.
8:21Tim Cahil, Tim Cahil masih ada gak?
8:24Aku gak tau.
8:30Ini yang?
8:32Senior, senior.
8:35Senior dalam rangka apa?
8:38Kualifikasi World Cup.
8:40Oh, kualifikasi World Cup.
8:42Nggak, jadi kayak ada apa sih punya, gak tau lah ribet, punya yang kan ada grup-grupnya, kayak dua teratas itu langsung lulus ke World Cup.
8:52Ya itu kelihatannya kurang visible ya.
8:56Terus yang dua grupnya tuh berenam kalau gak salah.
9:00Nah peringkat 3 sama 4 tuh dari masing-masing grup bakal kayak ada turnamen lagi gitu.
9:04Nah yang penang turnamen itu masuk ke World Cup 5-6 ya bye pulang.
9:09Indonesia?
9:11Ya belum, kan masih baru pertandingan ke 2.
9:14Sekarang kalau misalnya beneran skornya kayak sekarang masih seri kayaknya peringkat 3 atau 4 gitu.
9:22Terus masuk yang turnamen entah apa.
9:26Sudden death, sudden death.
9:28Iya ngobrolin web dong sekarang.
9:31Iya ngobrolin web, oke.
9:34Lagi ngerjain apa, Divan atau Eka akhir-akhir ini ada yang menarik gak di kantor?
9:43Ada, lagi sering ngerjain ini kayak lagi sering membantu project yang apa?
9:52Mankat.
9:54Audit core web vital dan ngementorin ya, ngementorin teman yang lain, kolega untuk benerin INP, CLS, sama LCP.
10:11Dan ada tools baru di Chrome.
10:13Apa itu?
10:16Sekalian ngekas fungsi share screen berarti ya?
10:19Iya.
10:21Nah ngomong-ngomong audit, kok juga lagi ada task yang mirip nih.
10:25Sebenernya lagi ngerjain beberapa hal sih, cuma kalau yang wine sih ya standar lah.
10:30Ini yang lumayan menarik dan ini sebetulnya pertama kali malah di kerjaan utama ya, di day job ngerjain yang tentang accessibility.
10:40Jadi apa sih, WCAG, Audit WCAG 2.1, 2.1 AA, karena ini apa sih, untuk website luar yang sebetulnya sih kalau untuk status resminya gak harus.
10:57Jadi kalau di Amerika itu ada aturan ADA, American With Disabilities Act, itu payung hukum yang luas, itu luas banget.
11:07Itu juga produk digital, tapi kayak toko. Sebenernya awalnya malah kayak fasilitas publik yang fisik pun terkena hukum itu.
11:15Terus ya pokoknya detailnya sih agak ribet ya kalau hukum kayak gitu, merambat ke toko.
11:21Misalnya contohnya toko, toko kan ada toko fisik, tapi lama-lama juga merambah ke produk digital juga.
11:29Nah itu tuh sebenarnya gre area, jadi kalau misalnya dianggap kalau serve orang banyak dan aksesibilitasnya jelek itu bisa kena lousut.
11:41Tapi ya sebetulnya itu agak gre area hukum lah. Cuma emang kalau misalnya ada instansi tertentu yang kalau instansi pemerintahan sih wajib ya.
11:54Di luar itu sebenarnya nggak harus, tapi berarti kan sebetulnya iklimnya di sana sudah mulai terbiasa dengan bahwa makin bagus aksesibilitasnya itu ya makin baik.
12:05Ya kayak misalnya kalau analogi tempat fisik, kayak di sana kan toko-toko atau fasilitas umum apapun walaupun bukan resmi dari pemerintahan kan
12:17ada banyak yang pakai RAM misalnya, apalah ada guide yang untuk orang tunai-netra, website juga udah mulai gitu.
12:25Ngomong-ngomong soal aksesibilitas, Europe itu sudah mulai mewajibkan loh. Euro Act itu juga sudah, kapan pastinya nggak tahu, nanti gue coba lihat sebentar.
12:38Nah tadi baru ada percakapan dengan tim college yang lain, kalau di Europe itu sudah mulai mewajibkan aksesibilitas M2.1AA AAA untuk yang enterprise, coba kita lihat ya.
12:57Nah coba lanjut dulu ya, nanti gue kasih linknya.
13:02Kalau yang disisikan, kalau di tempat kerja ini salah satu, bukan konstrain sih, cuma emang timnya kecil dan kayak harus poinnya, tiket-tiketnya, pakai jira soalnya.
13:17Itu kayak harus di-planning di awal, buat ngebagi, ya buat mastiin aja kayak masing-masing developer itu bisa dimanfaatin waktunya dengan efektif.
13:31Nah karena kita sama-sama, semua yang terlibat, baik tim lead-nya maupun gue sendiri baru pernah ngerjain audit yang overall gitu.
13:41Seru juga sih, jadi ya emang call aja ngobrolin ini enaknya dibikin gimana tiketnya.
13:47Karena kan sebetulnya WCAG pun nggak semuanya tentang development kan, ada development, ada design, ada konten, itu dari segi apa yang digerjain.
13:59Dari segi QA-nya gimana, kan selama ini ya kalau QA kodil kan misalnya ada unit test atau lebih banyak end-to-end sih,
14:08misalnya udah ada workflow-nya, nah kalau ini kan QA-nya ada yang bisa automated, kayak misalnya contohnya kontras warna,
14:15ada yang nggak bisa kayak misalnya struktur-struktur, itu kan semantik strukturnya yang kayak ada section, heading level,
14:23sense atau nggak sebetulnya ada unsur, bukan subjektivitas juga ya, cuma tergantung kontennya dan nggak bisa sembarang,
14:30cuma misalnya install extension axe atau wave, kalau udah passing berarti pasti itu berarti accessible juga nggak bisa.
14:41Jadi yaudah akhirnya kita keputusannya, ya dibikin epic, terus masing-masing WCAG principle yang kayak apa, perceivable blablabla dibikin story.
14:52Nah dalam-dalamnya semua dibikin semacam, saya sebagai yang ngerjain bikin semacam sheets terpisah sih,
15:02jadi pendekatannya adalah bikin kayak apa, field-nya apakah ini field-nya development atau design atau konten,
15:13apakah ini bisa dicek secara automated, kalau bisa tools-nya ini, kalau nggak bisa, step-step pemahamanya lebih ke KMSI heading level itu kan lebih ke pemahamanya.
15:23Principenya begini dan cara ngetes manualnya begini. Sebenarnya ya pake voice over kan bisa dicek,
15:31cuma kan screen reader, aplikasi screen reader juga banyak kan, ada NVDI, ada voice over, dan kalau kita internally saat ini belum sampai sedetail itu sih jujur.
15:43Cuma ya minimal, kesimpakatannya adalah minimal semua ada dokumentasinya dan sejauh apa di QA, itu sih.
15:52Kalau ke depannya perlu ngelanjutin lagi, misalnya perlu didelamin lagi, tinggal lanjutin dari yang tiket, tinggal cek aja tiket yang sekarang ada, itu sih.
16:07Itu barusan gue datang link European Accessibility Act 2025, itu tahun 2025, itu di link chat ada nggak ya?
16:17Kok nggak ada ya?
16:19Kenapa nggak ada ya?
16:21Nggak ada.
16:23Welcome to the chat.
16:25Nggak ada tapi.
16:27Oh, aku lihat kan ya.
16:29Ini coba.
16:31Oh udah, udah, udah.
16:33Oh udah, baru-baru.
16:36Vaimo.com
16:37Iya itu.
16:39European Accessibility Act 2025.
16:43Ya baru sekadar disinggung aja sih tadi, jadi di 2025 mulai menggalakkan EAA di Eropa.
16:57Jadi company-company yang kita handle sekarang tuh udah mulai aware ini, jadi mulai kayak sudah memulai pembicaraan, belum jadi project atau belum jadi implementasi, belum jadi tiket, belum jadi tiket, tapi soon.
17:11Dan bisa jadi lawsuit juga, kalau nggak comply.
17:17Iya.
17:22Karena klien yang banyak di Eropa jadi banyak dapat exposure berkaitan dengan accessibility ya.
17:31Iya compliance.
17:33Compliance.
17:35Bagaimana dengan Indonesia?
17:38Di Jakarta, Jakarta sebagian sudah mulai comply kok, kayak itu who's who's comply.
17:49Terus, maksudnya kalau lihat pintu masuknya segala macam tuh saya melihat ada mempersiapkan untuk accessible person sih, khususnya inkursi roda dan buta.
18:05Tapi kalau tayung gukumnya itu kalau yang di Indonesia mencakup produk digital juga nggak ya?
18:11Penasaran itu sih.
18:14Cuman ini tanya mungkin teman-teman yang di penonton ada yang tahu nggak?
18:19Mungkin ada yang tahu ya Cep, itu aja.
18:22Soalnya ya menariknya kalau yang kasus Amrik ini, tayung gukumnya ternyata sama.
18:29Yang general, intinya ya prinsipnya layanan atau produk itu harus bisa nggak boleh membedakan customer atau pengguna berdasarkan kemampuan fisik.
18:44Bisa fasilitas fisik, bisa bangunan fisik, bisa bangunan digital.
18:50Berdasarkan kemampuan finansial boleh nggak?
18:54Itu malah boleh ya? Nggak mampu nggak usah beli.
18:59Seru-seru ya.
19:04Misalnya ada tulisan di toko yang kaya di larang masuk, kayak gitu tuh.
19:08Kalau kita kan ada raskin ya, raskin, tapi yang kaya nggak boleh beli kan.
19:15Gas juga, gas melon kan, awalnya yang gas 3 kilo kan konsep awalnya kaya gitu kan.
19:24Iya, bensin yang subsidi juga kan.
19:28Tapi boleh, ada aja tuh yang ngisi, yang mobil 2000 cc ke atas, bukan cuma LCGC.
19:43Oke, cukup sampai di situ. Jangan dilanjut.
19:56Iya, pulang dari Beijing kemarin langsung ngajar kelas GNI 2 minggu, senil sampai kamis. Terus abis itu dapat kabar kalau di proposal ke Bangkok JS ya.
20:21Konferensi Bangkok JS diterima.
20:26Jadi saya dan Ivan berangkat.
20:29Untungnya dapat ini ya, dapat akomodasi, tapi nggak full, dikasih sekian USD untuk pesawat dan penginapan.
20:49Kita bisa lah backpacking-backpacking.
20:56Pengalaman pertama, belum pernah ya, ke Bangkok.
21:00Jadi mulai ini sih eksplorasi, yang kemarin kan topiknya kan masih terlalu luas kan, sebenarnya cuma konsep HTML over the wire.
21:15Yang mau dibahas nanti apa juga belum tahu, jadi lagi diformulasiin, lagi eksplor HTMX juga buat demo-nya, liat Phoenix Live View dibandingkan, gitu.
21:31Kalau Ivan nanti bawain topik apa?
21:40Untuk brush up testing, jadi best practice brush up testing yang pakai web driver by night.
21:53Untuk brush up testing yang headless, itu bisa di Firefox, bisa di Chrome, bisa di Safari.
22:10Safari belum menunjukkan hilangnya, bahkan request for itu juga belum, request for comment juga belum.
22:25Cuma secara mereka mau mengadopsi belum ada, belum ada hilangnya.
22:36Dan mudah-mudahan lah ya, di Interop 2025, web driver by night bisa jadi salah satu point, jadi semua browser bisa.
22:50Mudah-mudahan, mudah-mudahan.
22:54Tapi pada rajin apa, kan yang jajak dapet sebelum Interop kan kayak di GitHub issues-nya ngumpulin comment dari developer kan ya, jadi developer harus ramaiin comment-nya.
23:10Kemarin yang JPEG XL ramai tuh, tapi nggak dikerima. Gak tahu siapa yang decide. JPEG XL kan ramai banget tuh yang nge-voting, tapi nggak dikerima.
23:24Ini agak random sih, tapi lanjut dulu aja. Jadi nggak tahu siapa yang ambil keputusan untuk Interop.
23:40Browser, semua browser yang terlibat lah.
23:51Ini ada pertanyaan, tapi tentang Laravel. Popover pada Flux Livewire komponen itu seperti apa? Pertanyaannya Flux itu apa?
24:06Gak pernah pakai sih, kalau popover kan ada, nggak tahu popover yang di Flux Livewire. Kalau popover yang lihat ML, ya emang udah ada, bisa dipakai di semua library.
24:20Emang nggak tahu yang dipakai di Flux itu atau bukan.
24:23Popover sudah standard ya?
24:30Sudah, sudah standard.
24:32Modal, dialog, popover.
24:36Udah baseline 2024. Wait, test comment ya.
24:38Bisa ya test comment?
24:43Oh iya. Bisa, bisa, bisa.
24:47Ini video dari Ninja ini bisa nerima PR buat CSS nggak sih? Biasanya lebih bagus.
24:57Ini kayak web app 2000-an lah ya.
25:05Ini kayak OBS. Jelek tapi powerful.
25:11Funksional, funksional.
25:15Tapi kan funksional, tapi estetik juga nggak apa-apa.
25:21Newly available?
25:25Iya, 2024 pasti ya.
25:27Dua versi terakhir di 2024, jadi baseline, ya itu udah di support dua versi terakhir lah.
25:38Safari versi dua terakhirnya kan dari tahun lalu. Jadi sebetulnya dari tahun lalu udah di semua major browser.
25:48Nah, apa bedanya antara popover, modal, dialog?
25:53Ya itu, itu tuh ada penjelasannya.
25:56Perutnya kalau PR-PR-nya, blocking dan apa, nge-block interaksi atau nggak nge-block interaksi.
26:04Cuma kalau detailnya, kok juga nggak inget sih.
26:07Alert termasuk apa?
26:11Modal.
26:12Kalau alertnya penting, berarti itu modal.
26:16Modal ya?
26:17Tuh kan modal itu artinya selama suatu popover sedang ditampilkan, sisa halaman itu harus non-interactive.
26:26Siapa yang masih pakai alert?
26:28Buat ngetes.
26:29Buat dibug.
26:31Saya beneran pakai alert di ini lho, di situs produksi yang client.
26:39Oh iya?
26:40Dan memang spesifikasinya minta pakai alert.
26:44Untuk alert ini, weather alert.
26:47Kalau misalnya ada tsunami, website-nya harus munculin.
26:50Harus munculin itu dan dia harus lihat dan baca dan close kabur.
26:56Ya itu emergency ya.
27:01Oh alert API itu kan ada callback-nya tuh, abis ditutup bisa running.
27:08Kalau misalnya dia nutup, running, jalanin aja di layarnya.
27:12"Ayo kamu masih ngeliatin layar, senang kabur."
27:15Kita nggak ngejawab pertanyaan sama sekali sejauh ini.
27:23Malah kita bahas bedanya modal dan non-modal, tapi nggak ngejawab pertanyaan popover pada flux livewire component.
27:31Coba kita gungin aja sama-sama.
27:33Apa namanya flux livewire component itu apa?
27:38Kita tahu livewire, dan hanya tahu itu saja, tahu sekilas.
27:42Livewire itu yang HTML over the wire kan ya.
27:48Flutter over the wire.
27:54Oh iya, kemarin itu Laravel baru dapat funding ya.
28:08Iya keren banget ya.
28:10Dapat Lamborghini baru nggak si Pak Tyler O'Twell-nya?
28:15Tapi yang menarik, ada yang menelusuri yang ngasih funding itu namanya Accel.
28:29Yang juga melakukan funding ke Versel.
28:39Dan kemudian si Laravel bikin Laravel Cloud.
28:44Bisa nebak nggak akhir kira arahnya ke mana?
28:49Nggak, kalau Laravel bikin Cloud, berarti jadi kompetitornya Versel kan?
28:59Bisa jadi vendor login, seperti Versel dan Next.
29:06Oh, cuma kenapa itu orang invest kedua-duanya?
29:11Oh, ngerti, ngerti.
29:21Kalau mau orang kena vendor login di Versel, mau orang kena vendor login di Laravel,
29:27yang juan si Accelros tadi kan.
29:33Accelros itu bukannya pemain gitar ya?
29:39Accelros yang nyanyi, yang berang itu.
29:45Ya ampun, kalian dengerin musik tahun berapa sih?
29:51Nggak boleh nggak musik, update semua ya, perlu NPM Check Update sini.
29:59Sudah ini, NPM Check Update itu salah, NPM Check yang sudah deprekatif,
30:07yang baru NPM Check Update.
30:11Ngomongin Versel, mereka kan lagi dihajar atas-bawah ya,
30:18kemarin ada Indie Hacker yang Peter Levolz ya,
30:25dia di interview sama podcast yang terkenal itu.
30:31Ya itulah pokoknya ya, salah satunya adalah dia kan fokusnya produk,
30:44jadi dia masih menggunakan cara-cara tradisional seperti upload pakai FTP,
30:50file-nya pakai PHP, PHP-nya juga cuma satu file, nggak pakai framework,
30:56terus database-nya skillite, jadi dia sempat nebut kalau nggak salah,
31:04ya memang ladangnya Versel cari duit dari Next.js,
31:10yang sebenarnya nggak salah kan, yaitu bisnis.
31:15Yang salah adalah orang yang udah tahu tetap pakai.
31:18Dan yang salah, orang yang ngerasa intible kali ya, ada Next.js,
31:26ngerasa itu produk gratis tanpa kepentingan apapun,
31:30dikasih dengan sukarela, dengan cuma-cuma ke kita semua, developer,
31:36tapi giliran ada trade-off-nya, ya dia sembel sama trade-off-nya,
31:40padahal maksudnya itu, ya si Versel juga nggak ngumpet-ngumpet ya,
31:44maksudnya kita kan tahu dari awal, kita bisa menganalisa.
31:46- Tapi tepatnya salah, Mas Riza, yang sudah tahu dan pakai itu memang benar.
31:55Dia sudah tahu produknya, dan sudah tahu konsekuensinya,
31:59dan memang butuh atau sesuai dengan requirement yang dia ciptakan, silahkan pakai.
32:05Yang salah adalah nggak tahu apa itu produknya, tapi dipakai,
32:11tapi berusaha diberi pelukin, dan komplain.
32:17- Nah itu nyambilnya sama tren sih, itu kan karena tren.
32:22Banyak video atau banyak konten, atau banyak social media posting Next.js,
32:29nggak diulik itu apa, siapa yang bikin cara kerjanya gimana,
32:33termasuk deploy-nya gimana, kayak ya udah sembarang karena itu tren,
32:36maka itu pasti oke, langsung dipakai, geliran keserimpet, marah-marah.
32:43- Ya contohnya gini deh, kalau misalnya beli mobil listrik gitu ya,
32:50atau ikut-ikutan beli mobil listrik, karena lagi tren, misalnya.
32:55Terus pergi ke pombensin, marah-marah, kenapa nggak bisa disilensinya,
33:01dia kan mau isi bensin gitu, misalnya, itu yang salah.
33:11- Terus tren-nya itu mulai banyak, baru berapa sih nggak banyak,
33:22muncul di Twitter ya, seperti biasa, ada yang udah mulai migrant dari Next.js,
33:30terus ada yang banding-bandingkan ya, jadi ada yang bilang,
33:37oh cukup 4-5 step di bawah 10 menit kalau pakai Next.js,
33:44terus di Bali, apakah Next.js pakai database, ORM, out, mail, notification,
33:51semua fiturnya Laravel, dibandingkan ya.
33:56- Kenapa nggak pakai WordPress aja, 5 minutes install, udah dapet semua?
34:02- Iya.
34:04- Kan semakin opinionated, semakin...
34:10opinionated itu akan membuat tools-nya semakin ke-lock kan sebenarnya.
34:18- Betul, semakin vendor lock-in ke cloud bisa, vendor lock-in ke framework-nya.
34:25- Tapi kan kita pernah bahas itu pas episode Next.js,
34:34sebetulnya nggak serumit itu kalau di-dockerize aja.
34:38- Iya kan, maksudnya ya effort, cuman maksudnya nggak,
34:43kan Next.js-nya sendiri kan open source software kan pada akhirnya,
34:48maksudnya kalau yang contoh itunya ada yang bikin unversal, yang Next.js di luar versal itu loh.
34:56- Open Next. - Bukan namanya.
34:58Ada yang bikin Open Next itu bisa kan,
35:01atau bikin sendiri yang kayak gitu, sesuai kebutuhan kita sendiri bisa,
35:05kalau untuk deploy, bikin dockerize, deploy sesuai kebutuhan hosting masing-masing, bisa.
35:16Jadi sebetulnya versal nggak sejahat itu yang kayak Next.js-nya di modifikasi sedemikian rupa
35:27sampai nggak bisa dimanapun selain versal.
35:29- Sebenarnya apa sih yang dikomplainkan orang dengan Next.js?
35:32- Susah deploy-nya kalau di luar versal. Terutama image.
35:39- Magic-nya itu loh kayak SSR yang auto-caching API raw.
35:47- Terus VATS-nya itu bukan pakai VATS-nya Node.js atau JavaScript.
35:51- Udah, udah itu loh. - Udah ya itu aja ya.
35:58- Udah ya. - Tapi dibandingkan dengan inovasinya,
36:05MSJS itu inovasinya luar biasa loh, mega-plus ya di luar isu-isu ini ya.
36:13- Jadi dengan kata lain, dengan adanya Next.js Cloud secara infrastruktur atau versal ya?
36:27- Versal itu. - Secara infrastruktur kan si developer-nya nggak perlu mikirkan infrastruktur lagi kan sebenarnya.
36:37Hanya fokus di produknya aja kan. Kan itu tujuannya sebenarnya.
36:41- Tapi mahal. - Ya itu trade-off-nya.
36:45- Free tier-nya generous banget. Jadi kita baru mulai sampai mungkin daily active user-nya
36:56misalnya ya nggak taulah ratusan lah gitu ya di tingkat seratusan,
37:02tapi yang user pakai habis itu pergi gitu itu gratis pun masih bisa sebetulnya.
37:07Tapi giliran scale kalau yang udah sukses banget, user-nya banyak banget, ya jadi mahal.
37:14- Exponential ya? - Big O-nya.
37:19- Sama dengan pakai Cloudflare sebenarnya. Cloudflare itu sebenarnya gratis-gratis-gratis.
37:26Tapi begitu kita hit certain point itu naiknya mahal loh.
37:31- Nah itu kan bisnis. Maksudnya itu kan trik-trik bisnis juga ya, tapi kan ya dia bukan badan amal.
37:39Jadi itu fair lah. Maksudnya kalau kita masih baru mulai, belum punya user, digratisin dulu,
37:45tapi kan kemungkinan kan produk kita nggak mungkin dari cuma 10-20 user tiba-tiba boom,
37:52langsung sukses, user-nya langsung jutaan dalam waktu sendiri.
37:55- Depens kalau misalnya tiba-tiba laris di TikTok gitu ya bisa, tiba-tiba meledak.
38:03- Kalau seambisius gitu ya berarti harus punya plan B ya.
38:07Orang minimal dari sisi produk sama developer-nya harus mikir dong kalau misalnya sukses.
38:14- API COVID, siapa mas? Siapa saja yang dulu bikin, pertama kali bikin API COVID.
38:24- Mas Ody. - Iya, Mas Ody.
38:27Dia bikin di Versel kan kalau nggak salah.
38:29- Iya. - Heroku.
38:32- Versel. - Versel.
38:35- Versel dia bikin. Dia fetching dari mana, terus dia jadi res API,
38:41sampai dipake sama WazeBoss kan waktu di demo-nya.
38:45Paling meledak tuh yang pake dia itu res API-nya dia.
38:49Ujung-ujungnya bengkek sih dia, bayar berapa, 1.000 dolar kalau nggak salah ya.
38:54Bergulat ya, sakit loh, dan nggak ada donasi.
38:59- Tapi kan dia waktu itu minta ke Versel kan karena aplikasinya open source.
39:05Dia minta keringan, tapi tetap coba bayar kan. - Iya tetap bayar, tetap 1.000 dolar.
39:12- Maksudnya nggak tahu berapa ujung-ujungnya, tetapi kita kan...
39:16- Mahal lah ya, di aturnya. - Request ke ini kan, kayak urunan.
39:22Kalau nggak salah, apa urusan lain. - Urunan, urunan.
39:24- Iya, itu yang awal COVID bukan ya. Salah satulah.
39:27- Mas Ainun, eh bukan. - Iya kalau pokoknya Mas Ainun.
39:31- Iya itu kan juga minta donasi, tapi ya bisa kan. - Untuk orang pemilih.
39:37- Maksudnya semua user Versel harus minta donasi.
39:41- Nggak cuma kalau itu kan agak force mirror ya.
39:45Maksudnya seberapa sering sih ada suatu produk yang diakses orang se-dunia sekaligus.
39:51- Bisa tiket, misalnya kayak tiket beli BTS.
40:01- BTS datang ke Indonesia ya. - Kalau mau bikin ini kayak gitu sih ya harus prepare, Mas.
40:06- Iya modalnya juga seberapa itu, masa pakai Versel yang gratisan.
40:11- Iya kalau bisa manggil BTS, kuda model itu sih, no excuse.
40:18- Ini yuk kita lihat fitur barunya kalau yuk.
40:29- Ayo. - Bentar, ini ada pertanyaan dari Handi.
40:32- Oh ada ya? - What wire, love wire atau embrace.
40:38Minusnya kalau usernya pakai browser di OS yang lama, banyak part yang nggak bisa di-render.
40:44Coba definisikan browser di OS yang lama itu OS apa, brosernya apa.
40:51Ini penasaran juga nih. - EOS 11 kali?
40:56- EOS 11. - Kalau hot wire, love wire, dan wire-wirean itu ada polyfill-nya nggak sih?
41:05- Nggak ada. - Kan web socket kan belakangnya?
41:10- Web socketnya iya, cuma kan ada part JavaScript yang tidak ditulis,
41:17yang tidak kita tulis mereka sediakan JavaScriptnya.
41:21Jadi kita nulisnya kan pakai bahasa native-nya, misalkan Html, PHP,
41:26atau kalau hot wire itu berarti Ruby, kalau live view itu berarti Elixir.
41:33Jadi kita nggak tulis JavaScriptnya, JavaScriptnya udah disediain.
41:37- Safari di OS yang belum di-update? Sonoma baru ya?
41:45- Ya mungkin yang Mountain Lion pas masih seri Heiwan-Heiwan.
41:54- Banyak orang yang pakai iPhone 9, iPhone 10 bisa jadi kan.
41:59- Oh yang susah Safari itu nggak bisa nyuruh maksa update,
42:05maksudnya nggak bisa kita render aja kalau misalnya Apple-nya nggak support,
42:09harap update ke licik-liciknya Apple, nggak bisa update OS.
42:14- Berarti mobile agak terkendala ya, terutama EOS ya.
42:19Terima kasih ya infonya, Andie.
42:21Kita belum pernah nyobain sampai ke mobile sih.
42:25Tapi ini topik yang akan saya bohongkan, jadi masukkan juga nih.
42:31Nanti. Heiwan tadi mau menunjukin apa?
42:38- Itu kaisan lirik itu.
42:41Docker itu bisa bermasalah jika dapat diakses oleh user selain sudoer.
42:48Jadi pakai portmannya tidak dapat akses sudo, apakah itu benar?
42:53- Docker itu bisa bermasalah jika dapat diakses oleh user selain sudoer.
43:02- Maksudnya pakai akses sudo di dalam Docker-nya?
43:07Atau pada saat ngejalanin Docker, pakai sudo Docker gitu?
43:13Atau gimana nih maksudnya?
43:15- Di on-prem server-nya gitu?
43:18Kalau misalkan kita install Docker, kalau nggak di level user kan kita harus pakai sudo kan.
43:26Itu masalah permisian sih sebenarnya.
43:28- Biasanya kalau kita, ini asumsi ya, masih mungkin gagal paham juga.
43:35Tapi kalau kita install containerd, jadi kalau di Debian atau Linux itu nggak ada Docker.
43:43Namanya containerd. Kalau kita install containerd di Debian contohnya.
43:52Hal yang pertama kita lakukan itu adalah si Debian installasinya itu untuk membuat user Docker sendiri.
44:04Jadi jangan menjalankan route untuk Docker-nya.
44:10- Ini create Docker oleh user yang bukan Docker kan bisa volume-nya ke route?
44:16- Iya. Kalau misalnya containerd-nya dijalankan oleh route.
44:23Jadi lebih baik fitur untuk menjalankan Docker-nya itu jangan pakai route.
44:32Di disable, tapi jalan-jalan Docker itu pakai non-sudo-er. Jadi pakai user dari Debian.
44:42Biasanya pakai user Docker namanya.
44:46- Tapi dia langsung permisian buat run, blablabla, kopi, blablabla gitu.
44:51Bisa langsung kopi-nya tetap sama, nggak harus sudo-sudo.
44:55- Sama. Iya, nggak usah sudo-sudo.
44:58Tapi perlu di garis bawahi ini kalau ada masalah di Docker-nya, jangan pindah ke yang lain dulu.
45:07Ini masalahnya bukan masalah Docker sama portman, masalahnya adalah permisian.
45:12Dan Docker bisa dijalankan tanpa sudo.
45:16Jadi lebih aman juga meskipun ada security hole di sana atau tidak ada, kita nggak tahu.
45:25Tapi sebaiknya menggunakan user biasa dibandingkan user sudo.
45:30- Bicara soal Docker, tahu nggak sih Docker, kalau kalian pakai Docker for desktop nggak sih?
45:37- Udah nggak.
45:39- Oh, Docker for desktop itu udah free loh.
45:42- Iya, hati-hati ya.
45:44- For enterprise. Jadi ada lisensi yang berbeda.
45:49- Tapi kalau misalnya nggak beli lisensi, itu keblok atau gimana?
45:54- I don't know, ya intinya bisa dilausul.
45:57- Atau cuma kalau misalnya, beneran itu loh, donation selalu I agree, I agree.
46:03- Contohnya misalnya developer di toko ijo, misalnya pakai Docker for desktop,
46:10itu bisa kena itu kalau misalnya nggak beli lisensi karena sudah kena kelausul license agreement.
46:20- Kita semua yang di enterprise bekerja pindah dari Docker for desktop.
46:28- Ke? - Obstack.
46:31- Obstack, saya baru coba juga kemarin.
46:34- Keren, cepet banget. Dan dibayarin sama company.
46:40- Itu bayarnya? - Bayar.
46:43- Jadi intinya karena yang bukan enterprise, yang company license,
46:50dan dihitung-hitung jadi lebih murah daripada ngebayarin Docker for desktop.
46:56Obstack lebih cepet mountingnya, sharingnya itu lebih cepet daripada Docker for desktop.
47:08- Ada beberapa alternatif yang lain ya, selain Obstack, ada Kolyma, ada apa lagi?
47:16- Kolyma open source, kalau mau yang open source bisa pakai Kolyma.
47:20Docker itu adalah aplikasi, intinya servisnya namanya Containerd.
47:29- Docker itu abstraksi di atasnya Containerd kan?
47:34- Iya. - Oke, kita...
47:39- Tadi Irfan mau demo-in apa?
47:42- Kita akan demo, nanti belajar bersama saja.
47:46Nanti kita hapus dulu.
47:53Buka web apa ya, contohnya ya?
47:59Web.dev aja lah, simple.
48:03Aduh, ini window web.dev.
48:15Bisa, lihat.
48:19- Kenapa? Kenapa port-nya? - Bentar, bentar, bentar.
48:23Kok kekecilan? Oh, semuanya model ini ya?
48:29- Gak bisa digedein nih, eh. - Bentar, cara gedeinnya gimana?
48:34Additional controls, bukan scene option, gak ada.
48:41Gak ada.
48:44- Matiin gambar kita, ngaruh gak? Gak jadi besar ya, gak otomatis?
48:48- Matiin gambar kita, enggak. Oh no.
48:53Highlight. Gak bisa juga.
49:01- Kalau gak bisa dibuat 16.9 gitu? - Gak ada optionnya.
49:13- Coba dibalik. - Bentar, sambil googling dulu.
49:20Bisa gak? Gak bisa. Ivan-nya malahan 16.9.
49:25- Berarti harusnya bisa dong. - Coba dimatikan itu.
49:31Share screen-nya ulang lagi.
49:34- Aspek rasio. - Tidak, tetap.
49:42Gak bisa ya? Karena ada aspek rasio portrait ya di URL-nya.
50:00- Oh iya, di URL kita ada. - Jadi ada yang baru nih.
50:15Kalau kalian ke Chrome, saya gak tahu Chrome berapa.
50:25Kalau kalian ke performance itu sudah ada metric yang baru.
50:38Kerennya metric yang baru ini, gimana ya, mendemokannya ya.
50:47Gini aja deh. Gue ambil view page, kopi semuanya.
50:59Gue apus dulu yang gak penting.
51:18- Save dulu ke web.atml. - Gak ada video setting-nya.
51:30Save dulu ke web.atml.
51:55- Ini yang web.atml. Ini lokal ya? - Iya.
52:03Terus kita bisa set-up data. Set-up, configure.
52:10Nah, kita bisa kasih tahu. Kayaknya gak enak banget ya. Gue bikin ini sendiri deh.
52:26php -s localhost 8001
52:46Oke. Ini sudah localhost 8001 nih, ya kan?
52:56Gue set-up, field data, advanced.
53:03Anggap ini sekarang development saya di lokal itu di 8001, origin-nya.
53:12Tetapi di production origin-nya namanya web.dev.
53:20Oke. Terus origin, gue refresh nih. Lihat nih, kelihatan sekarang field data di halaman ini.
53:44Ya. Saat ini gue udah lakukan update apa di lokal, adakah LCP gue jadi 159.
53:53Sedangkan data dari Chrome UX data, dari field data itu 2,46.
54:01Jadi bisa tahu nih, kita itu sudah mengalamiin yang di lokal kita.
54:08Sudah improve, belum di-counter dengan field data. - Wah, itu helpful banget sih.
54:17Terus kemudian, ya yang di sini gak kelihatan.
54:25Tapi bisa sebenarnya, bisa nggak ya? Oh, gak bisa. - Dikit-dikitin, komen minus, makin kecil.
54:38- Yang gue pengen ini tuh sebenarnya, dia bisa entah kenapa bagian ini gak kelihatan.
54:46Ini yang online-nya ya. Oh, kalau online-nya kelihatan nih image-nya yang mana.
54:52Jadi kalau LCP elemennya bisa dikasih tahu, diklik, gue bisa langsung tahu.
54:57Oh, ternyata LCP itu adalah, bukan ini loh, LCP itu ternyata ini.
55:06- Oke. - Iya, LCP itu ini.
55:11Jadi bisa salah kaprah karena bisa langsung tahu, bisa langsung dari...
55:19- Oh, ada winter-nya ya. - Iya, image bisa diklik,
55:26bisa langsung ke elemen yang dianggap LCP.
55:31Tetapi ingat ya, LCP itu tidak selalu sama tiap device.
55:39Jadi kalau misalnya saya ganti ini ke mobile misalnya, iPhone 12 lah, 100%.
55:56Kalau saya refresh, dia gak dapet nih. LCP-nya itu mungkin bagian dari sini.
56:14Tapi dia gak si... di tools ini masih belum detect.
56:20Nah, selanjutnya kita bisa juga, tools ini paling enak untuk bisa ngedetect ENP.
56:28Lihat nih, interaksinya di bawah sini ya, kalau saya klik.
56:32- Scroll. - Kecil banget ya, bisa ya.
56:37Gimana sih cara ngedetect ini?
56:41Nah, ini gak bisa dikecilin masih. Misalnya, aduh pencet.
56:51Lihat, bisa ngedetect interaksinya kita di sini.
57:03Tapi ini gak working, gak tahu kenapa.
57:07Kalau misalnya di sini, kalau klik-klik itu.
57:12- Aduh, aduh. - Auto update ya, tergantung interaksi kita.
57:16- Tadi kayaknya, elemen. - Ini, pointer.
57:20- Tuh, kelihatan ya, ke record. - Developer newsletter.
57:24Bisa kelihatan, biasanya paling ini, kelihatan tuh.
57:33Kalau misalnya kita klik yang ada, biasanya hamburger menu kita mungkin gede banget.
57:40Atau kita punya slider, bisa dilihat tuh interaksinya slider kita gimana, performanya.
57:49Dan bisa kita debug deh lebih cepet.
57:53- Wah, asli ini helpful banget sih. Seneng banget.
57:57- Denikian. Jadi, hanya cukup ke performance, kita sudah bisa.
58:03Tuh, ini aja udah beda nih LCP-nya.
58:06Ternyata LCP-nya diambil itu. Si header kalau di zoom.
58:15Jadi ingat, LCP itu gak masih satu elemen.
58:18LCP itu berubah-ubah setiap saat page load.
58:23Dan yang diambil adalah elemen yang dianggap paling besar.
58:30- Paling dominan. - Iya, paling dominan di screen size tersebut.
58:35Dan user kita kan screen size-nya bisa banyak ya.
58:38Jadi, gak mesti LCP itu adalah image, gak mesti LCP itu adalah video.
58:44Tapi bisa jadi juga text yang paling dominan, atau bisa memang elemen lain, bisa jadi itu video,
58:54bisa jadi itu embed, bisa jadi itu juga image.
58:58- Kalau LCP-nya iklan, berarti placeholder kotak abu-abu dulu aja aman gak sih?
59:05Atau dia nunggu sampai iklankan, biasanya eksternal kan, eksternal strip-nya ke load gitu?
59:11- Enggak, dia akan menunggu sampai sebenarnya dokumen ini sih, dokumen complete sebenarnya.
59:22Dia dokumen complete setelah selesai, mana elemen yang selesai di random,
59:30dia paling cepat di awal, yang paling besar.
59:32- Ini caranya nge-screenshot ya, berarti screenshot itu dianggap selesai kalau si event ID itu the fire ya.
59:41- Betul. Dan dia kan ini kan, kayak 60 refresh per second kan sebelahnya.
59:47- Iya, 60 fps. Nah, cuma kan dianggap selesai dan dia bisa ngitung mana yang dianggap LCP kan pasti ada timing-nya kan.
59:59- Berarti berdasarkan dimensi, bukan ukuran besar-kecilnya.
1:00:04- Itu kayaknya misterius deh algoritmanya.
1:00:07Karena pernah ngulik itu kan ukuran, ukuran in the sense of, ukuran paling besar pun belum tentu dianggap sebagai LCP.
1:00:19Bukan misterius, malah teks blok yang dianggap, nggak tahu, jadi heuristik dianggap paling dominan, larges itu bukan larges,
1:00:30literally larges, cuma mungkin ada faktor tambahan kali ya.
1:00:35Ya nggak sih, coba mungkin.
1:00:37- Nggak sih, sebenarnya dia cuma memberitungkan.
1:00:39- Larges.
1:00:40- Ya, berdasarkan elemen yang dianggap paling mencolok di mata sih sebenarnya.
1:00:50- Iya, mencolok kan berarti bukan necessarily width sama height.
1:00:54Karena dulu pernah berusaha ngakalin kayak gitu, jadi kayak intinya ada banner yang
1:00:59akal-akalan montir berargumen, ini pindahin ke atas aja karena bakal bisa pasti jadi LCP, ternyata nggak bisa. Dalam hidup tidak ada yang pasti, LCP juga nggak pasti.
1:01:11Walaupun secara lebar dan panjangnya, width height-nya itu literally larges, cuma nggak dianggap LCP.
1:01:19- Begitulah update nanti, jadi masih dalam, masih dev ya, masih belum masuk stable, akan masih terus dikembangkan lagi detail-detail ini.
1:01:39Dan kalau kalian mau mencoba, coba pakai Chrome dev, Chrome yang versi dev, kalian sudah bisa bermain-main dengan ini.
1:01:50Gue paling suka bisa dapat field data itu sih, bisa dapat field data desain mobile nih, kelihatan tuh mobile-nya berapa.
1:02:00- Ada tab yang di-deprecated kan yang berhubungan dengan performance?
1:02:19- Ada, tuh nanti ini si performance inside bakal deprecated. Performance inside panel is deprecated and will be removed in 2024, bye-bye.
1:02:33Gue paling suka pakai ini buat nge-debug CLS, iya.
1:02:39- Terus penggantinya gimana?
1:02:43- Gue nggak tahu nasinya gimana, tahu sih sebenarnya, cuma gue nggak tahu itu boleh diserah apa nggak.
1:02:53- Oh, berarti ada sesuatu ya. Gak apa-apa, detail-nya kan, detail-nya nggak perlu, tapi maksudnya kedepannya bakal ada replacement-nya.
1:03:02- Bakal ada replacement-nya, tapi somewhere di mana belum bisa katakan.
1:03:06Karena informasi yang saya terima pun masih sebatas pembicaraan, bukan sebuah yang tertulis juga, jadi bisa jadi berubah daripada salah ngomong.
1:03:19- Oke, oke.
1:03:25- Gitu aja. Silahkan coba kalau ada nanya-nanya atau bisa feed tag ke saya, ke Twitter juga bisa.
1:03:35- Terus ini yang menarik, itu sih kayak UI-nya ramah user-friendly, DX-nya kayak gampang dicerna aja sih, kayak tampilannya.
1:03:49Terus yang tadi yang deteksi lontas itu loh, beneran walaupun mungkin di performance panel atau di mana, somewhere else bisa.
1:03:57- Benarnya di recording bisa, kalau kita mau recording, di record, semua interaksi itu bisa melihat berapa banyak memori yang kepakai saat ngerender.
1:04:08Misalnya punya hamburger menu tuh, berapa waktu yang dipakai untuk membuat dia keluar waktu itu juga bisa dihitung.
1:04:22Terus kemudian slider, audio, semua yang berat-berat itu lah.
1:04:30Yang paling, ingat nggak yang pernah gue sampaikan, yang akordion, yang resep masakannya itu loh, ingat nggak?
1:04:41Yang akordion, sorry, itu tab dan ada carousel. Carousel tapi ada tab-nya bisa banyak juga, itu bisa di...
1:04:52Itu salah satu proyek yang saya bantuin untuk update performance-nya, dan good newsnya carousel yang kita bangun cukup bagus INP-nya, jadi tidak merusak.
1:05:08Yang rusak justru yang lain. - Gimana?
1:05:15- Banyak elemen, carouselnya kan elemennya nggak cuma carousel sih.
1:05:22- Oke, kita bahas apa lagi ya? Apa kita fes? Sudah ada?
1:05:31- Sudah. Atau belum? - Ada beberapa ide, cuma belum matang sepenuhnya.
1:05:42View transition sih sebenarnya pengen banget, karena dulu tuh 2 tahun yang lalu udah bahas view transition yang level 1.
1:05:50Dan kayak emang deep dive lah, terus sekarang pengen bahas yang level 2. Cuma...
1:05:56- Gak tau ya? - Yang disampaikan Adam Arjel kemarin aja.
1:06:01- Loh, kalau yang kemarin disampaikan... - Yang MTA.
1:06:05- Hah? Iya. - Yang MTA.
1:06:08- Multi-phase application. - Yang di workshop.
1:06:10- Yang di workshop. - Kalau yang di workshop kan mix semua fitur, maksudnya berbagai fitur UI yang baru kan.
1:06:19- Iya, maksudnya cara dia menerangkan saat workshop itu aja sudah bisa jadi satu sesi yang kamu sendiri, Kak.
1:06:26- Itu mau workshop. - Hah?
1:06:29- Itu mau workshop jadinya. - Tapi kan sebenarnya kita workshop juga, kita nggak ngikutin.
1:06:35- Menengelkan aja. - Iya, tapi kan berarti apa?
1:06:39Mindsetnya itu presented sebagai workshop kan. Kan itu nggak deep dive sama sekali, tapi overview kayak ada fitur ini bisa bikin A.
1:06:48Kan sebetulnya dia kayak before-after kan. Kalau kita perhatikan kayak before-after, ada before-nya kan, apa?
1:06:55Dia yang di-presentasikan yang by default, before. Dengan fitur UI ini, after jadi begini in a practical way.
1:07:03Tapi itu seru juga sih. Cuma jadi nggak bisa deep dive ke masing-masing teknologinya.
1:07:09Tapi malah jadi nambah ide ini, nambah bingung. Kalau view transition level 2 sempat kepikiran, ya itu yang multi-page app.
1:07:18Maksudnya itu apa, cara kerjanya gimana, itu salah satu ide. Terus yang barusan dibilang event, ya nambah ide baru lagi, kebanyakan ide nggak bikin-bikin.
1:07:29- Ngomong-ngomong, bakal isi di Defece mana? Defece itu mulai dari bulan November ya? - Iya, November, December.
1:07:40- Awal December. - Awal December kayaknya vakum dulu, demi pilkada.
1:07:46- Kenapa salah? - Gitu ya.
1:07:49- Akhir November. - Akhir November.
1:07:52- Akhir November. - Akhir November.
1:07:53- Perfect dan lain-lain. - Iya.
1:07:57- Jadi buat teman-teman yang di kotanya ada GDG, itu nanti di akhir tahun November, December itu biasanya ada Defece.
1:08:09- Itu sudah confirm Bogor dan Surabaya. - Sama, sama Kayfan.
1:08:17- Sama ya. Saya baru Surabaya yang confirm. - Maksudnya ngumpulin wetwork lagi ya?
1:08:27- Iya. Belum, belum kesampaian. Surabaya sudah confirm, Medan saya kirim proposal, tapi belum dapat jawaban.
1:08:52- Ada lagi? - Belum. Nanti lu mikir judul dulu, abis itu baru apply-apply.
1:09:00Sekarang pakai session nice lebih oke ya, maksudnya lebih bisa kita apply dengan judul dan kita bisa men-submit lebih dari satu judul juga ya, biar organisernya yang pilih, yang di sesuai sama target audiensi.
1:09:17- Nah, saya punya pertanyaan nih buat teman-teman. Apakah teman-teman yang nonton Ayo Extended, Defece, atau Meetup, Meetup yang lain, apakah teman-teman mulai genu dengan topik AI?
1:09:35Ini dalam artian kita bahasnya web. Terus kita kemarin kayak kemarin saya sama Eka di Depok bahasnya tentang AI, dan kayaknya hampir semua topik juga tentang AI.
1:09:49Genu nggak sih dengan topik AI atau masih excited? Kita pengen tahu juga nih, kira-kira kalau masih senangnya kita bawa AI lagi.
1:10:02Maksudnya takutnya pada AI melulu gitu ya.
1:10:08- Ya dan relevan atau nggak, maksudnya kayak komunitas, kan poinnya bikin acara off air itu adalah kan biar ketemu langsung, ketemu tuh selain ketemu face-to-face fisik juga ketemu dalam hal materi yang dibawain kan.
1:10:24Materi apa yang emang relevan dan emang dipingginin sama komunitas lokal. Jadi ya kalau misalnya emang pada tertarik banget oleh AI, berarti itu masih relevan.
1:10:38Walaupun kadang gue sendiri yang "Aduh AI lagi". Cuma itu kalau relevan dengan komunitas ya berarti kan itu worth it-nya.
1:10:45Cuma kalau banyak di komunitas juga bosan, dan gue juga bosan, ya udah bahas yang lain.
1:10:52- Maksudnya kita juga berasa nggak enak gitu, kayak apa ya, secara naluri aja ngomong kayak kemarin waktu di Depok kan, saya kan setelah Eka kan,
1:11:06"Ini kita akan bahas AI lagi, masih pada semangat kan?" Jadi kayak apa ya, kayaknya asumsi saya itu temen-temen itu boring gitu, asumsinya ya.
1:11:18- Takutnya memang benar. - Atau mungkin belum tentu boring, tapi apa ya, AI fatigue.
1:11:24Nah kayak di daftar topik kita yang belum kesampaian ini AI fatigue, mungkin bukan bosan tapi kayak agak capek aja, maksudnya intres awalnya.
1:11:32- Capek mengikuti perkembangannya. - Tapi sekarang digempur semua, mungkin semua acara yang didatengin, semua konten kreator yang diikutin,
1:11:40mungkin ya pada ngeposting AI mulu. - Masalahnya kan bukan cuma satu pihak aja kan, acara yang dibikin oleh Google,
1:11:52banyak kan bahas AI, ke AWS juga bahas AI, mungkin ke Azure juga bahas AI, Microsoft, jadi kayaknya hampir semua gitu.
1:12:05Jadi kita sebagai Nara Sungur juga bingung gitu. Kira-kira kita, jangan-jangan temen-temen tertarik,
1:12:19tapi topik yang dibahas itu terlalu advanced menurut temen-temen, jadi nggak ngerti gitu, nggak dapet konsepnya misalnya.
1:12:26- Atau jangan-jangan terlalu besik. - Atau jangan-jangan terlalu besik juga. - Mungkin buat AI yang lebih advanced.
1:12:36- Bikin robot gitu ya? - Iya. - Karena ini juga kan, AI ini berdampak ke semua bidang kan, semua lini.
1:12:56Kalau kita ngomongin I/O Extended kemarin, dari mulai Android, Cloud, Firebase, sampai web, itu semua ada AI-nya, ada produk AI-nya gitu kan.
1:13:09Jadi ketika dibahas semuanya tentang AI, walaupun produknya berbeda-beda, tapi tetap AI juga semuanya.
1:13:18Apalagi kalau konferensi atau meetup-nya itu kan satu jalur. Jadi ada orang yang nonton dari Android, Cloud, sampai web gitu kan.
1:13:31Dan bahasnya AI semua, walaupun berbeda-beda. Mungkin itu juga yang membuat jadi fatigue tadi.
1:13:40- Walaupun berbeda-beda. - Tetap AI juga. - Tetap AI juga.
1:13:48- Binyikatunggal AI. - Binyikatunggal AI.
1:13:54- Binyikatunggal AI. - Binyikatunggal AI. Kalau di Bandung kemarin itu, ini, menyala AI-ku.
1:14:10Ini binyikatunggal AI. Kacau. - Sudah beres kar, sudah beres kar. - Sorry, sudah kelar, sorry. - Sudah kelar ya? - Indang, indang.
1:14:27- Berarti bagus dong. Kan ini di Indonesia ya? - Iya, udah bagus lah. Kita nahan Australia yang, ya kan peringkatnya di atas kita berapa?
1:14:38- Berapa? - Rata-rata dunia ya. - Untung punya keeper jago. - Emang keeper siapa?
1:14:47- Itu main di Amerika lah pokoknya. Ya pokoknya keeper naturalisasi gitu. Kita bukan Australia. Paes, namanya Paes.
1:14:59- Dia ada daerah Indonesia atau full naturalisasi? - Nggak, nggak bisa kan. Orang Belanda, tapi ada keturunan kayak kakeknya,
1:15:10atau siapa kakek Buyutnya, keturunan Indonesia. Kaga aturan FIFA itu harus ada hubungan formal yang bisa dibuktiin.
1:15:22Ya bisa ngaku-ngaku doang, "Buyut saya dulu, orang mana nggak boleh?" - Bisa lah. Di Indonesia kan bisa.
1:15:30- Lakin menurut saya ke FIFA. - Maksudnya bisa menerbitkan surat yang membuktikan bahwa...
1:15:38- Nenek Moyangnya dia ada yang dari Indonesia. - Nenek Moyangnya adalah orang Indonesia.
1:15:46- Beneka Tunggal AI. - Bagus tuh buat acara ngobrolin AI, judulnya Beneka Tunggal AI.
1:16:00Padahal namanya Eka ya, jadi diganti AI ya. - Oh iya, Eka namanya AI aja, AI FYI.
1:16:16- Udah ada kali, udah diambil. Oh iya, terakhir.
1:16:25- Kan inget nggak yang beberapa waktu yang lalu kita sempet bahas ada proposal JavaScript mau ditambahkan Type,
1:16:37yang diskusinya panjang dan lebar ya. Dan beberapa waktu yang lalu tuh Node.js ngeluarin fitur eksperimental bisa menjalankan TypeScript.
1:16:53- Cuma itu kan wow banget, ternyata cuma apa TypeScripting ya?
1:16:58- Iya, jadi semua yang sintep-sintep TypeScript itu dihapus, JavaScriptnya dijalani.
1:17:06Tapi lumayan membantu. Karena sebelumnya kan kita harus pakai TSX.
1:17:16Atau biasanya kalau males, kita yang install Deno atau Boon. Sekarang udah bisa.
1:17:23- Bisa melahap file TS sementara-mentara? - Iya, tanpa bantuan compiler.
1:17:32- Cuma itu, ya kalau itu sih mesti membantu dan bagus ya. Cuma pas liat kayak headline-headline atau judul itu semi-clickbait juga sih.
1:17:42Kayak persepsi asumsi kita, meng-clickbait diri sendiri gitu, "Apa? Buat support TypeScript?"
1:17:49Padahal maksudnya TypeScripting biar file TS bisa dijalani.
1:17:53- Sebenarnya dihapus. Tapi sebenarnya itu kan langkah awal ya.
1:17:58Tapi kalau sebenarnya kayak Deno atau Boon, mereka memang bisa menjalankan TypeScript ya?
1:18:03- Iya. - Ya kan dia nge-compile. Berarti kan misalnya ada yang error gitu, ya kan dia bisa ngerti.
1:18:12Kalau yang CNode ini kayaknya nggak secanggih itu deh. Cuma punya nge-jalani file TS di stripping.
1:18:17- Dari awal dia parsernya udah TypeScript. JavaScript adalah TypeScript yang valid kan.
1:18:26Jadi mau njalani JavaScript bisa. Jadi dia parsernya itu parser TypeScript, bukan parser JavaScript.
1:18:34- Make sense, make sense. Oke, nggak pernah kita bahas ya. Cuma gua lupa.
1:18:44Kita udah episode keberapa sih sebenarnya? - Kita hampir 100, episode ke 97.
1:18:54- 98 sebetulnya. - Iya, 98.
1:18:57- Lu bikin ulang 100 nggak sih kita? - Ulang abad.
1:19:03- Ulang tahunnya 50 berapa? 54 ya? - Iya.
1:19:08- Berarti 108. - 108.
1:19:11- 108. - Yaudah tunggu ulang tahun aja lah.
1:19:14- Tunggu ulang tahun aja. - Tunggu ulang tahun untuk?
1:19:17- Bikin Etsy ulang tahun. - Kita waktu itu ngapain sih makan kue kan ya?
1:19:25- Iya. - Bukan makan kue, bawa kue.
1:19:30- Bawa kue masing-masing. - Nih, Cloud atau JDPT?
1:19:35- Cloud. - JDPT.
1:19:39- Cloud. - Untuk apa?
1:19:47- Code. - Ininya pakai apa?
1:19:51- Z. - Oh, Z.
1:19:54- Z, I love Z. - Gue pakai Cursor.
1:19:59- Cukup banget. - Gue pakai Cursor masukin key OpenAI.
1:20:06- Tapi bisa yang lain juga kan? - Bisa-bisa.
1:20:10- Bak Yu yang udah coba itu Eka, saya belum. Saya baru coba Z kemarin.
1:20:18- Gue coba gara-gara dikasih tau mas Risa. - Iya, tapi saya belum coba.
1:20:22- Sama dikasih tau satu teman lagi sih. Kayaknya kalau punya,
1:20:26gue tuh biasa kalau udah denger rekomendasi dari beberapa orang yang nggak satu circle,
1:20:33ya udah, berarti itu worth it buat dicoba nagih pakai Cursor sampai sekarang.
1:20:38- Free saya sudah habis. - Udah 2 bulanan.
1:20:41- Bayar? - Kalau nggak mau bayar, masukin key service apapun.
1:20:46Kalau mau akal-akalan montir, bikin aja baru terus.
1:20:50Kemarin saya sempat pakai 3 alamat email gitu lho. Lama-lama capekan.
1:20:56Lama-lama capek masukin key Jemenai sama OpenAI.
1:21:01Bisa. Jadi kita nggak usah bayar Cursor-nya, cuma pakai model dari provider yang kita punya.
1:21:08- Bebas ya. AI ini mau pakai apa? Bebas yang penting ada API-key-nya.
1:21:14- Dan Jemenai kan ada free tier-nya. OpenAI juga.
1:21:20OpenAI yang baru, yang mini itu kan relatif murah ya.
1:21:24Sebulan itu dibawah 5 dolar. - Iya. Nah tadi pertanyaannya yang rekomendasiin Cursor saya,
1:21:34tapi saya nggak pakai. Rasanya enggan ya?
1:21:37Install instance Visual Studio Code lagi, satu lagi udah ada padahal,
1:21:42kan udah keinstall Visual Studio Code. Terus harus install Cursor yang adalah elektron lagi.
1:21:48- Kan didalamnya code, tetap ya? - Iya. Dan semua plugin, semua tim apapun itu
1:21:57ke-carry over. Kayak sales Cursor ini. - Beda ya sama EDX ya?
1:22:04- Oh beda.
1:22:07- Apakah ada yang pernah coba Nix Package manager? Saya lagi pakai.
1:22:15- Bagus.
1:22:20- Bagus, bagus. Dia kan konsepnya fungsional.
1:22:27Jadi kalau misalkan ada perubahan di package lokal kita, itu ada kayak istorinya ada package JSON-nya.
1:22:38Jadi kalau misalkan kita pindah komputer, kita tinggal gitload,
1:22:42terus tinggal jalanin kayak npm install, itu udah kembali lagi semua.
1:22:47Nggak perlunya install manual satu-satu.
1:22:52CCN atau material UI?
1:22:56- CCN lah. - Gak dua-duanya.
1:22:59- DC UI. - Ya kan atau?
1:23:02- CCN. Belum pernah coba sih CCN. Cuman konsepnya menarik ya?
1:23:07- Enak kok. Seru. Kayak sales CCN.
1:23:11Soalnya itu cuma install aja dan itu polanya menarik sih.
1:23:18Malah justru polanya, misalnya kita punya desain sistem internal nih
1:23:23buat kantor lah atau kerjaan atau apa, itu polanya bisa banget dicontek.
1:23:28Jadi waktu kita jalanin npx, menginstall suatu komponen,
1:23:32dia cuma nge-opi dari satu direktori tertentu, di-copy deh ke lokal kita.
1:23:37Mau diapain aja bebas. Mau dipakai SS atau dimodif apapun
1:23:43sesuai kebutuhan kita, ya udah jadi kode kita.
1:23:46- CCN UI beda lagi ya? - Kayaknya itu. Maksudnya itu deh.
1:23:53- CCN UI itu ya sama. - Itu nama orang ya, maksudnya nama usernya.
1:24:01CCN UI itu berarti UI komponen ya. Jadi ketika kita install,
1:24:09itu semua komponen-komponen, reusable komponennya
1:24:14pindah ke lokal project kita kan ya? - Iya.
1:24:18- Terus abis itu kita bisa modifikasi langsung dari situ ya.
1:24:22Berbeda dengan misalkan kita pakai Bootstrap atau DCUI lah.
1:24:28- Atau Tailwind UI gitu ya? - Iya.
1:24:31- Tailwind UI kan sebenarnya sederhananya copy class name sebenarnya.
1:24:38- Iya.
1:24:42- V0 pakai, ya V0 pakai CCN.
1:24:51- Feature baru CLI-nya. CLI-nya CCN.
1:24:59- Ini karena bolanya sudah habis, tiba-tiba langsung pada tanya ya?
1:25:04- Iya. - Sebenarnya pada nonton bola.
1:25:07- Benar juga ya. Berarti irisan anak web sama penonton bola itu
1:25:14cukup beririsan ya? - Iya kayaknya kalau tim nas main,
1:25:18walaupun biasanya nggak nonton bola, jadi nonton.
1:25:21- Nasionalisme. Bineka tuh nggak laya AI.
1:25:26- Nanti kita masukin ke grup GDI. Bineka tuh nggak laya AI.
1:25:38- Nanti dipake loh sama Mas Danang.
1:25:48- Iya sih, keren sih.
1:25:51- Itu tolong nanti di-cut videonya terus kirim ke Mas Danang.
1:25:57- Di-clip ya, di-clip. Windows atau Linux ya?
1:26:02- Windows. - Windows.
1:26:04Di dalam Windows bisa jalanin Linux, tapi di Linux nggak bisa jalanin Windows.
1:26:09- Dual boot. - Dual boot.
1:26:13- Oh itu trik tukang laptop dulu tuh di Jogja 20 tahun yang lalu.
1:26:19Windows kan udah ada license ya kan kalau jual laptop yang ada Windows-nya.
1:26:23Jadi dia jualannya laptop yang isi Linux.
1:26:27Tapi kalau mau, ya dibalik layar, kalau mau bisa di-installin Windows.
1:26:33- Kan tinggal kerja ya ambil CD-nya?
1:26:37- Ya tapi kan CD-nya, wah, kalau ini bisa. Maksudnya mungkin sama tukang laptopnya
1:26:44ya di-installin dari CD bajakan dari apa dulu namanya.
1:26:49- Itu didoknya benar-benar ya?
1:26:51- Oh iya, serba bajakan. - CD bajakan.
1:26:54- Bisa dibajakkan. - Bisa disewa.
1:26:57- Bisa. - Bisa.
1:26:59- Buka katalog itu, tinggal buka katalog, tinggal pilih, "Gua mau yang ini."
1:27:07- Penulisnya di kertas burung segini, terus pensil-nya pensil lekel banget yang kayak nggak pernah diraut,
1:27:13itu pun masih ditaliin biar nggak dicolong sama masalah.
1:27:17- Berarti ada yang pernah dicolong ya? - Ya, presumably.
1:27:21- Mungkin lebih tepatnya pakai sana pakai sini, itu saat ada yang mau dipakai jelas itu udah nggak ada lagi.
1:27:27- Oh iya, kececar. - Kececar kemana-mana.
1:27:31- Gimana, gimana? Cukup malam ini? - Udah cukup.
1:27:40- Dari pada bahasa indonesia sama CD bajak.
1:27:43- Oke, kalau gitu terima kasih banyak buat semuanya.
1:27:49Kita ketemu lagi minggu depan dengan publik yang berbeda.
1:27:54Selamat malam, selamat istirahat. Bye bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
10 Des 2024
Ngobrolin Pengalaman Frontend @imrenagi - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
30 Jul 2024
Ngobrolin Big-O - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
17 Des 2024
Ngobrolin Desktop App - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...