Kesalahan Frontend yang Sering Dilakukan Pemula

Kesalahan pemula bukan tanda bahwa seseorang tidak cocok menjadi developer. Biasanya kesalahan muncul karena hasil visual terlihat benar, sementara struktur, keadaan error, atau perangkat lain belum diuji. Artikel ini memakai simulasi code review sebuah landing page untuk menunjukkan cara memperbaikinya bertahap.

Kesalahan 1: memulai dari div dan class visual

Markup seperti <div class="big-title"> dan <div class="blue-button"> mengikat struktur pada tampilan. Ketika desain berubah, nama class kehilangan makna. Lebih penting lagi, div tidak otomatis mempunyai peran heading atau tombol.

<!-- Rapuh -->
<div class="big-title">Produk terbaru</div>
<div class="blue-button" onclick="openCart()">Beli</div>

<!-- Fondasi lebih baik -->
<h1 class="page-title">Produk terbaru</h1>
<button class="button button--primary" type="button">Beli</button>

Pilih elemen native lebih dulu, kemudian class menjelaskan komponen atau variasinya. Hasilnya lebih mudah dipahami dan banyak perilaku keyboard tersedia tanpa tambahan JavaScript.

Kesalahan 2: mengunci seluruh ukuran dengan pixel

Lebar kartu 400px dapat terlihat bagus pada monitor pembuatnya tetapi meluap pada ponsel 320px. Gunakan ukuran fleksibel dengan batas yang masuk akal.

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

.product-card {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
}

Pixel tetap berguna untuk border, ikon kecil, atau target tertentu. Masalahnya bukan unit pixel, melainkan asumsi bahwa ruang yang tersedia selalu sama.

Kesalahan 3: menambal CSS tanpa mencari sumber aturan

Menambah !important setiap kali style tidak berlaku akan membangun utang spesifisitas. Buka panel Styles, lihat aturan yang tercoret, periksa selector pemenang dan urutan stylesheet. Setelah penyebab ditemukan, sederhanakan sumber konflik.

/* Terlalu spesifik dan sulit ditimpa */
body .page main .card .button.primary { ... }

/* Komponen dan modifier yang jelas */
.button { ... }
.button--primary { ... }

Susun CSS dalam layer sederhana: token, reset/base, layout, komponen, utilitas, lalu override yang benar-benar khusus. Tidak semua proyek membutuhkan CSS architecture besar; konsistensi penamaan sudah memberi banyak manfaat.

Kesalahan 4: selector JavaScript mengikuti tampilan

JavaScript yang memilih .button-purple akan rusak ketika desainer mengganti warna. Gunakan atribut data untuk perilaku dan class untuk presentasi.

<button class="button button--primary" data-open-dialog>Buka</button>

<script>
  const trigger = document.querySelector("[data-open-dialog]");
  trigger?.addEventListener("click", openDialog);
</script>

Hook yang spesifik juga mencegah script mengambil tombol lain secara tidak sengaja. Selalu periksa apakah elemen ditemukan jika script dipakai lintas halaman.

Kesalahan 5: hanya menguji jalur sukses

Form bukan hanya keadaan “berhasil dikirim”. Ada input kosong, koneksi putus, respons lambat, respons server tidak valid, dan klik berulang. Definisikan keadaan UI sebelum menulis request.

async function submitForm(form) {
  const button = form.querySelector("button[type='submit']");
  button.disabled = true;

  try {
    const response = await fetch(form.action, {
      method: "POST",
      body: new FormData(form)
    });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    showStatus("Pesan berhasil dikirim");
  } catch (error) {
    console.error(error);
    showStatus("Pesan belum terkirim. Coba kembali.");
  } finally {
    button.disabled = false;
  }
}

Pesan pengguna tidak perlu membeberkan detail internal. Simpan detail teknis di console atau sistem logging, sedangkan UI memberi langkah berikutnya yang dapat dilakukan.

Kesalahan 6: responsive berarti tiga breakpoint perangkat

Label “mobile”, “tablet”, dan “desktop” terlalu kasar. Ubah lebar browser perlahan dan lihat saat komponen mulai sesak. Breakpoint diletakkan di titik kebutuhan konten, bukan berdasarkan merek ponsel.

Uji juga tinggi viewport, orientasi landscape, zoom 200%, teks panjang, bahasa lain, pointer sentuh, dan keyboard. Navbar yang muat pada lebar 390px belum tentu muat ketika pengguna memperbesar teks.

Kesalahan 7: memasang library sebelum memahami masalah

Library dapat mempercepat kerja, tetapi setiap dependensi membawa ukuran, API, pembaruan, dan risiko supply chain. Sebelum memasang, tulis kebutuhan spesifik: apakah perlu date parsing, animasi kompleks, validasi schema, atau hanya toggle class?

• Periksa ukuran dan bagian yang benar-benar digunakan.
• Lihat frekuensi maintenance dan dokumentasinya.
• Pastikan lisensi sesuai.
• Catat cara memperbarui dan menghapusnya.
• Jangan memuat library di halaman yang tidak memakainya.

Kesalahan 8: commit terlalu besar

Satu commit berisi perubahan navbar, warna, data artikel, dan perbaikan bug sulit direview serta sulit dibatalkan. Buat commit berdasarkan satu tujuan.

git status
git diff
git add -p
git commit -m "fix: cegah overflow kartu di layar kecil"

git status
git add assets/js/theme.js
git commit -m "feat: simpan preferensi tema"

git add -p membantu memilih hunk yang masuk ke commit. Baca diff sebelum commit agar file debug, token, atau perubahan tidak sengaja tidak ikut terkirim.

Kesalahan 9: menganggap console bersih berarti selesai

Console tanpa error hanya berarti tidak ada error yang muncul pada skenario tersebut. Tambahkan pemeriksaan lain: validasi HTML, keyboard, link internal, ukuran viewport, jaringan lambat, dan JavaScript dimatikan jika konten utama seharusnya tetap tersedia.

Area	Pemeriksaan minimum
HTML	Heading, label, landmark, nesting valid
CSS	320px, zoom, dark/light, overflow
JavaScript	Success, kosong, gagal, klik berulang
Network	404 resource, cache, respons lambat
Git	Diff bersih dan tidak ada rahasia

Urutan belajar yang lebih tahan lama

1. Kuasai HTML native dan form sebelum komponen buatan.
2. Pahami normal flow, box model, Flexbox, dan Grid sebelum mengejar framework CSS.
3. Latih data, function, DOM, event, dan asynchronous JavaScript.
4. Gunakan Git sejak proyek kecil.
5. Uji satu proyek pada banyak kondisi, bukan membuat banyak halaman yang hanya bekerja di satu layar.
6. Tulis catatan keputusan: masalah, pilihan, alasan, dan hasil.

Referensi resmi

• MDN Learn Web Development
• web.dev Learn
• W3C Markup Validation Service
• Git Tutorial