Anda Tidak Membutuhkan JavaScript untuk Itu

Prinsip inti pengembangan web: hukum hak istimewa minimum

• Salah satu prinsip inti pengembangan web, 'hukum hak istimewa minimum', berarti memilih bahasa dengan tingkat terendah yang sesuai untuk tujuan yang diberikan.
• Di antara HTML, CSS, dan JS, HTML paling diutamakan, lalu CSS, dan terakhir JS.
• JS adalah yang paling serbaguna, tetapi memiliki risiko seperti kegagalan pemuatan, konsumsi sumber daya tambahan, dan masalah aksesibilitas.

Switch kustom

• Saat perlu mengimplementasikan switch kustom alih-alih checkbox biasa karena kebutuhan desain, hal ini dapat dibuat dengan HTML dan CSS yang menggunakan kelas semu :checked alih-alih JS.
• Browser secara otomatis mengaitkan elemen input yang berada di dalam label sehingga bisa diklik, sehingga menyediakan fungsi toggle tanpa handler JS tambahan.

Fitur pelengkapan otomatis native: Datalist

• Alih-alih JavaScript, Anda dapat menggunakan fitur bawaan browser, datalist, untuk membuat fungsi yang secara otomatis memfilter dan menampilkan opsi saat pengguna mengetik.
• Pengguna dapat memasukkan nilai yang mereka inginkan, atau mengklik ikon dropdown yang ditambahkan browser untuk melihat semua opsi.

Pemilih warna native

• Alih-alih pemilih warna kompleks berbasis JS, Anda dapat menggunakan pemilih warna native yang dibuat hanya dengan satu baris HTML.
• Di browser berbasis Chrome, ada fitur tambahan untuk memilih warna dari mana saja di layar.

Accordion

• Dengan menggunakan elemen details dan summary, Anda dapat menyembunyikan konten sampai pengguna membutuhkannya dan meningkatkan struktur halaman.
• Dengan atribut open, salah satu item accordion dapat dibiarkan terbuka secara default.

Modal interaktif

• Dengan menggunakan elemen dialog, Anda dapat mengimplementasikan modal untuk memberikan informasi kepada pengguna atau meminta input.
• JS digunakan untuk membuka modal, tetapi selebihnya semuanya ditangani oleh HTML dan CSS native.

Kesimpulan

• Artikel ini menunjukkan bahwa Anda dapat membuat situs web yang lebih baik dengan lebih sedikit menggunakan JS dan memanfaatkan kemampuan CSS dan HTML.
• Penting untuk menguji cara implementasi baru dengan mempertimbangkan aksesibilitas.

Opini GN⁺

• Poin terpenting dari tulisan ini adalah bahwa saat mengembangkan web, Anda dapat meningkatkan performa dan aksesibilitas dengan meminimalkan ketergantungan pada JS dan memaksimalkan penggunaan kemampuan HTML dan CSS.
• Alasan hal ini menarik bagi pengembang web adalah karena tulisan ini menawarkan cara baru untuk mengimplementasikan fitur-fitur yang sebelumnya dianggap hanya mungkin dengan JS, dengan metode yang lebih sederhana dan efisien.

[GN⁺]

Komentar Hacker News

• Ada catatan bahwa pembahasan tentang penggunaan JavaScript di area tertentu karena kompatibilitasnya yang lebih baik terlewat

  • JavaScript baru bisa digunakan melalui transpiling, tetapi mem-polyfill fitur CSS dan HTML yang belum ada jauh lebih sulit dan kadang tidak mungkin
  • Saat menggunakan properti appearance, MDN memberikan banyak peringatan, dan khususnya merekomendasikan pengujian menyeluruh untuk penggunaan appearance: none
  • datalist tidak berfungsi di Firefox Android dan hanya terlihat sebagai kotak input biasa
  • Pemilih warna sangat tidak standar sehingga sulit digunakan di sebagian besar bisnis
  • Artikel itu sendiri juga mengakui kurangnya konsistensi pada details dan dialog
  • Ada harapan agar browser suatu hari mendukung fitur-fitur ini secara konsisten, tetapi sampai saat itu fitur-fitur ini kemungkinan hanya akan dipakai terutama untuk proyek pribadi

• Mengungkapkan keterkejutan bahwa bahkan pada 2023 kita masih mengalami masalah pengalaman pengguna (UX) umum terkait formulir dan input data pengguna

  • Sulit memahami mengapa masalah ini belum terselesaikan
  • Pernah ada upaya untuk menyelesaikannya sekaligus melalui XForms, tetapi tidak diimplementasikan di browser; sebagai gantinya, framework komponen CSS/JS menyediakan kumpulan elemen formulir yang terbatas

• Tidak tahu tentang datalist, tetapi tampaknya tidak bekerja dengan baik di Chrome Android

  • Opsi bisa terlihat di keyboard, tetapi ini pertama kalinya melihat fitur ini di UI web seluler, dan tidak yakin pengguna umum akan tahu cara memakainya
  • Di Firefox Android, fitur ini sama sekali tidak didukung

• Menyebut native smooth scrolling dengan scroll-behavior: smooth, carousel native dengan scroll-snap, dan animasi berbasis scroll

  • Menyarankan untuk membatasi penggunaan fitur-fitur ini dan memakainya dengan hati-hati karena sering menimbulkan efek samping negatif

• Dengan menggunakan <details>, konten bisa dicari dengan Ctrl+F, dan sementara accordion JavaScript tidak bisa dibuka, <details> bisa dibuka, yang menjadi keunggulannya

• Ada pendapat bahwa datalist bukan pilihan yang tepat kecuali untuk alat internal

  • Nilai bawaannya buruk, tidak bisa diubah gayanya, dan ketika ada batasan pada styling atau perubahan perilaku, JavaScript sering kali menjadi satu-satunya pilihan

• Ada pendapat bahwa jika mengikuti standar HTML, semuanya menjadi konsisten dan hal-hal seperti aksesibilitas atau terjemahan dapat diterapkan dengan mudah

  • Menunjukkan masalah pada situs modern yang memuat halaman secara dinamis sampai-sampai tombol kembali pun tidak berfungsi

• Ada catatan bahwa CSS bisa digunakan sebagai alat untuk membuat halaman web lebih sulit dibaca

  • Ada pendapat bahwa kendali atas semua aspek tata letak dan tipografi seharusnya dikembalikan ke browser agar pengguna bisa mengaturnya

• Menyebut "Rule of Least Power" sebagai salah satu prinsip inti pengembangan web

  • Ada pendapat dari seorang pengembang yang belum pernah mendengar prinsip ini, dan mempertanyakan apakah ada pengembang frontend yang ingin mengerjakan sesuatu sesederhana mungkin