Mengamplas UI

• Saat melakukan pengembangan, kita membuat sesuatu, mengkliknya berkali-kali, memperbaikinya, lalu mengklik lagi berulang-ulang
• Untuk perpindahan halaman, tombol kembali digunakan berkali-kali
• Ini semacam taktik QA, yaitu proses menemukan masalah sambil mengklik lalu memperbaikinya
• Mirip seperti pekerjaan pertukangan kayu: menyelesaikan masalah besar terlebih dahulu, lalu merapikan detail-detail kecil

Pengujian UI

• Ada terlalu banyak variabel dalam perangkat lunak, sehingga sulit menguji dan merapikan semuanya
• Proses menemukan lalu memperbaiki masalah diulang dengan menggunakan UI berkali-kali

Mengerjakan daftar opsi radio

• Menempatkan dan pada baris yang sama, meratakannya ke tengah, dan memberi jarak
• Dulu hal ini dilakukan dengan float di CSS, tetapi sekarang mudah dikerjakan dengan flexbox

  
  Foo  
  
  
  
  
  .container {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    gap: .5rem;  
  }  
  

Menemukan dan menyelesaikan masalah

• Di UI, ditemukan area mati di antara radio dan label yang tidak bisa diklik
• Dipastikan bahwa properti gap pada flexbox adalah penyebab masalahnya
• Masalah diselesaikan dengan menghapus gap dan menambahkan padding pada label
• Dengan menambahkan padding pada label, area tersebut menjadi bisa diklik tanpa menyisakan area mati

Kesimpulan

• Masalah-masalah kecil yang menumpuk dapat menimbulkan ketidaknyamanan besar
• Dengan mengulangi proses menemukan dan memperbaiki masalah, hasil akhirnya menjadi mulus

Ringkasan GN⁺

• Artikel ini menjelaskan proses menemukan dan menyelesaikan masalah-masalah kecil yang dapat muncul selama pengembangan UI
• Flexbox memudahkan penyusunan layout, tetapi masalah tak terduga tetap bisa muncul
• Untuk menyelesaikan masalah, berbagai pendekatan dicoba, dan pada akhirnya masalah diatasi dengan menggunakan padding
• Memberikan tips yang berguna bagi pengembang UI sekaligus menekankan pentingnya proses menyelesaikan masalah-masalah kecil