Kualitas Web: Aksesibilitas, Performa, Keamanan, Testing & Tooling

Sampai akhir Fase 2 kamu sudah bisa membangun halaman yang tampil rapi dan interaktif: HTML yang semantik, CSS dan SCSS untuk tampilan, JavaScript yang mengubah DOM, sampai fetch untuk mengambil data. Pertanyaannya sekarang bergeser dari "jalan atau tidak?" menjadi "seberapa baik?". Halaman yang jalan di laptopmu belum tentu bisa dipakai orang yang memakai screen reader, belum tentu cepat di HP murah dengan sinyal 3G, belum tentu aman dari orang iseng yang mengetik <script> ke kolom komentar, dan belum tentu tetap benar setelah kamu mengubah satu baris kode minggu depan.

Materi ini menutup celah itu, mengikuti modul Accessibility, Performance, Security and privacy, Testing, CSS tooling, dan Other tooling types di MDN Curriculum. Ada delapan modul: dua tentang aksesibilitas, satu performa, satu keamanan dan privasi, dua tentang testing (unit test dengan Vitest, end-to-end dengan Playwright), lalu linter/formatter dan bundler. Semua contoh kode sudah diuji di proyek Vite vanilla dengan versi berikut (dicek lewat npm view pada Oktober 2026): Vite 8.3, Vitest 5.0, Playwright 1.64, ESLint 10.13, Prettier 3.9, Stylelint 17.16, jsdom 30, Testing Library DOM 10.4, Lighthouse 13.5. Siapkan Node.js versi 22.12 ke atas, karena Vitest 5 mensyaratkannya. Satu proyek kecil, form pendaftaran newsletter, dipakai berulang di banyak modul supaya kamu bisa melihat satu halaman yang sama diperiksa dari berbagai sisi.