Front-End Checklist là một danh sách tương đối đầy đủ về tất cả các yếu tố bạn cần kiểm tra trang web/HTML của mình trước khi đưa chúng tới tay người dùng trên production.
Frontend Checklist Toàn Tập
Checklist này được xây dựng bởi các Front-End developer nhiều năm kinh nghiệm, cùng với sự bổ sung và tham khảo từ nhiều open-source checklists khác.
Mục lục
-
Head
-
HTML
-
Webfonts
-
CSS
-
Images
-
JavaScript
-
Security
-
Performance
-
Accessibility
-
SEO
Cách sử dụng?
Tất cả các mục trong Front-End Checklist đều được yêu cầu thực hiện cho phần lớn các dự án, nhưng một số phần có thể được bỏ qua hoặc không cần thiết (Ví dụ trong trường hợp của một ứng dụng web liên quan tới quản trị, bạn có thể không cần phải có RSS feed chẳng hạn). Chúng tôi lựa chọn sử dụng 3 cấp độ linh hoạt :
-
có nghĩa là mục này được recommended sử dụng nhưng có thể được bỏ qua trong một số tình huống cụ thể.
-
có nghĩa là mục này được highly recommended và có thể được bỏ qua trong một số trường hợp thực sự đặc biệt. Một số yếu tố, nếu như bỏ qua có thể có ảnh hưởng xấu về hiệu suất hoặc SEO của trang web.
-
có nghĩa là mục này không thể bỏ qua vì bất kỳ lý do nào. Bạn có thể gây ra sự rối loạn trong trang web của bạn hoặc các vấn đề truy cập hoặc SEO. Các yếu tố/mục trong phần này cần được ưu tiên kiểm tra trước tiên.
Một số tài nguyên có biểu tượng cảm xúc để giúp bạn hiểu loại nội dung/trợ giúp bạn có thể tìm thấy trong checklist:
-
📖: Tài liệu hoặc các bài viết
-
🛠: Online tool / testing tool
-
📹: Nội dung media hoặc video
Head
Notes: Bạn có thể tìm thấy một danh sách tất cả mọi thứ liên quan tới thẻ <head> của tài liệu HTML.
Meta tag
<!-- Doctype HTML5 -->
<!doctype html>
3 thẻ meta (Charset, X-UA Compatible and Viewport) cần được khai báo đầu tiên ở head.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title -->
<title>Page Title less than 65 characters</title>
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
Cấu hình xml tối thiểu cho tệp tin browserconfig.xml như sau:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
HTML tags
<link rel="alternate" href="https://es.example.com/" hreflang="es">
Social meta
Facebook OG và Twitter Cards thì được khuyến khích sử dụng cho bất kỳ website nào. Các thẻ social media khác có thể được xem xét nếu bạn nhắm mục tiêu một hiện diện cụ thể những trang web đó và muốn đảm bảo hiển thị.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
HTML
Best practices
HTML testing
Pixel Perfect - Chrome Extension
Webfonts
CSS
Notes: CSS guidelines và Sass Guidelines được follow bởi hầu hết Front-End developers. Nếu bạn gặp vấn đề hay có bất kỳ thắc mắc nào về CSS properties, bạn có thể truy cập CSS Reference.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
Performance
CSS testing
Images
Notes: Để am hiểu hơn về việc tối ưu hoá hình ảnh, bạn có thể tham khảo ebook miễn phí Essential Image Optimization được viết bởi tác giả Addy Osmani.
Best practices
Note: Rất nhiều nhà phát triển giả định rằng chiều rộng và chiều cao là không tương thích với các thiết kế responsive web. Điều đó không hoàn toàn đúng trong các trường hợp khác nhau.
JavaScript
Best practices
JavaScript testing
Security
Quét (scan) và kiểm tra web site của bạn
Best practices
Performance
Best practices
Preparing upcoming requests
<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://example.com">
<link rel="prefetch" href="image.png">
<link rel="preload" href="app.js">
Performance testing
Accessibility
Notes: Bạn có thể xem playlist sau A11ycasts with Rob Dodson 📹
Best practices
Headings
Landmarks
Semantics (Ngữ nghĩa)
Form
Accessibility testing
SEO
Nguồn:
Tham khảo thêm:
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543 - 0353655150
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp