Kalau kita bicara soal frontend development, kebanyakan orang langsung berpikir tentang hal-hal yang terlihat: layout rapi, animasi halus, atau tampilan yang persis seperti desain di Figma.
Padahal, dalam praktiknya ada banyak hal kecil yang sering dianggap sepele oleh frontend developer. Bahkan kadang saya sendiri dulu juga sempat menganggapnya tidak terlalu penting.
Masalahnya, hal-hal kecil inilah yang justru sering membedakan antara website yang sekadar jalan dengan website yang benar-benar baik, scalable, dan nyaman digunakan.
Berikut beberapa hal yang menurut saya paling sering terlewat.
1. Terlalu Bergantung pada <div> (Mengabaikan Semantic HTML)
Ini salah satu kebiasaan yang sering muncul, terutama ketika sedang buru-buru menyusun layout.
Semua elemen akhirnya dibuat seperti ini:
<div class="title">Title</div>
<div class="button">Submit</div>
Padahal HTML sudah menyediakan elemen yang lebih bermakna seperti:
-
<header> -
<section> -
<article> -
<button> -
<nav>
Menggunakan semantic HTML bukan hanya soal “rapi secara teori”. Ini membantu:
-
mesin pencari memahami struktur halaman
-
screen reader membaca konten dengan benar
-
kode lebih mudah dipahami developer lain
Kalau semuanya <div>, struktur halaman jadi seperti kotak kosong tanpa makna.
2. Mengabaikan Accessibility (A11y)
Accessibility sering dianggap sebagai fitur tambahan. Padahal sebenarnya ini bagian dari fondasi web.
Beberapa contoh yang sering terlewat:
-
gambar tanpa atribut
alt -
input form tanpa
label -
tombol yang tidak bisa diakses dengan keyboard
-
warna teks dengan kontras terlalu rendah
Banyak developer baru sadar pentingnya accessibility ketika project sudah besar dan harus melakukan perbaikan besar-besaran.
Padahal jika dipikirkan sejak awal, implementasinya biasanya sangat sederhana.
3. Tidak Memikirkan Performance Sejak Awal
Kadang fokus kita hanya satu: yang penting tampil dulu.
Akibatnya:
-
gambar berukuran besar langsung di-upload
-
JavaScript bundle terlalu besar
-
semua komponen langsung di-load sekaligus
Website mungkin tetap berjalan, tapi terasa berat.
Hal-hal kecil seperti ini bisa sangat berpengaruh:
-
kompresi gambar
-
lazy loading
-
memecah bundle JavaScript
Performa bukan hanya soal teknis. Ini juga berhubungan langsung dengan user experience.
4. Konsistensi Design System yang Kurang Dijaga
Di awal project, biasanya semua terlihat sederhana. Tapi semakin lama aplikasi berkembang, masalah kecil mulai muncul.
Contohnya:
-
ukuran button berbeda-beda
-
jarak antar elemen tidak konsisten
-
warna sedikit berbeda di beberapa halaman
Ini sering terjadi karena developer membuat komponen baru tanpa merujuk ke design system atau design token yang sudah ada.
Hasilnya, UI terasa tidak konsisten dan sulit dipelihara.
5. Struktur Project yang Kurang Dipikirkan
Ketika project masih kecil, struktur folder sering terasa tidak terlalu penting.
Misalnya:
components/
utils/
helpers/
misc/
Awalnya tidak masalah. Tapi setelah project berisi puluhan atau ratusan file, struktur yang tidak jelas akan mulai terasa menyulitkan.
Developer baru yang masuk ke project juga akan kesulitan memahami alurnya.
Sedikit waktu untuk merancang struktur project di awal biasanya bisa menghemat banyak waktu di kemudian hari.
6. Code Readability yang Kurang Diperhatikan
Sebagai developer, kita sering merasa puas ketika kode sudah berjalan dengan benar.
Tapi sebenarnya ada satu pertanyaan yang lebih penting:
Apakah kode ini masih mudah dipahami tiga bulan dari sekarang?
Beberapa masalah yang sering muncul:
-
nama variabel terlalu singkat
-
fungsi terlalu panjang
-
logika bercampur dengan tampilan
Kode yang mudah dibaca bukan hanya membantu tim, tapi juga membantu diri kita sendiri di masa depan.
7. Jarang Menguji Website di Perangkat Nyata
DevTools di browser memang sangat membantu. Kita bisa mengubah ukuran layar dan melihat tampilan responsif dengan cepat.
Tapi tetap ada satu hal yang tidak bisa digantikan: pengujian di perangkat nyata.
Kadang masalah baru terlihat ketika:
-
tombol terlalu kecil untuk disentuh
-
font terasa terlalu kecil di layar ponsel
-
layout sedikit bergeser di browser tertentu
Hal-hal seperti ini sering tidak terlihat di emulator.
Penutup
Frontend development bukan hanya tentang membuat tampilan yang sesuai desain. Ada banyak detail kecil di baliknya yang menentukan apakah sebuah website benar-benar nyaman digunakan dan mudah dikembangkan.
Sebagian besar kesalahan di atas sebenarnya bukan karena developer tidak tahu. Lebih sering karena kita terburu-buru atau terlalu fokus pada hasil visual.
Saya sendiri juga pernah melewatkan beberapa hal ini di awal karier. Tapi seiring waktu, justru detail-detail kecil seperti inilah yang paling terasa dampaknya pada kualitas sebuah project.
Karena pada akhirnya, frontend yang baik bukan hanya soal tampilannya, tapi juga soal pengalaman pengguna, struktur kode, dan keberlanjutan project.
