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.
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.
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
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.
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>3 thẻ meta (Charset, X-UA Compatible and Viewport) cần được khai báo đầu tiên ở head.
- Charset:
<!-- Set character encoding for the document -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
<!-- Document Title -->
<title>Page Title less than 65 characters</title>- Description:
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">- Favicons:
favicon.ico, hãy đặt nó vào thư mục gốc của trang web. Thông thường, bạn sẽ không cần phải sử dụng bất kỳ đánh dấu nào. Tuy nhiên, sẽ là tốt hơn nếu liên kết với nó như ví dụ dưới đây. Ngày nay, định dạng PNG được khuyến khích sử dụng thay cho.ico(kích thước: 32x32px).
<!-- 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:
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">- Windows Tiles:
<!-- 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>- Canonical:
rel="canonical"để tránh nội dung trùng lặp.
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">- Language tag:
<html lang="en">- Direction attribute:
<html dir="rtl">- Alternate language:
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Conditional comments:
-
RSS feed:
-
CSS Critical:
<style></style>trong một dòng (minified).
- CSS order:
<head>. (Trừ trường hợp đôi khi tệp JS được tải bất đồng bộ trên đầu trang của bạn).
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ị.
- Facebook Open Graph:
<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">
- 📖 A Guide to Sharing for Webmasters
- 🛠 Test your page with the Facebook OG testing
- Twitter Card:
<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">
- 📖 Getting started with cards — Twitter Developers
- 🛠 Test your page with the Twitter card validator
- HTML5 Semantic Elements:
-
Error pages:
-
Noopener:
target = '_ blank', liên kết của bạn phải có thuộc tínhrel ="noopener"để ngăn chặn tab nabbing. Nếu bạn cần hỗ trợ các phiên bản cũ của Firefox, hãy sử dụngrel ="noopener noreferrer".
- Clean up comments:
- W3C compliant:
- HTML Lint:
-
Desktop Browsers:
-
Mobile Browsers:
-
Link checker:
- Adblockers test:
- Pixel perfect:
- Webfont format:
- Webfont size:
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.
- Responsive Web Design:
- CSS Print:
- Preprocessors:
- Unique ID:
- Reset CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS prefix:
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS embed hoặc line:
- Vendor prefixes:
- Concatenation:
- Minification:
- Non-blocking:
- Unused CSS:
- Stylelint:
-
Responsive web design:
-
CSS Validator:
- Reading direction:
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.
- Optimization:
- 🛠 Imagemin
- 🛠 Sử dụng ImageOptim tối ưu hóa hình ảnh của bạn miễn phí.
- Retina:
- Sprite:
- Width và Height:
<img>được thiết lập height (chiều cao) và width (chiều rộng) (Không chỉ định px hoặc %).
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.
- Alternative text:
<img>có chứa một alternative text mô tả ảnh một cách trực quan.
- Lazy loading:
- JavaScript Inline:
- Concatenation:
- Minification:
.minvào tên file).
- JavaScript security:
- Non-blocking:
asynchoặc deferred sử dụng thuộc tínhdefer.
- Modernizr:
<html>của bạn.
- ESLint:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
- Cross Site Scripting (XSS):
- Content Type Options
- X-Frame-Options (XFO)
- Weight page:
- Minified:
-
Lazy loading:
-
Cookie size: Nếu bạn đang sử dụng cookie chắc chắn mỗi cookie không vượt quá 4096 byte và tên miền của bạn không có nhiều hơn 20 cookies.
- DNS resolution:
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">- Preconnection:
preconnect.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">- Preloading:
<body>) bằng cách sử dụngpreload.
<link rel="preload" href="app.js">- Google PageSpeed:
Notes: Bạn có thể xem playlist sau A11ycasts with Rob Dodson 📹
- Progressive enhancement:
- Color contrast:
- H1:
- Headings:
- Role banner:
<header>córole="banner". - Role navigation:
<nav>córole="navigation". - Role main:
<main>córole="main".
- Specific HTML5 input types are used:
- Label:
aria-labelthay thế.
- Accessibility standards testing:
- Keyboard navigation:
- Screen-reader:
- Focus style:
focusbị vô hiệu hóa, nó được thay thế bằng trạng tháivisibletrong CSS.
- Google Analytics:
- Headings logic:
- sitemap.xml:
- robots.txt:
- 🛠 Kiểm tra robots.txt của website với Google Robots Testing Tool
- Structured Data:
- 📖 Introduction to Structured Data - Search - Google Developers
- 🛠 Test your page with the Structured Data Testing Tool
- 🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Heirarchy
- Sitemap HTML:
Front-End Checklist được dịch sang các ngôn ngữ khác:
- 🇬🇧 Tiếng Anh: thedaviddias/Front-End-Checklist
- 🇯🇵 Tiếng Nhật: miya0001/Front-End-Checklist
- 🇪🇸 Tiếng Tây Ban Nha: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Tiếng Trung: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Tiếng Hàn: kesuskim/Front-End-Checklist
- 🇧🇷 Tiếng Bồ Đào Nha: jcezarms/Front-End-Checklist
Nếu bạn muốn hiển thị rằng bạn đang follow các quy tắc của Front-End Checklist, hãy gắn huy hiệu này lên tập tin README của bạn!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Mở ra một issue hoặc một pull request khi bạn muốn đề nghị thay đổi hoặc bổ sung.
Front-End Checklist repository chứa 2 nhánh chính:
Nhánh này bao gồm README.md file tác động trực tiếp đến nội dung trên Front-End Checklist website.
Nhánh này sẽ được sử dụng để tạo ra các thay đổi thay đổi đáng kể trong cơ cấu, nội dung nếu cần thiết. Nó là thích hợp hơn để sử dụng các nhánh chủ để sửa chữa các lỗi nhỏ hoặc thêm một mục mới.
Danh sách những cá nhân đóng góp cho dự án.
Nếu bạn có bất kỳ câu hỏi hoặc lời khuyên nào, đừng ngần ngại liên hệ qua Gitter hoặc Twitter:
