Bedah Situs
Ringkasan Episode
Bantu KoreksiEpisode ini melanjutkan sesi bedah situs dengan dua website institusi kesehatan yang dikirimkan lewat DomaiNesia. Situs pertama adalah Institut Kesehatan Immanuel di Bandung yang dibangun dengan Wix Studio dan dipresentasikan langsung oleh pengelolanya. Temuannya berkisar pada konsistensi: ada sembilan font berbeda dalam satu situs karena beberapa orang dari tim IT dan pemasaran sama-sama mengedit, tombol yang kadang rounded kadang kotak, bahasa yang campur Indonesia dan Inggris, video YouTube yang autoplay dan langsung memakan 55MB bandwidth, serta halaman yang butuh sembilan detik untuk selesai memuat. Situs kedua adalah website rumah sakit hasil vibe coding, dan di sini kritiknya lebih tajam karena menyangkut tujuan pengguna. Semua informasi penting — nomor telepon pendaftaran, partner asuransi, alamat — dikurung di dalam slideshow berisi gambar tanpa alt text, sehingga tidak bisa di-copy, tidak bisa diklik, tidak terbaca screen reader, dan tidak masuk indeks mesin pencari. Padahal pengunjung situs rumah sakit hampir pasti sedang butuh sesuatu, bukan sedang iseng. Ditemukan juga bug nyata: warning "Undefined variable WA Link" bocor ke HTML dan ikut membeberkan path direktori server, sehingga tombol WhatsApp hanya berfungsi di beranda. Bagian penutup menelusuri tab Coverage yang menunjukkan Font Awesome 98% tidak terpakai dan Bootstrap Icons 100% tidak terpakai, plus diskusi soal sanitasi input dan OWASP Top 10.
Poin-poin Utama
- •Situs yang diedit banyak orang butuh aturan tertulis — ukuran heading, font family, batas ukuran upload gambar — karena tanpa itu satu halaman bisa memakai sembilan font berbeda; dua sampai tiga font sudah cukup
- •Informasi penting jangan dikubur di dalam slideshow: nomor telepon berupa gambar tidak bisa di-copy, hilang saat slide berganti, dan tanpa alt text ia tak terbaca screen reader maupun mesin pencari
- •Desain bukan cuma estetika — mulailah dari tujuan pengunjung: yang membuka situs rumah sakit sedang butuh alamat, jadwal, atau kontak, jadi itulah yang harus paling mudah di-copy dan diklik
- •Warning PHP yang bocor ke HTML tidak hanya merusak fungsi (tombol WhatsApp mati di semua halaman kecuali beranda) tetapi juga membeberkan path direktori server ke publik
- •Tab Coverage di Chrome memperlihatkan berapa persen CSS/JS yang tidak terpakai per halaman — di situs ini Font Awesome 98% dan Bootstrap Icons 100% tidak terpakai, keduanya render blocking
- •Library eksternal untuk lightbox dan carousel sering tidak perlu lagi: elemen <dialog> sudah tersedia di Web API, dan carousel ringan tanpa script bisa dipelajari dari demo di chrome.dev
- •Untuk PHP vanilla tanpa ORM, sanitasi setiap input pengguna dan pakai OWASP Top 10 sebagai checklist — agent skill soal security fundamentals bisa dipasang agar coding agent ikut memeriksanya
Sampai jumpa di video selanjutnya.
Nah, downgrade, downgrade.
Oh, gak ada indinya.
Biasanya bertiga kan, semangat kan, kalo bertiga kan begini kan.
Oh, gitu.
Yang satu masih kerja soalnya.
Masih, ini, macul-macul.
Masih imitin, masih macul.
Iya, apa kabar nih, apa kabar?
Selamat malam semuanya, kabar baik-baik, mudah-mudahan ya.
Iya.
Aduh.
Sudah dati minggu biasa ini ya.
Hah, minggu biasa.
Normal ya, maksudnya, kan, kalo...
Suasana itu kan ada kayak suasana baru, suasana lebar.
Eh, habis tahun baru masih ada imlek, suasana lebaran.
Kayak suasana...
Kadang suasana biasa.
Sudah habis, sudah habis.
Januari, Februari, Maretnya udah habis gitu.
Udah minggu biasa gitu.
Iya, apa, berturut-turut sih ya.
Jadi, dihabiskan di awal tahun ya.
Udah bener-bener di awal tahun.
Tahun baru imlek lebaran.
Nyepi lah, plus nyepi kan.
Udah di awal, Januari, Februari, Maret.
Habis semuanya.
Habis.
Lihat transkrip lengkap (2473 segmen lagi)
Sekarang sudah bulan-bulan kerja.
Kerja, kerja, dan kerja, katanya.
Nggak ada lagi lebar, apa, liburan.
Liburannya sudah dihabiskan.
Budgetnya terutama ya, sudah habis.
Budgetnya sudah habis.
Nanti kayaknya bulan...
Bulan Mei kayaknya ada...
Mayday doang.
Mayday ya, Mayday doang ya.
Iya.
Oke, nah malam hari ini kembali kita...
Bedah situs lagi karena cukup banyak ya.
Ternyata yang submit lumayan banyak.
Jadi kita pecah jadi dua episode.
Minggu lalu kita ada dua.
Minggu ini, insyaallah rencananya ada dua juga.
Yang satu bisa hadir secara langsung.
Jadi pakai video.
Yang satunya lewat katanya lewat chat aja nanti.
Jadi malam ini kita akan lanjut lagi.
Tapi sebelum itu seperti biasa.
Episode ini tersrenggara berkat koloborsi kita dengan Dominicia.
Jadi buat teman-teman yang mau beli layanan hosting.
Domain juga termasuk ya, bisa di Dominicia.
Kalau mau hosting itu diskonnya 10%.
Pakai promo code ngobrolinwebdn.
Diskonnya berlakon toksik 1 atau 2 tahun.
Nah kalau yang mau beli VPS.
Bisa beli cloud VPS Turbo dari Dominicia.
Diskonnya 50% lebih gede ya.
Terus promo code nya pakai yang ini.
Ngobrolin VPSdn.
Ini promo code nya sangat ampuh.
Ampuh apa ya?
Bisa dipakai berulang-ulang.
Iya karena jarang ada promo code yang bisa dipakai berulang-ulang.
Gak perlu ganti account.
Langsung bisa dipakai.
Gak kayak antropik ya.
Antropik kenapa?
Gak bisa dipakai berulang-ulang ya?
Gak bisa dipakai berulang-ulang.
Satu katu kredit dipakai 2 account langsung kena ban.
Gak bisa ya, langsung kena ban ya.
Strict banget ya.
Ya jadi kalau punya produk ya.
Seperti mungkin minggu lalu atau teman-teman yang berkenan untuk share minggu ini.
Ada bikin website, bikin aplikasi web atau apapun.
Teman-teman bisa pakai, untuk backend nya bisa pakai VPS dari Dominicia.
Terima kasih Dominicia.
Iya saya mau coba VPS nya nanti ah.
Karena saya mau deploy aplikasi yang namanya Docploy.
Pernah dengar?
Docploy? Iya, iya.
Iya kayak...
Kaya...
Kaya...
Kulifai, doku.
Kulifai kayak doku, portainer gitu.
Kayaknya menarik mau coba ah Docploy.
Ada aplikasi yang mau saya coba.
Dia itu kan platform kan, platform as a service ya.
Jadi kita bisa punya kayak Heroku sendiri gitu ya.
Kita bisa deploy ke dalam situ kan.
Iya.
Ya benar kayak platform as a service.
Tapi kan open source ya.
Ya open source.
Open source dan mereka provide manajemen nya.
Kita bisa bayar juga ke Docploy tapi provide untuk manajemen.
Jadi kalau kita punya multiple server bisa.
Oh cloud nya, mereka support cloud nya.
Tapi cloud nya bukan untuk kita hosting.
Untuk nge-manage Docploy nya.
Kalau misalnya Docploy kita ada seribu instance.
Iya untuk nge-manage itu.
Nah saya kan mau coba di VPN nya si Domination.
Karena ada aplikasi yang mau saya deploy.
Launching, launching.
Launching, jadi mau coba ini deh.
Coba Docploy di Domination.
Ampuh enggak.
Ini saya update-update.
Oke.
Nah ini untuk situs yang pertama itu ada namanya immanuel.ac.id.
Aceh cuy.
Saya share dulu.
Minta email nya dong.
Buat ini ya.
Buat AI ya.
Immanuel.ac.id langsung buat AI ya.
Itu ada masnya di itu untuk situs ini bukan?
Iya.
Oh iya.
Jadi website nya ini immanuel.ac.id yang mau kita bahas.
Nah kebetulan yang submit juga hadir malam hari ini.
Jadi kita langsung sambut aja mas.
Sardiaman, halo.
Halo mas Sardiaman.
Panggilannya apa nih?
Halo selamat malam.
Malam.
Selamat malam.
Panggilannya Sardiaman.
Sardih.
Sardih.
Sardih.
Enggak mungkin Sardih kan.
Bebas-bebas.
Oh bebas.
Gak lah Sardih itu kan berarti Marga kan.
Betul.
Tapi mas Sardih ini berarti salah satu ini apa namanya.
Yang digadang-gadangkan sama OpenAI, Anthropik.
Karena ada AGI nya tuh.
Saragi kan AGI.
Apa tuh maksudnya.
Gak ngerti.
Di jelas.
AGI itu AI General Intelligence.
Terus hubungannya sama Saragi apa?
Kan ada AGI nya.
AGI nya.
AGI.
Lo bener.
Iya sih.
Seperti ini ya.
There is no AI in team gitu ya.
Gak ada huruf I di dalam team ya.
Team bahasa Inggris tapi kalau team bahasa Inggris ada I nya ya.
Mas Sardih gimana kabarnya?
Kabar baik-baik.
Salam kenal ini dari Bandung.
Terima kasih lah ya udah ikutan bedah website ya.
Mungkin bisa kenalan singkat dulu mungkin.
Ya boleh-boleh.
Salam kenal ini Pak Reza dan Pak Ivan ya.
Iya.
Ya jadi memang kalau cerita dari awal ya.
Sebenarnya saya udah kenal domenis itu udah cukup lama.
Mungkin ada 5 tahun lebih ya.
Cuman emang saya itu membuat software-software kecil kadang macam perusahaan-perusahaan.
Nah mereka butuh domen gitu.
Makanya per sekarang itu kalau gak salah saya itu punya domen itu ada 1, 2, 3, 4, 5, 6, 7.
7 domen yang saya punya di Domenisya.
2 yang tidak aktif.
Jadi tujuannya 2 yang tidak aktif.
Banyak, lumayan banyak yang aktif.
Bukan, total 9.
Ada 7 yang aktif.
7 yang aktif.
Domen yang paling besar itu ya ini Institut Kesehatan Manual.
Kebetulan di situ sebagai Konsultan IT.
Jadi ini yang paling besar lah.
Nah itu si, nah kemudian kemarin ada email masuk.
Ya iseng-iseng coba aja di-submit, ya.
Ternyata dipilih menjadi malam hari ini untuk pengadil.
Jadi bedasarnya itu sih untuk perkenalan sih kita domenisili di Bandung.
Kalau website ini memang, itulah Institut Kesehatan Manual.
Memang itu kampusnya ini berlokasi di area Rumah Sakiti Manual.
Kalau Bapak kenal ini lah ya Bandung, Rumah Sakiti Manual mungkin terkenal lah ya.
Nah Rumah Sakiti Manual itu punya, apa namanya, badan pendidikan.
Jadi suster-suster itu dididik di sini.
Lulusannya akan ditampung di Manual atau di Rumah Sakit-Rumah Sakit lain.
Nah kurang lebih seperti itu sih filter belakang dari saya dan website yang ini.
Yang dibuka sekarang itu.
Nah cuma memang, lanjut ke filter belakang website.
Jujur saja ini dibangunnya pakai Wix.
Nah Wix kan modenya template ya.
Ya Wix Studio.
Jadi memang enggak begitu repot karena dia udah punya template seperti WordPress juga ya.
Seperti WordPress.
Nah cuma kita jadi ibaratnya yang ini premium ya jadi buyer lah gitu, jadi tidak murni nge-develop di internal sendiri sebenarnya.
Atau kalau software atau website yang lain itu contoh ipsopbdg.com.
Ada lagi contoh dari Jambi, Bapak Pedal seperti itu.
Nah itu saya buat pakai bahasa konvensional, pakai PHP gitu.
Nah kalau yang ini memang karena memang banyak apa gaya-gayanya itu ya.
Gambar dan sebagainya itu, ah udah cari template yang gampang aja gitu.
Siapa tau nanti dari ada masukan cara yang lebih efisien untuk membangun website ya oke nih malam ini sepatu ada masukan dari dominisianya.
Berarti service dominisian yang digunakan apa aja?
Domainnya apa atau hostingnya di Wix ya?
Ya jadi untuk case yang institus kesihatan ini hanya domain yang kita pakai, servernya itu dari Wix.
Oke.
Dan beberapa aplikasi di dalamnya ini kita buat sebagai sub domain itu, ada juga yang banyaknya itu kan aplikasi ya.
Jadi contoh ada program pabrik gitu ya, program pabrik, ada program juga penjualan.
Nah hanya gimana ya bahasanya ya, database-nya itu saya simpan di server.
Jadi saya makanya selalu kalau ke dominisianya itu tolong dibukakan port 1433 untuk SQL Server.
Jadi dari dominisianya itu cuma menampung file HTML, PHP dan sebagainya.
Servernya itu ditembak.
Oh ada hostingnya juga berarti, ada hostingnya atau ada VPS-nya.
Ah ya saya pakai servernya IP Dedicated itu.
Jadi dari dominisianya itu saya minta di whitelist kan server saya gitu dengan IP ini.
Supaya bisa dibuka dari Wix gitu ya.
Ya, nah Wix juga seperti itu.
Nah ini kan si Emanuel ACID sebenarnya sub domain-nya itu banyak aplikasi untuk kampus, ada PMB.
Kalau kita buat depannya PMB.Emanuel ACID itu, dia langsung buka ke halaman PMB.
Nah itu dia database-nya itu di lokal kita.
Jadi pada sekarang itu nggak pernah pakai database di dominisianya sih, belum pernah.
Belum pernah, ya kecuali yang template-template ya, yang ini kan ada juga yang saya bangun pakai WordPress
itu database-nya akan di situ.
Cuman emang kecepatannya sih dan oke lah dominisianya.
Makanya sebelum ini kan saya juga berlangganan di provider lain ya, betahannya masih di dominisianya sih.
Oh iya mantap, mantap, kita bahas berarti ya.
Boleh, boleh kita mulai bahas ya.
Siap dikritiknya nih Pak?
Boleh, siap banget.
Hahahaha.
Siap dikritik, oke.
Wah ini console error-nya banyak sekali.
Oh iya?
Oh dari Wix-nya ya?
Wix-nya, betul.
Oh iya iya, ini berarti no-quote ya.
Kalau dari no-quote gitu agak susah dikendalikan ya, dikontrol ya.
Kalau error-error gini ya.
Bisa di iniko, bisa di...
Iya, sama satu lagi.
Kalau saya lihat dari penggunaan font-nya banyak banget font-nya.
Betul, betul.
Gini font-nya ya.
Ini, coba Mas Liza masuk ke Inspek dan ada satu, dua, tiga, empat.
Iya font-nya luar biar ini.
Lebih dari empat.
Kayaknya ada sembilan.
Iya ini Pak.
Iya banyak banget, ada droid tuh.
Ada droid, sun, alfabet, latihan.
Font-nya dimana aja, maksudnya pemakaiannya dimana ya?
Aduh, sudah susah itu kalau dia mau cek begitu.
Tapi menurut saya ini font-nya udah kayaknya banyakan.
Terlalu berlebihan.
Iya berlebihan.
Terus kalau misalnya di reload nih halaman utamanya nih Mas Liza, reload dan...
Reload?
Scroll sampai bawah.
Ya ada reload, which is good.
Di scroll sampai bawah.
Itu, apa namanya?
Di pertama si YouTube-nya otomatis jalan tuh.
Iya, YouTube-nya otomatis play ya?
Iya otomatis play, dan itu langsung memakan bandwidth 55 MB.
Bagi saya.
Kalau bisa jangan langsung auto play ya.
Kalau bisa.
Terus ada siang memberi ini kok agak berat sih memang ada yang...
Mungkin dari situ ya.
Satu berat, dua...
Kedua makan kasihan ya Pak?
Kasihan, misalnya menurut saya ases situs ini kan bisa jadi mahasiswa ya.
Masiswa kan.
Betul.
Kota nya terbatas.
Kota nya terbatas.
Jadi kasihan juga tuh mereka.
Mau baca sesuatu dari situsnya atau mau pendaftaran.
Ya sudah kehabisan.
Dua kali sudah habis 100 MB tuh habis kota nya gitu kan.
Ya, kayak gitu tuh bisa disensitifkan penggunaan kota.
Dikurangi lah dikurangi.
Diperhatikan juga.
Ini mungkin phone ini terlalu banyak mungkin karena dari platform Wixnya kali ya.
Jadi pada saat edit desain.
Terus bisa pilih phone.
Yang ini phone ini, yang ini phone ini jadi terlalu banyak.
Ini gak terkontrol ya.
Biar apilanya agak menarik ya itu yang diberubah.
Sorry itu memang berdampak ya.
Tapi jadi gak konsisten juga Mas.
Jadi gak konsisten.
Biasanya tuh satu web itu mungkin 2-3 kali ya kayak header.
Terus mungkin sub header kayak subtitle sama body.
Udah cukup 3 gitu kan.
Kalau terlalu banyak maksimal sebenarnya 3 aja menurut saya udah kebanyakan.
2 itu pas.
2 udah normal ya normalnya 2 ya.
Iya jadi jangan banyak-banyak juga.
Kalau misalkan kayak gini nih ini beda sendiri nih.
Sebelumnya headernya kayak gini kan misalkan.
Sampai di bawah kok jadi sans serif gitu kan.
Tipe phone nya pun berbeda.
Jadi kayak kurang konsisten.
Jatuhnya begitu sih.
Takutnya.
Nah ini awalnya ini sama nih mirip nih.
Sama ini mirip ya.
Tapi yang di tengah-tengah sini udah beda nih.
Jadi mungkin kalau phone nya di sana.
Terus tadi youtube nya juga auto play itu juga langsung makan bandwidth.
Calon mungkin calon student ya calon mahasiswa.
Yang mungkin dia lulusan atau baru mau lulus SMA gitu.
Yang punya bandwidth nya tidak sebanyak kita gitu ya.
Itu juga perlu diperhatikan juga.
Ini ada masukan juga nih dari mas Tohir.
Con color di banner mungkin pakai color yang lebih kontras.
Yang mana? Yang ini ya kah?
Yang si institut kesehatan ini.
Kan putih dengan putih.
Background nya langit kan.
Background nya agak putih.
Foreground nya juga putih ya.
Terus kalau itu di hover si button itu langsung transparan dan putih.
Jadi susah juga bacanya.
Iya kalau posisi tap atau layarnya lebih kecil jadi numpuk begini nih.
Numpuk dia ya.
Iya dan ini manual nya L nya turun ke bawah.
Iya N nya turun ke bawah.
Jadi bacanya bingung kita.
Ini harus banyak permain di Wix ini.
Kalau tidak kalau ada gandanya dari set mereka di ini aja pak.
Di desain ulang pakai.
Pakai yang bisa lebih di kontrol.
Bapak biasanya yang lebih fasih nya pakai apa?
Mau pakai WordPress bisa?
Mau pakai Laravel bikin sendiri bisa?
Yang mana bisa lebih fasih?
Untuk membuat template-template nya yang lebih enak gitu.
Karena kalau pakai Wix sebenarnya banyak sih yang bagus saya lihat.
Kalau di luar sana.
Kalau kembali lagi kalau fasih pakai Wix dan bisa di customize dengan bagus.
Mungkin bisa juga.
Ada masalah juga pakai Wix.
Bisa juga gitu.
Lalu, iya.
Ada ini juga kayak apa warna.
Kalau button itu kan ada button nya yang transparan putih dan ada yang biru.
Mungkin konsisten.
Terus button nya.
Mungkin yang ini diubikan hitam kayaknya lebih masuk ya.
Iya.
Terus ada button yang round it ada button yang kota.
Kalau turun lagi ada button yang kotak.
Iya.
Oh iya ini round it semua ya awalnya round it semua.
Terus ini tiba-tiba warnanya biru.
Iya.
Terus ada yang kotak.
Ada yang kotak.
Mana?
Di SISUS.
Apa jangan-jangan gak kelihatan disini?
Iya coba naik dikit.
Di mahal mengapa ikit.
Oh ini iya.
Bisa tiba-tiba kotak sendiri.
Beda sendiri hanya satu.
Yang lainnya udah round it ya.
Iya.
Ini juga accessibility nya kurang kebacaan nih pendaftarannya nih.
Ponya mungkin warnanya harus lebih gelap.
Ya harus lebih gelap atau posisinya di sedikit kemana ya.
Kayaknya warna deh.
Kayaknya warnanya.
Karena ada foto di belakangnya jadi dan warnanya agak terang.
Background nya.
Terus text nya juga terang warna birunya terang jadinya gak kebaca ya.
Agak kurang kebaca.
Kalau dari sisi performance banyak sih yang bisa diperbaiki.
Karena dari core web vital nya.
Sebenernya ok-ok aja sih.
Coba kita lihat ya.
Core web vital nya.
Iya chalice nya sih yang banyak disini.
Karena pon tadi itu.
Search screen.
Chalice itu berarti?
Cumulatively achieved.
Karena font nya custom semua ya.
Gak.
Pake swap gak?
Gak lihat sih.
Kalau dari ini kan dua detik nih kalau ini nya percentile nya.
Lumayan sih cepat juga ini nya.
Oh ini cepat ya.
Banyak ini INP nya juga sakit nih.
Karena banyak script yang ngelod kayaknya ya.
Coba lihat JS nya.
Oh banyak banget.
JS nya banyak sekali.
Gagal.
Sakit.
Dari ini kayaknya.
Gak tau ya.
Karena mungkin si Wix itu kan kecil-kecil-kecil idinya ya.
Widget-widget gitu ya.
Iya.
Jadi kalau di kombine gitu jadi sakit.
Kita coba aja kita throttling.
Kita analisis.
Kita record.
Dantingin loh.
WAPR nya banyak nih pak.
Pertama mobil responsive.
Terus kedua konsistensi.
Saya sih minta misalnya kalau ada bantuan anak mahasiswa nya yang bisa desain.
Gak ada institut kesehatan.
Gak ada.
Gak ada ya.
Gak ada.
Kan ada yang seni.
Ini manager yang kebayang rumah sakit.
Gak pegang komputer itu susah nya.
Tidak mesti kan.
Gak ada.
Iya nih banyak banget nih scriptnya.
Terus CSS nya sih sedikit ya.
CSS nya pada di ini sih.
Kalau CSS dia saya lihat sih di inline semua nih.
Inline semua ya.
Ini kan phone.
Terus CSS nya di inline.
Ini disini di inline semua.
Makanya jadi nggak apa namanya.
CLS nya bisa serasa pekat.
Tapi sebenarnya nggak blocking.
Tidak juga.
Ya nggak ada yang blocking.
Karena dari Wix nya sudah dibikin begitu.
Tapi dia pakai React nih.
Iya.
Iya Wix memang pakai React.
Makanya banyak banget nih CSS nya.
Apa ya?
Menu, menu, menu.
Banyak kok menu yang sudah lebih modern.
Maksudnya jangan pakai warna biru begini.
Dibikin yang lebih modern aja sih.
Ya itu susah banget mencari.
Enak di mata itu.
Kayak kaku banget itu.
Tampilan seperti itu.
Sebenarnya di dunia AI sekarang sudah tinggal bisa disuruh sih Pak.
Untuk bikin.
Ini kok dia nggak ngelot-ngelot ya?
Tadi saya tadi mana ya?
Fokus ke sehatan.
Nah ini contohnya nih.
Kalau saya diamin dia nggak ngelot.
Ada apa ini?
Ini skeletor nya.
Iya.
Karena dia benar gambarnya lumayan banyak.
Dan gede juga ukurannya besar.
Iya.
Kemarin kita pakai foto studio.
Kayaknya lumayan besar sih gambar-gambarnya itu.
Dikompres dulu.
Dikompres dulu jangan semuanya langsung di upload.
Lapan detik.
Coba ya saya diamin ya.
Belum, belum.
Selesai.
Adalah malam ya.
Gimana kok siap?
Tuh, sembilan detik.
Halaman ini ya.
Iya.
Itu mana Eka-Eka?
Udah datang deh.
Oh ya Eka sudah datang.
Hai Eka.
Maaf, maaf.
Udah selesai kerjanya.
Selesai dong.
Yakin selesai.
Selesai, selesai nggak.
Selesai kumpulkan.
Apa nih?
Ini lagi bodak situs immanuel.ac.id.
Bodak situs immanuel.ac.id.
Ada satu yang saya mau.
Kritik plus complain.
Ini kan sudah bagus-bagus.ac.id ya.
Di bawah emailnya itu masih yahu.co.id pak.
Bagus-bagus.ac.id.
Masih ada ya emailnya.
Sayang banget.
Tuh.
Yahu tuh.
Bagus-bagus.
Kalau nggak mau pakai.ac.id.
Kasih saya aja.
Seneng saya kalau kasih.ac.id.
Baru tahu.
Lewat itu berarti.
Ini kayaknya email
Ea-Ea-san ya berarti ya.
Nggak ada portal Ea-Ea-san.
Ada portal kampus ada.
Jpt, GKAP.
Iya.
Kalau Jpt itu Ea-Ea-san ya.
Ya bagus-bagus.ac.id.
Iya.
Lebih apa ya.
Lebih meyakinkan daripada email gratisan.
Bagus-bagus.
Sayang kalau nggak.
Iya.
Nah sama gambar-gambar
yang bergerak-gerak ini lho pak.
Ini video bukan?
Iya video.
Ini video.
Ini slideshow kan.
Slideshow.
Iya video.
No ini kayak wow ini.
Wow Wix video.
SPG.
Kok SPG?
Kok SPG ininya ikonnya sorry.
Ini wow image tapi.
Oh kayak karusel ya model karusel gitu ya.
Tapi video juga.
Ada videonya.
Oh ada videonya.
Oh video.
Ini yang apa?
Yang ngutak-atik Wixnya
ini dari.
Ini video.
Yang ngutak-atik Wixnya itu dari Mas Hardy-nya sendiri
atau dari pihak
kampus juga ikutan?
Iya ada juga. Saya punya
rekanan juga di bagian IT yang
takut-tampur lah.
Ada dari pemasaran juga itu yang
ngepost.
Jadi ada dari
dari tim lain.
Jadi masukin image gitu ya.
Nambahin
nambahin section apa gitu ya.
Oh pantesan jadi
jadi apa namanya.
Nggak seragam.
Kayak tadi font
contohnya ya.
Padahal sebenarnya
menurut saya secara
pewarnaan tuh
yang di halaman depan
itu udah cukup bagus tuh. Ada warna biru
sesuai sama jazz
alma maternya. Nah itu yang promo glombang satu
tuh warnanya tuh udah
kecok gitu. Sama warna
alma maternya udah ada.
Terus tiba-tiba
pas liat menu
warnanya jadi warna
cyan, warna biru
apa ya.
Jadi nggak nyambung gitu.
Sian-sian.
Ini biru ini salah ini.
Kalau pakai biru ini kan
lebih cakep kayaknya ya.
Nggak tahu ya itu masalah desain sih.
Saya juga nggak bisa desain sih ya.
Sama font-size juga nih.
Kalau di sini kan daftar sekarang
kan besar nih.
Di sini kecil.
Ya.
Sebenarnya bikin konsisten
lebih gampang. Lebih gampang
nggak sih sebenarnya pendapat
Mas Liza Salamun. Harus dibikin aturannya.
Harus dibikin aturannya. Misalkan
header level 1 berapa pixel
header level 2 font-nya apa
berapa pixel.
Sistem ya.
Ya font untuk
button itu berapa pixel
atau berapa rem
atau font
font family-nya apa.
Jadi ketika ada yang mengubah
dia ngikutin.
Mungkin perlu dibikin
standar aja kalau buat rame-rame sih.
Misalkan
untuk upload image itu
maksimum
size-nya berapa.
Karena kan dari weeks-nya kan nggak dibatasi kan.
Mau upload
image 12 megapixel juga
cuek aja gitu kan.
Nah dari kitanya yang harus membatasi
takutnya terlalu besar
nggak guna.
Karena orang yang buka
juga nggak perlu terlalu besar juga kan.
Layarnya cuma seberapa gitu.
Setelah lagi targetnya calon mahasiswa.
Sama
non-technis nih satu hal.
Konsistensi bahasa.
Konsistensi bahasa.
Kan kita udah bagus-bagus nih
bahasa Indonesia masih ada home.
Ada bahasa Inggris ya.
Ada
learn more.
Dan ini kotak lagi harusnya.
Terus what's new.
Raki saya lihat ada tetap update.
Oh kalau update oke lah masih bisa
terima. Tapi yang ini
padanan-nya ada
di Indonesia yang sudah diterima misalnya.
Dapatkan kabar terbaru gitu kan.
Baca selanjutnya
atau selanjutnya sudah lebih diterima kan.
Sebenarnya nggak perlu pakai.
Kalau home bisa jadi dasbor
atau beranda.
Beranda udah diterima.
Iya sih bener-bener.
Bahasanya
campur-campur gaul.
Gini aja.
Iya.
Saran saya sih gini aja.
Pakai AI aja.
Tolong buka website ini.
Terus coba improve
atau perbaiki gitu.
Apa aja yang perlu diperbaiki.
Ada Wix MCP kan.
Wix ada ya.
Ada Wix ada MCP malah.
Ya maksudnya kan
sekarang pakai Wix ya.
Bukan.
Bukan maksudnya
di Wix kan sudah ada nih. Wix Studio sudah ada
MCP server-nya nih.
Ya kan. Mungkin bisa
dipadankan dengan Jemayah Jemayah.
Ada ya?
Harusnya ada.
Iya dikonekin ke Jemayah Jemayah.
Dikonekin ke Jemayah Jemayah.
Dan suruh bikin
konsisten.
Mungkin lebih. Oh bisa ya?
Bisa.
Sekarang udah canggih.
Nah ini
dengan AI Cloud Assistant
bahkan
misalnya kita yang atur AI yang
suruh bikin konsisten dia malah lebih
ini kali. Lebih teliti
kerjaannya daripada kita.
Lebih teliti.
Kalau kita tahu apa yang kita suruh ya.
Dia lah kan lebih teliti dari kita.
Iya.
Kenapa kita buat MCP?
Ya mungkin kalau MCP terlalu
jauh levelnya ya itu
tadi aja pake Gemini atau
CGBT. Tolong
bikin ini lebih
konsisten, improvement
dan lain-lain nanti yang ngebah kita sendiri.
Yang penting kan tahu
apa namanya. Tadi kan udah kita
sarankan juga kan, pewarnaannya
font-nya, terus
image-nya,
terus bahasanya
nah itu aja yang
coba diminta
ke AI untuk
saran.
Iya.
Terus mintalah anak mahasiswa
bikin cutting-nya
lebih oke ini.
Kalau gak salah pake Gemini juga sudah bisa
ini loh Pak, kalau misalnya kasih foto
suruh. Daripada dibikin
yang putih mungkin ya mungkin aja
satu gambar yang lebih
full.
Dan si Iwi ini gak usah gede banget.
Kok fotonya lebih
bagus foto mahasiswanya dari
pacar rektornya ya?
Ini ya. Foto mahasiswanya bagus-bagus
loh. Ini professional.
Professional ya, rektornya gak
photo professional gitu.
Ya betul. Nah jadi project
aja Pak, semua dosen harus di
foto studio.
Yang bagus kali ya.
Dosen, Tendi, semua foto studio itu
project.
Ini rektor gak?
Ya termasuk, termasuk.
Cuma ini jelas dikat.
Gambarnya kurang ya.
Karena rektornya masih baru, jadi
diluar rektor itu memang foto studio semua.
Oh belum ada.
Pak Hati, suruh dia foto studio.
Yang bagus.
Kalau gak dipotong-potong gini jadi
sayang Pak. Yang lain di atas ini udah
bagus.
Iya udah bagus kan.
Secara pewarnaan juga udah
bagus, di atas udah cocok.
Tiba-tiba ke bawah.
Plain gitu. Begitu sambutan rektornya
plain, putih gitu.
Nah ini yang di bawah malah bagus ya.
Ya ini foto studio
yang ini.
Kasihan banget rektornya
gak diajak ke studio.
Bawa ke itu
studio-nya, Darwis Triadi
kan di Bandung tuh.
Ada kan?
Iya, iya bener.
Kan saya pernah foto studio
di sana.
Lumayan lah.
Karena memang saya kan
kalau apa
nilai artistik
saya itu kecil ya. Karena kan saya lebih
di IT develop gitu.
Kalau ada masukkan, oh ini harus gini
waranya gini itu
lebih gampang buatnya
dibanding kalau, ayo bagaimana cara membuat
cantik. Nah itu paling saya biu tuh.
Karena saya di sisi ini
sama programmer ya.
Tarik seni
aja salah satu mahasiswa.
Kalau gak, enak kan itu.
Tarik aja satu mahasiswa yang
mahasiswa seni
atau mahasiswa IT yang
front end, yang punya
jiwa seni lah ya. Atau anak
ini ya desain
apa? Decafe.
Decafe.
Tim IT-nya ada gak? Tim IT-nya?
Ada.
Ini konsepnya termasuk dari
marketing sebenernya.
Tim IT-nya, ya
orang marketing juga harusnya
ini kan.
Kita lebih banyak mengerti lah.
Cari Decafe
karena Decafe design komunikasi visual
di Bandung.
Duduk sama-sama, ayo kita
perbaiki situs ini.
Saya yakin seminggu
kalau dikerjain manual
kelar.
Seminggu.
Satu-satu ya. Perpek.
Orang kan kadang asumsi
desain itu cuma perkara
apa? Estetika visual,
perkara warna apa yang bagus.
Ya kalau itu kan sekarang bisa tanya AI ya.
Tapi yang penting itu kan
selain di luar itu
desain itu kayak UI, kan ada UX
kan, user experience.
Ini mungkin perlu
apa ya? Survey
atau mungkin explore
user journey sih.
Kayak target
audience-nya situs ini. Siapa sih?
Terus apa sih yang penting untuk mereka
misalnya mereka pengen lihat slideshow
animasi foto-foto
mahasiswa di halaman
home atau enggak. Mungkin misalnya
setelah di survey
mereka target audience-nya
lebih, ngerasa lebih
penting untuk lihat jadwal
misalnya jadwal pendaftaran atau apa
mungkin itu bisa dibuat lebih prominent kan
karena slideshow apa tadi
animasi-animasi foto
mahasiswa di studio, itu kan
berat banget ya. Maksudnya makan
source, makan data yang banyak
waktu loading-nya juga banyak
nah itu mungkin, ya bukan
nggak boleh, tapi prioritasnya kan
mungkin bisa diturunkan karena
mending bang target audience-nya
mungkin lebih penting misalnya
liat tabel mendaftaran
atau lokasi mendaftaran atau apa lah
atau link WhatsApp untuk mendaftar.
Nah itu bisa di apa
prioritasnya bisa
dibuat lebih prominent dan
lebih di atas. Itu kan bagian dari
desain juga, maksudnya itu bagian dari
desain UI dan UX yang
bukan cuma karafon-nya apa
atau warnanya apa.
Kalau ini malah heading-nya
bagus yang di situ-situ. Kalau
ini heading ini dipindahin kesana, saya
malah lebih. Oh ini pendaftaran.
Lebih jelas ya.
Ini lebih
secara. Ini pendaftaran berarti
service lain ya.
Service lain. Siakcloud.com
Siakcloud.com ya.
Secara
font dan segala macem lebih
asyik. Apapun beda service sama inline atau
header-nya.
Beda hosting ini
dari setelah itu ada
klien.
Iya, maksudnya secara
desain, nggak perlu pusing-pusing
nyari, dibikin
kayak gini, atas dan
seragam, udah cakep.
Seragam.
Bisa dibikin gini,
juga cakep sebenarnya.
Contohnya misalkan ini,
di atas ini portal pendaftaran masyarakat baru
kan putih, terus background
fotonya itu ada gradasi
hitam kan. Kalau
yang di depan tadi kan
nggak ada gradasi,
warnanya agak terang, terus
Insitut Kesehatan Immanuelnya terang juga.
Text-nya putih,
font family-nya juga
nisan serif ya.
Kalau yang ini kan agak tebal ya, ada
bold gitu kan, jadi lebih
kebaca, dan background-nya agak
digelapkan. Nah, itu dibikin
seragam lah.
Intinya itu, font-nya
seragam, pewarnaannya seragam,
itu udah kayaknya
sudah cukup improve
kalau dibikin seragam.
Jadi nggak kayak kita buka
website lain, walaupun
sebenarnya memang ini service yang berbeda ya,
antara pendaftaran sama
halaman utama gitu.
Jadi kalau bisa dibuat seragam,
seolah-olah
satu halaman website yang sama,
itu akan jauh lebih baik sih.
Iya.
Oke.
Mungkin dari
Mas Hadrinya ada yang mau ditanyakan?
Terima kasih nih untuk
masukan-masukannya, cuman
di luar itu
mungkin, ini kan kita kembangkan
pakai Wix ya, mungkin dari
rekan-rekan di sini,
ada masukan
yang mungkin lebih
menunjang, stabil ya
PSNC dan tadi itu, tadi ada
dari WordPress.
WordPress misalnya ya.
Sebelumnya kita pakai WordPress, waktu kita
masih sekolah tinggi.
Cuman memang yang
gratis hari itu.
Jadi tidak bisa.
Di Dominesia, di hosting aja
pakai WordPress.
Maksudnya pakai
WordPress di Dominesia.
Di Dominesia.
Iya, otomatis kan ada installernya
udah tinggal klik next, next, next aja.
Dan WordPress itu kan
juga sudah full side editing juga.
Udah kayak Wix, kalau bisa dibilang.
Jadi bisa pelajari WordPress yang baru.
Lebih bisa kita kendalikan ya, lebih bisa kita
kontrol ya. Iya, bisa kita kontrol
dan dia sudah full side editing.
Udah bisa pakai
blogs dan segala macem.
Jadi cobalah, WordPress yang baru itu udah
keren ya.
Ada yang saya pakai itu dari Dominesia
yang baru
beberapa bulan lalu itu.
Kalau boleh di lirik dah sebentar,
ptbachtrametalindo.com
ptbachtrametalindo.com
Jadi saya punya banyak
dari Dominesia ini.
Langganan kenap.
Langganan ya.
Iya, sama satu lagi mungkin
kalau di Wix kan
kita nggak tahu ya, dia
CDN hostingnya itu
mungkin paling dekat mungkin Singapura ya.
Mungkin ya, saya nggak tahu apa ada di Indonesia
atau nggak. Tapi kalau misalkan
menggunakan WordPress atau menggunakan
servicenya Dominesia kan lebih
Indonesia kan. Jadi lebih cepat
sih, latensinya
lebih cepat dibandingkan Wix itu sendiri.
Oke, kita
cukup dulu kali ya, kita harus bahas
satu lagi soalnya.
Iya, kita ada satu lagi.
Terima kasih banyak
ya, soalnya sudah berpartisipasi
Pak Sardi.
Nanti
kabar-kabarin kita kalau sudah
selesai yang baru,
biar kita bisa lihat lagi.
Oke, oke.
Sampai ketemu lagi.
Thank you, sampai ketemu Pak Sardi.
Terima kasih, saya izinkan lip ya.
Iya, makasih.
Terima kasih semua.
Terima kasih.
Oke.
Oke.
Selamat datang
Eka.
Ini Eka yang punya website yang baru
nih, yang satu lagi ya.
Apa nih?
Oke.
Oke, sekarang kita masuk ke
website yang kedua.
Oh belum ya, nanya Eka dulu ya.
Kita interview Eka dulu ya.
Kenapa?
Jadi Eka
meeting sama siapa?
Lo, kok jadi
ada deh.
Kok jadi ini?
Jadi possessif.
Jadi possessif.
Padahal mau cari
topik basa-basi sebenarnya.
Koordinasi pembukaan
Selat Hormuz ini.
Waduh.
Kok ngeri amat.
Oke, daripada semakin
awkward ya, kita langsung aja ke website
yang kedua kayaknya.
Andeskanya udah ada nih
di chat ya hidup webcoding.
Ini bikinnya pakein webcoding.
Ini website kedua ini adalah
website rumah sakit ya.
Rumah sakit.
Waktu kita memilih
kita memilih beda website itu
memang sengaja kita ambil kayak
yang kreatif, terus ada
kesehatan dan
apa namanya?
Institut ya, kayak gitu ya.
Yang reform-form.
Institusi, pendidikan
sama ada kesehatan ya ini ya.
Oh iya. Ivan kan istrinya
dokter ya.
Saya punya pertanyaan.
Apakah website rumah sakit
itu template-nya kayak gini ya.
Warnanya hijau.
Terus on-nya
bulet-bulet gini.
Kayak stereotypical banget.
Emang iya ya? Atau enggak ya?
Mungkin hijau itu
identik dengan medis.
Kayak katanya kan ada
psikologi warna kalau merah
itu bikin lapar.
Katanya jadi banyak kan restor yang...
Orange ya, orange bikin lapar.
Karena itu bikin lapar, makanya banyak
restor atau rumah makan yang brandingnya
merah. Katanya biru.
Menambahkan rasa percaya.
Jadi banyak bang yang
brandingnya biru.
Saya lihat rumah sakit
di tempat istri
saya bekerja warnanya biru.
Oh iya kan biru, ini biru, ada
hijau, enggak ya?
Oh ada sih, ada hijaunya sih.
Oh enggak ada hijau.
Kalau ini brandingnya hijau sama biru.
R-S-I-A, R-S-I-A.
Oh iya benar-benar.
Cuma jarang rumah sakit yang merah ya.
Nanti jadi lapar.
Yang bikin.
Andesnya ini tuh.
Nggak bisa muncul di video
tapi dia ada di chat.
Kenapa tuh kira-kira? Oh template-nya
tergantung orangnya. Ada permintaan dari
mereka-nya ya? Warnanya seperti ini,
phone-nya seperti ini, atau gimana.
Atau ini hasil
vibe coding, gara-gara
vibe coding jadi warna ini?
Enggak kan ya? Kalau
vibe coding biasanya ungu dia.
Bisa jadi ungu.
Begitu buka website ini.
Begitu buka website ini
saya langsung
apa namanya? Langsung
pengen komplain. Boleh gak sih?
Nanti.
Complain?
Enggak tuh, dijawab enggak.
Enggak boleh. Oh enggak ya?
Oke-oke. Iya enggak boleh, enggak usah.
Enggak jadi komplain saya. Ini jawaban
untuk pertanyaan siapa?
Tadi kan saya nanya juga nih.
Apakah ini template
atau hasil dari
vibe coding? Terus apakah boleh
dikritik atau enggak?
Kalau enggak boleh dikritik, terus kita harus ngapain nih?
Oke.
Yang pertama, yang non-technis.
Turun dikit.
Bootstrap, oke.
Turun dikit.
Nah yang di dokter-dokternya.
Oh yang dokternya.
Pertama, OBGYN itu
enggak pakai S, enggak pakai OBS.
Bukan OBGYN.
OBGYN.
Ini OBGYN semua.
Ini OBGYN semua.
Iya.
Jadi OBGYN itu
enggak pakai S.
Ya, OBGYN itu enggak pakai S.
Terus...
Bagi
orang yang umum baca ini, itu
dokter Anissa-nya itu dalem.
Apa sih dalem? Gitu.
Kalau saya sih tahu itu penyakit dalem, karena
dari SPPD.
Tapi dalem gitu.
Dalem itu ternyata saya gitu ya.
Dalem.
Nah itu...
Iya, dalem.
Dalem.
Mungkin dokter Anissa-nya
orang Jawa dan Sopan.
Orang Jawa ya?
Iya, OBGYN itu enggak pakai S.
Orang UI.
Dokter Anissa-nya orang UI.
Bisa jadi sih.
Bagi nyajar dong.
Mana dia? Kok hilang?
Maaf, terlalu...
Lanjut, lanjut, lanjut.
Performance dong.
Performance.
Tuh, masih mau ini dulu, non-technis.
Oh, iya, iya.
Non-technis, non-technis. Silahkan, silahkan.
Ininya...
Kayak link paling atas.
Yang paling atas itu yang untuk alamat
dan segala macemnya itu.
Itu dibikin link.
Dibikin link disitu tuh.
Kalau di hover tuh ada link gitu.
Oh iya, jadi satu link penuh ya.
Ya enggak masalah.
Tapi enggak jelas gitu.
Itu link itu buat apa gitu.
Jadi...
Kita enggak bisa kopi.
Enggak kemana-mana juga.
Cari maps, enggak bisa, iya.
Dibuat intro juga enggak bisa diklik.
Dan itu kan jadi...
Koding sisaan orang
itunya cuma hash doang.
Iya.
Dan itu kan jadinya klikable.
Dan kalau misalnya untuk...
Harapan palsu ya.
Tidak semantik, tidak semantik.
Alat-alat buat
Accessibility.
Kan itu kan bakal jadi turun ke situ.
Nanti dia...
Fungsinya apa juga.
Nggak ada ini juga kan.
Alternative text-nya.
Ada fungsinya, iya.
Harapan palsu kita bisa diklik.
Tau nya diklik, enggak usah ngapain-ngapain.
Tidak terjadi apa-apa.
Justru nomor teleponnya.
Source-nya.
Di sebelah kanan itu yang di...
Di sebelah kanan...
Gak bisa diklik.
Gak bisa diklik.
Ikonnya bisa diklik, ikonnya doang.
Nomor teleponnya enggak.
Jadi, rencana mau dibuat text berjalan.
Marky, jangan.
Jangan, jangan.
Jangan, jangan.
Jangan.
Reduce, konsep sekarang itu
Reduce Motion, ini saja saya...
Saya enggak consent.
Consent itu bukan konsentrasi ya.
Iya.
Consentnya saya itu bukan konsentrasi ya.
Tapi, consent apa? Consent bahasa Indonesia apa ya?
Consent.
Consent.
Consent.
Consent sus.
Consent itu kayak...
Bersedia ke tersediaan.
Oh, consent.
Bersedia, iya.
Cookie content.
Cookie content, iya.
Ya.
Intinya saya enggak...
Saya begitu buka website ini aja enggak
consent, kalau ini harus berjalan.
Tiba-tiba dia jalan sendiri, slidernya.
Ya, terus lagi-lagi.
Nggak rela.
Tujuan ya.
Kenapa sih ada website rumah sakit?
Kan target audiensi siapa?
Siapa yang kira-kira buka
website rumah sakit?
Kemungkinan nih bukan orang yang
cuma iseng-iseng aja.
Buat hiburan,
buka website rumah sakit, kemungkinan enggak kan?
Kemungkinan ada orang yang punya
kebutuhan medis tertentu.
Bayarin dong.
Udah lagi sakit, atau maksudnya
udah lagi mau melahirkan, atau apa, butuh alamat.
Alamatnya jalan.
Pusing-pusing.
Alamatnya jalan.
Textnya jalan gitu ya.
Nggak, maksudnya jadi ini bukan
perkara visual biar indah atau apa,
tapi harus mempermudah
user mencapai tujuan
tertentu. Dimana kalau disini kan kalau alamat
berarti harus gampang misalnya
di KOPAS, misalnya ya.
KOPAS ya.
Gampang di-copy karena mungkin kan
orang komunikasi lewat WhatsApp
atau apalah, alamatnya mana nih?
Kita harus bisa dengan cepat
meng-copy. Atau mungkin ada link
dalam kurung Google Maps dikasih underline
yang jelas. Jadi orang bisa
nge-click Maps ya, atau Apple Maps
atau Maps apapun itu.
Ya, pokoknya ini semua
harus dikembaliin ke tujuannya kan.
Si user-nya itu dibuat
dengan mudah mencapai tujuan.
Nah, terus sebenarnya background-nya
hijau muda, text-nya putih,
itu kalian bisa baca gak sih?
Terlalu...
Kurang ini ya, kurang...
Kontrasnya kurangnya.
Ini seberapa kontrasnya?
Masuk sih. 2,5
Tapi masih bisa lebih baik ya?
Jelas, itu ada warning-nya
2,55
Oh, harusnya 4 ya.
Minimal 4,5.
Kira ini itu, disebelah kirinya
soalnya hijau, text-nya enggak ya?
Karena text-nya warna hijau ya?
Salah.
Ini kan ada
hitungan algoritma, kontrasnya
2,55, patokannya
4,5, tapi
bahkan di luar hitungan itupun
kasat mata pun, ya apa?
Sulit dibaca kan?
Apalagi misalnya, kalau kita bukanya
kita bukan di luar ruangan
siang-siang, maksudnya ada
gelayarumah terhari, ya itu
itu jamin sulit dibaca.
Iya, benar-benar.
Informasi pendaftaran
0,8 sekian-sekian, tapi itu
isinya image semua.
Saya tuh paling, misalnya
kalau lagi mau cepet-cepet
ya, "Wih ada nomor telfon."
Ya elah, gue harus bolak-balik
0,8,2,3, gak bisa di-copy.
Mana informasi pendaftaran?
Yang di-slider, makanya ilang kan, udah.
Oh, slide show itu
image, itu gak ada yang
elemen dulu.
Pertama aja sudah slide show.
Bayangin, Mas Liza lagi mau
catat nomor telfonnya,
mau pendaftaran, 0,8,2,3,
kembali lagi ke tab yang
tadi, lah itu tadi
slide show, ya elah, harus di geser-geser
lagi slide show-nya.
Untuk dapet kayak nomor telfon.
Betul, minimal
kalau slide show, harus
ada cara untuk pause,
berhenti. Minimal ya,
kalau tetap mau slide show,
akan ada pause.
Sebenernya itu kan
di tenas juga ada
navigasi dot-nya ya.
Tiba-tiba ilang.
Tiba-tiba ilang.
Mereka tau gak cara
ngebalikin ke slide semula?
Maksudnya itu, coba aja
user testing beberapa target audience-nya.
Si ini ya,
si bagian slider ini,
itu
selalu always full width.
Jadi kalau misalnya ini di mobile,
coba aja, itu
si tulisannya
di banner itu jadi kecil
banget.
Karena dia menyesuaikan
image-nya ini ya.
Image-nya untuk desktop.
Kalau
kalau mobile, panahnya
ilang. Coba deh, tanya user
awam manapun, ngerti gak caranya
balikin ke slide show?
Gak kelihatan.
Kalau seukuransi ini,
gak kelihatan karena image.
image-nya responsif
sebenernya bagus. Cuman
dalam hal ini, karena ada text,
jadi menyebabkan, jadi
gak kelihatan. Kalau yang bukanya
di mobile.
Jadi, perlu
dicari tau juga,
perlu dicari tau juga
berapa banyak user
yang membuka di mobile,
berapa banyak yang di desktop.
Karena ini kayaknya dioptimas untuk desktop ya.
Sama tadi
ini mungkin karena
faktor template ya, karena
faktor template itu bahasanya jadi
sama kayak yang sebelumnya.
Gak konsisten, ini bahasa Inggris,
ini bahasa Inggris, sementara ini
beranda, layanan udah bagus nih, bahasa
Indonesia. Tiba-tiba disini bahasa Inggris.
Ini bahasa Inggris.
Terus mencapaian bahasa
Indonesia lagi. Dua hari ini
bahasa Indonesia lagi. Gak konsisten
ya.
Kalau bisa dibuat konsisten kayak quick links,
nah ini kayaknya template ya.
Yang paling fatal sih
itu sih tetap, kalau menurut
gue slide show
di atas ini, karena semua informasi
penting, itu di slide show
ini. Tapi ya itu
udah pakai image, nanti mungkin
event bakal seperti biasa, performance
audit ya. Ini tadi
gue iseng buka di HP,
emang paket data
lagi mungkin kena
troto atau apa. Lambat
banget. Karena slide show itu kan emang
berat ya. Terus
itu tadi image-nya
ini kan resolusi. - Image-nya di load semua.
- Text. Text-nya jadi
kecil banget. Terus yang tadi
alamat-alamat semua nggak ada yang bisa
dikopas, nggak ada yang bisa diklik,
dibaca pun sulit, terus
loading-nya jadi lambat banget. Padahal kan
ini yang di atas ini informasi yang paling
penting ya, istilahnya above the fold.
Jadi yang paling
maksudnya di luar, kalau perkara
apa, konsistensi bahasa
atau penulisan obscene atau
apa, itu kan yang nyadar
mungkin orang diperiksa aja. Nah
kalau yang informasi
penting di slide show di atas,
di slider di atas
itu yang paling fatal sih.
Alt text-nya juga kosong. Jadi
dari segi
SEO, search engine, crawling,
semua info yang di atas ini
nggak bakal masuk, nggak bakal
terroll ke search engine.
- Yes.
- Terus ini dong
non-technis lagi, coba masuk ke
yang tadi
ke bagian dokter.
Terus liat
semua dokter kami.
- Oh, ya sebentar. Ini
hover juga warnanya
agak
susah dibaca jadinya ya.
- Iya.
Ada yang aneh disini, karena
kalau saya lihat dokternya itu cuma ada
beberapa ya.
Hanya ada 9.
Ya kan?
Terus buat apa ada search
disitu?
- Kalau dokternya nambah mungkin.
- Ya benar juga ya.
- Ya nanti aja baru ditambahin.
- Kontrol F aja,
kontrol F udah bisa kan.
Di satu hal aman kan.
- Kalau di mobile juga sebenarnya
bisa kan.
- Iya benar.
Ini kayaknya dari template ya.
Mendingan di-hide aja atau di hilangin.
Sayang banget.
- Dan kalau di klik itu
liat jadwal.
Kalau di klik liat jadwal.
Gak keliatan kan.
- Oh iya ini juga nih.
- Iya.
Satu informasinya polyklinik
sama semua. Polyklinik,
kandungan, kandungan, kandungan, kandungan.
Ya buat apa? Mendingan di hilangin aja gitu.
- Mendingan di hilangin aja ya? Yang kanan ini ya?
- Iya. Jadi satu polyklinik, kandungan
di hari sekian.
Jadinya kan lebih
rehabilitator daripada
rehabilitatif.
Sombolnya permintaan manajemen.
- Oh.
Nah itu sulit itu.
- Buat apa ya? - Itu kita, kita
saya berapa banyak klien yang bilang
saya mau begini, saya argue,
saya push back.
Karena saya yang lebih tahu.
Jadi secara...
- Dapat di satu ya benar.
Tapi gak guna buat apa gitu.
- Kalau ini ya, kalau argue
kita harus argue sih.
Maksudnya untuk
memudahkan user. - Argut secara sehat ya.
- Kalau ini malah memper sulit ya.
- Lalu itu
di atas ada
apa namanya? Di bagian tim
itu. Kelihatan gak di situ
ada breadcrumb?
- Ini ya, breadcrumb ya.
- Iya.
- Breadcrumbnya gak kelihatan karena...
- Ya karena background.
- Jadi background.
Background image.
Ini biasanya ya,
kalau pengalaman saya biasanya
dari template nya itu udah bagus karena
background nya disesuaikan.
- Background nya udah di-edit.
- Disesuaikan mungkin lebih gelap.
- Ada gradasinya, ada layer.
Ada layer warna gelap.
- Iya. Begitu kita masukin
foto kita atau foto kita ya,
foto dari kita sendiri tiba-tiba jadi
kurang harmonis gitu.
Karena kan ini
kebetulan
orang-orangnya pada pakai baju
biru tiba-tiba tulisan home nya
warna hijau dan warna putih.
Dan semuanya agak
kurang kebaca jadinya.
Mungkin bisa ditambahin gradasi ya.
Bisa gak sih?
- Bisa.
Kalau saya...
- Kalau saya malah
taruh aja di bagian yang putih
biar sekali yang rapi.
- Di bawah ya?
- Iya.
- Search bar nya diganti,
taruh yang sekarang ada
search bar.
- Saran saya,
saran saya
gak usah pakai foto. Kenapa?
Percuma mukanya ketutupan juga
gak kelihatan orangnya, kasihan.
- Permintaan manajemen juga kali
jangan-jangan.
- Oh kalau gak ini, tim dokternya di atas.
Gak menutupi muka-mukanya ini.
Sayang banget
udah foto bagus-bagus tuh
bergaya-gaya gini, terus gak kelihatan
muka. - Kasihan yang di tengah sih.
Yang di tengah mukanya ketutupan semua apalagi
pinggir-pinggir tuh enak
mungkin jabatannya udah lebih tinggi
yang di kiri sama kanan.
- Ya mungkin harus dicari
jalan tengah lah ya.
Antara dinaikin ke atas
atau tim dokternya taruh
di bawah sini sebagai pengganti ini
atau kalau ini mau tetap ada
dipindahin ke kanan misalkan
ya gitu lah ya.
- Oh kalau
memberikan argumentasi untuk
search saya bisa tambahkan
alasan yang kemungkinan
akan diterima.
Kalau pakai search, itu bikin berat server.
Nanti harganya mahal
pasti mau di take out lah.
- Emang bayar servernya
pake AWS atau GCP
yang di per-compute.
- Kan query ke data
abis kan berat juga. Jadi bikin
tambah mahal kan?
Kalau udah ngomongin duit
pasti diterima tuh.
Hosting bulanan.
- Oke, lanjut.
- Laman layanan deh.
- Layanan.
- Ya kalau ini standar ya
yang judul sama
breadcrumb juga. Tadi kan udah
dikomentarin, kalau yang
gue pernah komentarin ini slide
bawah terus, apa scroll
bawah terus.
Itu standar.
Nah ini asuransi partner
lagi-lagi ini kasusnya mirip sama
slideshow image
yang di home tadi.
Ini kan informasi yang penting ya, kemungkinan
kalau lagi-lagi kita lihat dari sudut
pandang pengunjung
mungkin kan pengen tahu
asuransi
yang dirimu.
Ini semua pake image.
Image-nya ukurannya besar.
Loading-nya lambat. Apalagi karena
seluruh halaman tadi kan banyak
animasi pake JavaScript.
Dan
di bawahnya gak ada
image-nya sendiri gak ada alt text.
Alt text itu
teknologi web yang bisa
untuk misalnya aksesibilitas,
untuk tool screen reader.
- Kita bisa cari disini misalkan apa.
- Alt textnya gak ada.
Alt textnya dibawah gak ada juga.
Jadi ponenya itu
sulit di...
sulit di akses, sulit di cerna.
- Image caption-nya kalau ditambahin
skype caption kali ya.
- Dan gak crawling, gak masuk
ke search engine juga.
Jadi misalnya sulit
untuk tahu partner asuransinya
siapa aja sih menjawab
pertanyaan itu aja sulit.
Jadi yang paling,
menurut gue yang paling fatal itu
halaman ini.
- Iya, imunisasi M-nya satu.
Oke lanjut.
- Home visite.
Wait, home visite itu
beneran ada? Turusannya gitu?
- Gak tahu.
Mungkin home visite
kali ya.
Undungan, bijat, ibu
dan bayi.
Visite. Mungkin ini silahnya
kali.
Nah, mungkin akan lebih
bermanfaat kalau
search-nya itu buat
bukan hanya buat dokter.
Misalkan kita
disini atau di halaman depan
kita cari
BTA live atau
BNI live gitu.
Kayaknya lebih bermanfaat disitu ya.
Jadi, daripada dia
bingung nyari dimana.
- Search-nya buat semua.
Apa pun.
Dapat melita, dokter.
- Betul.
Dokter, semuanya
itu bisa dicari
dari halaman depan atau
ada search disini, kita bisa langsung cari.
Jadi, kalau dia bingung
ini, kalau mau cari
Bapak tadi, restoran
di menu yang mana ya?
Dia bisa
langsung search disitu. Kayaknya itu
lebih bermanfaat ya.
- Terus ada TikTok dan
Instagram di pojok
kanan dan
kiri-bawah buat apa ya sampe
double-double?
- Kayak pengen banget gitu.
- Ya mungkin emang mau promote akunnya
sih gak apa-apa sih kalau gue ya.
- Gak apa-apa. Ini mah
biasa. Ini kan kuter,
ini kan header. - Lebih penting
itu sih kayaknya
nomor telepon atau
apa sih.
Pendaftaran.
Pendaftaran online.
Tapi ada gak sih
penaftaran online?
Ada WhatsApp sih di bawah.
Ada WhatsApp ya.
Nah ini nomor teleponnya
ini bisa diklik. Tapi
nomor yang ini gak bisa.
Yang ini bisa diklik.
Kalau di handphone
jadi kemana ya?
Langsung
nelfon gitu.
Langsung ke alaman contact gitu ya
yang buat teleponnya.
Nah
kalau ini dibuat kayak gitu juga kayaknya
lebih membantu ya.
Mengenai WhatsApp ini ada
pertanyaan nih.
Kalau saya tambahkan notif text
pendaftaran ke tombol
WA gimana?
Maksudnya?
Notif text.
- Isi diket WA-nya atau
atau tulisan di labelnya itu
daftar. - Oh ya
daftar melalui WA gitu ya
di sini, di atas sini ya.
Maksudnya ya.
Di apa?
Diperjelas pertanyaannya.
Dikoreksi kalau salah.
Di sini maksudnya ada text gitu.
Pendaftaran melalui WhatsApp
gitu ya. Atau WA.
Itu topnya ada
ada animasinya ya.
Sama ini kayak ngelek gitu.
Lama banget nunggu ya. - Kayak ngelek ya?
Iya kayak ngelek ya.
Ini sengaja?
Kayak ngantuk
gitu.
Oh iya maksudnya gitu.
Kalau
tambahkan notifikasi text
overlay gitu ya di sini ya.
Bagus ya.
Takutnya ke overlay
sama yang lain malah.
Ketutupan ini.
Atau gak kebaca.
Karena
backgroundnya beda-beda nih. Ada yang
putih, ada yang image, ada yang
background image.
Tiba-tiba pas di sini
nanti sama dokter yang ketutupan.
Kasih background.
Kasih border.
Kasih background kayak tooltip ya.
Tooltip ya.
Terus keren juga tuh misalnya
di tombol WhatsApp dikasih JavaScript misalnya
kalau mau di hover kesitu
terus tombolnya pindah.
Jadi gak bisa
diklik.
Gak bisa diklik.
Kayaknya orang lagi betul-betul
masakit ya kalian jahat banget.
Udah lagi sakit.
Udah lagi mau melahirkan.
Cuma ini penting nih.
Link WhatsAppnya salah.
Serius. Coba diklik.
Linknya kayaknya
salah deh.
Ada apa salah.
Benar.
Coba mobile.
Mobile. Coba mobile.
Ini benar.
Open ke WhatsApp.
Oh responsif.
Dari mobile.
Dari mobile. Dari handphone.
Nah tuh coba klik link WhatsAppnya.
Bisa?
Bisa.
Coba dari berita.
Apa halaman berita?
Dari halaman berita.
Oh iya halaman beritanya salah nih.
Ke website malah.
Bisa beda-beda?
Iya. Kira ini satu widget.
Nah ini Vibescodingnya
pakai mobil apa aja nih?
Undefined Variable.
Oh apa ini?
Ini ada linknya loh.
Coba ya.
Berarti ada yang salah konfigurasi ya.
Nih.
BRBR
Warning Undefined Variable
WA Link.
Iya iya iya.
Oh ini template WA Linknya.
Ada error memang.
Tadi kok gak salah.
Nge-spill Home Direkturinya lagi.
Iya iya.
Dapat Home Direkturinya.
Wah bahaya itu.
Tolong langsung diperbaiki.
Yang di Struktur Organisasi juga
error sama.
Yang di Dokter.
Juga.
Yang di Layanan juga.
Oh berarti hanya di Beranda yang bisa.
Yang bener yang di Beranda doang.
Iya iya.
Nah intinya kalau Vibel Link pasti in.
Warning Undefined
Undefined Variable
WA Link. Ini pakai PHP nih.
Berarti.
Terus di
WWW Route RS Official
Oh.
Foldernya ada RSOfficial.
Test loh.
Di servernya.
Lain 89.
Wah ketahuan kan.
Ketahuan.
Hati-hati.
Bahaya ini.
Terus pakai Cloudflare.
Hah? Tau dari mana?
Ada.
Kalau di click View Source.
Di paling bawah ada
ininya.
Ada Cloudflare Insightnya.
Font Awesome. Kenapa sih pakai Font Awesome?
Nah. Karena
Template apa? Tadi kalau gak salah
sempat di mention bahwa
menggunakan Bootstrap.
Standard Bootstrap Template.
Mungkin bawaan dari Bootstrap Template ya.
Coba liat View Source.
Kalau bisa jangan.
View Source saten L.
Gede indikit.
Penting kita load Font Awesome
untuk navbar dan Bootstrap icon untuk
konten. Tapi ada dua itu Font Awesome.
Satu yang dari fontawesome.com
satu lagi dari Cloudflare.
Oh. Ada dua.
Satu yang 554.
Satu lagi yang 654.
Emang butuh sebanyak itu ikonnya?
Saabrek-saabrek.
Buat apa aja nih ikonnya?
Ini seberapa
gede ya?
Lumayan.
Satu CSSnya berapa gede?
Tau gak? Kelihatan gak?
Dari Inspect Element.
Oh ini ya?
Font.
Ya.
Fon ya dia.
Bukan.
Sese kan?
Sala.
ol.css sama ol.min.css.
Ini kan?
Iya. Dua.
Totalnya yang kompres dia
ya tiga puluh lah.
Tiga puluh kilobyte.
Gak gitu gede sih.
Tapi kalau satu dihilangin udah lumayan ya.
Uncompressed lho.
Itu.
Benar.
Kalau ininya size-nya beneran
59 kilobyte.
Kan.
103 kilobyte.
Jadi 150 kilobyte.
Gede-gede.
Gede.
Itu ikonnya dipakai dimana aja?
Oh ini kayaknya nih.
Ini, ini, ini.
Cuman tiga?
Telepon, alamat ya.
Ya di treeshaking aja lah.
Tapi ngapain dua versi?
Gak perlu dua versi ya.
Pake yang perlu aja.
Pake phone awesome.
Pake emoji aja emoji.
SVG aja.
Ya SVG.
Banyak alternatif sekarang.
Phone awesome udah.
Phone awesome sudah.
Sudah.
Kurang relevan ya.
Pake bootstrap icon lagi nabah.
Satu lagi itu bootstrap icon.
Tiga kan.
Oh bootstrap.
Pusat ngeluarin juga ya icon saya.
Oh iya bener.
Ini pengepul icon ya.
Senang banget sama icon.
Apalagi.
Enak ya.
Beras itu sepertinya.
Tapi membuat sendiri susah.
Iya ngomongnya gampang.
Biar orang lain ngomongnya gampang.
Tapi memang saya kerjanya begitu sih.
Kalau udah.
Complain tuh gampang, ngekritik tuh gampang.
Complain gampang.
Kerjain aja deh sana.
Ini listnya.
Itu kan kayak backseat gaming itu loh.
Kalau Twitch streamer nge-game.
Iya, komentator ya.
Atau kayak nonton bola.
Komentar siapa bola.
Go block gitu ya ngomongin.
Go block.
Padahal kita yang komentar cuman di buka santai doang.
Gak bisa juga sih.
Bagian directory yang terbuka di bagian mana?
Yang ini yang di bagian layanan.
Terus WA nya.
Link WA nya yang ini.
Di klik anan aja klik kanan.
View source.
Eh mana? View source nya.
Salah satu yang mas Lisa.
Oh bentar, bentar, bentar.
Salah, salah, salah.
Ini ya klik kanan. View source.
Paling bawah.
Paling bawah.
Di bagian itu ada warning.
Be warning.
Di line 500 sekian tuh.
Itu.
Iya.
Warning.
www.rsofficial.tes
INC footer.
Langsung dipindah ya.
Langsung dipindah, langsung di hilangin.
Di ganti ininya.
Foldernya.
Berbahaya.
Oke.
Nah ini kayaknya mas...
Gimana?
Disable.
Refresh.
Oh ini cepet ya.
Kenapa pas gue buka lambat.
RCP nya 2,51 second.
Cukup lambat sih.
Cuma ini mending sih.
Cepet.
Tadi pas gue nyoba pertama slideshow nya tuh.
Lama baru munculnya.
Ini lebih baik sih.
Empty cage.
Gak sih lumayan cepet.
Udah CDN kan.
Udah CDN.
Udah CDN ya.
Terus gak ada
sitemap.xml nya.
Buat SEO ya.
Iya. Buat crawler.
Buat search engine.
Schema.org nya tak ada.
SEO nya masih kurang ya.
Iya.
Robot.txt nya tak ada.
Apalagi llm.txt ya.
Iya.
Terus...
Revise with viewport sudah ada.
Connect.
Pake Google phone.
Phone nya kebanyakan.
Animate nya kebanyakan.
Terus...
Dia pake lightbox kan.
Buat popup itu kan.
Sedangkan yang popup itu tadi perasaan
Cuma ada di...
Di sini. Dokter kan.
Tempat lainnya kan gak pake.
Buat apa di load semua.
Di semua page.
Khusus di halaman ini aja ya.
Dan sekarang sebetulnya kan
Udah ada fitur Web API,
HTML, Alman, Dialog kan.
Jadi gak harus pake
Strip external yang lebih berat.
Pake third party.
Gak perlu pake external library.
Terus...
Carousel kan cuma pake di homepage.
Iya kan.
Tapi all carouselnya, JS nya di load di semua page.
Di semua halaman.
Wasting bandwidth dan resource.
Apa lagi ya?
Apa lagi ayo?
Main.js
Apa lagi liat main.js nya?
Kenapa main.js?
Gak apa-apa.
Cuma lagi liat isinya apa.
Nggak di-minify?
Di-minify ya.
Banyak banget kayaknya bawa ini,
Bawa library di dalam sini.
Ini nggak di-minify?
GQuery?
Iya, itu nggak di-minify.
Salah gue salah liat.
Oh, wow.
Wow.js nya di-init.
Tapi kan wow nya itu
dimana aja ya pake?
Wow.js itu apa sih?
Buat animasi-animation itu
kayaknya yang halaman
dokter atau apa.
Kalaman dokter ya.
Ada animasi.
Mungkin ya.
View transition.
Gak usah.
Itu pake CSS animation
aja.
Keyframe.
Aduh, nggak usah pake.
Dari template ya?
Gak perlu pake ini deh.
Dari template sih.
Bawaan template biasanya.
Bawaan template biasanya.
Termasuk One Awesome juga bawaan template.
Di sini aja.
Di apa?
Coba di bagian
saya lupa.
Yang unused JavaScript itu
dimana ya?
Di network apa di performance?
Di performance ya?
Lighthouse ya?
Lighthouse bukan?
Lighthouse, iya.
Coverage, eh salah.
Lighthouse.
Mortals.
Speed.
Bukan, ntar ya.
Itu ada sih.
Kalau di Lighthouse ada.
Tapi di sini juga kalau nggak salah ada.
Kita bisa tahu
berapa banyak JavaScript
yang tidak digunakan.
Jadi bisa dari sana aja ngeliatnya.
Ini bukan?
Itu bener yang kanan itu.
Coverage.
Oh iya.
Unused bytes
94,7%
nggak dipakai di bootstrap.
Jadi bootstrapnya dipakai di bagian mananya.
Eh, ketutup.
Ya kalau
bootstrap agak susah ya
dipisah-pisahin ya.
Coba kita stop lagi ya.
Contohnya gampang deh.
Di kecilan.
Ini pakai
layar saya.
Yaudah.
Cilakan.
Karena biar
98%,
94%
tidak terpakai. Yang tidak terpakai bisa
dihapus, deadcode ya.
Jadi tadi
saya dari
mortals ke
coverage.
Namanya apa? Oh coverage.
Kalau tadi nggak muncul
tinggal dia reload.
Terus dia ngedetect.
Bootstrap oke lah.
Make sense ya. Karena
framework ya.
Susah
kalau mau dilihat. Tapi kan yang jelas nih
phone awesome. Lihat tuh 98%
nggak kepake.
Iya.
Kalau di klik, kelihatan nggak
yang kepakenya yang mana?
Yang nggak kepake yang mana? Gak kelihatan ya.
Ini ada nih kan.
Lihat nih.
Kalau misalnya dia hijau
kepake. Kalau dia
abu-abu.
Iya.
Itu udah bisa dihapus tuh yang abu-abu tuh.
Iya.
Nah tinggal dihapus aja.
Terus
kalau bootstrap icon
100% nggak kepake.
Oh berarti cuma di load doang.
Tapi nggak di pake ya.
Atau mungkin di halaman lain.
Iya. Berarti ya.
Kalau mau di resekin aja.
Di halaman ini nggak usah di loading.
Berarti si bootstrap icon-nya.
Betul. Padahal ini
CSS. Pasti ini
render blocking.
Terus
phone awesome.
98,5% nggak kepake.
JQuery
60% oke lah.
Carousel.
Hanya kepake
sebagian.
Style yang, nih style
style
utama yang dibikin sendiri.
70% nggak kepake.
Per page ya.
Jadi kayaknya
kalau
di gabung semua ya.
Kalau mau di resekin
per page reload
masing-masing CSS-nya juga bisa.
Kalau mau carousel yang ringan banget
nggak butuh script external
itu tuh bisa buka di
chrome.dev/carousel
demo-nya Mas Adam Bergail.
Ini
phone dari Fredoka
nggak kepake katanya.
100%
nggak tahu ya
kalau mungkin phone-nya
nggak aparatur.
Pakai alaman lain. Betul.
Oh udah deh.
Terus kita liat
performance.
Kayak yakin performance-nya
butuh
banyak yang perlu
diperbaiki.
Nih.
Lama bang.
Ini, load event-nya
lama.
Well.
Nah.
Oh liat tuh banyak gunung-gunungnya tuh.
Kayak spiking-spiking-nya.
Spiking-nya.
Bukan. Itu spike.
Jadi kalau kuning itu adalah JavaScript.
Kalau umu itu adalah CSS.
Kalau ijo itu
adalah phone.
Eh salah. Image.
Oh ini butuh
butuh apa juga namanya? Lazy load.
Image-image-nya.
Jelas.
Merahnya banyak.
Jadi kalau di sekolah
dapat merah banyak nih.
Karena tadi CSS-nya banyak
kan. Jadi render blocking nih.
Jelas nih.
Terus image-image-nya
gede-gede juga nih.
Dan tidak
di lazy load.
JavaScript-nya juga tidak di lazy load.
Jadinya render blocking.
Rata-rata.
Salah. Lazy load ya.
Semuanya tidak di...
Differ.
Differ atau asingkronos.
Ya.
Sink.
Dah.
Banyak TR-nya. Mas.
Mas apa tadi namanya?
Mas
Andesca.
Andesca.
Andesca mawardi.
RCP-nya pasti
sengsara.
Diga second.
RCP-nya apa sih?
Mas Tohir yang mau apa?
Tadi mau submit webnya bisa ke
github.com/ofgs/
ngobrolin ya.
Silahkan.
Ini kayaknya
kebanyakan masalahnya
ada di front-end ya.
Bootstrap ya kebanyakannya.
Kita ga bisa liat back-endnya kayak gimana kan?
Iya. Back-endnya ga bisa liat ya.
Oh ya. Ada pertanyaan dari
dari mas
Andesca pertanyaannya
gimana
mengatasi, bukan mengatasi
menghindari
serangan
seperti SQL injection
dari sisi BKM.
Jangan kasih search.
Itu betul sih.
Itu bahaya. Betul.
Bahaya.
Bentar pertanyaannya.
Ini full PHP kan?
Pake framework,
ga pake framework ya?
Berarti PHP vanilla ya?
Pake ORM ga?
Atau
library buat database?
Kalau ga pake,
ya harus diperhatikan bener-bener.
Karena kemungkinan belum ditangani.
Kayak di OWASP itu pasti ada kan list-nya.
Coba apa yang basic sih
yang low-hanging root ikutin itu aja ya
di OWASP cheat sheet.
Top 10 ya?
Owasp.
Kok jadi begini?
Dianggap spammer soalnya mas Disa.
Ini.
Ini bukan.
Duh, mana?
Top 10 2025.
Nah, coba aja search SQL.
Apa?
Ya, di cek aja.
Ini injection.
Kalau ya.
Ini, ini coba.
Di private chat.
Ya, yang jelas dari
DB,
harus diamanin kan, kayak apa?
Village atau
NLS, set, lain-lainnya.
Sama paling penting input di
sanitasi, di sanitize.
Di sanitasi.
Di webnya itu,
selain search, ada form input
apa lagi ya?
Selain search,
ada form apa lagi?
Pendaftaran lewat WA kan?
Nggak ada kayaknya ya.
Berarti tinggal
di cek di bagian
searching-nya aja.
Searching-nya, apapun yang dimasukkan
oleh user, itu harus
di cek. Jangan sampai dia
masukin script
alert.
Bisa nggak?
Ini database backend ya?
Nggak bisa ya.
Drop database, janganlah.
Bahaya.
Drop table.
Drop table.
Ya, kalau dia tulis drop table,
bahaya. Jadi,
pastikan ketika
ada user masukin,
pas di-click search itu,
harus di sanitize.
Di cek dulu.
Apakah benar dia memasukkan nama?
Kalau mau belajar lebih lanjut,
coba belajar dari framework-framework
seperti dari Laravel.
Yang sudah, apa namanya?
Menidiakan ya?
Maksudnya, jangan pakai
doang, tapi
coba kuliti dulu cara kerjanya gimana.
Kalau pakai ORM,
apakah masih bisa kena SQL?
Injection masih
mungkin, tapi
kemungkinannya lebih kecil.
Karena biasanya sudah ditangani secara
otomatis.
Hal-hal yang umum
biasanya sudah di handle.
Oh, server dev.
Serius.
Oh, ini belum
launching, gitu maksudnya.
Tapi sudah
official tulisannya?
Iya, ini official.
Oh, berarti yang
production tidak pakai official?
Oh, enggak ya? Nggak ada ya?
Unofficial.
Unofficial.
Ya.
Kalau rumah sakit,
ada ini ya?
Ada ACID-nya gitu ya?
Nggak ada.
Mau buat AI juga.
RS.ID itu.
Nggak ada.
Oke, mungkin cukup kali ya?
Atau dari mas...
Oh, satu lagi.
Kalau pakai
file coding, kalau pakai
sebetulnya kan bisa... Sekarang hampir semua
tools sudah support agent
skill ya. Nah, agent-nya
dikasih skill biar paham
soal security. Nah, coba
ini contoh saja sih. Maksudnya nggak
harus pakai ini, tapi ini contohnya.
Coba tolong buka yang di
private chat.
Buka skills,
folder skills.
Skills.
Nah, coba security.
Atas sedikit.
Atas.
0.3 security
fundamentals.
Nah, itu contoh saja.
Itu kan udah ada tuh. Gimana
untuk FBI fee, bla-bla-bla.
Sambil di-check juga
aja isinya.
Itu bisa di-install.
Apa yang di-check?
Ya, kalau kita udah
install skill-nya kan kita tinggal
suruh FBI aja. Suruh.
Ya, kalau salah, kode ini.
Ya kan? Yang nggak harus
dipakai mentah-mentah semua itu. Cuma
maksudnya manfaatin agent
skills aja.
Buat cover
use case yang udah umum.
Ya, bukan berarti langsung kebel
semua serangan juga. Cuma kan ini udah
berbanyak hal.
Kayaknya nggak usah pakai skill juga
kita bisa tanya kan.
Apakah website, apakah project ini
sudah
ya, lebih terus
sudah aman dari SQL injection
atau belum? Karena security kan bukan cuma satu
ya, bukan cuma SQL injection, tapi
ada ya, itu ada banyak-banyak.
Kalau kita install-nya
juga gampang kan. Ini tinggal install
aja bisa lebih terstruktur.
Minta security report, jalanin
ini semua.
Nah, ini Mas Andeska
ini, pakai
AI tools-nya apa nih?
Tapi skill AMD ini bisa
buat semua sih.
Aman sih. Kecuali kursor ya.
Kursor beda ya.
Kursor beda sedikit ya.
Tapi tetap bisa dipakai.
Iya, tinggalin copy paste
aja isinya, tolong buatkan skill
untuk ini. Nanti dibikinin
tuh. Udah gampang
sekarang. Mau pakai
tools apa aja.
Ada lagi?
Udah.
Aman?
Oke.
Kalau
nggak ada, kita
cari topik buat minggu depan, mau topik
yang Ivan purpose kemaren?
Tentang apa kemaren?
Belum bikin itu-nya.
Belum bikin banyak.
Nggak apa-apa, nggak usah.
Nggak di-spin.
Nggak usah di-spin, langsung aja.
Security ya? Apa?
Phishing. Apa? Pas pada...
Phishing, scan, social engineering.
Gila, scan.
Social engineering, ya. Itu aja udah.
Social engineering dikait-kaitin
sama website. Itu aja V2.
Ya, minggu depan.
Minggu depan ya?
Oke.
Minggu depan saya berpindah posisi.
Mudah-mudahan.
Dari...
Dari luar Indonesia.
Nanti kita lihat nanti.
Itu ya, nanti vlog ya?
Salam Buatan For Sugar.
Luka Modric lah.
Mudah-mudahan, maksudnya
yang saya mau sampaikan, mudah-mudahan internetnya
lancar itu loh.
Masa Eropa
kalah sama
Kasi.
Yang Kasi ini masih...
Tergantung di mana
juga. Omongnya dari
Starbucks ya.
Streamyard juga kan?
Lebih dekat kemana dia.
Iya, benar-benar.
Ya, oke lah.
Kita coba ya.
Mudah-mudahan lancar ya.
Mudah-mudahan aman ya.
Cobain dulu hari...
hari apa? Coba buka Streamyard
dulu.
Lancar gak?
Ya, udah-udah.
Listenin malam.
Cukup ya.
Terima kasih buat
teman-teman yang sudah hadir
yang sudah submit juga.
Mars Andeska
tadi sebelumnya ada mas
Sardi.
Yang sudah submit.
Dan teman-teman yang lain yang belum kita...
belum sempat kita bedah.
Mudah-mudahan nanti ada waktu lagi yang
bisa kita...
kita bedah.
Kalau yang mau dibedah,
yang website-nya mau dibedah.
Langsung aja ke discussion ya.
Ada di github.com/org/
ngobrolin/discussion
Di sana tuh ada...
ada apa namanya?
Ada thread khusus untuk bedah website.
Tapi kalau mau tulis topik baru juga gak apa-apa.
Langsung kesana aja.
Untuk malam ini sekian dulu.
Terima kasih banyak buat semuanya.
Selamat malam, selamat istirahat, bye bye.
<font color="#ffffff">Sampai bertemu di video selanjutnya.</font>
<font color="#ffffff">Hai, semuanya. </font>
<font color="#ffffff">Sampai bertemu di video selanjutnya.</font>
<font color="#ffffff">Sampai bertemu di video selanjutnya.</font>
Deskripsi asli dari YouTube
Berhubung banyak yang submit, malam ini kita akan kembali membedah beberapa situs. Penasaran gimana pendapat para pakar kita Ivan dan Eka? Jangan sampai ketinggalan untuk menyaksikan sesi bedah situs nanti malam. Bedah situs kali ini hasil kolaborasi bareng Domainesia! 🎉 📦 Langganan Cloud VPS Turbo? Gunakan kode: NGOBROLINVPSDN → 50% OFF, bisa digunakan berkali-kali! Jadwal kembali ke jam 20:00WIB ya. Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
7 Des 2022
Ngobrolin Font
Font dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat hala...
13 Apr 2023
Ngobrolin Format Warna
Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan...
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 .