Awesome

前端開發者清單

作者自己有提供互動網頁模式的版本: https://frontendchecklist.io 如果您對這份清單有興趣，可以到譯者我寫的 front-end climbing 看看。

前端開發者清單 是一份詳細的清單，用來檢查你的網站或網頁公布前所有應該完成的項目。這份清單基於我多年的前端工程師工作經驗，以及其他公開的清單資源製作。

在 Product Hunt 上投票與推薦，協助我們將 Front-End Checklist 分享出去

使用方式

前端開發者清單中的所有項目皆來是大多數專案的需求，針對你的專案時，還是會有某些項目用不到、可以忽略(例如，在行政用途的網頁 APP 中，你可能不需要 RSS 的訂閱功能)。我們依照可以調動的靈活性區分為三個等級：

代表這是個推薦項目，但在特定的情況下可以忽略。
代表這是高度推薦項目，在非常少數的特定情況下可以忽略。其中某些項目，如果忽略了會使效能或 SEO 結果(指搜尋引擎上的排名)很糟。
代表這是任何情況下都不能忽略的項目。忽略可能在你的網頁、網頁親和力或 SEO 上造成功能失常。這些項目的測試優先度最高。

某些資源有標示符號，協助你瞭解在清單中找到的內容或協助的類型:

📖: 文檔或文章
🛠: 網路工具 / 測試工具
📹: 媒體或影片內容

Head

補充: 這有一份列表可以找到 HTML 檔案中<head>裡面可能含有的所有東西。

Meta 標籤

Doctype (檔案類型) Doctype 是 HTML5，同時要放在 HTML 頁面的最上面。

<!-- Doctype HTML5 -->
<!doctype html>

📖 決定字符編碼 - HTML5 W3C

接下來三個 mata 標籤(Charset、X-UA Compatible 和 Viewport)需要先講解。

Charset (字符): Charset = UTF-8 被正確的宣告。

<!-- 為文件設定字符編碼 -->
<meta charset="utf-8">

X-UA-Compatible (IE 相容設定): X-UA-Compatible meta 標籤存在。

<!-- 教導 Internet Explorer 使用最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

📖 指定文件的繼承模式 (Internet Explorer)

Viewport (視點): 正確宣告 viewport。

<!-- Viewport 用在響應式網頁設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Title (標題): 所有頁面都有使用一個 title (SEO: Google 會計算 title 上使用的字符寬度，只會偵測到 472px ~ 482px 之間。平均最大值是 55 個字符)。

<!-- 檔案標題 -->
<title>Page Title less than 65 characters</title>

📖 Title - HTML - MDN

🛠 SERP Snippet Generator

Description (敘述): 有設置 meta description，每個頁面只有一個且長度不能超過150字元。

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

📖Meta Description - HTML - MDN

Favicons: 每一個 favicon 都需要創立且被正確展示。如果你只有一個 favicon.ico，可以將它放在網頁最底層的檔案。通常你不需要對他加以修改。無論如何，這依舊是個好例子，可以跟下方的例子互相呼應。現在比起.icon比較推薦 PNG 的檔案格式。(大小最少需要: 32x32px)

<!-- 一般的 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">

🛠 Favicon 產生器

🛠 真正的 Favicon 產生器 (RealFaviconGenerator)

📖 Favicon 小抄

📖 Favicons、手機觸控按鈕、標題標誌...等等。你需要哪一個? - CSS Tricks

📖 PNG favicons - caniuse

Apple Touch Icon (蘋果手機觸控按鈕): Apple Touch favicon 已設置 Apple Touch Icon。(200x200px 以上的 apple 按鈕圖檔便能支援大部分你所需螢幕的尺寸)

<!-- 蘋果手機觸控按鈕 -->
<link rel="apple-touch-icon" href="/custom-icon.png">

📖 搞懂網頁應用程式

Windows Tiles: 已設置並連結 Windows Titels。

<!-- Microsoft Titles -->
<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>

📖 瀏覽器的配置模式參考

Canonical (典範): 使用rel="canonical"避免重複的內容。

<!-- 協助避免重複內容的問題 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

📖 Use canonical URLs - Search Console Help - Google Support

📖 rel=canonical 常見的五個錯誤 - Google Webmaster Blog

HTML 標籤

Language tag (語言標籤): 語言標籤在網頁中被指定且與當前頁面的語言是相關的。

<html lang="en">

Direction tag (方向標籤): 文字閱讀方向有被設定在 body 標籤內 (也可以用在其他 HTML 標籤裡)。

<html dir="rtl">

(註: right to left 或 left to right 的簡寫)

📖 dir - HTML - MDN

Alternate language (備用語言): 語言標籤在網頁中被指定且與當前頁面的語言是相關的。

<link rel="alternate" href="https://es.example.com/" hreflang="es">

Conditional comments (條件備註): 如果有需要，已經為 IE 設定 Conditional comments。

📖 關於 conditional comments (Internet Explorer) - MSDN - Microsoft

RSS feed (RSS 訂閱): 如果網站是部落格或者會分享文章，設置 RSS 連結。
CSS Critical (最小 CSS 合集): CSS critical 將使用在頁面顯示部分的核心 CSS 收集起來，在主要的CSS被呼叫之前就先渲染。它以放置於<style></style>間的形式嵌在檔案中(單行形式、最小化)。

🛠 Critical by Addy Osmani on Github

CSS order (CSS 順序): 在<head>哩，所有 CSS 檔案都要在 JS 檔案前被載入。(例外狀況: 當JS檔案以異步方式在頁面上方被載入)

社交 meta

Facebook OG 及 Twitter Cards 針對所有網頁都高度推薦。關於其他社交媒體的標籤，當你有特別想要確保的社交媒體的顯示功能再考慮。

Facebook Open Graph (FB 開放圖形): 所有 Facebook Open Graph 都有測試過且沒有遺漏掉或出現失敗的訊息。圖檔最小需要 600x315px，推薦大小 1200x630px。

補充: 利用 og:image:width 及 og:image:height 的方式指定圖片尺寸，者可以協助爬蟲直接渲染圖片，不需要再異步載入並處理它。

<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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

📖 網頁大師的分享指南

📖 Best Practices - Sharing

🛠 利用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">

📖 Twitter card 入門 — Twitter Developers

🛠 利用Twitter card validator測試你的網頁

⬆ back to top

HTML

最佳寫法

HTML5 Semantic Elements (HTML5 語意元素): HTML5 Semantic Elements 被適當使用(header, section, footer, main...)。

📖 HTML 參考

Error pages (錯誤頁面): 404 錯誤頁面跟存在 5xx 錯誤的情況需要它自己的 CSS 程式碼(不要從當前的服務向外呼叫)。
Noopener: 注意，當你有外部連結且使用target="_blank"時，在連結加上rel="noopener"，可以避免 tab nabbing(開啟新 tab 時造成原頁面效能低落)。若你要支援舊版 Firefox，使用rel="noopener noreferrer"。

📖 關於 rel=noopener

Clean up comments (清除備註): 頁面發表前將沒有效果的程式碼清除。

HTML 測試

W3C compliant (W3C 兼容): 所有頁面都要經過 W3C 檢測器的測試，確保沒有 HTML 程式碼的問題。

🛠 W3C 檢測器

HTML Lint: 我使用工具分析自己的 HTML 程式碼，幫助我發現任何可能的問題。

🛠 髒亂程式碼修飾器

Link checker (連結確認器): 使用 Link checker 確保沒有任何無效連結，避免出現任何 404 error。

🛠 W3C 連結確認器

Adblockers test (廣告阻斷程式測試): 測試你的頁面在廣告阻斷程式運作的情況下能正確顯示(你可以顯示訊息慫恿使用者關閉廣告阻斷程式)。

⬆ back to top

網頁字體

補充: 使用 webfonts 可能會導致 Flash Of Unstyled Text / Flash Of Invisible Text - 考慮使用後備字體和/或利用 webfont 加載器來控制行為。

Webfont format (網頁字體格式): 所有瀏覽器都支援 WOFF、WOFF2 跟 TTF 字體。

📖 WOFF - 網頁開放字體格式 - Caniuse.

📖 WOFF 2.0 - 網頁開放字體格式 - Caniuse.

📖 TTF/OTF - TrueType 字體及 OpenTyps 字體的支援狀況

📖 Using @font-face - CSS-Tricks

Webfont size (網頁字體大小): 網頁字體檔案大小不能超過 2MB (包含所有字體)。
Webfont loader (網頁字體加載器): 利用 webfont loader 控制載入的行為。

🛠 Typekit Web Font Loader

⬆ back to top

CSS

補充: 看看許多前端開法者遵照的 CSS 指南與 Sass 指南。如果你懷疑CSS的效能，可以看 CSS 參考.

Responsive Web Design (網站響應式設計): 網站有使用響應式設計。
CSS Print (CSS 列印): 每個頁面都正確設置列印樣式。
Preprocessors (預處理器): 你的頁面有使用 CSS 預處理器 (推薦 Sass)。
Unique ID (ID 獨特性): 使用ID的時候確保個別頁面裡沒有重複。
Reset CSS (初始化 CSS): 確保 CSS reset (reset, normalize or reboot)被使用*(如果你使用 CSS 框架，例如 Bootstrap 或 Foundation，Normalize 已經包含在裡面)*。

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS prefix (JS 前置語言): 將所有以**js-**開頭命名(或在JS檔案中以 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 (CSS 的嵌入): 除非特別情況(例如: slider, CSS critical 的 background-image)，避免使用 CSS embed 或 inline。
Vendor prefixes (前置語言產生器): 已經使用了 CSS 的 vendor prefixes，且依照瀏覽器支援狀況自動生成相對應的 CSS 前置語言。

🛠 線上 CSS 自動前置語言生成器

效能

Concatenation (並列): 已經將所有 CSS 檔案合併成一個*(不適用 HTTP/2)*
Minification (最小化): 已將所有 CSS 檔案壓縮。
Non-blocking (不阻塞): CSS 檔案需要 non-blocking，避免還在抓取 DOM 時就載入。

📖 透過 filament group 進行 loadCSS

📖 使用 loadCSS 預載入 CSS 的例子

Unused CSS (無用的 CSS): 移除沒用到的 CSS。

🛠 UnCSS Online 🛠

🛠 PurifyCSS

🛠 Chrome 開發者工具 Coverage

CSS 測試

Stylelint: 檢測所有 CSS、SCSS 檔案都沒有錯誤。

🛠 stylelint, a CSS linter

📖 Sass 指南

Responsive web design (響應式網頁設計): 所有頁面至少測試下列節點: 320px, 768px, 1024px (可以依照你的客戶群進行增減)。
CSS Validator (CSS 檢測器): 測試 CSS 並且修正相關錯誤。

🛠 CSS 檢測器

Desktop Browsers (桌上瀏覽器): 所有頁面都經過所有桌上瀏覽器的測試(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
Mobile Browsers (手機瀏覽器): 所有頁面都經過所有手機瀏覽器的測試(Native browser, Chrome, Safari...)。
OS: 所有頁面都經過所有作業系統的測試(Windows, Android, iOS, Mac...)。

Pixel perfect (完美像素): 確保頁面的像素最佳化。這取決於你的作品品質，你不需要 100% 準確，但應該盡可能接近當初的設計

完美像素 - Chrome 擴充軟件

Reading direction (閱讀方向): 如果有其他語系會被使用到的話，針對所有頁面都使用 LTR 跟 RTL 閱讀方向測試過。

📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks

📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks

⬆ back to top

Images

補充: 點擊Addy Osmani 的免費電子書**Essential Image Optimization**，完整理解圖片(image)的優化

最佳寫法

Optimization (優化): 所有圖片都優化過且在瀏覽器中正常渲染。重要的頁面可以使用網頁字體格式(像是首頁)。

🛠 Imagemin

🛠 使用 ImageOptim免費優化你的圖片

Picture/Srcset: 已經使用 picture/srcset 來提供最適合使用者當前 viewport 的圖片。

📖 如何使用 srcset 打造響應式圖片

Retina (視網膜螢幕): 提供 x2、x3 的圖檔，用來支援視網膜螢幕等級的顯示。
Sprite (雪碧圖): 小圖片都放在 sprite file 中 (一種將相關小圖排列在一起的圖檔)，以 icon 為例，他們可以集中放在一個 SVG sprite image。
Width and Height (寬與高): 如果你已經知道圖片渲染後的尺寸，在<img>中直接設定width與height的屬性(可以忽略 CSS 的尺寸設定)。
Alternative text (補充文字): 所有<img>都有一個 Alternative text，用文字敘述圖片的內容。(註:在無障礙網頁中尤其重要)

📖 Alt-texts: The Ultimate Guide

Lazy loading (懶加載): 照片有設置好 lazyload (總是設置 noscript fallback)。 ⬆ back to top

JavaScript

最佳寫法

JavaScript Inline(JS 被寫入): 沒有任何 JavaScript 程式碼被寫到 HTML 的程式碼中
Concatenation (並列): JavaScript 檔案已經優化。
Minification (最小化): JavaScript 檔案已經壓縮(可以在檔名最後加上.min)。

壓縮的資源 (HTML、CSS 跟 JavaScript)

JavaScript security (JS 安全性):

利用 JavaScript 開發安全應用程式的指南*

Non-blocking (不阻塞): JavaScript 檔案使用異步加載時，在標籤屬性加上async，若是延後加載則使用defer。

📖 移除干擾渲染的 JavaScript

Modernizr: 如果你需要指定特定的功能，可以使用客製化過的 Modernizr 來增加 class 到你的<html>。

🛠 客製化你的 Modernizr

JavaScript 測試

ESLint: 檢驗 JavaScript 中被忽略的錯誤(基本上檢查結構跟基礎規則)

📖 ESLint - 針對 JavaScript 跟 JSXThe 的實用套件程式

⬆ back to top

Security

檢視你的網站

securityheaders.io

Observatory by Mozilla

ASafaWeb - ASP.NET 網頁的安全性自動分析器

最佳寫法

HTTPS: HTTPS 使用在所有頁面跟所有外部的內容(插件、圖片...等)。

🛠 來加密吧 - SSL/TLS 的免費證書

🛠 免費的 SSL 服務測試

📖 嚴格的傳輸安全

HTTP Strict Transport Security (HSTS) (嚴格的傳輸安全): 在 HTTP header 設置'Strict-Transport-Security'。

🛠 檢查 HSTS 的預載入狀況與權限

📖 HTTP Strict Transport Security 小抄 - OWASP

📖 保護傳輸面的小抄 - OWASP

Cross Site Request Forgery (CSRF) (跨網站假請求攻擊): 確認發送到服務端的請求會是合法且確實來自你的網站/app，避免 CSRF 攻擊。

📖 Cross-Site Request Forgery (CSRF) 對抗小抄 - OWASP

Cross Site Scripting (XSS) (跨網站指令碼): 確認網站或頁面不會發生 XSS 的情況。

📖 XSS (Cross Site Scripting) 對抗小抄 - OWASP

📖 XSS 基於 DOM 的對抗小抄 - OWASP

Content Type Options 避免 Google Chrome 及 Internet Explorer 嘗試從服務器聲明的內容類型中察覺響應式內容類型。

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO) (外部框架連結設定) 保護你的使用者免於劫持攻擊。

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

⬆ back to top

Performance

最佳寫法

Weight page (頁面大小): 每一個檔案的大小都介於 0 ~ 500KB。

🛠 網站頁面分析

📖 大小限制器: 讓網站更輕點

Minified (最小化): HTML 有進行壓縮。

🛠 W3C 檢測器

Lazy loading (懶加載): 讓圖片、腳本跟 CSS 都進行 lazy load，提升當前瀏覽的網頁的反應速度(細節在它們個別的章節中)。
Cookie size (cookie 大小): 如果你有使用 cookie，確保 cookie 大小不要超過 4096 bytes，且在你的網域內別超過20個。

📖 Cookie 規格: RFC 6265

📖 Cookies

🛠 瀏覽器 Cookie 限制

Third party components (第三方組件): 可能的話，以靜態的組件取代第三方 iframe 或依賴外部 JS 的組件(如共享按鈕)，進而限制呼叫外部 APIs 的次數並保護使用者的行動隱私。

🛠 簡單的分享按鈕產生器

準備迎接接下來的請求

📖 下方技術的解釋

DNS resolution (DNS 解析): 使用dns-prefetch讓第三方 DNS 服務方在空閒時間提前處理域名解析的功能。

<link rel="dns-prefetch" href="https://example.com">

Preconnection (預連接): 使用 preconnect 在空閒時間提前完成 DNS 查詢、TCP handshake 以及 TLS協商即將要使用到的服務。

<link rel="preconnect" href="https://example.com">

Prefetching (預擷取): 使用 prefetch 在空閒時間提前請求即將使用到的資源(例如 lazy loaded images)。

<link rel="prefetch" href="image.png">

Preloading (預載入): 使用 preload 提前載入當前頁面需要的資源(例如 <body> 最後面的 script 區域)。

<link rel="preload" href="app.js">

📖 prefetch 與 preload 的不同點

效能測試

Google PageSpeed (Google 頁面速度檢測): 測試過所有的網頁(不只首頁)且分數都至少90分(滿分100)。

🛠 Google 頁面速度檢測

🛠 利用 Google 測驗頁面在手機上的速度

🛠 WebPagetest - 網站的優化與效能測試

⬆ back to top

Accessibility

補充: 你可以看這份清單 A11ycasts with Rob Dodson 📹

最佳寫法

Progressive enhancement (逐步增強): 網站的重要功能，像是主要的指引或搜尋區塊需要在沒有 JavaScript 的情況下也能運作。

📖 Chrome 開發者工具的 Enable / Disable JavaScript

Color contrast (顏色對比): 顏色對比度最少要通過 WCAG 的　AA 級(手機要達到 AAA)。

🛠 對比值

Headings

H1: 所有頁面都要一個不是網頁名稱的 H1 標籤(代表頁面的主要功能)。
Headings (標題): 標題標籤要按照等級妥善的使用(H1 to H6)。

📹 為何標題跟地標如此重要 -- A11ycasts #18

Landmarks

Role banner: <header> has role="banner".
Role navigation: <nav> has role="navigation".
Role main: <main> has role="main".

📖 使用 ARIA landmarks 劃分頁面的區塊

語意

Specific HTML5 input types are used (有指定 HTML5 輸入標籤的類型): 這在手機上顯示不同類型的客製化鍵盤或配件時特別重要。

📖 手機 input 標籤類型

Form

Label (標誌): Lable 各自會與相對的元素產生關聯。如果希望 label 不能被隱藏起來，使用aria-label來代替。

📖 使用 aria-label 屬性 - MDN

Accessibility 測試

Accessibility standards testing (親和力標準測試): 利用 Wave 測試你的頁面達到親和力標準。

🛠 Wave 測試

Keyboard navigation (鍵盤導覽): 測試看看，在你的網站只使用鍵盤按照順序瀏覽，確保所有互動元素都可以點選、使用。
Screen-reader (螢幕閱讀器): 所有頁面都使用 screen-reader 測試過 (VoiceOver、ChromeVox、NVDA 或 Lynx)。
Focus style (專注風格): 如果 focus 無法使用，它會被 CSS 中的視覺部分取代。

📹 管理 Focus - A11ycasts #22

⬆ back to top

SEO

Google Analytics (Google 分析): 確認 Google Analytics 已經安裝且確實的架構好。
Headings logic (標題邏輯): Headings 有助於理解這個頁面的內容。
sitemap.xml: 確認有 sitemap.xml 且已經提交給 Google Search Console (Google 搜尋引擎管理者，即之前的 Google 頁面管理者工具)。
robots.txt: Robots.txt 不會破壞網頁。

🛠 利用 Google Robots 測試工具測試你的robots.txt。

Structured Data (結構化資料): 確認所有頁面使用了 Structured Data 且已經測試過沒有出現錯誤。Structured Data 會協助爬蟲理解這個頁面的內容。

📖 介紹 Structured Data - Search - Google Developers

🛠 利用 Structured Data Testing Tool 測試你的網頁

🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Heirarchy

Sitemap HTML (HTML 網站地圖): 已經設置 HTML sitemap 且透過網站 footer 中的連結可以使用。

📖 Sitemap 指南 - Google Support

🛠 Sitemap 檢測器

⬆ back to top

Translation

The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!

🇯🇵 Japanese: miya0001/Front-End-Checklist
🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
🇰🇷 Korean: kesuskim/Front-End-Checklist
🇧🇷 Portuguese: jcezarms/Front-End-Checklist
🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist

Front-End Checklist 勛章

如果你希望向別人展示你的網站通過這份前端開發者清單，將這個勛章放進你的 README 文件中!

➔

[![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

Open an issue or a pull request to suggest changes or additions.

Guide

The Front-End Checklist repository consists of two branches:

1. `master`

This branch consists of the README.md file that is automatically reflected on the Front-End Checklist website.

2. `develop`

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.

Contributors

Check out all the super awesome contributors.

Support

如果你有任何問題或建議，別客氣，使用 Gitter 或 Twitter 讓我知道:

Authors

David Dias

License

⬆ back to top

Awesome

前端開發者清單

目錄

使用方式

Head

Meta 標籤

HTML 標籤

社交 meta

HTML

最佳寫法

HTML 測試

網頁字體

CSS

效能

CSS 測試

Images

最佳寫法

JavaScript

最佳寫法

JavaScript 測試

Security

檢視你的網站

最佳寫法

Performance

最佳寫法

準備迎接接下來的請求

效能測試

Accessibility

最佳寫法

Headings

Landmarks

語意

Form

Accessibility 測試

SEO

Translation

Front-End Checklist 勛章

Contributing

Guide

1. master

2. develop

Contributors

Support

Authors

License

1. `master`

2. `develop`