Skip to content

kakadodo/Front-End-Checklist-ZHTW

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
CNAME
CNAME
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
_config.yml
_config.yml
 
 

Repository files navigation

Front-End Checklist 前端開發清單

此為自己翻譯的學習文件，請從此連結參考原作者 David Dias 的 Github 內容

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

Front-End Checklist 是一份在網站 / HTML 頁面發佈到生產環境前，提供所有需要測試元素的詳細清單

這份清單基於前端開發人員多年經驗的累積，以及其他開源清單而成。

目錄

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO

How to use?

Front-End Checklist 中的所有項目都是大部分專案所必需的，但某些元素可以省略或者不是那麼重要（在管理 Web APP 的情況下，你可能不需要 RSS 訂閱）。我們將元素區分成 3 種等級：

  • Low 表示該項目是推薦使用的，但在某些特定情況下可以省略。

  • Medium 表示該項目是強烈推薦的，但可能在某些特殊情況下被省略。某些元素如果省略可能會降低性能或 SEO。

  • High 表示項目不能省略，否則可能導致頁面有訪問性的功能障礙或 SEO 的問題。應該優先測試這些元素。

某些資源有特定的圖示，幫助你理解清單上不同類型的內容：

  • 📖: 文件或文章
  • 🛠: 線上工具 / 測試工具
  • 📹: 媒體或視頻內容

Head

Notes: 你可以從 a list of everything 找到<head>標籤內可操作的內容

Meta tag

  • Doctype: High Doctype 是 HTML5 的標準宣告，寫在 HTML 網頁的開頭
<!-- Doctype HTML5 -->
<!doctype html>

📖 Determining the character encoding - HTML5 W3C

下方 3 個 meta tags (Charset, X-UA Compatible and Viewport) 需要寫於<head>標籤內的起始處

  • Charset: High 正確宣告網頁字符集 ( UTF-8 )
<!-- 設置文檔的字符編碼 -->
<meta charset="utf-8">
  • X-UA-Compatible: Medium 設置 IE 兼容模式
<!-- 指示 Internet Explorer 使用最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 Specifying legacy document modes (Internet Explorer)

  • Viewport: High 正確宣告瀏覽器窗口設置
<!-- 窗口用於響應式網頁設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  • Title: High 所有網頁都使用 title ( SEO : Google 計算 title 的 總字符寬度為 472 ~ 482 px 之間， 平均可容納 55 個字元 )
<!-- 文件標題 -->
<title>Page Title less than 65 characters</title>

📖 Title - HTML - MDN

  • Description: High 提供網頁的描述，它是唯一的且限制於150個字元內
<!-- Meta 描述 -->
<meta name="description" content="Description of the page less than 150 characters">
  • Favicons: Medium 設置網頁的favicon，確保每個 favicon 被創建且顯示正常，如果只有favicon.ico，把它放在網站的根目錄下，通常你不需要使用任何標記即可顯示，但最佳做法是以下方範例的方式來連結。現在推薦使用 PNG 格式來取代.ico格式。( 尺寸 : 32 x 32像素 )
<!-- 標準 favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推薦 favicon 格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Touch Icon: Low 供 Apple 設備呈現的 favicon。( 圖標至少 200 x 200 像素尺寸以支持可能需要的所有尺寸)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 Configuring Web Applications

  • Windows Tiles:Low windows 的動態磚設置
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

browserconfig.xml 文件至少需含以下 xml 標記:

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

📖 Browser configuration schema reference

  • Canonical: Medium 使用 rel="canonical" 來避免重複的內容。( 目的是讓搜尋引擎不要索引放置該宣告的頁面，而去索引指向的頁面 )
<!-- 有助於防止重複內容的問題 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

  • Language tag: High 設置當前頁面使用的語系
<html lang="en">
  • Direction tag: Medium 設置網頁的文章流向 ( 可被設定在其他 HTML 標籤上 )
<html dir="rtl">

📖 dir - HTML - MDN

  • Alternate language: Low 設置當前頁面的替代語系
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Conditional comments: Low for IE 使用的條件式註解

📖 About conditional comments (Internet Explorer) - MSDN - Microsoft

  • RSS feed: Low 供專案類型為部落格或含有文章的網頁提供 RSS 連結

  • CSS Critical: Medium CSS critical 集合並渲染頁面中可見部分的 CSS。在主要的 CSS 調用前以單行 ( 最小化 ) 的方式嵌入<style></style>中

🛠 Critical by Addy Osmani on Github

  • CSS order: High <head>中的 CSS 文件需於 JavaScript 文件前載入 ( 除了特定情況時 JS 文件會異步加載到頁面上 )

Social meta

強烈推薦 Facebook OG 和 Twitter Cards ，如有特定需求也可使用其他社交媒體標籤以確保功能顯示正常

  • Facebook Open Graph: Low 確保所有 Facebook Open Graph（OG）都經過測試，沒有錯誤或漏掉信息。圖片至少需要 600 x 315 像素，建議使用 1200 x 630 像素。
<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">

⬆ back to top

HTML

最佳做法 ( Best practices )

  • HTML5 Semantic Elements: High 適當的使用 HTML5 語意化元素 (header, section, footer, main...)

📖 HTML Reference

  • Error pages: High 存在 404 和 5xx 錯誤頁面。 5xx 錯誤頁面需要集成其 CSS（當前服務器上無法外部調用）

  • Noopener: Medium 如果你使用target="_blank"外部連結，你的連結應包含屬性rel="noopener"來避免釣魚攻擊。如果你需要支援舊版 firefox ，使用rel="noopener noreferrer"

📖 About rel=noopener

  • Clean up comments: Low 非必要的程式碼應於網頁上線前被清除

HTML 測試 ( HTML testing )

  • W3C compliant: High 所有頁面都需要通過 W3C 驗證器進行測試，以檢測HTML代碼中可能有的問題。

🛠 W3C validator

  • HTML Lint: High 使用工具幫助分析 HTML 代碼中可能有的問題

🛠 Dirty markup

  • Desktop Browsers: High 所有頁面於桌機瀏覽器作測試 ( Safari, Firefox, Chrome, Internet Explorer, EDGE... )

  • Mobile Browsers: High 所有頁面於行動裝置瀏覽器作測試 ( Native browser, Chrome, Safari... )

  • Link checker: High 確保沒有壞掉的連結以及 404 錯誤頁面的出現

🛠 W3C Link Checker

  • Adblockers test: Medium 你的網站在啟用廣告攔截器的情況下可正確顯示內容 ( 可以提供一則訊息鼓勵使用者停用廣告攔截器 )
  • Pixel perfect: High 頁面接近完美像素。根據素材的質量，可能不會100％準確，但應盡可能與模板質量接近。

Pixel Perfect - Chrome Extension

⬆ back to top

Webfonts

  • Webfont format: High WOFF, WOFF2 和 TTF 是當代瀏覽器通用的格式
  • Webfont size: High Webfont 檔案大小不要超過 2 MB (含所有版本).

⬆ back to top

CSS

Notes: 大部分前端開發人員都會參考 CSS guidelines 和 Sass Guidelines 。如果你對 CSS 屬性有疑問，可以訪問 CSS Reference。

  • Responsive Web Design: High 網站使用響應式設計
  • CSS Print: Medium 提供列印模式下的 CSS 樣式呈現，確保每個頁面都顯示正常
  • Preprocessors: Medium 你的頁面有使用 CSS 預處理器 ( 推薦使用 Sass )
  • Unique ID: High 確保每個頁面中的 ID 都是唯一的
  • Reset CSS: High 使用最新的 CSS reset ( reset, normalize 或者 reboot )，如使用 Bootstrap 或 Foundation 等的 CSS 框架，框架本身已包含 reset 設置
  • JS prefix: Low 有前綴 js- 的 class、id 不要作為 CSS 樣式套用
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
  • CSS embed or line: High 避免使用內嵌或行內 CSS : 僅用於有必要的時候 ( 例 : slider 的 background-image， CSS critical 等 )
  • Vendor prefixes: High 使用供應商的 CSS 前綴，讓瀏覽器支援兼容性。

🛠 Autoprefixer CSS online

性能 ( Performance )

  • Concatenation: High CSS 文件合併成一個文件 ( 不適用於 HTTP/2 )
  • Minification: High 所有 CSS 文件作最小化壓縮
  • Non-blocking: Medium 避免因 CSS 文件阻塞導致花更多時間載入 DOM
  • Unused CSS: Low 移除未使用的 CSS

CSS 測試 ( CSS testing )

  • Stylelint: High 所有 CSS 或 SCSS 文件沒有任何錯誤

  • Responsive web design: High 所有頁面經過以下斷點測試 : 320px, 768px, 1024px ( 根據不同需求可以設定更多斷點 )

  • CSS Validator: Medium CSS 經過測試，並排除相關的錯誤。

🛠 CSS Validator

  • Reading direction: High 如果有文章流向的需求，應測試所有頁面的 LTR 和 RTL languages 顯示

⬆ back to top

Images

Notes: 想了解更完整的圖片優化內容，請查看 Addy Osmani 的 Essential Image Optimization

最佳做法 ( Best practices )

  • Optimization: High 所有圖像都經過優化且可在瀏覽器中呈現。 WebP 格式可用於關鍵頁面（如首頁）
  • Retina: Low 提供x2 或 3x 的圖像以支持視網膜顯示
  • Sprite: Medium 小圖片統一存成一個 sprite 檔 ( icons 可統一存成一個 SVG sprite )
  • Width and Height: High 所有<img>標籤有設定 width 和 height ( 不含單位 px 或 % )

Note: 許多開發人員認為設定圖片寬高會與響應式設計不兼容，但實際上不是這樣。

  • Alternative text: High 所有<img>應有替代文字 ( alt ) 來描述圖片內容
  • Lazy loading: Medium 圖片使用 lazyloaded ( 也應提供 noscript 當作備案 )

⬆ back to top

JavaScript

最佳做法 ( Best practices )

  • JavaScript Inline: High 避免使用行內 JavaScript ( 與 HTML 寫在一起 )
  • Concatenation: High 合併 JavaScript 文件
  • Minification: High JavaScript 文件最小化壓縮 ( 可於檔名加入後綴 .min )

Minify Resources (HTML, CSS, and JavaScript)

  • JavaScript security:

Guidelines for Developing Secure Applications Utilizing JavaScript*

  • Non-blocking: Medium 使用async或是defer屬性來異步載入 JavaScript 文件

📖 Remove Render-Blocking JavaScript

  • Modernizr: Low 如果你需要某些特定功能，可以使用自定義 Modernizr 在<html>標籤中添加 classes。

🛠 Customize your Modernizr

JavaScript 測試 ( JavaScript testing )

  • ESLint: High 沒有被 ESLint 標記錯誤（ 根據你的配置或標準規則 ）

⬆ back to top

Security

掃瞄並檢查網站 ( Scan and check your web site )

最佳做法 ( Best practices )

  • HTTPS: Medium 使用 HTTPS 於每個頁面和所有外部內容 ( 插件，圖像... )
  • HTTP Strict Transport Security (HSTS): Medium HTTP header 設置為 “強制安全傳輸”。
  • Cross Site Request Forgery (CSRF): High 確保向你的服務器端發出的請求是合法且來自你的網站/應用程序，以防止發生CSRF攻擊。

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

  • Cross Site Scripting (XSS): High 你的網頁或網站沒有跨網站指令碼的問題。
  • Content Type Options Medium 阻止 Google Chrome 和 Internet Explorer 嘗試將響應的內容類型與服務器聲明的內容類型進行比較
  • X-Frame-Options (XFO) Medium 保護你的訪客免受駭客攻擊

⬆ back to top

Performance

最佳做法 ( Best practices )

  • Weight page: High 每個頁面大小於 0 ~ 500KB 之間
  • Minified: Medium 你的 HTML 有最小化壓縮

🛠 W3C Validator

  • Lazy loading: Medium 圖片，腳本和 CSS 需要 lazy loaded 以改善當前頁面的響應時間 ( 請見各部分的詳細說明 )

  • Cookie size: 如果使用 Cookie，請確保每個 Cookie 不超過 4096 個字節，且域名下不超過 20 個 cookie

準備即將到來的請求 ( Preparing upcoming requests )

📖 Explanation of the following techniques

  • DNS resolution: Low 使用dns-prefetch於空閒時間提前載入第三方服務器的 DNS
<link rel="dns-prefetch" href="https://example.com">
  • Preconnection: Low 使用preconnect提前在空閒時間完成服務器的 DNS 查詢，TCP 三向交握以及 TLS 協商。
<link rel="preconnect" href="https://example.com">
  • Prefetching: Low 使用prefetch提前在空閒時間請求即將需要的資源 ( 例 : lazy lorded 的圖像 )
<link rel="prefetch" href="image.png">
  • Preloading: Low 使用preload提前加載當前頁面需要的資源 ( 例 : 放在<body>結尾處的 script )
<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

效能測試 ( Performance testing )

  • Google PageSpeed: High 所有的網頁都經過測試 ( 不僅是首頁 )，且至少達到 90/100 的評分

⬆ back to top

Accessibility

Notes: 你可以參考播放清單 A11ycasts with Rob Dodson 📹

最佳做法 ( Best practices )

  • Progressive enhancement: Medium 主要功能如主導航和搜尋應該在沒有啟用 JavaScript 的情況下工作

📖 Enable / Disable JavaScript in Chrome Developer Tools

  • Color contrast: Medium 顏色對比應至少通過 WCAG AA 標準 ( AAA for 行動裝置 )

🛠 Contrast ratio

Headings

  • H1: High 所有頁面都有非網站 title 的 H1 標籤
  • Headings: High 標題應使用正確的順序 ( H1 至 H6 )

📹 Why headings and landmarks are so important -- A11ycasts #18

Landmarks

  • Role banner: High <header>有role="banner"屬性
  • Role navigation: High <nav>有role="navigation"屬性
  • Role main: High <main>有role="main"屬性

📖 Using ARIA landmarks to identify regions of a page

語意化 ( Semantics )

  • Specific HTML5 input types are used: Medium 對於顯示自定義鍵盤和不同類型小工具的行動裝置尤其重要。

📖 Mobile Input Types

表單 ( Form )

  • Label: High 標籤與每個輸入表單元素相關聯。如果無法顯示標籤，請改用aria-label

📖 Using the aria-label attribute - MDN

無障礙測試 ( Accessibility testing )

  • Accessibility standards testing: High 使用 WAVE 工具測試頁面是否符合輔助功能標準

🛠 Wave testing

  • Keyboard navigation: High 僅用鍵盤以可能出現的操作順序測試你的網站，確保所有互動元素都可訪問及使用
  • Screen-reader: Medium 所有頁面經過螢幕閱讀器的測試 ( VoiceOver, ChromeVox, NVDA or Lynx )
  • Focus style: High 如果 focus 被禁用，使用 CSS 的可見狀態替代

📹 Managing Focus - A11ycasts #22

⬆ back to top

SEO

  • Google Analytics: High 安裝 Google Analytics 且正確配置
  • Headings logic: Medium 標題文字有助於了解當前頁面中的內容
  • sitemap.xml: High 有 sitemap.xml 檔，並提交給 Google Search Console ( 以前的 Google 網站管理員工具 )
  • robots.txt: High The robots.txt 沒有阻擋網頁被搜索
  • Structured Data: High 使用結構化數據的頁面經過測試且沒有錯誤。結構化數據有助於爬蟲工具了解當前頁面的內容
  • Sitemap HTML: Medium 提供 HTML 網站地圖，可通過網站頁尾中的鏈接進行訪問

⬆ back to top

Translation

The Front-End Checklist 也提供其他語言版本，感謝所有的翻譯者!

Front-End Checklist Badge

如果想顯示你有遵循前端清單的規定，請將此徽章放在 README 文件上！

➔ 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/)

⬆ back to top

Contributing

透過 issue 或 pull request 來建議更改或添加內容

Guide

Front-End Checklist 由兩個分支組成 :

1. master

該分支包含自動反映在 Front-End Checklist 網站上的README.md文件

2. develop

這個分支用於對結構及內容進行一些重大更改。最好使用主分支來修復小錯誤或添加新項目

Contributors

查看所有 contributors

Support

如果你有任何疑問或建議，可透過 Gitter or Twitter 與我聯繫 :

Authors

David Dias

License

CC0

⬆ back to top

About

為現代網站和細緻開發者打造的完美前端清單 http://frontendchecklist.com

Resources

Readme

License

CC0-1.0 license

Code of conduct

Code of conduct
Activity

Stars

8 stars

Watchers

1 watching

Forks

6 forks
Report repository

Releases

No releases published

Packages

No packages published