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