Home

Awesome

Front-End Checklist

Join the chat at https://gitter.im/Front-End-Checklist/Lobby Front‑End_Checklist followed Contributors StackShare CC0

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.

Mục lục

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. 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 :

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:

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

<html lang="en">

<html dir="rtl">

<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">

⬆ Về đầu trang

HTML

Best practices

HTML testing

Pixel Perfect - Chrome Extension

⬆ Về đầu trang

Webfonts

⬆ Về đầu trang

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

⬆ Về đầu trang

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.

⬆ Về đầu trang

JavaScript

Best practices

JavaScript testing

⬆ Về đầu trang

Security

Quét (scan) và kiểm tra web site của bạn

Best practices

⬆ Về đầu trang

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

⬆ Về đầu trang

Accessibility

Notes: Bạn có thể xem playlist sau A11ycasts with Rob Dodson 📹

Best practices

Headings

Landmarks

Semantics (Ngữ nghĩa)

Form

Accessibility testing

⬆ Về đầu trang

SEO

⬆ Về đầu trang

Translation

Front-End Checklist được dịch sang các ngôn ngữ khác:

Front-End Checklist Badge

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!

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ Về đầu trang

Contributing

Mở ra một issue hoặc một pull request khi bạn muốn đề nghị thay đổi hoặc bổ sung.

Guide

Front-End Checklist repository chứa 2 nhánh chính:

1. master

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.

2. develop

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.

Contributors

Danh sách những cá nhân đóng góp cho dự án.

Support

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:

Authors

David Dias

License

CC0

⬆ Về đầu trang