Đăng bài viết mới trong cộng đồng của bạn
Upload
Abstract và Interface
Abstract class và Interface giúp trừu tượng hóa logic trong Java. Abstract class có thể chứa phương thức có thân hoặc không, còn Interface chỉ chứa phương thức trừu tượng. Interface hỗ trợ đa kế thừa, còn Abstract class thì không.
0
0
0
Copy link
Tìm hiểu Lombok
Lombok là thư viện Java giúp tự động sinh code qua annotation, giảm mã lặp và tăng năng suất. Nó hỗ trợ getter, setter, constructor, builder,..... nhưng có thể gây khó debug và phụ thuộc vào thư viện ngoài.
0
0
0
Copy link
Maven và Cách add các Dependency vào Project
Maven là công cụ quản lý dự án giúp tự động hóa build và quản lý thư viện trong Java. Bài viết hướng dẫn cách tạo project Maven, tìm kiếm và thêm thư viện PostgreSQL, hiểu về transitive dependencies và local repository.
0
0
0
Copy link
Một số quy tắc đơn giản tối ưu hóa Truy vấn SQL
Tối ưu hóa truy vấn SQL bằng cách sử dụng index, tránh OR, không dùng LIKE '%', tận dụng FULLTEXT SEARCH, tránh hàm trên cột index, chọn kiểu dữ liệu phù hợp, và sử dụng caching.
0
0
0
Copy link
Sử Dụng Google Format Code
Google Format Code giúp bạn định dạng code tự động theo tiêu chuẩn của Google, cải thiện tính nhất quán, dễ đọc và duy trì. Công cụ này hỗ trợ nhiều ngôn ngữ lập trình, giúp tiết kiệm thời gian chỉnh sửa thủ công.
0
0
0
Copy link
Hướng dẫn cơ bản về MapStruct
MapStruct là thư viện Java giúp ánh xạ dữ liệu giữa các lớp một cách tự động, tiết kiệm thời gian và giảm lỗi. Chỉ cần định nghĩa interface, MapStruct sẽ tạo mã chuyển đổi tại thời điểm biên dịch. Dễ tích hợp với Spring, hỗ trợ tùy chỉnh và ánh xạ danh sách.
0
0
0
Copy link
Quy Tắc Viết Code Hiệu Quả
Quy tắc viết code chuẩn: đơn nhiệm, comment rõ ràng, đặt tên đúng, DRY, KISS, và xử lý ngoại lệ.
0
0
0
Copy link
Firebase - Push notification using firebase (Part 2)
Hướng dẫn triển khai Firebase Cloud Messaging (FCM) từ cấu hình Firebase, lưu token đến gửi thông báo.
0
0
0
Copy link
SEND MAIL IN SPRING BOOT (PART 2)
Trong bài viết trước, chúng ta đã học cách gửi email đơn giản trong Spring Boot. Hôm nay, chúng ta sẽ tiếp tục mở rộng chức năng gửi email với một số tính năng nâng cao, bao gồm: mở rộng chức năng gửi email với một số tính năng nâng cao: gửi Email đính kèm tệp và gửi Email với nội dung HTML
0
0
0
Copy link
Bạn thường kiểm tra responsive trên các thiết bị như thế nào?

1. Kiểm tra bằng DevTools trên trình duyệt

Hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge đều có công cụ phát triển tích hợp (DevTools) để kiểm tra responsive.

  • Cách thực hiện:
  1. Mở trang web trên trình duyệt.
  2. Nhấn F12 hoặc chuột phải → chọn Inspect.
  3. Chọn biểu tượng Toggle device toolbar (hoặc nhấn Ctrl + Shift + M).
  4. Chọn các thiết bị mặc định (như iPhone, iPad, Galaxy) hoặc tự chỉnh sửa kích thước màn hình (width x height).
  5. Kiểm tra các breakpoint (điểm ngắt) và xem giao diện có hiển thị đúng không.
  • Ưu điểm:
  • Nhanh chóng và dễ sử dụng.
  • Cho phép giả lập nhiều loại thiết bị và độ phân giải.
  • Có thể kiểm tra các tính năng như xoay màn hình, zoom.

2. Kiểm tra trực tiếp trên các thiết bị thực

Sử dụng các thiết bị thực tế để kiểm tra giúp bạn đảm bảo chính xác trải nghiệm người dùng.

  • Thiết bị phổ biến cần kiểm tra:
  • Điện thoại di động: iPhone, Android (Samsung, Xiaomi, v.v.).
  • Máy tính bảng: iPad, Galaxy Tab.
  • Laptop và màn hình lớn.
  • Cách thực hiện:
  1. Mở trang web trên các thiết bị thực.
  2. Kiểm tra giao diện, tốc độ tải, các thành phần UI/UX.
  • Ưu điểm:
  • Độ chính xác cao vì kiểm tra trực tiếp trên thiết bị người dùng.
  • Phát hiện các vấn đề không xuất hiện trên giả lập (như hiệu suất, cảm ứng).

3. Sử dụng công cụ kiểm tra responsive online

Các công cụ online giúp bạn xem giao diện trên nhiều loại thiết bị và kích thước màn hình.

  • Một số công cụ phổ biến:
  • Responsive Design Checker
  • Screenfly
  • BrowserStack
  • Google Mobile-Friendly Test
  • Ưu điểm:
  • Không cần cài đặt thêm phần mềm.
  • Kiểm tra trên nhiều trình duyệt và kích thước màn hình.

4. Kiểm tra với Media Queries trong CSS

Trong quá trình phát triển, bạn có thể kiểm tra trực tiếp bằng cách áp dụng các media queries trong CSS.

  • Cách kiểm tra:
  • Thu nhỏ kích thước cửa sổ trình duyệt hoặc sử dụng DevTools.
  • Kiểm tra xem CSS được áp dụng chính xác không.

5. Sử dụng trình giả lập hoặc máy ảo

Trình giả lập cho phép bạn mô phỏng các thiết bị và hệ điều hành khác nhau.

  • Ví dụ:
  • Xcode (cho iOS).
  • Android Studio (cho Android).
  • Các máy ảo trên VirtualBox hoặc VMWare.

6. Chạy thử nghiệm với công cụ CI/CD

Nếu bạn làm việc trong dự án lớn, sử dụng các công cụ kiểm tra tự động như Percy, Cypress, hoặc Selenium để chạy thử nghiệm responsive.

7. Kiểm tra với các màn hình khác nhau

Nếu bạn không có thiết bị thực, bạn có thể thử thay đổi độ phân giải màn hình trên máy tính:

  • Windows: Settings → Display → Scale and layout → Change resolution.
  • MacOS: System Preferences → Displays → Scaled.

Kinh nghiệm cá nhân:

  • Luôn ưu tiên kiểm tra trên các thiết bị thực phổ biến (iPhone, Samsung).
  • Sử dụng DevTools để kiểm tra nhanh trước khi chuyển sang thiết bị thực.
  • Đảm bảo thử nghiệm ở các breakpoint phổ biến:
  • Mobile: 360px - 480px.
  • Tablet: 768px - 1024px.
  • Desktop: 1280px - 1920px.
  • Cách kiểm tra:
  • Thu nhỏ kích thước cửa sổ trình duyệt hoặc sử dụng DevTools.
  • Kiểm tra xem CSS được áp dụng chính xác không.

5. Sử dụng trình giả lập hoặc máy ảo

Trình giả lập cho phép bạn mô phỏng các thiết bị và hệ điều hành khác nhau.

  • Ví dụ:
  • Xcode (cho iOS).
  • Android Studio (cho Android).
  • Các máy ảo trên VirtualBox hoặc VMWare.

6. Chạy thử nghiệm với công cụ CI/CD

Nếu bạn làm việc trong dự án lớn, sử dụng các công cụ kiểm tra tự động như Percy, Cypress, hoặc Selenium để chạy thử nghiệm responsive.

7. Kiểm tra với các màn hình khác nhau

Nếu bạn không có thiết bị thực, bạn có thể thử thay đổi độ phân giải màn hình trên máy tính:

  • Windows: Settings → Display → Scale and layout → Change resolution.
  • MacOS: System Preferences → Displays → Scaled.

Kinh nghiệm cá nhân:

  • Luôn ưu tiên kiểm tra trên các thiết bị thực phổ biến (iPhone, Samsung).
  • Sử dụng DevTools để kiểm tra nhanh trước khi chuyển sang thiết bị thực.
  • Đảm bảo thử nghiệm ở các breakpoint phổ biến:
  • Mobile: 360px - 480px.
  • Tablet: 768px - 1024px.
  • Desktop: 1280px - 1920px.

1
0
1
Copy link

Cộng đồng

340
Câu hỏi và bình luận tuần này tại cộng đồng Front End
230
Bài đăng mới trong cộng đồng Front End
560
Thành viên mới được chào đón tại cộng đồng Back End