Bedah Situs
Ringkasan Episode
Bantu KoreksiEpisode ini merupakan sesi bedah situs yang pertama kali mendapatkan partisipasi dari penonton. Website yang dibedah adalah undangan pernikahan digital yang dibuat oleh Mas Grafis menggunakan Next.js 13 dengan Contentful sebagai headless CMS. Diskusi dimulai dengan pembahasan tentang pentingnya signed commit (GPG signing) untuk keamanan dan mencegah impersonasi di GitHub. Selanjutnya dilakukan analisis performa dan accessibility terhadap website tersebut. Beberapa masalah yang diidentifikasi meliputi auto-playing audio tanpa konsentrasi user, kontras warna yang kurang, navigasi carousel yang tidak ramah accessibility, serta bundle size yang cukup besar sekitar 4.1 MB terutama karena gambar. Episode juga membahas berbagai tools untuk mengecek accessibility seperti color contrast checker extension dan Chrome DevTools.
Poin-poin Utama
- •Signed commit (GPG signing) penting untuk keamanan dan mencegah impersonasi - commit yang verified memiliki centang hijau di GitHub
- •Website undangan pernikahan menggunakan Next.js 13 dengan Contentful sebagai headless CMS untuk konten yang dinamis
- •Analisis performa menunjukkan bundle size sekitar 4,1 MB dengan gambar sebagai kontributor terbesar penggunaan bandwidth
- •Masalah accessibility utama: auto-playing audio tanpa user consent dapat mengganggu dan tidak ramah untuk pengguna
- •Kontras warna yang kurang pada beberapa elemen seperti tombol navigasi menyulitkan pengguna untuk melihat interface
- •Navigasi carousel tidak mendukung keyboard navigation dan tidak memiliki focus management yang baik
- •Tools yang direkomendasikan: Color Contrast Checker extension untuk Chrome dan fitur bawaan Chrome DevTools untuk analisis accessibility
- •Tips penting: jangan commit file .env ke repository publik untuk keamanan credentials
- •Web development memiliki entry barrier yang lebih rendah dibanding app development dalam hal kebutuhan hardware
[Music]
Dapatkan hanya di Domestika
[Music]
[Music]
Halo, selamat malam. Selamat malam.
Asik ya. Selasa malam waktunya
ngobrolin web. Ngobrolin web.
Kirain selasa malam waktunya Timnas.
Banyak yang usuh, gara-gara dibantai, gak apa-apa ya.
Kita hibur. Yang penting lolos.
Yang penting lolos. Iya. Beda kelas, beda kelas.
Ternyata nanti di Bapak Penyisihan ketemu lagi sama Jepang.
Nggak mungkin lah.
Dia kan di atas kan?
Biasanya di seber sih kayak yang Asia, apa?
Kayak gomor-gomor.
Gomor-gomor kan?
Iya, tapi kan kayaknya ada pot-potnya gitu loh.
Gak bakal ketemu satu grup lagi.
Iya, ketemunya sama yang lebih jago daripada Jepang.
Kalaupun masuknya ya.
Sekian kesinkan masuknya lagi dia, ya pasti langsung pulang.
Itu di Domestika.
Eh, send sponsor dulu dong.
Sorry ya.
Lupa, belum buka ini.
Belum buka topik.
Oke, episode malam ini masih disponsori oleh Domestika.
Ya, jadi kita kolaborasi dengan Domestika untuk beberapa episode kemarin dan beberapa episode mendatang.
Jadi kalau buat teman-teman yang mau beli hosting, hostingnya udah canggih loh.
Lihat transkrip lengkap (2216 segmen lagi)
Kalau jaman dulu kan hosting cuma bisa terbatas lah ya. Cuma bisa poll, cuma bisa php, ngas equal gitu kan.
Sekarang kayaknya hampir semua bahasa udah di dukun ya.
Not.js bisa, go lang.
Not.js bisa, go, bisa.
Rush juga bisa.
Jadi kalau mau nyobain boleh pakai promo code ngobrolinwebdn.
Dn itu dominisia.
Itu ada di bawah.
Nanti dapet diskon.
Diskon 10%.
Semua paket web hosting, diskonnya berlaku untuk seiklus 1 atau 2 tahun untuk pembelian pertama.
Jadi terima kasih banyak buat dominisia yang sudah mendukung acara kita ini.
Oke.
Malam hari ini kita akan kembali membedah situs.
Bedah situs.
Terakhir kan pancingan ya.
Situs pancingan.
Sekarang beneran.
Ternyata ada yang submit.
Dari mas IM Gdev.
Gdev itu apa ya?
Google Dev.
Google Developer.
Awalnya mau submit website yang dibuat kantor tapi takutnya nggak boleh.
Terus ada website yang dia buat untuk temannya juga ternyata nggak bisa diakses gara-gara.
Apa?
Domainnya nggak diperpanjang.
Padahal bisa dikasih source code-nya aja ya.
Source code-nya boleh nggak ya?
Nggak boleh kali ya.
Akhirnya disapit ulang.
Sapit ulang website undangan ya. Kayaknya ya website pernikahan tapi kode-nya 3 tahun yang lalu.
Ada ini juga nih.
Tapi kayaknya belinya salah ya.
Ada source code-nya juga nih.
Nanti kita bongkar-bongkala ya.
Loh.
Salah ya.
Oh ada ini-nya.
Nah ini dia.
Bacanya gimana nih?
Fendangan.
Fendangan.
Biar EG. Sekarang kan U itu jadi V.
Biar KPI metal.
Ini tampilannya.
Oh ada musiknya.
Nggak denger ya musiknya?
Langsung bunyi kan. Langsung autoplay.
Denger ya?
Dengar nggak?
Enggak kan? Karena nggak share tab ya.
Ini kita bisa tebak lagu apa.
Tapi harus di-share ulang ya bentar ya.
Ada tulisannya.
Share-nya harus pakai itu.
Share tab.
Gimana dia?
Nah ini ada suaranya kan.
Ini ada apa nih?
Begitu ke kanan atas itu loh.
Karena atas kan udah ada dulu nih.
Karena atas itu yang ada buat kemudahan tuh.
Oh ini.
Oh.
Keren juga.
Pakai apa ya? MP4 ya?
Atau MP3?
MP3.
Itu kan ada source code-nya.
MIDI.
Coba lagi. Penasaran.
Oke.
Mana media?
Apa nih? MP3.
Oh nggak kelihatan ya.
Nggak kelihatan ya.
Berarti present-nya diulang lagi.
Sekarang balik lagi ke full screen.
Cuma mau dengerin suara doang.
Nah.
Nih MP3.
Minang.
Tuh udah kelihatan udah ketahuan juga kan judulnya.
Dari judul.
Ternyata ini adat Minang.
Ini 3 tahun yang lalu.
Oh 2002. Dikitnya 2022.
Oh 2023.
Oke.
Namanya Grafis.
Iya itu nama orang ya.
Pasti developer.
Bukan desainer. Grafis.
Desain grafis.
Ntar ada yang ngasih nama anaknya.
Figma.
Oh Figma.
Oke.
Jadi malam ini kita akan
membedah situs ini.
Jadi ini adalah situs landing page kali ya.
Tadi ada
depannya itu.
Ini kita bisa masukin nama ya.
Nama dan keluarga.
Oh iya bisa.
Enggak ya tulis nama.
Tulis nama Eka.
Tulis nama keluarga bisa
ngobrolin web.
Oh iya.
Oh musiknya bisa di index lagi.
Ini gak copyright ya.
Ada itu.
Can help falling in love.
Apa lagi?
Oh cuma 2.
Cuma 2.
Oke.
Tadi udah dimasukin nama. Terus ada
keterangannya.
Ketika nya kapan.
Oh ini fontnya lucu juga ya. Menarik ya.
Ini sama ini fontnya sama.
Ini standar.
Ini gimana tadi?
Mobile.
Kalau mobile fotonya ilang.
Kasian. Yang kiri tuh pasti udah
capai-capai foto pre-wet kan.
Pasti itu fotonya lama
ribut.
Oh yang sebelah kiri ya.
Ya yang kiri.
Itu yang bunga.
Bunga itu bisa kembang pempis.
Pake jeep.
Itu bunganya gitu-gitu.
Iya kayak ada animasinya tuh.
Ini bukannya pakai CSS bisa ya?
Bisa lah.
Gak tau ini pakai apa coba.
Bukannya opacity.
Apa ini?
Kok gak ke select ya?
Deep ya. Di dalam deep berarti ya?
Di sini.
Background ya.
Ini opacity nya tuh jalan tuh.
Pake JS.
Di edit opacity nya berubah-ubah gitu.
Bukan pakai animate.
Bukan pakai animate. Pake JS ya.
Berarti image, background,
terus opacity nya yang dimainin pakai
JavaScript ya.
Oke.
Terus kalau kita pencet next itu
kita dikasih
2 acara karena ada
karnika dan resepsi.
Jadi di sini ada petanya.
Petanya gak bisa diklik kanan ya.
Kalau diklik buka modal.
Ya, buka modal.
Di Riau.
Wuh, bunyi lagi.
Butuh modal.
Terus kalau ingatkan
saya masuk ke Google Calendar.
Boleh calendar nya masih aja?
Jangan.
Ga ada yang rahasia juga sih.
Ternyata ketemu dengan
Presiden, ketemu dengan...
Tenggak.
Bayar tagihan,
bayar ini.
Isi tokan listrik ya.
Itu isi listrik.
Oke.
Ini...
Ini...
Indonesia langsung lupa
calendar event nya.
Kemungkinan besar menggunakan
nest.js. Bener gak?
Ya, iya.
Itu ada nest.config.js.
Next config itu isinya apa sih?
Iya, config buat nest.js.
Masih webpack.
Ya, masih ya.
Iya, belum...
Kalau sekarang udah...
Udah turbo pack atau masih
bisa milih?
Atau harus pakai...
Sekarang by default kayak si turbo pack.
Udah by default ya?
Iya. Udah bukan
experimental.
Ini yang menarik nih CSSnya.
Kalau misalnya
masih ada
field webpack di config
sih gak ditimpa.
Tetep pakai webpack.
Cuma kalau baru by default udah pakai
turbo pack.
Oke.
Wait sebentar.
Yang subnet kan
must
gdf nih.
Tapi yang punya projectnya
mas graphis.
Tapi fotonya sama.
Ini projectnya punya
gdf.
Tapi yang commit
mas graphis.
Eh, sama ya?
Orangnya sama.
Akunnya 2.
Oh ini...
Coba...
Coba lihat commit.
Ada 2 akun.
Dua akun, oke.
Ini ada 2. Orangnya sama, fotonya sama.
Itu sama-sama mas graphis itu.
Akan iya namanya graphis, tapi jadi
webdev kan.
Jalan-jalan punya adik namanya
webdev, jadi graphis designer.
Selamat malam.
Siapa nih?
Kizois.
Gak, gak pakai keyframe ternyata.
Pakai JavaScript.
Aldebaran.
Next config islin matiin
biar production gak gagal build.
Oh, biasanya
bikin gagal build gitu.
Kenapa? Kenapa
harus dimatiin? Karena ini ya
masih pakai
yang require-require gini ya.
Masih gadul ya.
Nggak apa-apa kalau JS sih.
Nggak ngaruh kan?
Gak tau.
Di dunia virtual kadang-kadang
ada masalah-masalah mistis.
Mau complain sedikit.
Kalau mereka
ke GitHub-nya,
buka di tab baru,
di tab baru.
Gak pergi ke
commit semuanya,
commit apa lagi ya.
Hal pertama yang saya comment
di sini adalah
commitnya kita menggunakan
conventional.
Sentang hijau.
Gak sign.
Kirain commit message-nya.
Oh, sign commit.
Itu penting sekali.
Sign commit.
Oh, yang kayak ini ya?
Yang kayak kemarin itu ya? Harus di
approve ya?
GPG key atau
SSH
juga bisa.
Bukannya itu automatis ya?
Gue malah nggak nyander.
Gimana cara setting-nya?
Ini baru gue mau kasih.
GitHub sign commit.
Gak mesti GitHub juga.
Semuanya bisa git.
Semua git.
Bukan semua lain.
Semua git.
Semua git hosting-nya.
Oh, pakai global. Pantesan.
Mau pakai patch juga bisa.
Harus designnya.
Kalau udah sekali
di...
Sekali enable.
Dan abis itu lupa.
Abis itu lupa.
Ini adalah
salah satu
requirement dasar.
Kalau misalnya di tempat saya gue kerja.
Semua pekerjaan harus
design.
Iya, iya, iya, iya.
Oke.
Mudah-mudahan mas
grafisnya datang ya.
Nonton gitu maksudnya.
Nah nonton ya itu. Coba di komen
say hi dong. Mana mas grafis, mana mas grafis?
Iya, boleh. Yang punya...
Ya pertama-tama kita ucapkan terima kasih banyak.
Udah berpartisipasi ya.
Jadi kalau teman-teman punya...
Akhirnya dapet pasien juga setelah
berapa... Berapa bulan kita
minta apa? Cari-cari situs yang
muda-muda. - Udah datang malah mas Danang Jufri.
Samburnya.
Nah mas Kay, saya tanya tuh
apa gunanya, apa fungsinya
dengan... - Oh iya, fungsinya
yang ini ya.
Shining Commit ya.
Ya pasti
pertama buat security.
Jadi kalau kalian mau
mencoba
coba bikin
repo-nya sendiri public.
Saya pakai
komputer yang belum pernah sign commit.
Coba bikin aja
gitconfig username sama gitconfig
email-nya orang yang
I don't know.
Kalau kalian tahu emailnya dan Abrahamov. - Impersonate gitu.
Ya, dan
dan pakai emailnya dan Abrahamov gitu
misalnya, post aja commit-nya.
Nanti yang... - Elon Musk @ email.com
Itu nanti yang muncul namanya
username-nya itu dan Abrahamov.
Nah,
kalau sudah muncul commit seperti itu kan bisa jadi
kayak, kalau di luar sana ya
kalau misalnya
somehow seorang
nge-post commit gitu, ngaku-ngaku sebagai
dan Abrahamov, dan Abrahamov bilang
"No, itu bukan saya. Semua
commit dari saya
saya pasti psycho." - Ada cintang
cintang ijunya? - Iya.
Coba aja buka. - Kayak twitter ya
ada cintang ijunya ya? - Iya.
Buka... - Cintang biru.
Coba github-nya siapa lagi tuh?
Github-nya mungkin...
Mas Riza mungkin jadi contoh.
Mas Riza belum cinta. - Bisa dibuka?
Ya, sama. - Emang bisa dibuka?
Eh, emang bisa kelihatan?
Dari mana kelihatannya?
Buka satu repo, yang ada
commit-nya Mas Riza.
Itu cintang hijau itu.
Itu cintang hijau itu.
- Oh, ini C.I.
C.I. ini kan? - Itu, itu G.P.G.
Sine. - C.I.
C.I. - Oh, sorry ya, sorry.
Ke... - C.I.
Ke ini, ke ini.
Ke... - Ke commit.
Verified.
Oh, verified.
- Cintang ijun verified. Klik aja, klik.
Klik verified ya.
Tuh, kelihatan.
C.I. was signed by
verified signature.
G.P.G. ID-nya itu.
And more about vigilant mode.
Vigilant mode? Apa nih vigilant mode?
Ya itulah mencegah
mencegah impersonate.
Siapa gitu.
Ngaku-ngaku Mas Riza
nge-push commit ke
Actifate, bikin PR.
Terus dia approve sama admin.
Hmm.
Ternyata nyolong semua
user. - Iya juga ya.
Karena kita
apa, config
username dan
username dan apa
ya, nama dan email
untuk ke
GitHub, itu nggak perlu password ya.
Jadi kita bisa pakai
nama siapa aja sebenarnya. Dan email
dari mana aja, nggak di-conform
juga kan emailnya ya.
Iya ya, benar juga.
Dah.
Sip.
Halo Wilbert.
Nah Wilbert ini juga ini ya.
Pasti pada kenal ya.
Dari GDG
Surabaya.
Itu pertama
tadi harus
di-sign. Cara sign-nya
adalah dengan config ya.
Config global ya.
G.P.G. sign. Ini langsung aja
jalan ini udah selesai gitu.
Harus, harus generate G.P.G.
juga. - Harus, harus di-generate dulu kan?
Ada step-nya di sini juga ada.
Oh ini, ini.
Iya.
Itu generate ya G.P.G. key
nanti dimasukin ke
GitHubnya. - Oh ini verified.
Dari tadi dilihat di sini aja ya harusnya ya.
Tapi generate
G.P.G. key-nya nggak ada di sini ya?
Oh ini ya. - Ada-ada nanti di bawah.
Di bawah kan ada. - Di bawah?
Ini? - Atas, atas, atas
dikit, atas dikit.
Oh generate G.P.G. key.
Generate your G.P.G. key.
Ini kita share dulu lah ya. - Bisa di GitHubnya juga.
Bisa di Rokal.
To you.
Dan bisa SSA side juga
bisa. Nggak perlu SSA G.P.G. key.
Kayak gini ya.
Hampir sama
seperti kita
set up untuk GitHub ya.
Push ya. - Push G.P.G.
Push SSA via SSA.
Kalau misalkan kita mau
apa?
Mau
git clone
kalau pakai SSA kan kita harus
itu dari setting dulu kan.
Kayak gitu ya, kurang lebih ya.
Oke, oke.
Sapa lagi?
Itu yang pertama.
Yang kedua?
Yang mau dibahas?
Ininya?
Coba lihat konfignya.
Apa? Next
atau Package?
Yesan.
Ya, coba lihat. Package-nya apa aja?
Package Yesan.
Dependency.
Ada Turbo Pack tuh?
Dia pakai Dev Turbo. Apa itu Dev Turbo di atas?
Hah?
Itu Dev Turbo. - Oh, yang pakai Turbo.
Jadi kan
masih pakai flag kan.
Iya, jadi Interchangeable dulu.
Masih transisi ya?
Masih dulu pas sebelum dipindah,
kalau pengen nyoba nih, tanpa harus
mengomit, tanpa harus bikin keputusan
dulu, pindah nih
dari WP ke Turbo Pack, coba aja jalan
pakai Turbo.
Ngecek yang jalan apa, yang error apa.
Kalau misalnya semua udah smooth,
ya bisa apa?
Kalau mau switch ke Turbo Pack,
tinggal switch aja.
Browser list
since 2015.
Nggak ketinggalan jauh itu ya, udah 10 tahun.
Browser list
since 2015.
Better di-update
pakai yang 2 major
browser terakhir, atau
non-ID, lebih
sederhana jadinya.
Oh, ini target
kompilasi ya, berarti ya?
Browser yang
2015
atau yang lebih baru ya.
Ini terlalu panjang sih.
Terlalu panjang.
Terlalu lampau.
Ilmu baru, betul.
Saya juga inget sih
setup-nya, tapi nggak inget
ternyata itu fungsinya buat verified itu.
Waktu itu kalau nggak salah, mau submit
sesuatu ke
repo, disaratkan
harus jalanin itu dulu.
Jadi setup-nya juga
karena terpaksa.
Gak boleh.
Kalau saya
harus dari kantor ya.
Jadi preacher soal itu.
Nah, cuma
gue malah
nggak aware soal ini.
Tapi, jadi kalau di
repo pribadi, yang project pribadi,
banyak yang nggak ada centangnya.
Cuma barusan ini barusan banget, jadi
kita cek
di repo
organisasi pribadi, tempat kerja,
centang semua kelihatannya di on-boarding
guide atau whatever, emang
suruh ngejelani comment itu, tapi
di save-nya ke .git
di project-project repo
kerja, jadi by default emang
setiap kapus udah centang.
Kan tadi ada pilihan yang pertama,
kalau nggak pakai flag global, kan
ke save-nya ke .git yang
di hiriku itu.
Per folder, misalnya
folder indoor, semua
project yang di dalam folder itu
pakai .git kerja.
Iya, ponnya
.git kan emang apa?
.git terdekat lah.
.git config.
Oke.
Sebelum lanjut, ini ada ini nih.
Komentar menarik nggak?
Disoise.
"Saya mau pindah ke app dev,
tapi sayang banget butuh spek PC
laptop yang agak tinggi masih
nabung biar eksperimen lagi soalnya baru lulus
SMA." Wah, baru lulus SMA udah
belajar ini ya. Maksudnya mau jadi
web dev.
Natif kali ya maksudnya.
Web dev, ya. "Saya mau pindah
ke app dev." Oh iya.
Kalau app dev memang
butuh
mesin yang lebih
kencang. Kalau web dev
selama masih bisa
berhasil aman.
Ya, bisa di cloud juga kan
bisa kayak pakai
semacam yang online
kayak code sandbox lah
atau dulu sebelum itu ada
IDX ya.
"Keyjoys pindah ke web dev." Nah, lebih
murah. Iya, mendingan web
biar ada. Entry,
better entry-nya lebih murah.
Lebih, ya, lebih
terjangkau.
Ya, lebih terjangkau. Ya, sepunyanya
apalah laptop yang udah ada,
kemungkinan besar ya bisa dipakai.
Nggak bisa jalanin next.js
nggak usah khawatir banyak. Vanilla bisa.
Aman ya.
Kalau next.js mungkin agak berat ya.
Nggak perlu
VS Code. Nggak perlu
VS Code. Nggak perlu pakai FIM.
Belajar FIM ya.
Ringan.
Kalau
kalau app dev mungkin
agak susah pakai FIM ya.
Karena harus
kompilasinya harus pencet tombol
play gitu kan.
Ya banyak lah ya.
Iya, IDX sekarang udah jadi Firebase Studio.
Ganti nama, ganti branding.
Atau di GitHub bisa
pakai Codespaces. GitHub Codespaces.
Tapi ada free tier-nya ya.
Jadi jangan melampaui
perangas aja.
Jangan udah tinggal lagi jalan.
Pastiin. Coupar nolos. Oh nggak.
Dia kalau 5 menit belum aktif, mati sendiri.
Oh dia auto shutdown.
Studen kan?
Ada akun
ada email studen nggak?
Kalau ada kan bisa dapat studen tag ya.
Kalau di GitHub. Oh iya yang kita bahas
kemarin itu.
Bukan, beda. Kalau kemarin itu Google.
Mas Tize juga.
Web dev ringan.
Bisa pakai VPS. Betul.
Bisa pakai VPS.
Coding pakai terminal ya. Kalau mobile
memang agak berat ya.
Jadi ya salah satu kelebihan
nya web dev juga.
Oke lanjut. Ini tadi
browser release-nya kalau bisa yang
lebih baru kali ya. Ngapain kita support
terlalu panjang ya?
2015 berarti
IANA
masih ya. Masih di support ya.
Intinya jadi banyak polyfill kan.
Atau compilingnya
juga jadi kayak ke JS.
JS.
Common JS.
Kalau web dev murah
apakah bisa coding pakai tablet?
Bisa. Pakai handphone juga bisa.
Asal sabar.
Asal sabar aja.
Saya pernah pakai, mencoba
menggunakan tablet.
Pakai termux loh. Codingnya pakai
VIN. Coba, wah ini.
Benar. Bisa.
Saya pernah beneran pakai ini loh.
Jadi kayak server down.
Saya harus ke server
pakai SSH.
Terus saya pakai VIN.
Pakai handphone.
Lagi di mall istri
dan anak lagi main saya. Benarin server
pakai VIN di handphone.
Benarin engine config saya.
Aduh.
Serem.
Disanalah fungsinya apa skillnya
VIN berguna ya.
Untuk SSH ke server.
Nggak bisa tuh buka VS Code.
Kecuali kalau udah install
VS Code server ya.
Di servernya. Mungkin masih bisa.
Oke. Kita lihat
dependensinya ya.
Oh itu pakai konten full tuh CMS-nya.
Konten full.
Itu.
Paling atas.
Oh iya.
Restack HTML
Renderer. Maksudnya ini kan
webnya kan
nggak dinamis kan ya.
Maksudnya
datanya kan nggak perlu berubah
sering-sering kan ya. Kenapa pakai
konten full? Nggak. Cuma kan
mungkin kliennya ya yang nggak input.
Maksudnya kayak blurbnya text-text
yang tentang apalah itu
tentang si apa?
Si klien yang mau
nikah ya mungkin punya admin atau apa
yang buat input.
Oh iya benar.
Konten full tuh enak loh.
Dia layanan headless CMS.
Pernah pakai soalnya.
Tapi ini nggak berbayar sih. Ini
murni pengalaman pribadi.
Maksudnya free tier-nya cukup
generous. Nah terus ya enak lah
user-friendly. Jadi kalau kita
build buat
yang harus datanya
sering-sering diupdate oleh
orang lain yang bukan kita,
bukan developer, itu enak banget.
Ya tinggal login ke
konten full, terus post type-nya juga
macem-macem. Nah itu
headless. Jadi kayak
konten full-nya udah nyediain
SDK untuk berbagai layanan
apa? Berbagai library
termasuk di React
atau JavaScript. Ya udah.
Itu manggil datanya tinggal pakai
si library yang udah
disediain.
Ya Mas, yudah
kita lagi apa?
Lagi membahas tentang
situs yang
disubmit oleh Mas
Grafis namanya.
Mas Grafis. Ada di
GitHub ininya. Diskusinya ada
di GitHub sini. Jadi silahkan
ini bentukannya
kalau mobile, tapi kalau
ini yang
versi full-nya seperti ini.
Tadi kalau baru
mulai masuk tuh ada
masukin nama, terus
ada kayak shock.
Terus ada apa? Oh ada lagi.
Itu navigasi. Ya navigasi.
Berarti ya.
Sama-sama
kalau arrow kiri-kanan.
Ya.
Konten
full, berarti
kontennya di
entry, dia nyediain kayak
back-office gitu ya buat
ngisi kontennya gitu ya?
Tapi itu hosted di konten full-nya.
Jadi nggak pake
infromosi, kita nggak harus mikir
itu hosted di mana.
Oke.
Ini semacam
Netflix, eh Netflix.
Netlify punya juga kan ya?
Netlify juga ada kan ya CMS-nya?
Oh kalau Netlify
bukan.
Agak sedikit beda Netlify itu.
Netlify itu
menarik sih, Netlify CMS.
Jadi Netlify nyediain kayak
front-end-nya, front-end
untuk admin ya, itu dihostingnya
di website, di aplikasi
kita sendiri sebenarnya kalau yang punya
Netlify ya, Netlify CMS.
Cuma dikasih interface, dikasih
front-end, terus setiap kita edit
atau bikin perubahan itu jadi
full request.
Nah maksudnya itu kenyanya Netlify.
Direct push, Strapi, oke.
Direkt. Nah iya.
Saya ingin lihat.
Sekarang itunya banyak ya.
Gatau punya CMS apa ya?
Pernah pakai dulu banget pas kayaknya
belum se...
Oh ini ya, kurang lebih kayak gini ya.
Ada
ada web suite-nya, gitu-gitu ya.
Iya.
Jadi ya tipe
data yang standar lah ya, kalau buat
front-end, misalnya bisa drop-down select,
bisa checkbox,
bisa date, bisa reach text,
itu semua kita bisa customize,
dan terus ya nanti tinggal
panggil aja.
Date bisa. Oh itu kayak
widget gitu ya, drag and drop gitu.
Kayaknya bisa, mungkin ya.
Gimana?
Kayak apa? Drag and drop gitu.
Date.
Content kan, bukan
bikin, bukan
no code platform kan. Ini kayak
no code platform bukan?
Bukan, ini buat CMS,
ini headless CMS.
Oh iya.
Oke, taxonomy, segala macemnya.
Cuma maksudnya
drag and drop itu dalam arti
si admin interface-nya itu loh,
misalnya selain title,
kan mungkin ada custom field
macem-macem, itu mau ditaruh atas atau
ditaruh bawah, kayak WordPress juga ada kan.
Nah, cuma
ini kayak lebih
more style aja.
Si...
Siapa tadi namanya?
Ada sisi admin-nya?
Ada sisi admin-nya, berarti ya?
Itu hosted
di Contentful, loginnya
lewat Contentful.
Kalau nggak salah ya, ini
sekitar 2-3 tahun lalu, pokoknya
terakhir gue pakai Contentful itu
agak lama.
Masih grafisnya
nggak ada sih yang bisa kita tanya-tanya.
Harusnya
kalau ada, bisa kita tanya.
Kita tanya-tanya, apa?
Contentful. Oh, Atlas CMS.
Ini kayaknya beda deh, yang platform ini
kayaknya beda deh.
Kayaknya ya.
Content Platform
Origin
Tradisional.
Oh, ini perbandingan ya.
Adanya di mana kelihatan di sini ya?
Wait, cuma gue nggak lupa sih
apa, punya docks Contentful
yang sesuai
yang dipakai di situ.
Mana ya? Gak tahu, ini ternyata
Contentful produknya udah banyak.
Ya, cuma kalau TLDR-nya
sih gitu, Atlas CMS, ya mirip
Strapi lah.
Oke.
Oke, kita lanjut ya.
Ini pakai Contentful untuk
isinya, untuk kontennya.
Terus,
wah, banyak yang nggak dikenal nih.
Loadable Component, apa ini?
Loadable.
Gak tahu.
Splite.js
Splite itu apa ya?
Kayak slideshow, atau apa ya?
Carousel. Carousel.
Carousel, betul. Carousel, ya.
Yeslin. Yeslin.
Yeslin, bukannya
mendingan taro di dev ya?
Dev dependency.
Ya, sama aja.
Next.js, presi 13.
Next.progress, ini progress bar ya, mungkin ya.
React.
React. React.
Pakai Kapcah.
Kapcahnya buat apa ya?
Buat ngirim komen, itu yang di slide
terakhir. Nah, paling
terakhir.
Oke.
Ini ada duitnya.
Dia ngirimin duit gitu?
Nah, tadi gue
ngecek, nggak bisa itu.
Itu kelihatan mungkin perukup konsep doang ya.
Maksudnya nggak ada integrasi
payment-nya.
Iya. Kirim tanda kasih.
Oh, dari sini ya.
Oh, ini product contentful
yang dipakai, ini yang
CMS ini namanya sekarang
Studio. Studio.
Oh, yang tadi.
Ini kayak
no-code platform, bukan ya?
Kayak kita bisa desain sendiri kayak Wix
gitu, bukan ya?
Tuh, dia bisa drag-and-drop itu.
Kayak gitu, tapi bukan
untuk web, apa?
Bukan untuk client-facing,
user-facing web app-nya.
Untuk CMS
experience-nya.
Untuk nginput datanya.
Oke.
Jadi data-nya nanti semuanya
jadi data-nya nanti sudah
dimarkup, tinggal dia kirimkan
HTML-nya, tinggal kita tampilkan aja
berarti ya?
Enggak. Ya, pasti panggil
jadi JavaScript Object biasa.
Desain gitu, bentuknya.
Ya kayak API ya,
panggil API ya.
Kalau nggak salah sih, udah type
juga, udah ada typing-nya.
Jadi misalnya apa, custom di sini,
custom entry-nya misalnya
data-data apa itu tadi kayak
lokasi-lokasi
akaknikah-nya, lokasi
resepsinya itu kan map point.
Ya, misalnya ada field-field-nya gitu
udah data yang dibalikin tuh
udah ada type-nya.
Nah, ini ada
komentar dari mas
Ahmad Muwafak nih.
Kayaknya lebih
ngerti ya. Loadable buat
lazyload-component, code-splitting
juga. Ini
ngomentarin content code?
Tadi loadable, bukan
loadable. Tadi packaging
kita nggak tahu itu. Oh,
loadable, ya ya. Loadable itu
buat lazyload-
component, oke.
Tapi bukannya Next sebenarnya
udah handle
itu ya? Itu semua udah bisa
di Next.js nggak sih? Maksudnya
use-casenya kenapa ya?
Yang nggak bisa di handle
Next.js sampe harus
pakai loadable.
Penasaran.
NPM.js
apa nih? Memory Load Pro.
Memory
Cache Pro.
Buat caching.
Modern, excellent, fast, well
tested, reliable caching module.
Itu kali buat lagunya
biar na di caching
di lokal.
Nggak, ini buat
nyimpen data ya.
Kayak
local storage ya.
Tapi ini buat caching ya.
Browser cache
berarti ya?
Browser cache ya.
Iya, di client, kan?
Dependency.
Sudah, pakai JSON aman.
Aman, pakai JSON oke.
Terus, apa lagi? Kita lihat
apa lagi?
Pakainya Windy ya.
Bukan pakai Tailwind ya.
Ketiba node
modules.
Windy bukannya based on Tailwind ya?
Belum pernah pakai sih.
Oh, nggak
ternyata Windy CSS
migrate from Tailwind.
Oh, baru tahu.
Next generation utility first CSS
framework.
Lihat yang bawah, the Windy CSS
setting. Oh, sun setting.
Ya.
Bukan musuh sih.
Dulu dibuat untuk kebacakan
Tailwind's performance issues.
Tapi sekarang udah. Ingat-ingat-ingat.
Windy itu yang pertama kali
menggunakan just in time.
Oh.
Abis itu, diikuti
oleh si Tailwind. Tailwind
sekarang udah just in time. Makanya sekarang Windy udah
sunset karena udah
di. My job here is
done. - Iya.
Untuk membuktikan bahwa ini bagus gitu.
- Berjalan ke musik gue sudah selesai.
- For new project, we recommend to consider
alternative like Uno CSS or Tailwind.
Dulu ingatnya gitu, sempet
apa, sempet
ada drama juga tuh sama
yang bikin Tailwind.
Biasalah.
- Skena web web itu nggak lupa
seri drama. - Iya.
.env.development
- Kenapa
.env?
- Kenapa begitu?
Kenapa
ditaro di situ?
- Nah, itu introduction-nya.
- Kenapa beneran ini?
- Jangan di-commit.
- Jangan di-commit.
Di-ignore dong, di-ignore.
Tulung.
- Cuma, bukannya sekarang
otomatis ya?
- Otomatis ya?
Pasti ada warning dari GitHub-nya.
Ada warning dari GitHub-nya.
- Bukan GitHub.
Dari Next.js kan
sebenarnya kan kita bisa pakai
environment variable.
Kenapa harus dipasang ke file?
- Iya.
Ini,
maaf ya, kita buka tadi.
Tapi udah dilihat juga
ini yang reponya. Ini content
full-nya, hati-hati ini kalau berbayar.
Soalnya...
- Ini orang yang submit,
untung mesti cuma bersyukur
ini kita anekanin bahwa project-nya
harus project kalian sendiri
dan kalian yang submit. Ya udah kan, mesti
ngomit-ngomit ada apa-apa
ini.
- Iya. Ini API
content full-nya kebuka ini.
Berhati-hati.
Takutnya nanti kena
kalau masih...
- Dimention dulu, Pak.
Dimention dulu
di diskusi.
Ini coba
di riset dari
konten file-nya.
- Iya sih.
Gini nggak bisa dihapus doang
kalian cara hapus.
- Iya nggak jadi konten full-nya
di riset.
- Di revoke. Terus
INV ini-nya dihapus,
bukan di bagian commit itu aja, tapi harus
historinya juga yang dari awal
pertama kali muncul
Git Ignore-nya apa?
Oh, Git Ignore-nya ini dari Next.js ya?
- Masa nggak ada
Ignoran INV ya?
- Iya.
Kalau misalnya
Next.js official starter
Git Ignore-nya nggak ada INV
itu agak bahaya sih, kasihan.
Maksudnya kan mungkin banyak orang yang baru belajar,
baru nyoba juga.
Ya.
Oke.
Oke. Mungkin
kita sekarang masuk
ke
kirain.inv
example, gitu kan.
- Kirain kosong.
- Iya.
Taunya beneran.
Maaf lah ya.
Kita nggak, tidak menyangka
beneran. Oke.
Apa lagi yang mau kita
inspek?
Ya, inspek sih.
Bagian performance nyata
atau kodanya.
Ini berarti masih pakai yang
lama ya? - Regis, kan?
2 tahun yang lalu.
- Riaq Dead Picker.
Padahal kan ada
Dead Picker dari bawaan
bawaan
browser.
- Oh, Riaq Dead Picker ya?
Dead Pickernya buat dimana ya?
- Atau, atau butuh-butuh apa?
- Lagian Dead Pickernya kayaknya nggak ada
keperluan. - Buat dimana?
- Mistake deh. - Ini?
- Nggak ada sih kayaknya.
- Dah kan kelihatan kalendernya? - Nggak ada.
- Nggak ada ya? Apa buat ini?
Buat, ini kan cuma
URL
doang kan ya?
Ada keperluan apa ya? - Iya, buat apa ya?
- Dead Picker ya?
Benar juga?
Nggak ada?
Bahkan nggak ada
keperluan Dead Picker sih.
- Ini audio player nih
yang di atas tuh
icons.
Riaq Select.
- Nggak ada select juga.
- Riaq Pop Up.
Pop Up yang tadi yang awal ya?
Ini, munculin yang ini kali ya?
Pop Up ya?
Mungkin kalau sekarang
udah ada dialog dan lain-lain ya?
- Betul.
- Ini
struktur
folder-nya.
Ini layout-nya.
Terus
komponen
Gallery Image Pop Up.
Pop Up-nya ini ya?
Yang tadi ya?
Pop X.
Iya.
Ini.
Buat nampilin
Pop Up yang pertama kali.
Terus
ini undangannya yang
Agenda,
Form,
Form Info sama Form
Guest, Guest Book,
sama ceritanya
Love Story.
Pastikan environment diignore.
Itu
bukannya udah wajib ya.
- Public Repo lagi?
- Iya.
Untung loh produksinya nggak diignore.
Sudah diignore ya untungnya.
Dari next.js-nya udah kasih git ignore kan ya biasanya ya.
Udah aman lah ya.
Pidisnya berarti
ada berapa pidis? Satu pidis doang
sebenarnya ini kan.
- Biar dibuka aja coba.
- Iya kan.
Tapi ini ada
kayak ada ini.
Ini ada gambar-gambarnya.
Ini gallery ya.
- Yang hijau. Apa tadi halaman tadi?
Ada halaman hijau yang ada
batangnya itu.
Ini?
Peta lokasi.
Oh ini tohap.
Navigasi.
- Hijau-nya terang,
tulisannya terang.
Ini lagi?
- Komentar-nya di Google Docs
kan cuma itu punya
accessibility sama usability
sih yang paling
kerasa.
Termasuk behavior slide-nya itu
keren.
- Biasanya apa?
- Apa?
Jadi gini, ini kan pakai
library external ya.
Trus apa? Coba
klik cursor.
Tapi kalau ini sih tadi
gue nyobanya, kantang liat kode ya
cuma pakai aja. Cuma buka
dari website-nya aja.
Apa? Di yang kanan itu.
Kanan yang putih.
Nah
kanan yang putih-putihnya itu
diklik, terus tahan,
terus geser dikit, tiba-tiba
apa? Jadi misalkan
use case-nya gini sih, misalkan kita
pengen ngopas alamatnya,
kan pasti cursor kita taruh kesitu
teks alamatnya, terus kita
berusaha nge-like.
Tapi malah
jadi kelihatannya dia
malah-malah ini ya?
Oh.
Tidak.
Kalau swipe di mobile,
swipe di touchscreen, baru
behavior swipe-nya dibikin
berser-slide kalau
user swipe. Tapi ini pakai
modalities apapun, pakai cursor
yang bukan
buat nge-swipe, itu
dia otomatis pindah
kartu.
Oh, ini targetnya
buat dibuka di mobile ya?
Iya.
Cuma itu kan ada desktop-nya juga.
Iya.
Benar-benar.
Semua yang terkait karusel-nya sih
ini usability-nya
agak
kurang. Jadi kayak
contoh lain misalnya gini nih,
yang
tapi nggak, gue belum sampai lihat kodenya
sih, coba dibuku tamu aja.
Nah, sekarang coba deh.
Bisa nggak? Kan pengen
lihat pesan dari orang lain,
coba. Ini kan
benar-benar minta.
Coba gimana caranya?
Gak bisa.
Iya, coba cari caranya sampe
bisa. Terus
tebakan kita selanjutnya kan kita slide
pakai mouse, kan?
Iya, betul-betul.
Bisa pakai
tab, tebakan selanjutnya
pakai tab, kita klik sekitar
situ, terus tab-tab-tab aja sampai ke fokus,
juga nggak bisa, nggak ada fokusnya.
Ternyata, lihat nggak? Ijo-iju
yang di kanan itu, bentik-bentik
ijo, itu bukan dekorasi,
itu step-card usaha.
Oh, ini
page-ing ya page-ingnya.
Cuma karena isunya banyak,
tadi kayak mleber gitu loh,
jadi bukan di bawah.
Ini ternyata
pesan-pesan orang-orang ya,
daftar pesan. Apa? Posisiunnya juga
jadi aneh, karena pesannya banyak.
Kalau pesannya cuma 3 atau 4, mungkin
agak bagus ya. Maksudnya di kanan atas,
semuanya jelas, nah ini makin banyak
jadi kayak acak-acakan kan, kedurung ke kiri,
karena steps-nya bukan di bawah.
Terus maksudnya modalitas navigasinya itu
slide nggak bisa,
click nggak bisa,
tab, tab untuk fokus,
maksudnya tab atau apapun yang pakai
assistive device ya, misalnya orang pakai
apa itu yang screen reader
atau alat-alat lain pun, nggak bisa.
Terus yang anak Pim kan
biasanya, ngelanjutin,
tadi tuh anak Pim kan nggak suka
mouse ya, semua pakai keyboard,
tab, tab aja, nah ini jelas nggak bisa
juga. Gak bisa juga tab-nya nggak jalan ya, nggak ada
tab, namanya tab index ya,
nggak dikasih tab index, jadi kalau kita
mau ngisi, harus klik mouse dulu.
Jadi sebetulnya sih mungkin
alternatif yang
paling ideal ya,
sekarang kan carusel atau
slider udah ada
JavaScript dan CSS
yang web API ya,
jadi paling ideal itu bikin sendiri.
Nah, kalau nggak
memungkinkan, nggak sempat dan
lain-lain, alasan lain, sebenernya
kayak ShadCN,
ShadCN tuh ada carusel, kalau
Radix UI, agak lupa
apa, ada carusel atau nggak,
intinya sih pakai
React UI Library yang
udah support accessibility
features, sekarang udah banyak
lho, jadi maksudnya paling ideal ya
bikin sendiri, jadi kita bisa
control semua
fungsionalitasnya, tapi kalau itu nggak
memungkinkan cari UI Library yang
udah ada support,
ya itu tadi segala macam
accessibility features,
jadi accessibility features itu
bukan cuma buat
apa,
bukan cuma buat
yang kayak apalah
screen reader atau defabilitas doang,
tapi ya beneran
literally sesuai namanya,
memastikan segala macam
user dengan berbagai cara
akses website itu mudah buat
akses kontennya.
Oh, kita kan waktu itu
udah tutorial sama Ivan ya
cara ngecek performance.
Iya, performance-nya nih
oke nih ya.
Ya kan,
karena pakenya
komputer hebat dan
dan
oh iya,
belum di, itu ya,
belum di throttle ya,
no throttling,
coba slow,
terus
yang di refresh ya, yang di performance-nya ya,
ini ya,
gitu ya.
Tapi ini kalau kita
nggak klik, dia masih
ngitung sebagai ini nggak?
Udah loading kan semuanya kan?
Iya.
Modern
Classic,
oh, apa nih?
Wow.
Masih ke-mutein lagi.
Mendingan ini di-mute aja ya.
Mute.
Nah itu salah satu juga
bisa opt-out dan itu.
Nah itu aksesibility dan usability.
Tapi itu stress banget.
Padi asli, itu asli
kaget sih tadi,
pas sebelum mulai live ini,
oh coba, mau udah situs nih
nge-check, tiba-tiba
tiba-tiba
lagu ini bunyi,
dan nggak tahu dari mana,
kalau emang user-nya
nge-click play dengan sengaja,
ya udah kan, udah expect.
Bayangin dong kalau lagi meeting atau apa,
tiba-tiba dikirimin
link ini undangan,
di-play, diliatin
sekeluangan.
LCP, INP,
dan CLS.
Ya
layout shift-nya nggak,
minimum lah ya, nggak ada ya.
Hampir bisa dibilang nggak ada ya.
Ya, karena
jenis website-nya juga ya.
Itu bentuk
live-nya tuh pakai CSS atau
image?
Ini image-nya udah pakai EI nih,
3 tahun yang lalu.
Itu, ada
gambar kartun yang gitu, versi kartunnya
itu, itu yang berubah
jadi kartun.
Image.
Thumbnail.
Nah, ini salah satunya,
kalau misalnya
image-nya PNG itu
berat, 76 kilo
kan, lumayan tuh.
76 kilobyte?
Iya.
Padahal kalau dia misalnya pakai
image yang
image yang
GPEG aja,
itu
ada animasinya ya?
Iya, ada animasinya.
Itu yang berubah jadi versi
kartun.
Jadi ghibli-ghibli.
Ya.
Sama itu versi load itu
harusnya nggak kan?
Nggak, ini ya, kayak kecilan
itu tulisan
kayak
Ini dia pakai
WP, udah pakai WP.
Upper case semua itu juga nggak bagus lho.
Gimana?
Upper case itu memplay wanita,
memplay pria, itu kan upper case.
Oh, ini tulisan ini?
Iya.
Kenapa?
Alasannya kenapa?
Ya, sudah upper case tapi
dibikin font-nya kecil dan tipis.
Itu nggak enak.
Ini upper case-nya pakai CSS
lagi ya?
Karena aslinya nggak.
Nggak masalah ya? Nggak ngaruh ya?
Nggak masalah, cuma secara
kembali ke accessibility
sih saya.
Nah, cuma itu seberapa ketat sih, kalau di luar
emang ada syarat
WCAG, cuma kalau ini kan
asumsinya berarti target market-nya
lokal ya, Indonesia.
Mungkin nggak harus seketat itu.
Cuma yang jelas sih
kalau buat...
Bukan soal aturan
yang ketat, tapi dengan
memberikan accessibility yang bagus,
bagi pembacanya
juga lebih enak sebenarnya lho.
Jadi kayak
kita itu memberikan konten yang
enak buat dibaca dan
dikonsumsi sebenarnya.
Bukan soal ikutin aturan.
Nggak, sebagai
kalau yang
secara ideal sih setuju. Cuma
kadang kayak gini kan webdev kita
harus bentuk-bentukan
sama pihak di luar kita.
Kayak kalau gue pribadi kadang pick our battle
gitu. Kayak misalnya kalau gini,
daripada tawar-menawar soal tulisan
memply one time, mending ngabisin tenaga
buat lobby si button yang
apa? Button hijau itu
yang lebih nggak kelihatan sama itu tuh
kanan atas lagu
muter-muter. Kalau itu sih
kalau ini bakal... Apa ya? Maksudnya daripada
cerewet banget banyak yang diminta,
gue bakal memfokuskan
tenaga ke nge-lobby
button warna,
warna button hijau, plus
behavior audio yang di kanan atas itu.
Coba deh survey, sekian
user, terutama yang nggak tech-savvy,
bakal tahu nggak cara
ngapain lagu yang tiba-tiba nyala.
Itu kan kalau ini bakal...
Dari tab browser kan ada
tanda microphone tuh.
User yang nggak tech-savvy,
tiba-tiba bunyi nih, bunyi-bunyi terus.
Nah, terus apa?
Sementara itu di atas,
di kanan atas nyempil,
ada icon lagu muter-muter dengan
kontras yang rendah, nggak langsung kelihatan
juga, dan itu nggak tahu
harus diklik baru buat
untuk ngelakuin lagunya.
Untung lagunya lagu slow ya,
kalau coba noise rock, yang trik.
Biasa yang nikah
anak metal kan.
Pada saat posisi play,
lagunya lagi dimatiin,
pun dia masih muter-muter.
Soal awalnya lagi
jalan gitu, padahal sebenarnya nggak.
Ya itu hal-hal kecil sih ya.
Muka ke
hit memory bisa kelihatan nggak?
Si button icon yang lagu muter-muter itu,
itu nggak bisa ditap juga,
harus pakai mouse.
Oh nggak bisa diklik
pakai mobile gitu?
Iya, harus pakai
pake tangan, pake
touch bisa, cuma nggak ada.
Nggak fokusable, nggak bisa difokus.
Fokusable.
Dimana? Network?
Perfomance.
Memory?
Memory.
Saya tadinya mau liat
sam apainya kayak
tuh, lumayan kan?
Maksudnya,
di hip snapshot-nya tadi,
hip snapshot-nya, kayak
animasi-animasi gitu sebenarnya bisa
kelihatan tuh nanti
berapa
kepakainya
memory di
browser untuk merender itu.
Ini size
bundlenya
dimana ya?
Itu di bawah, 4,1 megabyte.
4,1 megabyte.
Ya, image kelihatan ya.
Image kali ya.
Paling gede.
Click image,
click image di atas.
Nah, kelihatan kan tuh sekarang jadi
di bawah,
jadi 1 megabyte tuh,
1 megabyte
/ 1 megabyte.
Itu artinya image-nya 1 megabyte.
1 dari 4 ya?
Kalau ke JS-nya coba.
JS-nya 1,4.
5. / Nah, jadi cara bacanya ya,
kalau JS-nya tuh ada 17
request dari 98 request.
Ini yang kepakai, bandwidth yang
kepakai 1,1 kilobytes dari
46 kilobytes.
Dan 1,4 megabyte.
/ Ini khusus untuk JS ya? / Ya.
Kalau mau lihat font, contohnya
font-nya gede nggak?
Nggak, font-nya kecil.
/ Nggak, kecil.
CSS-nya? / CSS.
/ HTML-nya?
/ HTML-nya nggak gede kan?
154.
CSS juga nggak gede.
/ Ya, berarti gede-nya di?
/ Media.
/ Nah... / Media...
Iya, 700 kilobytes.
Wasm? Nggak ada ya Wasm.
/ Ada, ada.
Ada.
/ 500 kilobytes...
500 kilobytes ini apa?
/ Ini tuh call web vital.
Web worker.
Web worker-nya dia jalan.
/ Web worker.
/ Recapcha.
/ Recapcha berapa?
Kecil ya?
/ Karena Mas Riza ini,
coba disable cache, terus reload.
Kalau mau lihat.
Terus matiin lagunya.
Udah di...
Udah di mute.
Woh, nggak pake cache,
lumayan juga ya.
15 detik, 16.
Karena heavy di image juga ya.
Event,
image-nya nggak kelihatan
di sini ya. Cuman yang kelihatan kan
image ini doang ya.
/ Itu kayaknya image-nya di-load deh.
/ Iya, ikut ke-load juga semuanya.
Walaupun
walaupun belum muncul di viewport,
udah dipanggil laluan
semua image-nya.
/ Padahal capcha-nya nggak butuh-butuh di awal kan?
/ Iya, nggak lagi load ya.
Capcha-nya
di akhir bahkan.
/ Coba ke-image.
/ Udah di-load semua?
/ Satu dari lima.
Lima setengah.
Oh, tadi empat-empat sekian itu
ke-cache ya?
/ Iya.
Ada yang sebagian ke-cache.
/ Font, oh, nambah lagi nih.
/ Iya, ada yang di-load.
/ Ada yang di-load lagi?
/ Apa yang di-load? / GS-nya
dua setengah,
hampir tiga.
Dari tujuh.
Gede juga ya.
Oke.
S-nya nggak gede kan ya?
Oh, ini yang dari content-full ya?
Google Analytics.
/ Google Analytics, collect itu
Google Analytics. / Collect.
/ Iya, ini nih. / Itu yang dari
content-full ya? / Content-full.
/ S-nya ini ya?
/ APK.
Alright, alright.
Apa lagi yang menarik?
Yang perlu dibahas.
/ Tips-tips. Ini pakai
kalau pengen
nge-check. Tadi kan
kontras warna ya.
Color contrast. Sebetulnya
di Chrome DevTools,
di Chromium DevTools sepatnya
itu udah ada kontras checker,
tapi ada tapinya.
Tapi apa? Masih
kurang bagus. Jadi, apa?
Dalam satu element
yang bawaan DevTools nih. Dalam
satu element tuh harus diset color dan
background-nya. Dan elementnya
nggak boleh punya children. Kayak tadi
padahal proteknya tuh
kan filling-nya tuh
misalnya A.
Elementnya A. Belumnya kan ada
icon kan. Karena mau saya lihat kita
ada icon map. Nah,
jadi nggak bisa pakai
kontras checker
bawaannya DevTools. Coba deh.
Nah, di apa?
/ Ini ya. / Nah,
Inspect Element. / Yang mana?
Yang muda? / Iya, itu.
Terserah. / Ini.
Contras fiturnya gimana? Ini?
Bukan, computed.
Detect computed.
Scroll ke bawah, sampai
nemu color, property color.
/ Ini? / Color.
Diklik.
Nah, itu
harusnya kalau kita klik warnanya,
warna ijo itu.
Nah, harusnya
kontras rasio-nya ada,
tapi no contrast information
available. Kenapa? Karena
lihat elementnya deh, buka
element button-nya di atas.
Nah, itu
di buka.
Nah, kan ada SVG-nya.
Sekarang coba SVG-nya
ilangin.
Hapus aja.
Terus klik lagi button.
Terus kayak tadi.
Color.
Ini.
Gak bisa diklik. Ini?
Bisa, harusnya.
Nah, kontras rasio-nya muncul.
Agak ribet ya, agak capek kan?
Nah, terus yang kasiannya nih,
yang sangat disayangkan,
itu bug Chromium
udah 2 tahunan kali ya?
2 tahun.
Belum dibenerin juga, jadi kalau
mungkin temen-temen yang
bisa nulis, apa ya, C++
atau apalah, bisa kontribusi ke
source code Chromium, tolong
demi kemaslahatan bersama,
coba mungkin bisa nge-fix. Tapi
in the meantime, sementara itu, kita
bisa pakai ya macem-macem
sih extension yang buat
check aksesibilitas secara
keseluruhan tuh banyak. Cuma yang paling
simple dan enak, ini, pakai
ini.
Which is the color contrast checker.
Itu maksudnya,
itu dia nge-check-nya dari Domnode
dan langsung, apa, langsung
kelihatan, terutama kalau kita
kerja sama-sama misalnya
anak QA atau maksudnya pihak-pihak lain
yang bukan developer,
nggak usah jalanin macem-macem, udah langsung
klik aja extension-nya, langsung
kelihatan. Coba deh. Tapi sekarang dari
Figma sendiri, kalau dari designer ya
dari Figma itu, sudah kelihatan sih
color contrast-nya di Figma,
ada extension-extension,
jadi sebenarnya udah bisa pointy
"Ini nggak bener ya" gitu.
- Bagus sih kalau pakai Figma.
- Kalau sekarang kan
jamannya AI,
kita bisa screenshot terus
minta ke Gemini misalkan gitu.
Coba tolong dicek aksesibilitas apa.
- Ini akan too much effort ya.
- Iya sih.
- Iya too much effort. Kalau ini tinggal matiin aja
dev tools-nya, coba buka aja extension-nya
langsung kelihatan.
- Coba install dulu.
- Mana ini ya? Oh ini, ilang tuh.
Kalau di plus, ilang.
Nggak bisa install.
- Nggak responsive berarti.
- Nggak responsive.
Gimana sih?
- Chrome Web Store nggak responsive.
- Pake Kanari.
Chrome Kanari.
Udah nih, coba de-close ya.
- Coba aja.
Coba.
Ayo, kelihatan semua extension-nya.
Lihat aja.
- Ada fake filler.
- Buat ngisi form.
Gimana sih?
Gimana caranya? Klik kanan aja.
- Harusnya sih langsung.
- Buat ngisi form ini loh, ngisi form ini.
Gisi form tuh, ngisi form.
Fake filler.
Daripada gitu.
- Masuk ke extension-nya.
Masuk ke extension-nya tadi.
Terus dipin.
- Oh, dipin dulu.
Oh, harus dipin dulu.
Nggak bisa langsung dipake gitu.
- Iya, itu ya.
Diklik.
Diklik.
- Bentar dulu. Ini kan, diklik.
Udah.
Udah nih, kentang.
Harus refresh kali ya.
Refresh kali ya.
Refresh.
- Matiin lagunya lagi.
- Nggak.
Ah, baru. Harus refresh dulu.
Lagunya nyala terus dari tadi. Cuman udah di-mute.
Mute tab.
Ini, ini, mute.
- Iya, itu langsung kelihatan.
- Ini cara bacanya gimana?
- Iya, itu.
Pokoknya yang XX itu yang salah.
Yang salah berarti yang
warna ini harus diganti.
Sebaiknya diganti gitu.
Jangan pakai warna ini gitu ya.
Gimana?
- Oh, apa?
Itu dimerahin
yang bermasalah.
Di-highlight dimerahin.
Jadi kita tinggal screenshot atau tinggal
tunjukin.
- Oh, yang ini.
Yang perlu diganti
warna ininya.
Kalau kita lihat di sini kan warnanya.
- Pokoknya itu
kan yang untung adalah
nilai kontrasnya harus
cukup tinggi biar bisa kelihatan kan.
- Coba ganti.
Coba ganti.
- Atau
kalau memungkinkan
teksi dibuat lebih terang. Cuma ini
teksi kan udah putih. Udah nggak bisa terangin lagi.
- Ini text-nya kan
ini kan
background-nya ganti.
Eh, salah.
Ganti warna lebih gelap.
- Lebih terang misalnya.
Atau lebih gelap.
Yang penting kontrasnya.
- Contohnya kelihatan di bawah.
Yang 14 bol itu. Nah.
Nah.
Tapi belum triple A.
Nah. - Nah, triple A.
Berarti ini udah aman ya.
Tapi nggak geganti ya?
Gak geganti.
Harus manual ya.
Cuma yang jelas
kita dengan gampang
di sidebar di kiri
langsung kelihatan mana.
Jadi, yang penting kan, mana aja sih
yang kontrasnya kurang.
Itu langsung dijabari.
Terus
kombinasi
warna yang bermasalah.
Itu apa yang men-trigger.
Terus bisa langsung di-highlight.
Lebih ke itunya aja sih. Terus
simple aja pakainya.
Ini pun
nggak lulus ya. - Terganggu sekali.
- Kekcilannya. Terlalu kecil ya.
- Terlalu menutup
muka si
ceweknya.
- Iya. Memang
bikin web
gallery foto itu
sangat triki ya. Karena kan
warna-kewarnaan dari
image-nya kan nggak bisa kita atur kan.
- Iya.
Harus di-overlay atau dikasih
kotak sedikit.
Ya, pokoknya itu harus terang,
fotonya gelap, gitu kan.
Itu kan tergantung kontennya atau fotonya kan.
Iya.
Apple aja baru update,
langsung itu kan nggak bisa kebaca kan.
Lagi heboh.
Gara-gara glass.
Glass-glass kaca.
- Liquid glass.
- Liquid glass. Nggak kebaca tuh notifikasinya.
Gara-gara ada foto
wallpaper yang mungkin agak terang, agak cerah
gitu kan. Terus glass-nya juga
cerah, nggak kebaca.
Iya, iya. Ini
tools-nya yang
yang mesti banyak kita
belajar dari tools-nya ini ya. Sebenarnya
udah disediakan. Cuman kadang-kadang kita nggak
ada tools seperti ini.
- Jadi di atas kan ada tool level.
Jadi level-nya itu udah kayak
itu aja. Ayam gebrek lah.
Ada level pedesnya kan.
Jadi kalau A, A itu
paling minimum, dan itu kayak
dianggap
belum masuk conformance, semuanya
belum mengikuti aturan WCAG, jadi
bahkan nggak masuk ke itu.
Kalau AA itu yang kayak standard lah.
Jadi minimum acceptable-nya
tuh AA. Biasanya kalau
aturan-aturan ini tuh, regulasi
itu minimal AA. Tapi
kalau mau yang maksimal,
yang sangat-sangat
compliant, itu ada
AA. Terus ada itu kayaknya
filter buta warna atau apa lah.
Gak pernah pake sih. - Oh yang ini ya
buat orang yang mungkin
buta warna. - Parsial.
- Parsial.
- Macam-macam variasinya. Dan itu biasa dipake
kalau, terutama
kalau warna mengkomunikasikan
makna. Jadi kayak misalnya kalau aplikasi
saham atau keuangan atau apa itu
misalnya kan
diangkanya
ya kalau misalnya naik turun kan ada car.
- Kalau bulis itu kan ijo.
- Tapi maksudnya diangkanya pun
angkanya kan ga beda terus.
Kalau dia lagi naik tuh angkanya merah.
Jadi merah ijo bisa gonta ganti kan.
Sesuai itu kan gantinya cepet ya.
Nah itu kalau misalnya
ngide pake variasi
warna merah dan ijo yang kurang jelas
buat orang-orang
varian buta warna tertentu itu malah
kayak ga kelihatan sama sekali. Jadi
maksudnya perlu di tes pake
macem-macem variasi itu.
- Oke.
Ada lagi yang mau
dibahas?
-
YouTube pastikan jangan
commit and file.
- Oh itu udah tadi, udah ya.
Gimana Ivan?
- Kita bahas sedikit lagi sebelum
kita lanjut.
Kalau misalnya
ada yang bisa dirobah dengan
modern API
atau CSS,
apa sih yang bisa dirobah dari website ini?
- Iya
- Coba apa?
- Dialog.
- Dialog.
- Carousel
sudah ada.
- Carousel.
- Carousel.
Dialognya sudah ada.
- Apa lagi ya?
- Lazy load.
- Lazy load.
- Sudah native juga
kan?
- Lazy load.
- Next.js.
- Yang misalnya kita pake Next.js,
itu dead picker.
- Ya nggak apa-apa.
Orang dead pickernya aja nggak dipake.
Gak usah pake dead picker.
- Gihapus aja udah.
- Ya sama web API yang
simple sih, yang dari dulu ada, kayak misalnya
kiri-kanan gini, ya
dikasih aja keyboard
di event listener
biar bisa navigasi.
- Bisa next previous ya.
- Itu kan bukan fitur yang modern-modern banget ya.
Dari dulu ada.
- Oh ini tadi yang pake JavaScript
terang gelap-gelap ini.
- Oh iya, animasi.
- Animasi yang ini.
Eh mana tadi?
- Ini juga animasi muka ini bisa dibikin.
- Oh itu apa?
Apa?
Scrollable event ya?
- Scroll driven animation.
- Oh scroll driven animation.
Iya, daripada kiri-kanan mendingan ke bawah
gitu, di scroll.
- Itu mah kan nggak perlu scroll driven animation sih.
Kalau yang animasi ya,
ini animasi foto sama
tanem kanan yang
pake keyframe animate
biasa aja kan ini.
- Tapi ini foto ini juga nggak jalan otomatis,
harus di-click ya.
Jadi bukan animasi kan ini aja.
Iya.
- Jadi kita kirain.
- Oh iya misalnya.
- Beter bikin slide gallery sendiri.
- Yang jadi kaktun itu.
- Kalau misalnya daripada
ini yang galerinya ini,
daripada bikin jadi
background terus dibikin ada
depannya begitu, toh orang nggak bisa menikmati
fotonya ya kan.
- Itu galerinya kanan.
- Itu polos aja, sisanya ya
gallery yang bikin gallery foto
gitu ya bagus.
Itu galerinya dua.
- Oh itu yang ini
aslinya kalau satu raw begini ya.
Ini masih kelihatan.
- Iya bagus. Tadi gue bilang, makanya
kalau pesennya dikit,
kalau pas dia ngetest data, mungkin pesennya masih dikit.
Nah pas pesennya udah banyak,
udah bingung.
- Tapi ini juga rentan
ke-click background-nya.
- Vertical sih lebih bagus.
Eh salah.
- Ini pas banget sama
tiang ini.
Jadi nggak kelihatan.
- Dikira dekorasi pasti kan.
Dan itu nggak bisa di-slide, nggak bisa di-swipe,
nggak bisa di-swipe, dan nggak bisa di-slide,
dan nggak bisa di-tap atau arrow.
- Kalau fotonya agak gelap
gini, oke.
Gambarnya oke, ini masih masuk kan.
- Itu pun kayak dekorasi kan, maksudnya bisa aja kan.
- Iya bener-bener kayak dekorasi.
Terus udah gitu di-click,
malah masuknya ke foto
pop-up.
Jadi navigasinya
bisa lebih baik lah ya.
- Iya.
- Nah ini foto yang disini sama-disini sama
sebenarnya. - Sama.
- Ada juga kan tuh, sama.
- Sama itu gallery yang sama,
tapi kayak ada dua macam UI.
- Iya, iya, iya.
- Ya kalau gitu yang kiri mas
satu foto statik aja kan.
Harusnya foto yang emang ya kayak cover
image gitu lah. Jadi maksudnya kontrasnya
juga bisa lebih diatur, bisa ditimpap
di layer yang
gradient, opacity, separo,
atau berapa lah.
- Oke, ada lagi,
ada lagi?
- Udah sih.
- Sudah cukup?
Cukup ya? - Sudah.
- Wah, ini kayaknya
ada yang ini nih,
ada yang masuk lagi, bedasitas baru nih.
Nah,
buat bedasitas berikutnya ya.
Mas Yuda terima,
Mas Yudi, Yudi.
- Nvnya tolong diumpetin,
pastiin Nvnya nggak dulu.
- Ini nggak dikasih source code,
kayaknya takut.
Kasihnya website ya,
alamat webnya aja.
Oke, kalau ada
source code-nya boleh, tapi
coba dicek lagi, jangan sampai
kayak tadi.
Udah gitu iseng lagi mencet, kirain kosong,
taunya ada isinya.
Oke.
Cukup?
Oke, cukup sekian.
Buat malam ini,
terima kasih banyak buat semuanya,
terima kasih juga Mas Grafis,
yang sudah, apa,
untuk berpartisipasi
untuk di beda.
Mudah-mudahan,
dapat banyak pelajaran ya,
buat next-nya,
untuk bikin-bikin web seperti itu,
jadi lebih
baik lagi.
Oke.
Sekian dulu untuk malam ini. Sekali lagi
terima kasih buat
apa?
Sponsor kita, Dominesia.
Jangan lupa kalau teman-teman
mau bikin website kayak tadi,
bisa hosting-nya di Dominesia
pakai promo code "Kobrolinwebdn".
- Pakai Next.js juga bisa.
Pakai Next.js kan bisa.
Tapi agak ribet ya.
Agak ribet ya, harus di-compile dulu kan.
- Kalau statik bisa.
Kalau statik sih aman.
Tapi kalau yang pakai fungsionalitas
server-side ya, gitu agak ribet.
Harus pakai apa itu?
Yang open source, open next.
- Open next.
Oke.
Sekian dulu dari kita.
Minggu depan kita akan bahas tentang
database dengan
narasumber. Jadi ditunggu aja
narasumbernya siapa, kita tunggu aja
Minggu depannya.
Itu dulu.
Apa?
Itu lagu apa?
- Lagu...
Ada lagu sekitar berapa?
5 tahun lalu atau 6 tahun lalu itu?
Oh, all about that place.
Ada all about that place,
not right place.
- Oh, dipleset kan.
Oke deh.
Sekarang, you cannot unhear that.
You cannot unhear that.
Kalau lu dengerin,
lagu itu pasti gak bisa lagi.
- Lagu apa?
Lagu apa sih? Apache.
Ternyata itu apa?
Selama ini gue mikirnya apache.
Apache.
Kan lagu apache itu?
Emang nih ya lagu apache?
Apache.
Nah itu apache.
Nah selama ini gue mikirnya apache.
Kira itu
perintah ini.
Ubuntu.
APT.
Kira apache server itu loh.
Iya apache.
Gue malah kiranya awalnya apache helikopter.
Beda lagi.
[tertawa]
Pasti skl server ya Rafki ya?
[tertawa]
Skl server.
Skl server emang sering issue ya?
Enggak lah.
Skl server bagus kan?
Supportnya.
Semua skl server sama ya.
Asal pintar ngerawatin.
Maksudnya ada plus and plus.
Tapi harus pintar ngerawat.
Yang bikin gelus dada itu adalah
kalau misalnya kita
punya mutiplikasi.
Terus somehow
indeksnya gak matching.
Itu gak matching ulangnya.
Bagus asal ada duitnya.
Semua juga gitu.
Semua juga gitu.
Oke cukup ya.
Terima kasih semuanya.
Kita ketemu lagi minggu depan.
Selamat malam. Selamat istirahat. Bye bye.
Atau mungkin telah kesekian kali melihat
untuk membandingkan kembali dengan lainnya?
Jika Anda mencari tahu mengenai
layanan web hosting terbaik, kami
pastikan Anda berada di tempat yang tepat.
Dengan Domainesia dapatkan pengalaman
menggunakan layanan hosting
yang lebih baik.
Dengan SSD berperforma tinggi dalam
infrastruktur cloud yang telah dioptimalkan
untuk kebutuhan personal maupun bisnis.
Teknologi ini memungkinkan Anda
memperoleh layanan yang lebih stabil
serta proteksi dari korupsi data.
Hosting Domainesia juga
telah mendukung Node.js, Python,
Ruby, Go, PHP, Java,
serta binary Linux.
Lebih dari 200.000 pelanggan
telah mempercayakan layanan hosting
di Domainesia, kepercayaan yang kami
jaga dengan garansi uptime 99,9%
serta garansi uang kembali 100%.
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #NgobrolinWEB! Malam ini kita membedah situs yang disubmit oleh salah satu penonton kita. Masih bersama Ivan dan Eka pastinya. Yuk mari ramaikan! 🏷 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/?promo=ngo Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
3 Mei 2023
Ngobrolin Accessibility
Aksesibilitas dibahas berangkat dari satu kekeliruan yang sering kita lakukan: menganggap pengguna kita sama seperti kit...
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
16 Apr 2025
Ngobrolin CORS & Browser Policy
Episode Ngobrolin WEB ini membahas secara mendalam tentang kebijakan keamanan browser (browser security policy) dengan f...
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 .