Mài nhẵn UI

• Khi phát triển, ta tạo ra thứ gì đó, nhấp nhiều lần, chỉnh sửa rồi lại nhấp, lặp đi lặp lại quá trình đó
• Với chuyển trang, ta dùng nút quay lại nhiều lần
• Đây là một dạng chiến thuật QA, quá trình vừa nhấp vừa tìm lỗi rồi sửa
• Nó giống như làm mộc: xử lý các vấn đề lớn trước, rồi tinh chỉnh những chi tiết nhỏ

Kiểm thử UI

• Phần mềm có quá nhiều biến số nên rất khó kiểm thử và mài nhẵn mọi thứ
• Ta lặp lại quá trình dùng UI nhiều lần để tìm và sửa vấn đề

Làm danh sách tùy chọn radio

• Đặt và trên cùng một hàng, căn giữa và tạo khoảng cách giữa chúng
• Trước đây người ta dùng float của CSS, nhưng giờ có thể làm dễ dàng bằng flexbox

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

Phát hiện và giải quyết vấn đề

• Trong UI, phát hiện một vùng chết không thể nhấp nằm giữa radio và nhãn
• Xác nhận rằng thuộc tính gap của flexbox là nguyên nhân gây ra vấn đề
• Bỏ gap và thêm padding vào nhãn để giải quyết vấn đề
• Việc thêm padding vào nhãn giúp có thể nhấp được mà không còn vùng chết

Kết luận

• Những vấn đề nhỏ có thể cộng dồn thành sự bất tiện lớn
• Lặp lại quá trình phát hiện và sửa lỗi để cuối cùng có được kết quả mượt mà

Tóm tắt của GN⁺

• Bài viết này mô tả quá trình phát hiện và giải quyết những vấn đề nhỏ có thể phát sinh trong quá trình phát triển UI
• Flexbox giúp dựng bố cục dễ dàng, nhưng vẫn có thể phát sinh những vấn đề không ngờ tới
• Để giải quyết vấn đề, tác giả đã thử nhiều cách và cuối cùng dùng padding để xử lý
• Bài viết đưa ra mẹo hữu ích cho các lập trình viên UI và nhấn mạnh tầm quan trọng của quá trình giải quyết các vấn đề nhỏ