Nhật ký Ngày... Tháng.. Năm...
blank
Trang chủ » Góc Chia Sẻ » Checklist nhiệm vụ dành cho Front End Developer

Checklist nhiệm vụ dành cho Front End Developer

blank Cương Phạm
774 lượt xem
19 phút đọc

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.

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 :

  • Low 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ể.
  • Medium 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.
  • High 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.

Meta tag

  • [ ] Doctype: High Doctype phải là HTML5 và nằm ở đầu tất cả các trang HTML của bạn.
<!-- Doctype HTML5 -->
<!doctype html>

3 thẻ meta (Charset, X-UA Compatible and Viewport) cần được khai báo đầu tiên ở head.

  • [ ] Charset: High Charset (UTF-8) phải được khai báo một cách chính xác.
<!-- Set character encoding for the document -->
<meta charset="utf-8">
  • [ ] X-UA-Compatible: Medium Thẻ X-UA-Compatible meta được khai .
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
  • [ ] Viewport: High Viewport phải được khai báo chính xác.
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • [ ] Title: High Tiêu đề phải được sử dụng trên tất cả các trang (SEO: Google tính toán chiều rộng pixel của các ký tự được sử dụng trong tiêu đề, cắt bỏ giữa 472 và 482 pixel. Số lượng ký tự trung bình giới hạn khoảng 55 ký tự).
<!-- Document Title -->
<title>Page Title less than 65 characters</title>
  • [ ] Description: High Thẻ meta mô tả (description) được khai báo, hãy đảm bảo nó là duy nhất và không hơn 150 ký tự.
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
  • [ ] Favicons: Medium Hãy đảm bảo mỗi favicon đã được tạo ra và hiển thị chính xác. Nếu bạn chỉ có một tệp tin 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" target="_blank" rel="nofollow" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" target="_blank" rel="nofollow" href="https://example.com/favicon.png">
  • [ ] Apple Touch Icon: Low Tồn tại Apple touch favicon apple-mobile-web-app-capable. (Hãy tạo ra các tệp tin Apple Icon với kích thước tối thiểu 200x200px để hỗ trợ tất cả các kích thước mà bạn cần)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" target="_blank" rel="nofollow" href="/custom-icon.png">
  • [ ] Windows Tiles:Low Tồn tại Windows tiles và được liên kết.
<!-- 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: Medium Sử dụng rel="canonical" để tránh nội dung trùng lặp.
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" target="_blank" rel="nofollow" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

  • [ ] Language tag: High Thẻ ngôn ngữ trên trang web của bạn được chỉ định và liên quan đến ngôn ngữ của trang hiện tại.
<html lang="en">
  • [ ] Direction attribute: Medium Hướng văn bản được chỉ định trên thẻ body (Nó có thể được sử dụng trên thẻ HTML khác).
<html dir="rtl">
  • [ ] Alternate language: Low Thẻ ngôn ngữ thay thế của trang web của bạn được chỉ định và liên quan đến ngôn ngữ của trang hiện tại.
<link rel="alternate" target="_blank" rel="nofollow" href="https://es.example.com/" hreflang="es">
  • [ ] Conditional comments: Low Conditional comments are present for IE if needed.
  • [ ] RSS feed: Low Nếu dự án của bạn là một blog hoặc có các bài viết, cần cung cấp một liên kết RSS tới chúng.
  • [ ] CSS Critical: Medium The CSS critical (hoặc “above the fold”) tập hợp tất cả các thành phần CSS được sử dụng để hiển thị một phần trên trang web. Nó được nhúng trước khi CSS chính của bạn được gọi ra và giữa thẻ <style></style> trong một dòng (minified).
  • [ ] CSS order: High Tất cả các tệp tin CSS đểu phải được tải trước bất kỳ tệp tin JavaScript nào trong thẻ <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).

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ị.

  • [ ] Facebook Open Graph: Low Đảm bảo tất cả các Facebook Open Graph (OG) được kiểm thử (tested) và không một thẻ nào bị sai thông tin. Các tệp tin ảnh cần có kích thước tối thiểu là 600 x 315 pixels, khuyến khích sử dụng kích thước sau: 1200 x 630 pixels.
<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">
  • [ ] Twitter Card: Low
<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

  • [ ] HTML5 Semantic Elements: High Thành phần ngữ nghĩa HTML5 được sử dụng hợp lý (header, section, footer, main…).
  • [ ] Error pages: High Tồn tại các trang lỗi 404 và 5xx. Hãy nhớ rằng các trang lỗi 5xx cần phải có tích hợp CSS (không gọi tới css bên ngoài máy chủ hiện tại).
  • [ ] Noopener: Medium Trong trường hợp bạn đang sử dụng external links với target = '_ blank', liên kết của bạn phải có thuộc tính rel ="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ụng rel ="noopener noreferrer".
  • [ ] Clean up comments: Low Các đoạn mã không cần thiết mã cần phải được gỡ bỏ trước khi đưa ra production.

HTML testing

  • [ ] W3C compliant: High Toàn bộ các page cần phải được kiểm thử với W3C validator để xác định các vấn đề có thể xảy ra trong HTML code.
  • [ ] HTML Lint: High Tôi sử dụng các công cụ để giúp phân tích bất kỳ vấn đề nào có thể có trong mã HTML.
  • [ ] Desktop Browsers: High Tất cả các page đều được kiểm thử trên toàn bộ trình duyệt web của desktop (Safari, Firefox, Chrome, Internet Explorer, EDGE…).
  • [ ] Mobile Browsers: High Tất cả các page đều được kiểm thử trên toàn bộ trình duyệt web của mobile (Native browser, Chrome, Safari…).
  • [ ] Link checker: High Hãy đảm bảo không có liên kết bị hỏng trong trang web của bạn, hãy xác minh rằng bạn không có bất kỳ lỗi 404 nào.
  • [ ] Adblockers test: Medium Trang web của bạn hiển thị chính xác nội dung ngay cả khi tính năng chặn quảng cáo trên trình duyệt được kích hoạt (Bạn có thể đưa ra một thông báo khuyến khích mọi người vô hiệu hóa adblocker của họ).
  • [ ] Pixel perfect: High Các page cần đạt tới trạng thái hoàn hảo đến từng pixel. Tùy thuộc vào chất lượng của quảng cáo, có thể không chính xác 100%, nhưng các web page cần phải gần với template của bạn.

Pixel Perfect – Chrome Extension

Webfonts

  • [ ] Webfont format: High WOFF, WOFF2 và TTF được hỗ trợ trên tất cả các trình duyệt hiện đại.
  • [ ] Webfont size: High Dung lượng (size) của Webfont không vượt quá 2 MB (Bao gồm tất cả các thứ liên quan).

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.

  • [ ] Responsive Web Design: High Trang web sử dụng thiết kế phản hồi (responsive).
  • [ ] CSS Print: Medium Một bản in stylesheet đươc cung cấp và chính xác trên mỗi each page.
  • [ ] Preprocessors: Medium Page của bạn đang sử dụng CSS preprocessor (Ưu tiên Sass).
  • [ ] Unique ID: High Nếu IDs được sử dụng, chúng phải là duy nhất trên một page.
  • [ ] Reset CSS: High CSS reset (reset, normalize hoặc reboot) được sử dụng và luôn được cập nhật. (Nếu bạn đang sử dụng CSS Framework như Bootstrap hoặc Foundation, Normalize đã được bao gồm trong đó.)
  • [ ] JS prefix: Low Tất cả các class (hoặc id- được sử dụng trong tệp tin JavaScript) bắt đầu với js- và không được sử dụng làm định dạng trong các tệp tin CSS.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • [ ] CSS embed hoặc line: High Tránh sử dụng CSS embed hoặc inline: Chỉ sử dụng nếu có lý do chính đáng (Ví dụ: background-image cho slider, CSS quan trọng, …).
  • [ ] Vendor prefixes: High CSS vendor prefixes được sử dụng và để phù hợp với tính tương thích của trình duyệt.

Performance

  • [ ] Concatenation: High Toàn bộ các CSS files cần được concat thành một file duy nhất. (Not for HTTP/2)
  • [ ] Minification: High Toàn bộ các CSS files cần được minify.
  • [ ] Non-blocking: Medium Toàn bộ các CSS files cần được non-blocking việc ngăn chặn DOM mất thời gian để load.
  • [ ] Unused CSS: Low Loại bỏ các đoạn mã CSS không sử dụng.

CSS testing

  • [ ] Stylelint: High Toàn bộ CSS hoặc SCSS files phải không còn lỗi nào.
  • [ ] Responsive web design: High Tất cả các trang đã được kiểm thử (test) tại breakpoints sau: 320px, 768px, 1024px (có thể thêm / khác theo phân tích của bạn).
  • [ ] CSS Validator: Medium Các CSS đã được kiểm thử (test) và lỗi cần thiết đã được chỉnh sửa
    .
  • [ ] Reading direction: High Tất cả các trang cần phải được kiểm tra với ngôn ngữ LTR và RTL nếu chúng cần phải hỗ trợ.

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

  • [ ] Optimization: High Tất cả hình ảnh được tối ưu hóa để hiển thị trên trình duyệt. Định dạng WebP có thể được sử dụng cho các trang web quan trọng (chẳng hạn như trang chủ).
  • 🛠 Imagemin
  • 🛠 Sử dụng ImageOptim tối ưu hóa hình ảnh của bạn miễn phí.
  • [ ] Retina: Low Hãy cung cấp sẵn các layout images x2 hoặc 3x, nhằm hỗ trợ retina display.
  • [ ] Sprite: Medium Với các hình ảnh nhỏ nên đặt trong một sprite file (Ví dụ như trường hợp các icons, chúng có thể được lưu trong một SVG sprite image).
  • [ ] Width và Height: High Tất cả thẻ <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: High Mỗi thẻ <img> có chứa một alternative text mô tả ảnh một cách trực quan.
  • [ ] Lazy loading: Medium Các hình ảnh phải được lazyloaded (Noscript dự phòng luôn luôn cung cấp nếu trình duyệt không hỗ trợ javascript).

JavaScript

Best practices

  • [ ] JavaScript Inline: High Hãy đảm bảo bạn không sử dụng bất cứ JavaScript code inline nào (mixed bên trong HTML code).
  • [ ] Concatenation: High Toàn bộ các JavaScript files được ghép lại (concatenated) thành một file duy nhất.
  • [ ] Minification: High Toàn bộ các JavaScript files được rút gọn (minified) (Bạn có thể thêm hậu tố .min vào tên file).
  • [ ] JavaScript security:
  • [ ] Non-blocking: Medium Các JavaScript files được nạp bất đồng bộ (loaded asynchronously) sử dụng async hoặc deferred sử dụng thuộc tính defer.
  • [ ] Modernizr: Low Nếu bạn cần nhắm mục tiêu tới một số tính năng cụ thể, bạn có thể sử dụng một Modernizr tùy chỉnh thêm các class trong thẻ <html> của bạn.

JavaScript testing

  • [ ] ESLint: High Hãy đảm bảo không còn bất kỳ lỗi nào được phát hiện bởi ESLint (Dựa trên các rules do bạn cấu hình hoặc bộ rule tiêu chuẩn).

Security

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

Best practices

  • [ ] HTTPS: Medium Đảm bảo HTTPS được sử dụng trên mọi page và cho toàn bộ external content (plugins, images…).
  • [ ] HTTP Strict Transport Security (HSTS): Medium HTTP header được thiết lập là ‘Strict-Transport-Security’.
  • [ ] Cross Site Request Forgery (CSRF): High Bạn cần chắc chắn rằng mọi request từ phía server phải hợp lệ và có nguồn gốc từ website/app của bạn để ngăn chặn tấn công CSRF.
  • [ ] Cross Site Scripting (XSS): High Trang web của bạn không gặp phải các vấn đề liên quan tới XSS.
  • [ ] Content Type Options Medium Ngăn chặn Google Chrome và Internet Explorer cố gắng mime-sniff content-type của response từ một máy chủ
  • [ ] X-Frame-Options (XFO) Medium Bảo vệ người truy cập website của bạn trước các cuộc tấn công clickjacking.

Performance

Best practices

  • [ ] Weight page: High Dung lượng tải của mỗi page nên nằm trong khoảng từ 0 đến 500 KB.
  • [ ] Minified: Medium Mã HTML cần được rút gọn (minified).
  • [ ] Lazy loading: Medium Images, scripts và CSS cần được lazy loaded để cải thiện response time của mỗi page (Xem chi tiết trong các sections tương ứng với images, scripts, css).
  • [ ] 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.

Preparing upcoming requests

  • [ ] DNS resolution: Low DNS của dịch vụ bên thứ ba có thể được phân giải trước trong suốt idle-time bằng cách sử dụng dns-prefetch.
<link rel="dns-prefetch" target="_blank" rel="nofollow" href="https://example.com">
  • [ ] Preconnection: Low DNS lookup, TCP handshake và TLS negociation với các dịch vụ cần được thực hiện trước trong idle-time bằng cách sử dụng preconnect.
<link rel="preconnect" target="_blank" rel="nofollow" href="https://example.com">
  • [ ] Prefetching: Low Các tài nguyên cần tải (e.g. lazy loaded images) có thể được request trước trong idle-time bằng cách sử dụng prefetch.
<link rel="prefetch" target="_blank" rel="nofollow" href="image.png">
  • [ ] Preloading: Low Các tài nguyên cần thiết cho page hiện tại (e.g. scripts được đặt ở cuối thẻ <body>) bằng cách sử dụng preload.
<link rel="preload" target="_blank" rel="nofollow" href="app.js">

Performance testing

  • [ ] Google PageSpeed: High Toàn bộ các page của bạn cần được kiểm thử (không chỉ riêng homepage) và phải đạt số điểm tối thiểu 90/100.

Accessibility

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

Best practices

  • [ ] Progressive enhancement: Medium Các chức năng chính như navigation và tìm kiếm nên hoạt động mà không cần kích hoạt JavaScript.
  • [ ] Color contrast: Medium Độ tương phản màu tối thiểu cần pass WCAG AA (AAA for mobile).

Headings

  • [ ] H1: High Tất cả các page phải có thẻ H1 không là tiêu đề của website.
  • [ ] Headings: High Tiêu đề nên được sử dụng đúng cách theo đúng thứ tự (H1 đến H6).

Landmarks

  • [ ] Role banner: High <header> có role="banner".
  • [ ] Role navigation: High <nav> có role="navigation".
  • [ ] Role main: High <main> có role="main".

Semantics (Ngữ nghĩa)

  • [ ] Specific HTML5 input types are used: Medium Điều này đặc biệt quan trọng trên các thiết bị di động hiển thị bàn phím tùy chỉnh và các widgets cho các kiểu khác nhau.

Form

  • [ ] Label: High Mỗi một label (nhãn) được gắn kết với một input form element. Trong trường hợp label không thể hiển thị, hãy sử dụng aria-label thay thế.

Accessibility testing

  • [ ] Accessibility standards testing: High Sử dụng công cụ WAVE để kiểm thử nếu page của bạn tuân theo các tiêu chuẩn về khả năng tiếp cận.
  • [ ] Keyboard navigation: High Kiểm tra trang web của bạn bằng cách chỉ sử dụng bàn phím theo thứ tự được đặt trước. Tất cả các yếu tố tương tác đều có thể truy cập và sử dụng được.
  • [ ] Screen-reader: Medium Tất cả các page đều được kiểm thử trong trình đọc màn hình (VoiceOver, ChromeVox, NVDA hoặc Lynx).
  • [ ] Focus style: High Nếu focus bị vô hiệu hóa, nó được thay thế bằng trạng thái visible trong CSS.

SEO

  • [ ] Google Analytics: High Google Analytics được cài đặt và định cấu hình chính xác.
  • [ ] Headings logic: Medium Tiêu đề văn bản giúp nội dung trong trang hiện tại dễ hiểu.
  • [ ] sitemap.xml: High Tồn tại sitemap.xml và được submit cho Google Search Console (Google Webmaster Tools).
  • [ ] robots.txt: High File robots.txt không block webpages.
  • [ ] Structured Data: High Các pages sử dụng dữ liệu có cấu trúc đều được kiểm thử và không có lỗi. Dữ liệu có cấu trúc giúp crawlers hiểu nội dung của page hiện tại.
  • [ ] Sitemap HTML: Medium Một sơ đồ trang web HTML (sitemap) được cung cấp và có thể truy cập thông qua một liên kết ở footer của trang web.

Nguồn: https://github.com/thedaviddias/Front-End-Checklist

blank

Cương Phạm

Xem các bài viết

Thêm bình luận

Góc quảng cáo