Bedah Situs meutia.net
Ringkasan Episode
Bantu KoreksiEpisode ini membahas bedah situs blog personal milik Mbak Mutia, seorang dosen di IAIN Langsa, yang dikembangkan oleh Mas Yudi Ananda. NaraBlog menonjol dengan desain minimalis yang konsisten, penggunaan bahasa Indonesia yang baku, dan konsep Digital Garden. Website dibangun menggunakan teknologi modern seperti Remix, Sanity CMS, Tailwind CSS, dan Cloudflare Workers. Diskusi mencakup berbagai aspek teknis termasuk implementasi Speculation Rules API untuk performa navigasi, penggunaan Web Share API, carbon-conscious analytics dengan Cabin, serta berbagai catatan accessibility yang perlu ditingkatkan.
Poin-poin Utama
- •NaraBlog adalah blog personal akademisi dengan desain minimalis, tipografi yang rapi, dan konsistensi penggunaan bahasa Indonesia baku di seluruh situs
- •Website mengimplementasikan konsep Digital Garden - pendekatan di mana konten bisa dipublikasikan dan diperbarui secara berkala tanpa harus sempurna
- •Tech stack yang digunakan: Remix sebagai full-stack framework, Sanity sebagai headless CMS, Tailwind CSS untuk styling, dan Cloudflare Workers untuk deployment
- •Implementasi Speculation Rules API untuk prefetch halaman secara konservatif - hanya mengambil dokumen yang akan dikunjungi untuk menghemat bandwidth
- •Situs menggunakan Web Share API native browser untuk fitur share, dark/light mode dengan view transitions, dan carbon-conscious analytics melalui Partytown dan Cabin
- •Catatan accessibility: beberapa tombol dan link belum memiliki aria-label yang memadai untuk screen reader, serta browser caching yang belum dikonfigurasi dengan optimal
- •Struktur monorepo yang rapi dengan Sanity Studio untuk CMS, web app, dan CDN image proxy menggunakan Hono dengan dokumentasi OpenAPI via Scalar
[musik]
Dapatkan hanya di Dominesia
[musik]
[musik]
Kenapa laginya gitu?
Kan lagi Superman, lagi Superman
Lagi timanya Superman banget kan
Udah pada nonton belum?
Selamat malam semuanya
Belum, belum ada di Netflix
Oh, nungguin Netflix?
Nggak mungkin
Nggak mungkin ya
Kalau DC Universe itu dia
Di mana ya?
DC Universe, bukan Netflix kan?
Di Amerika
Bukan, maksudnya
Dia, ini barengan apa?
Disney, atau apa gitu?
Ya, Disney kali ya
Eh, Disney kan itu
Enggak lah, Disney itu Marvel
Warner Brothers
Nggak tahu
CPI
RGTNWNC
Di bioskop lah, di bioskop ya
Di bioskop kesayangan kita
Ok
Lihat transkrip lengkap (2496 segmen lagi)
Selamat malam semuanya
Semoga sehat-sehat
Semoga lancar-lancar semuanya
Sudah Juli nih
Sudah Juli
Juli juga udah pertengahan Juli
Eh, jadinya udah pertengahan Juli nih Mas Riza
Udah ada kabar belum?
Sudah
Yes, no
Positif, tidak
Jadi, ya
Selamat, senang-senang
Padahal mau live, disana
Seru-seru
Kan banyak teman-teman GDI baru juga
Jadi, ya
Ya, emang mau live
Gimana caranya live, disana
Tinggal pasang kamera live, kok
Gimana sih
Iya sih, tapi kemarin juga kita nggak live kan
Yang aku bergajin kemarin
Iya
By the way
Kita ngomong begini kayak
Cuma bisa tau insight doang, nggak ada yang tau
Iya, insight juga
Jadi, mungkin buat konteks ya
Buat konteks biar nggak bingung ya
Jadi, bulan Agustus
Teman-teman Google Developer Expert
Itu diundang ke
Google I/O Connect
Shanghai, China
Tahun lalu, Beijing
Tahun ini, Shanghai
Tapi, sayangnya
Saya nggak bisa ikutan
Jadi, yang ikut disini
Ivan Maika aja
Mudah-mudahan nanti bisa
Saya live disini, kalian disana
Ceritain
Gimana-gimana
Selasa malam
Ya, nggak usah live juga sih
Tahun lalu juga nggak live
Selasa malam itu
Kayaknya kita udah ada cara ya
Iya
Acaranya rabu, pangs
Pasti ada acara lah
Kalau udah sampe sana pasti ada acara
Entah itu acara pribadi, bareng-bareng
Atau acara
Pasminya kan
Sebelum acara itu ada
Makan bersama gitu
Dinar kan
Sampai ini
Sampai goyang India dia
Goyang India
Waktu di Bangalore
Waktu di Bangalore
Nggak ikut, sorry ya
Nggak ikut juga
Pasti Beijing kita
Kita ngobrol sama
Oh kita pisah-pisah lagi
Pasti Beijing
Kita ketemu sama
Nara
Sumber yang ngomongin
Elixir
Sangat tidak menyangka ternyata dia ada disitu
Sebagai GDG
Dari Hong Kong
Itu
Asli kaget banget
Kita selama ini nggak pernah lihat
GDG dari Hong Kong
GDG dari Hong Kong
Jadi kita tuh
Kan
Kita nggak pernah ngeliat langsung
Cuma ngeliat foto atau ngeliat videonya
Kayak gini kan
Sampai disana
Mukanya familiar
Saya ngeliatin dia, dia ngeliatin saya
Bener nggak ya
Bener nggak ya
Udah lama ya udahlah biarin
Tiba-tiba dia keluar
Pas mau ngambil makan
Pas dia ngadep belakang
Saya panggil aja namanya
Kalau salah kan dia nggak ngeliat kan
Ternyata bener
Ternyata bener
Ya ampun
Mas Alan
Ternyata orangnya ngocol ya
Ini malah internal gitu
Nggak bahas situs yang
Pemilik situsnya
Kan santai aja
Belum-belum
Karena sebelum kita bahas tentang
Budah situs malam hari ini
Jadi
Ya
Bisa langsung ajak ke
Discussion nya ngobrolin web
Di GitHub
Nanti disabit aja, mau bikin
Tread sendiri boleh
Atau mau nebeng juga nggak apa-apa
Bisa disabit kesitu
Tapi sebelum kita bedah situs
Yang malam ini kayaknya
Cukup keren gitu ya
Banyak yang bisa kita pelajari
Kita mau info dulu
Bahwa episode ini
Adalah episode ke sembilan
Hasil kolobasi kita dengan Domensia
Jadi kalau temen-temen
Mau pakai
Hosting, VPS
Beli domain
Jangan lupa belinya di Domensia
Dan kita
Bisa dapet
Diskon ya 50%
Sekali aja memang
One time
Untuk Cloud VPS
Yang turbo
Untuk Cloud VPS
Yang tipenya turbo
Jadi sekali lagi
Kita kolaborasi dengan
Domensia dan
Jangan lupa pakai kode promo
Ngobrolin
VPSDN
Ngobrolin
VPSDN
Jadi sekali lagi terima kasih buat Domensia
Yang udah mendukung ngobrolin web ya
Oke
Baiklah
Sekarang kita masuk ke sesi utama
Yang adalah bedah situs
Dan situs yang akan kita bedah
Malam hari ini adalah
Miliknya Mas
Mas Yudi
Oke
Mas Yudi Ananda ya
Namanya ya
Ini
Disubmit
10 Juni
Cuman pada saat itu dia submit
Hanya
URL nya aja
Saya minta dong
Kira-kira ada kode yang bisa diintik ga ya
Penasaran juga kan teknologinya apa
Terus gimana
Cara projectnya
Strukturnya gimana dan lain-lain kan
Ternyata
Menurut beliau ini
Websitenya belum rampung
Dan masih private
Tapi saya dapat invite
Jadi
Temen-temen bisa
Liat sedikit lah ya
Walaupun ga bisa liat langsung
Tapi bisa liat dari layar aja ya
Di layar kaca
Websitenya ini
Simple
Tapi
Cakep ya
Ini
Mas
Mas Yudinya ada ga ya
Bisa kita tanya-tanya kali ya
Kalau Mas Yudi ada ya
Lebih seru lagi ya
Kita invite tanya kali ya
Bisa
Kalau dia punya
Bisa apa namanya
Kasih DM
Tapi saya udah kabarin sih
Tanggal berapa mau kita bahas
Mudah-mudahan bisa hadir gitu
Kalau ga bisa ya sudah lah ya
Mungkin bisa nonton cuplikan nya
Nanti reply nya
Nah ini kita agak
Sedikit menebak-nebak
Kali ya
Ini adalah
DaraBlog
Wah hadir, mantap nih
Kita tanya-tanya ya
Ini sebenernya blog tentang apa sih
Langsung aja tanya ya
Ini adalah kumpulan blog dari
Tenaga Pendidik
Dari Dosen
Ini bukan Mas Yudi
Ini klien berarti ya
Semoga sudah dapet ijen juga
Ini personal
Apa sih
Pertama gue liat tuh
Ini on brand banget
Ini bukan
Sejauh yang bisa dilihat ya
Beliau itu kayak
Akademisi gitu, jadi isinya ada
Jurnal-jurnal, terus ya
Ada atau yang lebih personal ya
Kayak blog gitu
Tapi maksudnya kayak website nya
Secara branding mau wakili banget sih
Kayak yang ya dari konten
Kan ini jadi kayak sepaket dari
Isinya ya, terus kayak bahasa
Indonesia yang baik dan benar gitu loh
As expected kan dari
Bahasa Indonesia nya
Yang benar-benar baku gitu ya
Ivan Lanin banget lah, bukan
Ivan Zepcom ya, Ivan Lanin banget
Jadi kayak Nara Blog itu
Ya pokoknya
Sebisa mungkin
Gue notice sampai bawah
Sebisa mungkin kalau
Istilah bahasa Indonesia yang dipakai adalah
Bahasa Indonesia nya dan itu
Konsisten banget sepanjang seluruh situs
Ini bahkan bukan tentang web
Tapi mau saya apa, dari
Si web
UI nya juga
Satu
Masuklah sama brandingnya
Kayak warnanya
Simple, gak masalah
Simple, cuma dua warnanya sih
Itu kan sebenarnya opacity nya
Lain-lain tuh, maksudnya apa
Kayak ketebalan
Terasa kan, terus
Apa, tadi kan
Hal pertama yang gue notice, hal kedua
Tipografi nya, font nya bagus banget
Kayak pemilihan fontnya
Sama kayak
Kayak gak ada yang palus di mata gitu gak sih
Kayak semua line height nya, segala macem
Rapi
Rapi ya
Yang pertama saya liat
Ininya apa namanya
Artikel terakhirnya dia tentang
WordPress
Pada situsnya bukan
Bukan pakai WordPress
Bisa jadi di belakangnya WordPress
Satu orang ya
Satu orang namanya Mbak Mkiya
Itu personal saya
Personal blog
Personal blog ya
Block nya bukan punya Mas Yudi
Mas Yudi bikin aja
Tapi bisa kepikiran sampai
Desain nya
Walaupun simple, sederhana
Tapi enak
Dibaca, emang bener-bener buat blog ya
Apakah ini template
Yang sudah jadi, terus di jahit
Atau desain nya juga
Bikin
Ada desainer atau gimana
Nah itu yang bisa jawab
Kalau saya sih
Yang saya
Highlight adalah ini
Karena saya kan asalnya dari AC
Loks Mawwe
Langsa itu kira-kira
Langsa itu kira-kira
Jakarta Bandung lah
Jakarta Bandung
Kalau kita mau ke Medan kita langsa dulu
Tengah-tengahnya langsa
Jakarta
AC sama Medan
Kalau lewat darat lewat langsa
Ini berarti
Mbak Mutia ini berarti dosen
Di Institut Agama Islam Negeri
Langsa ya
Tapi tadi
Baca blognya sekilas
Ada cerita-cerita pas beliau kuliah
Di luar negeri, kuliah di Sudan atau dimana
Oh ini ya
Ini kayaknya udah pakai
Apa namanya
Transition ya
Bukan
Enggak
Oke
Nah hal kedua yang menarik
Yang saya
Notice adalah
Adanya kebun digital
Digital Garden
Digital Garden
Sudah ada ya, sudah ada yang pakai
Ternyata ya, sebenernya ada sih
Saya baru
Ya banyak lah
Iya banyak sih, cuman
Di Indonesia kan enggak terlalu familiar ya
Dengan istilah digital garden ya
Kalau webdev itu pasti familiar banget
Karena dulu gue ingat pertama
Ya maksudnya familiar
Entah bikin dan ditekuni atau enggak
Beda kasus ya, tapi kalau familiar
Ya karena dulu itu naik banget
Pas zaman Gatsby, jadi kayak Gatsby itu kan
Yang nggak relatif
Maksudnya ada trend
Digital Garden, dengan jam stack
Padahal sebenarnya ya
Karena penasaran goal stacknya aja
Habis itu gardennya sendiri
Gak keurus, jadi hutan ya
Itu beda kasus, tapi ini
Baru pertama sih lihat konsep
Digital Garden dipakai oleh
Orang yang bukan dari circle
JS webdev
Webdev ya
Oke
Wah
Eka bisa kasih ini enggak
TLDR
Kebun digital itu apa?
Bedanya sama blog apa?
Atau artikel?
Sebetulnya sih, kalau blog itu kan
Post personal ya
Itu bukan istilah teknis ya
Jadi kayak lebih ke
Trend aja, maksudnya
Nggak ada definisi
Strictnya
Digital Garden itu denger
Apa ya
Kita nulis apapun, kita
Mempublish apapun
Jadi maksudnya kalau blog mungkin
Selama ini dianggap
Strict, harus beri pak artikel
Yang rapih, nah kalau
Digital Garden itu lebih
Nggak strict, jadi kayak misalnya nih
Contoh yang paling sering
In progress, maksudnya masih tulisan
Masih draft
Ya mungkin bukan draft ya
Cuma maksudnya belum perfect nih
Cuma maksudnya kita
Udah siap mempublish itu, kita punya pengalaman
Atau kita punya pemikiran tentang sesuatu
Entah itu berkaitan dengan
Development atau nggak
Atau mungkin personal, pokoknya kita punya ide
Yang siap dipublish, ya udah
Dipublish aja, perkara itu
Besok-besok itu masih perlu
Direvisi lagi, ya nggak masalah
Jadi kayak mindset itu lebih kayak
Mindset sih namanya kayak
Kebun lah
Kebun kita pribadi, kan kita mau
Cabai, tomat, apa-apa terserah
Cuma kalau di dalam
Konteks ini sih ini udah mateng
Semua ya, ini kayak
Artikel yang proper semua, cuma maksudnya
Kalau dulu movement
Digital Garden itu
Kita men-share apapun yang
Kita rasa
Bagus untuk dipublikasikan
Dan diketahui banyak orang
I see, oh jadi
Salah satu itunya ada
Ini ya, updated appnya ada ya
Jadi artikelnya
Dipublish dulu, terus nanti dilengkapi lagi
Oh mungkin ada tambahan lagi, ada update
Misalkan versi react yang lebih baru
Harusnya begini, gitu ya, jadi
Nggak perlu bikin artikel baru, tapi dilengkapi
Dari situ aja, gitu ya
Nah ini di private chat, ada
Artikel yang bagus, ini salah satu
Yang punya-nya, ada yang tengok-tengok
Halo
Eh, halo ibu
Nah itu
Di chat tuh ada tentang
Sejarahnya Digital Garden sih
Ini dulu kerja di Gatsby, ini kayak
Orang brandingnya Gatsby
Nah, ya
Apa ya, sejak
Ada sosmed, kan orang terlalu
Kebiasa, jadi ya udah
Kalau nge-update sesuatu tuh di sosmed
Di platformnya, berarti di platformnya
Orang lain kan, di pihak ketiga
Dan jadi terbiasa nggak bisa
Nulis, ya banyak orang jadi nggak bisa
Nulis kalimat lengkap juga, karena sosmed itu
Ya kayak, ya gitu
Nulisnya pendek-pendek, padahal dulu
Maksud saya sebelum ada, sebelum
Kekunci di
Nilai ya, kalau
Pake sosmed kan, itu kayak kekunci di
Gedung atau di fasilitasnya
Orang lain kan, pihak ketiga, kalau suatu
Hari itu
Apalah kubar atau berbayar
Atau berubah kebijakan
Itu konten kita kan di
Jadi kayak ke
Ikut hilang sama
Apa, platform sosmed itu
Sedangkan kalau misalnya
Ini tuh kayak, lebih baik, yuk kita balik ke
Ini yang kita nanam-nanam, kita berkreasi
Kita nuangin
Kita mengekspresikan diri
Di kebum kita sendiri
Nah, jadi maksudnya personal side
Dijadiin platform yang
Yang kayak gitu, maksudnya kita update
Tentang apapun
Oke, filosofinya itu ya
Berarti ya
Oke, oke
Mantap
Kita kembali ke sini
Yang punya-nya hadir
Selamat datang
By the way, ada
Ininya loh, kalau paling, scroll paling
Bawah, sudah bisa
Light mode juga, light mode
Itu paling bawah light mode, itu
Kanan bawah, kanan bawah
Ini auto
Kalau yang paling gede itu auto, ngikutin
Apa device kita
Ya, ini auto
Bisa light
Lengkap ya, dan ada
Karbon juga ya
Ya, sustainability
Karbon juga dibahas
Wah, ini lengkap sekali
Kita mau bahas apa, bingung ya
Ya
Sabar, soal warna dulu
Soal warna itu tadinya, kan kadang orang
Katanya view transition ini
Oh, view transition
Katanya view transition, cuman
Standard
Ya, memang overview transition
Kan fade
Remix sudah support ya
Jadi itu, apa
Si light mode, kan
Orang tuh banyak gak suka light mode, karena dia
Ngapain ya, silo bikin sakit mata ya
Kalau putih yang
FFF kan emang
Jereng banget kan, nah kalau ini kan bukan
FFF nih, gak tau apa, cuma maksudnya
Kayak lebih soft kan
Gray
Ya, maksudnya gray-nya apa, ya
Nanti kan, ini pemilihan warnanya tasteful
Apapun yang gak bikin sakit mata
Iya, bukan putih-putih amat
E6, E7, E7
E6, E7, E7
Kayak itu, kalau beli buku
Di toko buku mahal kan
Apa, kertasnya gak putih kan
Kalau belinya bajakan di tempat-tempat kopi
Itu putih sampai es
Nah, kalau dibeli yang nopper
Electronic ink ya, electronic ink
Itu soft sepi ya
E-ink, E-ink, disini kan ada ya
Nah, itulah ada background color
Mana, gak bisa di itu ya
Bass light
Pake OK LTH
Nah, itu kan bawaannya
Tailwind
Ini pake tailwind ya
Pake tailwind
Ini pake tailwind ya
Makanya begitu liat, langsung familiar
Eh, tailwind, asik
Bisa ngeliat ya
Dari class name-nya
Dari apa
Class name-nya sama
Penggunaan CSS
Variable-nya, property-nya
Nah, ini sekaligus
Kalau orang yang lagi perang
Tailwind lawan Vanilla CSS
Suka tuduhannya, oh kalau tailwind tuh
Mirip-mirip semua, jadi kayak gitu-gitu aja
Nah, ini kan terbukti gak
Sebenernya itu perkara ayo mampu
Desain UI, atau higher
Desainer UI yang kompeten
Atau nggak, perkara-nya itu sih
Tailwind kan cuma tulisnya aja
Kalau pake daisy UI
Pake tailwind UI, nah itu mungkin
Mirip-mirip, tapi kalau misalkan kita
Iya, kalau kita
Pake tailwind-nya aja mah
Ya, ini kan berarti
Didesain dengan
Spesifik kan, maksudnya kayak apa
Modenya, temanya, style, branding si website-nya
Gimana disesuaikan, ya itu mah
Gak ada hubungannya sama pake tailwind
Pake apa sih
Hmm, terus ini
Pake party town lagi ya
Canggih sekali
Terus
Apa namanya, metanya juga
Lengkap ya, untuk twitter
Share ada, ogimage
Ada, preload
Font-nya
RSS-nya
Pastinya
Terus, ada
Manifest JSON
Dan
Tadi ada
Apa lagi ya, oh, ada
Ada ceritanya juga disini, tuh
Tentang bagaimana
Website ini
Dipuat
Oke
Meneng, menenggainya
Power
Ini sabut versi
Tenaga, dari kata tenaga
Tenaga, tenaga
Mikir dulu
Loading-nya lama
Biar kamu lihat kata-kata ini
Pertama kali impressed
Karena beneran bisa konsisten banget
Di seluruh website-nya
Itu tone kayak penulisannya
Gaya penulisannya itu beneran konsisten
Dan ya gitu loh, pake
Kalau masih bisa dicari
Pandangan bahasa Indonesia, pake bahasa Indonesia
Pilosofi wabi-sabi ini apa ya?
Coba tanya ya
Desainnya desain sendiri?
Ini desain sendiri?
Siapa?
Mas Yudi atau Mbak Mutia
Mungkin bisa jawab
Ini desainnya sendiri ya?
Oh, teknologi-nya juga ada ya
Pake React Router
Oh, berarti ini yang remix ya?
Ya, ya, ya
Ini juga udah ada ya
Ini remix jadi React Router
Kontennya pakai sanity ya?
Yang web framework
Iya, yang tidak react
Yang bukan react
Bukan react tapi pre-react
Sama aja
Beda-beda, pre-react sama react
Beda-beda titis
Cuma mungkin kalau buat clickbait
Cuma ternyata setelah dibaca kontennya
Kecewa
Oke
Jadi deploy
di Cloudflare
Oke
Berarti Cloudflare yang ini ya?
Cloudflare yang
Edge ya?
Gak usah pakai Edge juga gak apa-apa
Pake worker
Cloudflare worker ya
Typography-nya
Pake yang namanya Newsreader
Newsreader
Oh, bahasa Indonesia
Font itu adalah font tidak pakai T ya?
Baiklah
Hari ini saya belajar
Ini kita banyak belajar bahasa Indonesia
Apa?
Kata-kata teknologi berbahasa Indonesia ya?
Estetik
Font, lucu juga ya
Font
Ekologi
Font-nya gak pakai T mas Riza
Font
Keren, keren
Belakangnya itu gak boleh terasa T-nya
Font
Font
Selama ini juga gak pakai T
Gimana?
Wow
Bisa sendiri
Luar biasa
Saya suka
Full stack
Cloudflare worker
Server render kan?
Remix ya?
Server render
Bisa menembak ke API-nya si
Sanity
Ya
API
REST API
Sdk
Sama aja sih ya
Nice, nice
Seru sekali
Di private chat
Kalau mau liat meta tag-nya
Itu image-nya juga bagus
Apa? Open graph image-nya
Open graph image-nya bagus ya
Benar-benar SEO
Optimized ya
Website nih
Ada yang ketinggalan sih
Sebenarnya
Skima, gak pakai skima
Skima
Skima.org
Pakai json.ld-nya
Mungkin bisa ditambahkan nanti
Skima.org
Ini ya?
Yang autor blablabla
Bisa autornya
Contohnya mana?
Contohnya kalau misalnya mau
Pakai
Mungkin pakai
Yang lebih tepatnya bukan yang punya
Si Google
Itu skima.org
Webdev
Rich data
Skima webdev
Atau Google ya
Structure data
Nah, structure data
Ini
Ya
Linknya
Di situ saking bagusnya
Kita berburu apa yang gak ada
Ya cuma
Buat info aja
Tapi sebetulnya gak sih pengen tahu juga
Kalau untuk artikel biasa
Blog post atau artikel yang general
Kayak gini
Seberapa recommended sih
Structure data
Sebenarnya
Gak
Kalau artikel
Gue gak inget kenapanya
Cuma yang jelas setelah diulik
No need to bother
Maksudnya waktu yang diluangkan
Untuk ngerjain, mending dipakai
Buat ngerjain yang lain kecuali
Buat hal spesifik, kayak event
Event itu masih dipakai buat
Tampilan smartcard
Yang ada lokasi fisiknya
Atau entah kenapa
Recept, kalau resep katanya itu masih
Recipe, literal resep masakan
Di luar itu
Gue gak inget penjelasannya
Masakan sampe sekarang
Masih carut marut sih sebenarnya
Ada namanya, plug in namanya
Google blue pot tapi kayaknya gak
Jalan, tetapi
Masakan masih carut marut
Tapi event, organization
Artikel
Blog, news lah
Lebih tepatnya news sih
Itu sebaiknya
Bagus pakai risk data
Structure data ini
Sebenarnya memudahkan
Data parsing
Sebenarnya untuk si search engine
Dan menampilkan hasil
Kontennya
Di halaman pencarian
Konsepnya JSON
Ini dia
LD + JSON
Siapa tau mau menampilkan
Lebih spesifik mungkin ada image
Ada reviewnya
Kalau misalnya dipakai ada
Comment, kan kita gak ada komentar ya
Di blognya gak ada fitur
Comment, seandainya
Nanti suatu saat ada comment
Bisa diatur, kayak itu yang
Kayak
Mungkin sudah dibaca
Berapa kali, terus kemudian
Artikel itu
Berapa lama
5 minit read
Berapa lama dibaca gitu ya
Estimasi untuk
Dibaca berapa lama
Bisa kelihatan hasilnya di google
Mesti di google ya
Di bing juga bisa
Mesin pencari
Yang lain pun bisa
Kalau seandainya fitur itu ada ya
Sebaiknya ditambahkan
JSON
Ya, gak ada juga gak apa-apa sih sebenarnya
Ini optional untuk memberikan
Experience lebih baik
Jika hasil
Content kita muncul
Di mesin pencari
Nah ini kalau contohnya
Dulu gue sampe bookmark link ini sih
Coba buka deh, SD Polisis
Scroll ke bawah, ada contoh-contohnya
Contoh
Jenis-jenis data spesifik
Jenis konten spesifik
Yang sangat benefit dari
Apa? JSON
LDC structure data ini
Ya tampilannya gak harus gitu
Cuma mau saya contoh-contohnya
Oke, sebentar
Jadi biasanya
Kalau ada rating, ada komentar
Ada
Ya kayak metadata gitu lah
Scroll terus
Nah itu contoh-contohnya
Jadi maksudnya bisa muncul
Rating, cook time,
Kaloris yang kayak tadi Ipan bilang
Reading time ya
Untuk kalau yang
Di tengah itu kan resep
Satu jenis makanan yang sama tapi kayak
Di berbagai website
Nah itu kayak ada smart
Smart cardsnya gitu
Menarik
Ini ya contohnya ya
Dari hasil research
Apa? Ya tim gue dulu
Kalau artikel, beneran
Literally regular article
Ya kurang, maksudnya ya
Sepanjang
Si data-data lain kayak metadata
Yang basic sama kayak
Struktur semantiknya bener sih
Kayak gak terlalu ngaruh dulu ya
Gak tahu kalau sekarang
Cuma kalau ada metadata yang kayak
Rating-rating
Rating, komentar, apa
Reply kayak forum tuh
Kayak misalnya Kura kan suka misalnya
Di atas ada pertanyaannya
Di metadata-nya
Kayak di subheadingnya itu
Ada pertanyaan, terus kan ada kayak
Card-card article di bawahnya
Yang bisa di slide tuh kayak top answersnya
Jawaban-jawaban yang top
Nah itu tuh
Itu kepake kalau buat relasi-relasi
Yang kayak gitu
Ya, tapi kalau misalnya mau diimplement
Implement, gak ada ruginya
Mungkin ada
Kalau tuh, kalau artikel biasa
Pengen implement ya gak apa-apa juga sih
Maksudnya gak ada, gak ada kerugiannya
Sama satu lagi
Yang apa?
Dari yang saya lihat
Apa namanya?
Dari sisi accessibility
Untuk link
Banyakan tautannya
Belum ada pakai
Area label
Coba diklik dari
Dari ini
Maksudnya saya bisa lihat dari sisi accessibility
Di top-top accessibility
Nah itu konsol, apa
Di elements aja ada icon-nya kan tuh
Kanan atas yang ada gambar orang begini
Ini
Itu buat lihat ininya
Jadi kalau kita lihat link
Contoh link tuh, link tentang saya
Link tentang saya
Main link tentang saya
Nah
Open
Nah itu masih, hanya
Static text-nya ada, cukup, which is bagus
Dan cukup, namun
Ada beberapa device
Yang buat
Apa namanya?
Alat bantu, screen reader
Screen reader
Yang lebih mengutamakan area
Area label dan area
Atribute, nah ini bisa dilihat
Dari sisi, coba di
Buka dari
Dot-dot-dot itu kalau gak salah
Kok Masteryism punya gak ada accessibility ya
More tools
Ada gak?
Atau
Show
Atau gak ada sih
Harusnya ada accessibility
Ini? Gak ada
Salah satunya ada, coba lihat di bawah
Property
Nah
Nah
Itu semua area kan
Masih
Blank ya
Memang dari, belum diimplement
Bagusnya diimplement
Opsional, tapi bagusnya diimplement
Karena semuanya
Saya udah coba tadi pake keyboard
Keyboard
Navigation, which is work
Keyboard aman, udah ada focus
Ada focusnya
Cuma nambahin area label aja ya
Itu kayak alternate ya
Bukan, alternate kan
Beda lagi
Beda ya
Image sih yang pake
Yeah, maksudnya
Area label
Untuk link
Itu adalah alternate
Untuk image
Semua elemen yang punya
Action
Semua elemen yang punya action
Oke
Lanjut
Lanjut
Lanjut
Tapi kalau voice
Tergantung ya
Screen reader behavior itu
Agak ribet juga sih
Kalau voice over udah aman
Masa yang kayak
Tentang saya itu
Asal di dalamnya ada text
Itu kayak otomatis di
Kayak di voice ke
Si clickable elemennya
Cuma itu cuma voice over ya
Gatau mungkin kalau NVIDIA
Atau NVIDIA
Atau screen reader lain
Ya mungkin belum bisa
Masa itu alasannya
Ivan saranin semua
Pake area label
Jadi maksudnya behavior masing-masing
Screen reader juga bisa bervariasi
Oke
Lalu untuk
Ini gimana
Saya gak menemukan
Artikel yang ada image-nya
Kenapa memang sengaja
Tanpa ada image ya
Gak pake image
Ini artikelnya
Ini artikel terbaru
Artikel sorotan
Kita cek di kebun ya
Image-nya cuma foto
Foto autornya aja ya
Memang sengaja kali ya
Saya pake ini juga sudah bagus sih
Hasil render dari
Reader
Kalau Safari kan bisa reader ya
Bisa
Maksudnya hanya kontennya aja yang diambil
Reader mode
Itu juga sudah bagus
Karena struktur semantiknya
Betul itu otomatis
Jadi bagus
Saya biasanya
Mengecek semantik dari
HTML structure itu
Langsung pake si Safari reader
Kalau misalnya Safari reader-nya
Acak-acakan
Berarti ngacok intinya
HTML structure-nya
Jadi banyak CSS yang dipaksakan
Akal-akalan montir
Layout-nya dipaksakan
Nah itu kelihatan
Atau yang harusnya bukan heading
Jadi jelek kalau di
Reader mode
Sebelum ada reading multi
Safari kan juga kalau kita pake
Aplikasi Read It Later
Kayak pocket, insta paper
Cara kerjanya sama
Itu tuh kalau misalnya
Iklan atau pake
H2 atau apa itu jadi
Gede kacau jadi gak enak dibaca
Kalau aplikasi semacam itu
Katanya belum selesai
Kata Mas Yudi ini belum selesai
Sebenernya ada image-nya tapi belum
Selesai emigrasinya dari CMS sebelumnya
CMS sebelumnya apa?
WordPress ya
WordPress
Satu yang menarik disini
Dari tadi cuma 2
Kritik ya
Kalau kritik yang
Minor menurut saya
Sedangkan yang satu yang saya mau
Apresiasi dia sudah pakai
Disini speculation
Rule API
Oh iya
Sudah ada speculation rule API
Jadi bisa ke network
Langsung ke network
Reload
Reload aja
Reload aja
Paling atas
Maksudnya scroll paling atas ininya di
Network, tuh ada speculation
Iya, diklik aja
Lihat response-nya
Lihat response dari
Speculation-nya
Nah disini
Saya sukanya
Pakainya konservatif
Jadi gak
Nggak ngabis-ngabisin
Bandwidth-nya
Nggak ngabis-ngabisin bandwidth-nya
Si user
Walaupun semuanya
Semua link ya artinya href match
Semua link yang menuju dokumen
Atau halaman
Baru akan di
Pre-fetch lebih tepatnya
Pre-fetch, karena ada 2 kan
Di speculation itu ada pre-fetch, ada pre-load
Nah di pre-fetch
Di pre-fetch itu artinya cuma digambil
Tetapi gak dirender di dalam memory
Kalau pre-fetch itu
Ngambil
HTML aja terus disimpen
Saat dibutuhkan
Langsung di
Transition ke situ
Nah baru dirender
Dan
Href match-nya itu semua ya
Jadi
Halaman ini
Tidak ada
Yang namanya
Transaction
Saya paham dan boleh lah
Tapi kalau ada transaction
Contohnya
E-commerce
Kalau semuanya kita pre-load
Akan jadi aneh ya
Ngerti ya maksud saya ya
Kalau e-commerce semua by button
Di pre-load kan masalah tuh
Jadinya
Atau login ya
Karena harus hati-hati juga
Dengan pre-fetch dan pre-load
Kalau
Misalnya
Apa namanya
Yang di pre-fetch atau
Di pre-load itu sensitif atau
Resource consuming
Akhirnya kan mendidot server sendiri
Ceritanya
Apalagi kalau pakai cloud service
Unlimited
Iya
Bagus ya
Untuk penggunaan
Speculation rule API-nya
Oke itu
Apa namanya
Apresiasi ya, tapi pertanyaan saya
Satu mas Yudi, jawab jujur ya
Ini bawaan dari Remix
Atau mas Yudi yang implement
sendiri
Karena saya belum pernah pakai Remix soalnya
Apa jangan-jangan by default sudah ada
Speculation rules yang sudah diimplementasikan
oleh Remix
Kalau ngecek dari
Docs-nya, speculation rules
Gak ada deh implement sendiri
Tapi kalau view transition
Emang sudah ada dari Remix
Ada linknya, ada docs-nya
Maksudnya ada link element
Ada link component yang
Di provide oleh
Itu yang error apa ya
Coba lihat, kok ada
Di console ada error dua
Kalau mas Yudinya
Implement sendiri, wah
Itu berarti apresiasinya dua kali lipat
Soalnya ini kan jarang ya
Masih jarang saya memperhatikan bahwa
Ada yang menggunakan speculation rule
Kenapa? Ini apa?
Error
Blocker ya
Enggak-enggak
Buat respons, jadi bukan ad blocker
Empat-empat
Dari saya nya
Dari klien
Service worker
Berarti ini kode
Kode
Kode development masuk nih
Di load nih
Itu kan
Dibugger-nya
Untuk sandbox kan
Iya
Oke, ini
Wah, ada implementasi dari
Cloudflare, tapi Remix pun ada
Kalau mau konfigurasi sendiri
Oh
Mantap
Buat yang belum familiar
Speculation rules API
Itu apa? Itu adalah
Kurang lebih sederhananya
Adalah
Si
Browser
Menebak ya
Menebak mana yang
Speculative
Kurang lebih sederhananya
Dengan algoritma yang
Terserah browser
Menentukan
Macam-macam
Kalau yang paling symbol
Mouseover, kalau misalnya user yang
Punya kursor
Punya kursor itu ada mouse
Atau semacam pointer device
Kalau udah mulai hover
Suatu link kan berarti bisa disimplekan
Akan mengklik link tersebut
Kalau pakai touch screen
Touch, tapi belum
Event
Up
Kalau udah touch screen, berarti bakal
Navigasi ke situ
Browser juga bisa secara smart
Mutusin kalau koneksinya lambat
Enggak
Melakukan
Reload apapun dulu
Tapi sejauh ini baru Chrome only
Baru
Chrome only ya
Oke
Ya
Oh
CMS sebelumnya pakai Highgrap
Apa itu
Highgrap.com ini
Headless CMS
Headless CMS
Headless CMS
Graph QL
Graph QL
Berarti ya
Oke
Oke
Memindah ke
Sanity
Kenapa pindah ke Sanity?
Karena pakai
Graph QL
Emang Sanity nggak ya?
Sanity pakai apa?
Ada STK-nya
Ada
Saya juga dulu migrasi bloknya
Dari pakai Gatsby
Pindah ke Eleventy
Gara-gara
Ada Graph QL yang males
Lagi
Oke
Lanjut
Nggak ada yang bisa dikomentari
Sangking bagusnya
Sangking bagusnya ya
Kalau performance sudah oke ya?
Performance oke
Namun ini baru
Ini baru di launching ya
Maksudnya belum ada
Saya coba dari page
Apa? Belum ada data
Belum ada data
Krux-nya
Oh
Jadi nggak tahu ini ya
Kalau dari
Komennya Mas Yudi sih
Katanya belum selesai
Mungkin masih private
Mungkin belum di gembar-gemborkan kali ya
Belum di propaganda
Jadi nggak ada ininya
Gak ada yang bisa dilihat dari
Chrome UX Report-nya
UX Report-nya ya
Terus nggak ada
Gak pakai ini ya
Kalau misalnya pengen tahu
Saya lihat nggak ada tracking buat
Analytics atau
Analytics ya
Parti tahun apa?
Parti tahun apa?
Jadi maksudnya kalau mau lihat stats
Hanya bisa dari Cloudflare aja berarti ya
Benar juga
Gak pakai kabin tuh
Withkabin.com
Kabin itu kan buat ini
Buat nge-catch ulang
Analytics ya
Analytics withkabin.com
Tapi maksudnya apa
Analytics-nya di offload
Lewat Parti Town
Keliatannya ya
Iya pakai
Emang benar
Kalau lihat dari networknya
Baru kelihatan Mas Riza
Pakekabin
Withkabin.com
Maksudnya
Pakek worker ya
Di pink-nya
Nah ini juga
Pemilihan analyticsnya pun
Carbon conscious nih
Ramah lingkungan
Ya ramah lingkungan
CDPR dan CCPA
Compliant by design
Baru kali ini melihat ada
Blog yang ada ininya
Jadi menarik sekali ya
Kalau lihat blog yang ada itu
Website yang ada apa?
Carbon Statement-nya udah sering
Tapi kalau website Indonesia
Apa lagi website Indonesia
Kalau website luar Indonesia udah
Sering sih
Bagusin web pemerintahan
Juga dong
Ya berarti
Instansi pemerintahan kudeng
Haya Rumas UDI nih
Ivan siap
Di itu sebagai
Tenaga ahli-tenaga ahli
Untuk membaguskan
website pemerintahan
Ada lagi yang mau dikomentarin nih
Itu share sectionnya
Coba buka artikel apapun deh
Buka post apapun
Oke
Share
Share-nya dimana?
Belum share stream by the way
Oh ya sorry
Ini ya? Berarti
Webshare ini?
Nah udah pake webshare API
Itu kan udah pake itu-nya macOS kan
Iya ini macOS
Ya mantap-mantap
Jadi kalau dibuka dari Chrome
Android, ya yang muncul
Menunya Android asik kan
Tapi ada kekurangannya juga
Ini accessibility-nya belum
Coba klik gamar
Gamar orang
Elements tuh, tift tools kanan atas
Nah tuh button-nya
Belum ada
Itu bagikan
Ada text-nya
Kosong semua
Kalau screen reader kayak gak tau itu
icon apaan
SVG doang
Jadi kalau itu wajib harus dipakai
Dikasih area label
Kalau yang tadi, kalau link yang di atas
Yang tentang saya itu
Screen reader kayak voice over
Udah bisa meng-voiced
Kayak apa
Dia nyari ke dalam, ada text-nya
Di dalam link itu, ada text-nya
Apun nested element
Children-nya, dicari
"Oh ada tentang saya" itu
At least voice over ya, screen reader
Voice over bawaan macOS
Itu dia udah bisa ngebaca
Link itu, jadi kalau
User yang misalnya Tuna Netra
Atau kurang penglihatan
Pake screen reader
Ngetap, mennavigasi ke link itu
Udah bisa dibaca
Link tentang saya
Kalau kayak button ini kan beda kasus ya
Ini gak ada text-nya sama sekali
Di dalam button itu
Cuma ada icon SVG
Yang gak ada bunyinya gak bisa
Gak bisa diakses
Ya kurang aksesibel ya
Wajib dikasih area label
Area label ya
Tadi juga
Sama Ivan juga disarankan
Untuk area label bagian
Bagaimana tadi ya
Oh iya link ya, bagian link
Yang Eka
Sampaikan adalah yang di bagian button
Terutama yang di share button ini ya
Ya apapun sih link atau button yang
Yang ada action user-nya
Ya, jadi apa
Prinsip pemahamanya adalah
Kan user yang pake screen reader tuh
Nafigasinya misalnya entah
Pake alat khusus atau pake keyboard
Ya pas, pas elemen itu
Kena fokus entah link atau button
Ya kan harus ada bunyinya, harus ada
Yang di announced, nah kalau misalnya
Apa, gak ada
Harus ada yang di aged gitu ya
Child load-nya
Gak ada text-nya sama sekali
Itu isinya SVG dan gak ada
Area label-nya, jadi gak bisa baca
Apa-apa
Gak bisa dibacakan oleh screen reader
Oke
Analytics itu gratis
Cabin itu freemium
Freemium
Ada yang gratisnya
Tapi terbatas
Oh CO2-nya dari cabin ya
Ya
Maybe, ya
Mas, ada yang aneh dengan
Network-nya, coba buka
Saya baru buka
Iya
Apa tuh
Itu disabled cache-nya matiin
Ya
Di
Trottling-nya
Ya terserah
Oke
Coba JS-nya aja deh
JS, buka JS apapun lah
Iya
Ini kan status 304 ya
Gak, berarti kan gak ada node-body fight ya
Cache
Tapi gak nge-cache, coba liat ininya
Settingan ini turun sedikit
Di respond header
Cache
Cache control-nya itu max
Age-nya 0
Dia memang hit ke
CDN, tapi gak
Nge-cache
Di browser
Jadi kalo misalnya
Cache di cloud player-nya tuh kayak punya itu
Apa ya
Kayak punya CDN gitu apa
Ya CDN-nya hit
CDN cache-nya hit
Tapi begitu kita load
Berarti setiap kali kita load
JS ini selalu didownload
Jadi kalo misalnya
Total file-nya coba di
Coba buka ini deh
Sebagai comparison
Web.dev
Web.dev deh
Kok gak bisa sih
Buka apa
Ya buka website-nya mas Riza
Yang mana, atau website-nya Eka
Katanya kemarin itu
Eka
Gak ada
Emang gak ada
Ini ada CSS-nya gak nih
Ada
Ada, coba buka network
Coba diklik netwoknya
Eh klik ininya
Ya klik aja, ya CSS-nya boleh
Klik header-nya apa
Response header
Response header, response
Itu kan ada cache control
Yang CSS seharian tuh
Iya
Sekarang
Ditutup
Ditutup ininya
Ini kan
Size-nya keliatan tuh
Coba di reload
Di reload
Iya
Tuh, this cache kan
Gampil dari cache
Jadi gak
Gak nge-request ke network lagi
Ngerti gak maksudnya
Karena udah ada di browser kan
Iya, sedangkan yang
Si mewtia.net tadi
Itu
Dia memberikan cache header-nya itu
Cuma 0
Jadi dia gak pernah nge-cache di browser
Oh dia nge-cache-nya
Di sisi server-nya
Di CDN
Tapi sisi browser-nya enggak
Jadi artinya setiap kali
Orang nge-reload
Selama ini coba kita klik dari
Ngatiin semua
Terus ini di-all
Di-allkan aja
Itu di-all, iya
Di-reload
Berarti setiap
Kali orang
Pindah halaman
Atau nge-reload
Menghabiskan 1,1 MB
Data
Ini ya? Iya
Oh
Jadi
Kalau ini kan dia auto
Dia kan gak reload kan
Tapi setiap kali misalnya di-reload
1,1, reload, 1,1
Reload, 1,1
Jadi kalau misalnya ada yang nge-reload
Pindah halaman gak
Pakai data, pakai data-nya udah mau habis
Kalau dia nge-reload 100 kali
Habis 100 MB
Oh berarti kurangnya itu adalah
Casing di sisi browser ya?
Iya
Di remix gak ada?
Saya minum dulu ya
Gelase itu udah nyampe belum?
Udah
Terima kasih
Berarti
Browser cache
Browser cache
Browser cache perlu ditambahkan ya?
Jadi penasaran sama remix
Apakah remix tidak ada browser cache?
Harusnya ada dong
Kayaknya harus manual ya
Gue barusan nge-check
Ini gue sendiri, pakai astro
Astro dan
Fersail
Emang gak ada juga body hold
Kalau mau kayak gitu tadi
Harus manual nambahin
Block saya pakai eleventy udah otomatis
Gak ngomong ngapain tuh
Tidak melakukan apa-apa
Itu dari Netlify
Oh dari Netlify
Netlify atau Fersail
Kalau mau liat
Dari response header
Itu kan ada cache-nya
Sebenernya
Yang atur begituan adalah
Gini nih
Ceritanya nih, kalau misalnya kita
Backend yang atur begituan engine X
Atau Apache
Bukan urusan
Cloudflare, bukan urusan
Cuma
Kalau anak front-end
Atau yang full stack yang sudah menggunakan
Tadi yang Fersail
Atau sudah di handle semua
Sudah di handle sama
Platform
Apapun itu lah Fersail, Netlify
Cloudflare Worker
Cuma perlu di notice aja
Kayaknya yang di Cloudflare Worker
Yang satu ini
Saya gak ngerti kenapa
Dibikin begitu
Oh mungkin ada setting di Cloudflare
Workernya kali ya, di konfigurasinya kali ya
Mungkin
Belum pernah pakai soalnya
Cuma
Kalau dari, saya kan pakenya Cloudflare
Doang, bukan gak pake Cloudflare Worker
Kalau si Cloudflare-nya itu
Menghormati
Response header
Yang dari back-end
Kalau saya pakai back-end-nya engine X
Yang sudah ngirim, ini file JS-nya
Perlu di cache
Satu hari
Atau satu tahun
Ya dia gak ngerubah header itu
Akan diteruskan aja
Oke, berarti dari sisi platformnya ya
Harus dicek ya
Lanjut
Apa lagi
Apa lagi
Mau liat
Struktur kodenya
Atau Repo-nya
Boleh ya
Repo-nya adalah monorepo
Monorepo
Emang
Emang ada apa aja
Kalau sampai multi-repo
Saya baru komplain
Kalau sampai multi-repo
Kalau monorepo
Studio itu bawa unsum
Maksudnya struktur yang recommended dari unsumnya
Ada CMS, jadi itu UI CMS
Ada web
Pastinya
Type generator
CF
Terus ada, oh ini buat
Studio
Studio itu berarti dari
Sanity
GraphQL Studio
Ini Sanity juga
Mungkin
Ini kan cuma 2
Ini 3 ya itu
Ada CDN
Jadi web
Web app, Sanity Studio
Sama 3 CDN
CDN ya
Transaction, emang ada emailnya ya
Emang ada
Contact form
Ada fitur emailnya
Gak tau
Coba bagian bawah
Itu di footer
Di footer ada
Halo dong, itu isinya apa
Iya isinya contact form
Oh ada
Emailnya pakai apa
Notemailer bukan
Tendensi, react email
Untuk email template
Oh iya email template
Isinya
Sebentar, ini buat
Template ya
Buat contact formnya
Ada image
Eh bukan ya, ini contact mail
Gak tau deh
Gak ada image soalnya
Enggak deh, ini kayak email template
Email template nya yang mau dikirimkan ya
Iya
Cuma pakai apa ini ya
Pakai
Maksudnya dikirimkan kemana
Dikirimkan ke orangnya
Oh ini transcepional emailnya ya
Transcepional emailnya ya
Index
Emails contact email
Emails
Contact email
Gak ada di sini
Ini UI
Ini email template nya
Transcepional email
Terparti, terpartinya apa
Maksudnya gak ada sih, gak kelihatan
Ini kok ada note modules
Ini emang bisa kelihatan
Enggak kan, ini cuma
Simling doang kan
Simling ya
Itu UI nya
Gak di situ deh
Di web nya malah
Note modules, oh
Gak ke itu ya, note modules ini yang di root doang
Yang di dalamnya ada note modules ya
Tepatnya sengaja
Termasukkan
Termasukkan ya
Studio ada gak note modules
Gak ada, itu doang berarti
INV aman ya
INV aman ya
Trauma
Di web
Controller nya disini semua
Disource
Ya kan service nya di hit dari sini kan
Benar
Rangular
VT
Tenstack react form
Sanity client
React email tadi ada
Postmark
Postmark, oh ketemu akhirnya
Ketemu
INV aman, bagus
Gak soalnya
Pengalaman bedah situs
Sebelumnya
Tiba-tiba ada INV
Terus kita dengan santainya
Kita buka
Karena kita belum lihat
Yang detail
Sebelumnya sebelum live
Kita buka
Jangan-jangan ada isinya
Sambil buka, taunya ada isinya
Taunya beneran
Oke
Ini
Ini rapi banget ya
Foldernya
Komponen, route scheme
Dari remix kan
Oh iya bener
Ohannya dari remix ya
Itulah enaknya framework ya
Udah diatur semuanya ya
Menarik
Ini webnya
Tadi email
Terus studio ini buat sanity
Di sanity nya apa yang perlu ditambahkan
Gak itu
Buat dashboard aja
Jadi kayak
Back office nya
Ada office nya
Saya kira kita harus masuk ke
Sanity dashboard.sanity.io
Gitu enggak ya
Kayaknya bisa gitu
Cuma yang sering
Dipromos sindi studio itu
Ini tuh pakai Rian
Dan harusnya sih gak perlu
Bisa di edit
Kayak kita kayaknya bisa bikin
Komponen apa
UI Komponen
Beri series data modelnya
Schemanya, tapi itu juga gak wajib
Saya sering lihat zot itu buat apa ya
Type
Validasi
Type validation
Zot.dev
Terus ada juga z.dev
Iya
Ketuker-tuker
Ya
Itulah ya
Maklum lah
Developer susah mencari nama ya
Zot itu musuhnya
Superman bukan sih
Iya
Bener ya
Jadi
Intinya adalah
Kita bisa
Melakukan validation
Terhadap objek, atau terhadap apapun ya
Kayak
Terus bedanya ini
Wait
Sama
Ini validation di
On the fly
Bukan on
Maksudnya
Wait
Ini
Validation saat execution ya
Bukan saat compile
Itu maksudnya
Execution bukan saat linting
Bukan kayak TS
Bukan kayak TypeScript
Bukan
Bener ya
Berarti yang studio itu
Front-end buat CMS-nya
Sama content modeling
Input validation
Rule
Zot
Apakah sudah
Ada pembahasan soal email SMTP server
Gratis bayar beserta CSS email
CSS email pernah
Tapi yang SMTP belum ya
Bener
Bukan ya Gmail bisa ya
Bisa
Sering kena
Ini aja
Bukan
Kena stop gara-gara
Login dari lokasi yang berbeda
Oho iya
Red limit
Red limit lah ya
Eh masih mau lihat
Codenya
Kalau gratis sih
Susah ya
Tapi saya bilang sih
Pakai share hosting aja
Murah sih sebenarnya
Pakai aja SMTP-nya
Udah ada emailnya ya
Iya
Ya cuma buat
Maksudnya
Ada UI yang enak
Misalnya apalah
Kalau pakai posmat itu kan enak UI-nya
Bukan
SMTP-nya kan SMTP saja
Dapat SMTP server
Mau pakai
Pakai apapun yang ngirimnya
Teserah
Mail client-nya kan teserah
Mau kode sendiri, mau PHP, mau
Apa pun
Sama aja
Iya kita cuma dapat SMTP
Server-nya aja kan
Akses ke SMTP server-nya ya
CDN, CDN ini apa?
Kayaknya
File-file ini deh
Static
Static-nya
Oh no
Wrangler itu apa ya?
Itu Cloudflare
Itu Wrangler
Itu komand CLI-nya
Cloudflare
Oh no
Pakai oh no
Ini CDN-nya bawaan
Si Wrangler ya? Oh iya bener
Oh no itu kan yang bikin
Employee-nya Cloudflare
Makanya dia sekarang lebih mengarah kesana
Betul
Ini berarti
Punya-nya si Cloudflare ya
Coba liat
Source-nya isinya apa ya?
Source-nya
Proxy image
Proxy image dari Sanity
Oh iya
Oh bukan Cloudflare ya?
Proxy bukan
Tetap di Cloudflare, tapi Proxy
Oh di Cloudflare
Biar bisa di-serve
Dari CDN-nya
Ini apa?
Citra, Citra itu image ya
Saya kira nama orang
Saya kira malah itu
Kayak untuk
Lotion
Lotion
Hah kulit
Developer kulitnya harus mulus
Yoi
Kan gak pernah kena matahari
Iya, jadi
Bagus dong
Masih perlu Lotion
HONO itu back-end
HONO itu
Web Framework ya
Kayak Express
Kayak pengganti Express
Alternatifnya Express
Tapi yang bikin sebenarnya
Adalah employee dari Cloudflare
Makanya sekarang HONO
Itu arahnya ke arah
Lebih dekat ke
Full Stack Framework untuk Cloudflare
Sekarang ya begitu jualannya
Walaupun bisa
Di deploy juga ke yang lain ya
Ada OpenAPI
OpenAPI?
Itu konfigur OpenAPI
Terusannya
Middleware buat kita
Middleware HONO
Oh iya
Middleware HONO
Importnya mana?
Kayak buat
Buat konek ke
Si
Itu nya deh
Buat konek ke
Image Server
Dokumentasi
Dokumentasinya Senetree bukan?
Bukan kayaknya deh
Bukan ya
Itu kayaknya bikin sendiri deh
Pake HONO tapi
Itu strukturnya struktur HONO
Buka lagi coba
Tadi OpenAPI
Nah akan tuh
Import Scalar
From Scalar HONO API
Reference
Scalar ini apa?
Itu kayak
Ini kayak diproses terus
Jadi hasilnya yang di generate adalah
Apa?
OpenAPI schema
Keliatannya
Ada
Scalar itu apa?
Nggak ada ya disini Scalar
Ini kayaknya
Kalau terbuat buat manggisnya adalah
Kayak HONO plugin
HONO
Dokumentasi OpenAPI untuk
Dokumentasi apa?
Ini
Webnya ada dokumentasi butuh dokumentasi gitu
Mungkin buat the back end kali
Senetree dong
Kayak swagger
Oh swagger
Berarti ada API nya ini
Web ini ada
API nya
Menyediakan REST API gitu
Buat image cdnn tadi
Image yang
Proxy tadi
Jadi itu auto generated
Halaman swagger
Apa halaman swagger nya
Halaman swagger nya otomatis
Ke generate
Proxy ini ya
Proxy image ini ya
Buka link yang
Di private chat deh
Link paling bawah di private chat
Yang Scalar.com
Scalar.com
Ini salah
Nah itu
Oh
Hasilnya ya
Jaman saya swagger itu
Standard banget
Standard banget
Ini kan estetik
Estetik ya
Tapi kan enak liatnya ya
Daripada itu langsung males
Sakit mata gitu ya
Tapi kan sebenarnya
Beda jaman mas Riza
Kalau yang swagger itu kan anak back end
Yang consume kan gak butuh cekap-cekap
Bisa dibacal cukup
Yang penting ada yang dikopas sama
Try it nya itu
Kudafal gitu
Yang dicari try it nya doang
Nah coba itu scroll aja ke bawah kan
Ada contoh-contoh kodenya tuh
Di scalar itu
Nah ini tadi
Nah
Yang intinya kan
Se-simple itu app.get
Scalar
Trus isinya
Argumen nya
QRL.2 do
Ada tim segala
Ada moon, purple, solarize
Dulu jaman nya kita setting
Setting CI
Pake Travis itu setengah mati itu
Sama tuh UI nya kayak swagger
Saya masih pake Travis
Udah bagus aja UI nya
Travis itu yang di online
Kalau kita mau deploy sendiri
Apa namanya?
Jenkins
Ya Jenkins
One Travis
UI nya mirip-mirip
Sama AOS juga mirip-mirip ya
Saya sih ada ya
Kalau bisa berhasil
Nge-configur Jenkins yang rapi
Dengan semua
Workflow nya saya
Masalut yang ketangan saya
Nggak bisa
Saya tuh capek
Nge-configur Jenkins
Iya itu
Konfigurasi nya luar biasa ya
Kalau anak jaman sekarang tuh
DX nya no, jelek
DX developer experience nya
Parah
Tapi masih hidup lho Jenkins itu
Masih banget
Masih hidup lah yang dulu memakai
Nggak mungkin semua langsung jadi dirombat
Karena once set up
Mereka nggak butuh sih ya
Gak butuh Sama GitHub Action
Gak butuh yang namanya
Travis
Kecuali ganti CTO nya ganti
Terus ganti semua
Iya itu kan yang menyebabkan
DevOps
Atau cloud engineer jadi ada kan
Karena itu install
Install Jenkins
Jadi ada kerjaan ya
DevOps masih butuh
Kalau ada DevOps, kalau nggak ada DevOps
Tengah mati kita
Terus
Coba
Lihat
Ke
Tab security itu di atas tuh
Saya pengen lihat
Tab security
Depan the bot
Belum ya
Oh itu
Vulnerability
Vulnerability alert ya
Itu di kiri
Kiri
Belum ada ya
Belum
Insights
Kayak Insights
Dah berapa lama
Baru tahu
Pulse
Nggak bisa
Nggak dapet akses
Karena ini invitation
Bukan pemilik
Terus
Coba lihat ininya
Coba lihat commit nya
Siapa tahu
Remove ENV
ENV example
Wait
Langsung saya
Komentar ini mas
Yudi Ananda
Belum verified
Belum pakai
Gpg
Gpg untuk
Github account
Dan commit nya
Belum di sign
Sign commit dong
Iya
Nanti bisa ada yang impersonate dirimu
Bahaya
Bahaya
Ini oh berarti mas Yudi
Sendiri nih bikinnya
Cia nya nyala ya
Cia nya nyala
Coba apa aja si cia nya
Cia nya
Actions
Actions
Gak ada
Itu linter check itu
Coba klik aja tadi yang angka
Ada disini
Ada disini itu
Ini kan
Cd
Continuous Deployment
300
47
Bukan Continuous Integration
Bukan Continuous Deployment
Bukan Continuous Deployment
Bukan Continuous Deployment
Bukan Continuous Deployment
Kukira ini si
Okay
Coba
Lihat struktur
Branching
Branching
Branching
Berarti
Cuma ada tiga
Iya
Terus mainnya
Mainnya belum di
Belum di lock
Belum di lock ya
Delid
Emang bisa
Ya gak tau
Coba aja
Insight gak dapet
Tapi bisa dilid
Jangan
Emang kalo roll
Invite user ke repons
Gak bisa itu ya sebagai admin
Atau sebagai apa? Sebagai viewer doang
Ada bisa
Bisa
Tips tulis pesan
Commit
Ada
Oke kita profile
Pakai
ILLM
Sebelumnya udah kasih notes ke conventional
Commit
Ini nya
ConventionalCommits.org
Silahkan
And
ConventionalCommits
Commits.org
Ini ya
Nah itu paling atas
Kadang mikir prefix nya apa
Sama apa
Saya tiga kasih AI sih
Suruh baca ini
Suruh baca ya
Oke
Fix
Feature
Ini bugs ya
Feature
Breaking Change
Terus ada lagi
Chor
Chor itu apa
Berisi-bersi
Berisi-bersi
CI
Continuous Integration
Commentation, Style
Refactor, Performance, dan Test
Saya lebih
Ini kan cuma prefix
Cuma prefix aja
Saya lebih penting kayak
Description comment itu sih
Lebih penting
Apa sih isinya
Silahkan dibaca
Silahkan dibaca ya
Kok
Tapi sedih sih emoji nya
Makasih
Selama ini saya salah
Karena develop sendiri
Enakan pakai rebase daripada Mars
Ya itu boleh
Bebas
Bisa aja
Saya juga sedang bicara ini ke tim saya
Kalau misalnya mau
Di
Pull request
Kalau yang ke
Default Brands
Apakah kita mau rebase
Atau kita mau squash
Squash comment nya jadi
Satu comment jadi bersih
Saya biasanya squash
Saya lebih suka squash sebenarnya
Jadi bersih banget
Default Brands nya
Tapi sedang
Kalau mau lihat individual change nya
Bisa dibuka lagi
Ke pull request nya kan
Dan sudah ada
History, comic yang sebelumnya ada
Jadi ga usah ngapain motor-motorin
Default Brands
Main Brands
Untuk dipahami
Dan
Dipikirkan
Unit test
Oh ada unit test
OCDN router tadi ya
Apa yang ditest
Puroxy test
Tapi ga jalan ya ini ya
Test nya di CI ya
Belum pakai CI
Kan belum pakai CI katanya
Jalan di
Lokal aja ya
Tiga minggu yang lalu
First comment nya kapan
Seratus lho
Kepo
Last month, baru sebulan
Oh ga ada ya
Next nya
Ga ada
Tapi warnanya biru
GitHub di comment juga
Dibedah GitHub
Kenapa ga ilangin aja next nya
Oh ga ada next
Disable gitu ya
Oh yang web nya belum ada unit test
Baru ada yang back end tadi
Proxy doang
Linter
Perlu linter sama formater ya
Tapi karena kerja sendiri ga perlu
Ngapain
CI itu kan
Selain untuk linter dan
Lintas tadi juga butuh buat
Dependensi kan
Ngecek dependensi masih
Integrate well atau engga gitu kan
Jadi bukan hanya menjalankan test
Tapi juga untuk ngecek bahwa
Web nya bisa
NPM install
Bisa NPM start dan lain-lain ya
Regresion test
Regresion test
Yang penting ya
Accessibility
Oke ada lagi
Overall
Overall
Kalau sepuluh keren banget
Satu ga banget
Biasa aja
Kita harusnya angkat-angkat begitu
Gausah pakai angka lah
Susah
Tujuan nya bukan buat tipu
Gak usah pakai angka
Buat apa namanya
Buat feedback, buat pembelajaran
Saya juga belajar banyak jadinya
Ya iya
Betul
Banyak hal-hal yang tidak kita ketahui
Sebelumnya
Terima kasih mas Yudi
Terima kasih sudah submit
Terima kasih
Web nya keren banget walaupun belum jadi ya
Sukses lah buat
Lancar semoga lancar ini project nya
Tapi
Banyak ya banyak
Apa ya
Banyak insight
Yang bisa kita dapat malam ini
Kita tanya peserta
Suka ga topik
Benasitus begini
Iya
Kalau temen-temen punya
Boleh ya langsung aja ke
Github nya kita
Ini gratis loh
Kalau sama konsultan lain bayar
Cuma kita ga benerin juga
Kita komentar-komentar doang
Oh iya itu justru
Yang implementasi kan orang lain
Kita kan cuma konsultan doang
Tapi apa namanya
Di pekerjaan saya juga
Banyak
Review situ sih
Maksudnya
Klien dateng dengan masalah
Dan
Kita memberikan list
Yang bisa diperbaiki
Terutama di performance, accessibility
Sampai back-end performance sih sebenernya
Cuman ya bedanya
Kasusnya
Database nya gede
Bisa sampai
Sampai
Yang normal-normalnya aja
Database nya bisa kayak
70GB, 80GB
Jadi banyak yang bisa
Di review
Kalau tadi situsnya
Meletihodat ini
Saya bahkan mencari-cari kesalahan
Apa yang bisa
Dikomenin, karena terlalu
Susah
Karena udah bagus
Terlalu boring ga ada yang bisa
Dikomentarin ya
Karena udah bagus
Itu internal sebelumnya tadi kita
Sempat, sebelum mulai acara
Ini situs apa ya kita komentarin
Karena terlalu
Perfect
Jadi boring disini maksudnya
Adalah compliment ya
Pujian sebenernya, bingung kita
Mau komentarin apa karena udah
Secara performance bagus
Secara UI bagus
Codenya juga oke
Jadi
So far ini lah
Angkat jempol
Angkat jempol
Mantap, pakai spekulasi api
Segala, oke
Jadi
Sekali lagi terima kasih
Buat Mbak Mutia dan Mas Yudi ya
Buat yang sudah submit
Nah sebenernya kan
Minggu lalu kita voting kan
Mau beda situsnya Eka
Jadi beda situsnya Eka
Itu gara-gara gak ada topic aja
Ini buat cadangan aja
Kalau besok-besok bingung
Ya
Live setiap
Selasa malam
Selasa malam
Selasa ngobrolin mu
Senen harga naik
Selasa ngobrolin mu
Waktunya ngobrolin mu ya
Selasa malam
Jam 8
Waktu Indonesia Barat ya, jangan lupa
Di subscribe aja di subscribe
Jadi nanti notifikasinya muncul
Nah kemarin kita
Tadinya kita mau
Beda webnya
Projeknya Eka
Tapi ternyata pas saya tanyain
Minta reponya
Ternyata di respon
Jadi kita gini dulu
Karena udah duluan juga ya
Nah buat minggu depan
Kita gak beda situs dulu ya
Eka nanti next time aja ya
Bosen lah jangan, kapan-kapan aja kalo udah bingung
Iya makanya
Ini ada beberapa
Topik-topik
Berdasarkan apa nih kita mau
Dead created
All
Atau
Let us activity
Top all
Top all
Web security
Web RTC
Nantilah ya
Kita harus seret
Abang Johan lagi
Kan ada update kan
Web RTC ada update kan
Ada update ya
Di web API yang baru
Atau kita mau
Beda framework
Kayaknya menarik
Nggak ajak siapa ya
Beda framework apa
Beda buku
Saya punya rekomendasi buku yang menarik
Mau buku
Biasa apa yang menarik
Dari buku
Kalo manusia kan yang menarik tangannya
Kayaknya punya buku ini
Bukunya dari magnet
Boleh-boleh
Ini tipis kok
Bisa dibaca dalam waktu beberapa jam
Mau
Boleh, mau
Kita gak voting lagi ya
Jadi dikatur ya
Oke
Buat minggu depan
Kita akan
Bahas tentang
Problem solving
101
Tapi
Di problem solving apanya ya
Ya baca dulu
Makanya
Masalah yang dipecahkan
Masalah yang dipecahkan
Di buku itu
Salah satu contohnya itu
Ada
Sebuah grup band
Yang
Punya masalah
Penontonnya sedikit
Oke
Maksudnya gue pesan dulu
Masalah hidup
Siapa yang pengaruhnya mas
Problem solving
Ken Watanabe
Watanabe
Problem solving
101
Ada
Di Tokopedia
Ada kindlenya
Kindle aja
Kita beli yang resmi ya
Beli yang resmi ya temen-temen
Itu resmi
Di Tokopedia resmi
Tapi saya suka
Ada ya
Ya coba yang kindlenya aja
Lebih murah ya biasanya ya
Lebih murah dan gampang
Di bawah-bawah
Gampang di bawah-bawah
Oke cukup untuk malam ini
Cukup
Cukup terima kasih banyak
Semuanya kita ketemu lagi
Minggu depan selamat malam
Selamat istirahat sampai jumpa
Bye
Tepat-tepat
[Tekan like dan subscribe]
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #NgobrolinWEB! Malam ini kita akan membedah situs yang disubmit oleh salah satu penonton kita: https://meutia.net/. Masih bersama Ivan dan Eka pastinya. 🏷 Gunakan kode NGOBROLINWEBDN dan dapatkan DISKON 10% Untuk Pembelian Web Hosting DomaiNesia: Beli Web Hosting DomaiNesia disini: https://my.domainesia.com/ref.php?u=25754 🎁 DISKON 50% Cloud VPS Turbo dengan Kode Promo: NGOBROLINVPSDN Beli Web Hosting DomaiNesia disin: https://www.domainesia.com/cloud-vps/?prom Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
2 Okt 2024
Ngobrolin Drama Trademark & Open Source
Episode ini membahas drama perseteruan antara Matt Mullenweg (co-founder WordPress) dengan WP Engine, sebuah perusahaan ...
13 Apr 2023
Ngobrolin Format Warna
Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan...
7 Des 2022
Ngobrolin Font
Font dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat hala...
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 .