Trước khi bạn nói rằng Phần Frontend của bạn đã xong thì hãy chắn chắn là tất cả mọi thứ đã làm việc đúng với mong muốn.
Nhưng, Frontend là phần có nhiều lỗi vặt nhất cái trần đời này.
Đây là checklist cá nhân của mình mà mình đã tổng hợp qua thời gian làm về Frontend DEV.
Mình biết có rất nhiều checklist khác nhau nhưng mình đã tạo riêng cho mình những checklist mà mình thấy tốt nhất đối với mình. Mình cũng thêm những danh sách tương tự khác ở cuối trang (cho đầy đủ) 😀
Kiểm tra HTML và CSS
Ở phần HTML, CSS có rất nhiều vấn đề. Mình thường xuyên sử dụng danh sách dưới đây để hỗ trợ kiểm tra code của mình.
- https://github.com/joshbuchea/HEAD
- https://validator.w3.org/
- https://www.10bestdesign.com/dirtymarkup/
- https://validator.w3.org/checklink
- https://uncss-online.com/
- https://github.com/purifycss/purifycss
Kiểm tra Khả năng truy cập
Đảm bảo là bạn đã kiểm tra về khả năng truy cập của Website. Công cụ bên dưới đây hỗ trợ rất nhiều đấy.
- https://achecker.ca/checker/index.php
- http://contrast-ratio.com/
- http://wave.webaim.org/
- https://websiteseochecker.com/html-sitemap-generator/
Kiểm tra tính bảo mật
Là một Frontend DEV có lẽ bạn không quan tâm đến bảo mật cho lắm. Nhưng đây lại là một phần quan trọng. Nếu muốn tiến xa hơn, sản phẩm hoàn thiện hơn. Hãy quan tâm đến việc kiểm tra bảo mật bạn nhé.
- https://securityheaders.com
- https://webbkoll.dataskydd.net/en
- https://observatory.mozilla.org/
- https://letsencrypt.org/
- https://www.ssllabs.com/ssltest/index.html
Tối ưu ảnh để tăng tốc độ load website
Kích thước ảnh ảnh hưởng rất nhiều đối với tốc độ load. Cố gắng tối ưu hình ảnh trước khi bạn tải lên website.
Tốc độ load webstie tốt mang lại trải nghiệm người dùng tốt. Xếp hạng trang web trên Google cũng sẽ tốt hơn rất nhiều.
Cái cuối cùng mình hay sử dụng nhất. Nén ảnh JPG rất tốt. PNG thì cẩn thận một chút với opacity.
Kiểm tra Hiệu năng (Performance)
Hiệu năng là vấn đề cực kỳ quan trọng. Đừng vẽ vời lung tung để hiệu năng quá kém nhé.
- https://tools.pingdom.com/
- https://simplesharingbuttons.com/#intro
- https://developers.google.com/speed/pagespeed/insights/
- https://testmysite.withgoogle.com/intl/en-gb
- https://www.webpagetest.org/
- Thêm lazy-loading;
// Tải trước tài nguyên high-confidence
// sẽ được sử dụng trong trang hiện tại.
// Tải trước tài nguyên có khả năng sử dụng trong các điều hướng đến
// trong tương lai
<link rel="prefetch" href="image.png">
<link rel="preload" href="image.png">Checklist khác
Tham khảo Frontend Checklist toàn tập:
Tổng kết
Nếu bạn có bất kỳ lời khuyên và tài nguyên nào khác mà bạn muốn chia sẻ về Frontend Checklist, hãy comment ngay bên dưới. Mình sẽ bổ sung thêm.
Frontend Development là chặng đường gian khổ. Hãy cùng nhau phát triển nhé. ^^
