Mengganti JavaScript Hanya dengan HTML

• Memperkenalkan cara-cara terbaru di web untuk mengganti fitur yang bergantung pada JS dengan HTML/CSS
• Menggunakan elemen standar seperti details·summary, datalist, dan popover untuk membangun accordion, autocomplete, modal, dan navigasi off-screen
• Pendekatan ini mengurangi unduhan, evaluasi, dan penggunaan memori sehingga meningkatkan performa dan pengalaman pengguna
• Untuk tiap fitur, tersedia contoh CodePen, dokumentasi MDN, dan informasi kompatibilitas browser
• JS sebaiknya hanya digunakan di area yang benar-benar perlu, dan fitur HTML/CSS yang telah berkembang perlu dimanfaatkan secara aktif

---

Mengganti Fungsi JS dengan HTML dan CSS

• Selama bertahun-tahun, JavaScript menangani fungsi-fungsi yang tidak bisa diwujudkan dengan HTML dan CSS
  • Namun seiring meluasnya kemampuan HTML dan CSS, sebagian fungsi JS kini bisa digantikan dengan teknologi web native
• Karena JS perlu diunduh, didekompresi, dievaluasi, dan dipertahankan di memori, memindahkan fungsi yang memungkinkan ke HTML/CSS adalah pilihan yang efisien
• Arah yang disarankan adalah membiarkan JS fokus pada logika kompleks, sementara kontrol UI sederhana didelegasikan ke HTML/CSS

Accordion / Panel Konten yang Dapat Diperluas

• Elemen details dan summary memungkinkan pembuatan accordion tanpa JS
  • Konten bisa dibuka dan ditutup lewat klik, dan status default dapat ditentukan dengan atribut open
  • Jika menggunakan atribut name yang sama, hanya satu panel yang akan terbuka
• Bisa juga diberi styling dengan CSS atau dikontrol buka/tutupnya dengan JS
• Materi terkait: dokumentasi MDN details, contoh CodePen, tabel kompatibilitas browser

Kolom Input dengan Saran Autocomplete

• Kombinasi input dan datalist memungkinkan dropdown dengan pemfilteran otomatis
  • Saat mengetik, daftar saran akan difilter secara otomatis
  • Mendukung berbagai tipe input selain teks, seperti number, time, dan lainnya
• Firefox saat ini hanya mendukung input berbasis teks, dan ada keterbatasan aksesibilitas di perangkat seluler
• Materi terkait: dokumentasi MDN datalist, tutorial SitePoint, tabel kompatibilitas browser

Modal / Popover

• Atribut popover dan popovertarget memungkinkan pembuatan modal dan popover tanpa JS
  • Tersedia tiga mode: auto, hint, dan manual
  • auto menutup saat klik di luar atau menekan ESC, sedangkan manual hanya bisa ditutup secara manual
• Firefox dan iOS belum mendukung mode hint
• Materi terkait: dokumentasi MDN popover, blog Chrome, contoh CodePen, video terkait aksesibilitas

Navigasi / Konten Off-screen

• Fitur popover juga bisa digunakan untuk membuat menu navigasi off-screen
  • Menggunakan elemen nav untuk memberi makna semantik, dan CSS translate untuk memindahkannya masuk dan keluar layar
  • Akan tertutup saat klik di luar, dan popover="manual" dapat dipakai untuk pengaturan tutup manual
  • Elemen pseudo ::backdrop dapat digunakan untuk membuat latar belakang semi-transparan
• Materi terkait: MDN Popover API, blog Chrome, contoh CodePen

Kesimpulan

• Kekuatan JS tetap diakui, tetapi sebaiknya digunakan hanya di tempat yang benar-benar perlu
• Perkembangan HTML/CSS belakangan ini menghadirkan banyak alternatif tanpa JS
• Lebih banyak contoh bisa dilihat di tulisan blog penulis “Replace JS with No-JS or Lo-JS Options”
• Menekankan peningkatan pengalaman pengguna melalui minimalisasi JS dan optimasi performa

[labeldock]

Upaya seperti ini kadang bisa membuat saya merenung apakah saya sedang melakukan overengineering, tetapi dari sudut pandang kerja praktis dengan kebutuhan yang kaya, ini lebih mirip atraksi akrobat.

[skageektp]

> Implementasi accordion tanpa JS dimungkinkan dengan elemen ** dan **

Sepertinya ada bagian konten yang terpotong.

[xguru]

Sudah saya perbaiki~!

[shakespeares]

Jelas ada batasannya, dan saat AI sudah aktif.. apakah refaktorisasi seperti ini masih perlu dilakukan? Apakah hal seperti pemblokiran konten JS juga sudah dipertimbangkan?

[GN⁺]

Komentar Hacker News

• Disayangkan semua contohnya tidak dibuat inline
  Jika contoh pengganti HTML dimasukkan langsung ke halaman alih-alih hanya memberi tautan CodePen, rasanya akan jauh lebih meyakinkan
  • Sangat setuju. Sering kali saat mengklik sesuatu seperti FooMaker v1.0, yang ditampilkan justru bukan contoh penggunaan umum, melainkan hanya kasus pengecualian yang aneh
  • Awalnya kukira ini tulisan dari 25 tahun lalu. GIF dithering-nya benar-benar terasa retro
  • Aku juga frustrasi karena tidak ada contoh inline, tapi kalau ini memang guest blog post, masih agak bisa dimaklumi
• Potensi tag <details> / <summary> benar-benar luar biasa
  Hampir semuanya bisa dilakukan dengannya, tetapi kebanyakan pustaka komponen justru mengabaikannya
  Tidak perlu atribut aria dan aksesibilitasnya juga sudah tersedia secara bawaan
  • Dulu kekurangannya adalah pencarian cmd+f tidak bisa menemukan teks di dalam details yang tertutup, tetapi sekarang ini bisa diatasi dengan atribut dan event hidden="until-found"
  • Namun penanganan animasi tetap rumit. Browser belum mendukung transisi untuk perpindahan display secara bawaan
  • Ada juga fitur di mana pencarian ctrl+f akan membuka details secara otomatis
  • <details> juga berfungsi di situs berbasis Markdown seperti GitHub. Log yang panjang bisa dilipat agar tetap rapi saat diunggah
  • Ini juga bisa dibuat dengan CSS murni. Sebagai contoh, di dokumentasi Go101 bisa diperluas dengan menekan “+”. Ada juga demo panel tab. Ini menunjukkan kekuatan Modern CSS
• Intinya bukan “no JavaScript”, melainkan bahwa HTML sudah menangani fitur-fitur yang terlupakan (formulir, dialog, validasi, navigasi, dan sebagainya)
  Saat menulis buku “You Don’t Need JavaScript”, yang kurasakan adalah JS sering kali melengkapi kemampuan platform yang sudah ada, alih-alih menambahkan kemampuan yang benar-benar baru
  • Semoga buku seperti ini semakin banyak. Yang dibutuhkan bukan sekadar belajar framework, melainkan buku yang berfokus pada pemecahan masalah
  • Dulu dukungan browser kurang memadai sehingga para developer membuat solusi sementara, lalu itu mengeras menjadi semacam standar. Belakangan laju rilis fitur CSS makin cepat, sampai layout masonry pun sudah masuk tahap eksperimen
• Sebagian besar fitur HTML memang hebat, tetapi <input> dan <datalist> masih kurang untuk penggunaan nyata
  Pengguna mengharapkan toleransi typo, teks bantuan, UX mobile, dan lain-lain, tetapi datalist tidak mampu memenuhinya
  • Hal yang paling merepotkan adalah di datalist, teks yang ditampilkan tidak bisa dipisahkan dari nilai sebenarnya (value)
  • Dalam kebanyakan kasus, select lebih cocok, tetapi select tidak punya fitur pencarian
  • Gaya bawaannya terlalu kaku dan jelek
  • Di Android, dropdown-nya bahkan tidak muncul sama sekali
  • Perilakunya berbeda-beda di setiap perangkat sehingga pada akhirnya tetap harus menambahkan JS. Jika hanya mengandalkan HTML, hasilnya jadi neraka kompatibilitas
• Aku baru-baru ini menjalani beberapa wawancara frontend, dan yang masih dinilai tetap hanya kemampuan JS berpusat pada React
  Penggunaan HTML yang semantik atau aksesibilitas hampir tidak diperhatikan
  • Jika tim memakai React, orang yang langsung memakai DOM API bisa gagal dalam aspek kecocokan dengan tim
  • Jika memakai file CSS terpisah, komponen akan jauh lebih rapi. Tailwind tidak buruk, tetapi aku tidak ingin memakainya saat wawancara
  • Di luar HN, hampir tidak ada orang yang tertarik pada purisme HTML
• Agak mengganggu karena hanya memberi tautan CodePen dan tidak menaruh contohnya langsung di halaman
  Ini tulisan tentang “mari membangunnya hanya dengan HTML”, jadi terasa kontradiktif karena bergantung pada layanan eksternal
  • Secara pribadi menurutku tidak masalah. CodePen memudahkan bookmark dan syntax highlighting. Hanya saja ada risiko link rot
  • Tetap saja, akan lebih baik kalau menyediakan keduanya, contoh inline dan tautan CodePen
  • Menekankan HTML saja tetapi harus memuat UI CodePen 2MB terasa seperti paradoks dari sisi UX
• Aku menantikan fitur select yang bisa dikustomisasi yang kabarnya akan segera hadir
  Sudah ada di WHATWG stage 3, dan tampaknya bisa menggantikan implementasi dropdown berbasis JS yang seperti mimpi buruk
  Lihat artikel blog Chrome
• HTML murni memang akrab dan nyaman, tetapi untuk membuat web app yang fungsional saat ini tetap ada batasnya
  Aku juga sudah mencoba alternatif seperti HTMX atau Phoenix LiveView, tetapi itu pun bukan solusi penuh
  Pada akhirnya terasa lebih realistis untuk menerima JS modern
  • Bahkan dengan sedikit JS saja, kita bisa melangkah jauh lebih jauh dibanding hanya memakai HTML. Web modern saat ini mengalami penurunan usability yang parah karena penyalahgunaan JS
  • Rasanya HTMX dianggap terlalu rumit. Jika memanfaatkan hx-select / hx-target berdasarkan state server, semuanya bisa tetap sederhana
  • Tag <marquee> dulu cocok untuk membuat scroll horizontal ala situs belanja, tetapi sekarang dipaksakan dengan JS. Aku berharap HTML mendukung lebih banyak pola UI secara bawaan
  • Aku pernah menghabiskan banyak token saat mencoba membuat efek marquee di React. Hasilnya pun bukan loop yang sempurna, hanya trik animasi biasa
  • Jika memakai Elixir dan Phoenix, Gleam juga layak dipertimbangkan. Ia dikompilasi menjadi JS
• HTML dan JS adalah alat dengan tujuan yang berbeda
  Untuk web app yang kompleks, JS memang wajib, tetapi masih banyak area yang sebenarnya bisa ditangani hanya dengan HTML
  • Hal seperti Google Earth jelas butuh JS, tetapi menurutku level Gmail pun seharusnya bisa dibuat dengan HTML. Tren dan hype dari vendor browser justru menghambat perkembangan HTML
  • htmx punya hubungan saling melengkapi dengan JS. Intinya adalah saling bertukar hypertext terstruktur alih-alih JSON. Dalam praktiknya, aku pernah cukup cepat membuat aplikasi yang lumayan kompleks dengan htmx + sedikit JS
  • HTML seharusnya menyediakan lebih banyak kemampuan secara bawaan. Misalnya dukungan HTTP verbs, kontrol input yang lebih baik, dan sebagainya
  • Banyak situs yang sangat berat pada JS sebenarnya cukup bisa digantikan dengan htmx. Pemilihan alat sering kali hanya soal kebiasaan
• Aku setuju dengan pernyataan bahwa “JS tidak perlu mengelola accordion atau menu navigasi”
  Tetapi sekarang JS sudah menjadi alat inti untuk pengumpulan data dan pelacakan iklan
  Aku penasaran apakah tanpa JS, big tech masih bisa menerapkan pengawasan dan layanan iklan pada tingkat yang sama
  Pada akhirnya, penolakan terhadap JS bukan sekadar persoalan teknis, melainkan berasal dari ketidakpercayaan terhadap ekosistem iklan