五倍直播間

Blogs - Sidebar

在前端切版時應該會很常遇到 UI Component 的困難，像是 Component 命名、撰寫方式、可擴充、可共用性等問題。

我雖然不是準 React 工程師，單純因為工作關係接觸了 Next.js 、 Tailwind CSS ，就此愛上這種以資料驅動樣式改變、建立組織、 Component 的方式。

剛開始我與公司內的工程師一起建立了初期的官網設計與開發，遇到了一些血淚坑之後也許可以分享，但再隨著官網上線後穩定的更新後，慢慢意識到命名和 Component 擴充性是多麽的重要。

## 什麼是 Design System ? 為什麼要使用 Design System ?

起初 Design System (設計系統) 是為統一品牌形象，從品牌的 Design Guideline 延伸，明確定義品牌相關的元素、資料呈現方式，主要會有主色、輔色、各種級距的標題文字大小、按鈕樣式等，也可延伸至網站插畫樣式、照片方式、聲音、文案等呈現方式（有興趣的人可以參考 [Material Design](https://material.io/design)  ) 有了這些規範後，就能讓其他團隊成員更清楚的知道遇到什麼樣的情境時該如何呈現文字、顏色或 Logo 等，以維持品牌的一致性。但隨著產品功能複雜或發展更多產品的情況下，就會需要更全面的規範。當然隨著前端框架以元件為主、資料驅動的開發方式，讓這些原本有 Design System 的品牌紛紛開放、開源自己的文件、設計語言讓更多開發者或設計師可以一探這些元件化是如何被維護的。

## 使用 Tailwind CSS 和使用 Design System 的差異？

Tailwind CSS 是一個單純的 CSS，讓開發者可以建立樣式，我也有使用 Tailwind CSS 建立 Component，好處是高度客製化，但有時再多人協作時會遇到命名不明確，或是重複的樣式寫了兩次，只因為情境或資料結構不同。

像是建立一個 Button ，在 Tailwind CSS 可能會是：

```javascript
// Used twin.macro & styled component：
const Button = styled.button(({ full, md, lg, outline, disable }) => [
  tw`bg-primary text-white text-center py-1 px-3 inline-block rounded 
		 transition duration-150 cursor-pointer 
		 hover:bg-red-700 focus:(outline-none)`,
  `&:focus {
    box-shadow: 0 0 0 3px #ff253a6e;
  }`,
  full && tw`w-full`,
  md && tw`py-2 px-4`,
  lg && tw`text-lg py-3 px-8`,
  outline && tw`bg-transparent border border-primary text-primary hover:(bg-primary text-white)`,
  disable && tw`bg-gray-100 cursor-not-allowed text-gray-400 border border-gray-200 hover:bg-gray-100 focus:(shadow-none)`,
])

// Primary(Default) Button
<Button>
	Primary Button
</Button>

// Outline Button
<Button outline>
	Primary Button
</Button>
```

如果是用 Chakra UI or Ant Design：

```javascript
// chakra-ui
<Button colorScheme="teal" variant="solid">
  Primary Button
</Button>

// Ant Design
<Button type="primary">Primary Button</Button>
```

由上面可以看到一個按鈕，開發者可以不用手刻 (然後考慮各種狀態、樣式) 細節全部都由這些 UI Library 或 Framework 幫你做好，甚至可以很快速的和設計師討論，什麼情況下用哪些按鈕。

## 什麼情境下適合使用這些 Design System ?

如果你剛好是以下情境，也許可以使用：

1. 團隊裡尚未有設計師。
2. 開發者個人的 Side Project。
3. 想快速開發出測試產品。
4. 後台系統、簡潔單純的 UI 設計。

另外，如果團隊的產品已經有 Guideline 或 Design System 也可以選擇文件完整、Components 自由度高的 Design System 然後調整成符合團隊產品的 Guideline 樣式。

重點是 Design System 提供了一個線上的文件，讓開發者和團隊成員可以看同一份文件、同樣的 Compoent 命名、色票、文字級距等。

## Design Systems for React

以下將介紹 React 的 Design System，部分的 System 也有開發支援 Vue.js or Angular，詳細比較將會整理在文末。

## [Ant Design](https://ant.design/)

<a href="https://ant.design/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/6Ias3sD2AvKN8FxaY6BtOt/feae36ad56e5867e05d61d6a08721ab3/Ant_Design.jpg" alt="Ant Design - 讓人心動的 6 個 React Design Systems">
</a>

Ant Design 是來自螞蟻金融開源的 UI 套件，中文文件詳盡、Component 豐富，最重要是還提供了像是 [Material Design](https://material.io/design)  一樣針對元件設計的易用性建議，包含了語意文案、狀態呈現、視覺動畫等說明，從這些文件身上能夠學習到蠻多 UI/UX 設計細節。

像是 [表單設計](https://ant.design/docs/spec/research-form-cn) 的易用性：

![Ant-表單設計易用性](https://images.ctfassets.net/8er52l3j5u76/4eXK30vnt1xRvjDJN4gNSY/ccdce6fa7a0bbe5c05c1c706ac47d9e4/Ant-_____________________.png)

或是 [按鈕說明](https://ant.design/docs/spec/buttons-cn) ：

![Ant Design 按鈕易用性](https://images.ctfassets.net/8er52l3j5u76/2RMxGgqZ4wyrzeBtRf11z3/195e850de0611a62dfe068a158d6e7ae/_______2021-06-08_______3.23.19.png)

詳細的說明可以在他們的[設計文件](https://ant.design/docs/spec/introduce-cn)內查閱。

## [Atomize](https://atomizecode.com/)

<a href="https://atomizecode.com/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/6rbwT6NYT8w1WnTh2zY7bd/7a4700e004adf32147cc3c9eef292e2e/Atomize_Design.jpg" alt="Atomize Design - 讓人心動的 6 個 React Design Systems">
</a>

Atomize 的設計我認為是比較可愛一點，且 Default 的顏色較少一點，也許是主打高度客製化，所以在 [Theme StepUp](https://atomizecode.com/docs/react/theme) 提供各式如顏色、字體的設定教學。

<a href="https://atomizecode.com/docs/react/theme/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/4OWwlUDU8UrJMNPKb07LAL/35567d009e2750e561aee1c5110a551f/Atomize_Default_Color.jpg" alt="Atomize Default Color - 讓人心動的 6 個 React Design Systems">
</a>

例如在 [Button](https://atomizecode.com/docs/react/atoms) 頁面中看到按鈕樣式提供了很多細節的 Props 設定：

![Atomize Button Props](https://images.ctfassets.net/8er52l3j5u76/rCd9zyAhq8WhfeSEK65mh/c8a6aa862cd61194fd058e31cb0e8c04/Atomize_Button_Props.jpg)

Atomize 也提供 Sketch / Figma [設計稿](https://atomizedesign.com/ "Atomize Sketch / Figma 設計稿")，雖然是付費版（不過他只要付費一次！擁有免費更新 😂 )

Atomize 會比較適合 Landing Page 、部落格或是已經有設計稿的頁面做使用，因為高度客製化的關係，如果沒有初步的設計稿，也許會花費大量時間在調整細節上。

## [Carbon Design](https://www.carbondesignsystem.com/)

<a href="https://www.carbondesignsystem.com/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/7DKUJoVOdKtKFbdVEB0NXx/08ab9e0ae9f0af0208a8eb4dfcc08c13/Carbon.jpg" alt="Carbon - 讓人心動的 6 個 React Design Systems">
</a>

Carbon Design 是來自 IBM 開源的 Design System，遵循著 IBM 的設計語言。元件樣式設計俐落、細膩。(我還蠻喜歡他們的設計的 😂 ) 觀察到他們的設計和其他的設計最大的差異是沒有陰影的設計 ，他們透過不同的灰階拉出頁面和元件的層次，以下比較 Carbon Design / Ant Design / Material Design  三者的 Modal 呈現樣式：

![Modal 差異](https://images.ctfassets.net/8er52l3j5u76/EswUgeTKJ6wi3jgmZsetD/49a8d32bd64cb0a214dce143f4de02e5/Modal_______.jpg)

可以看到 Carbon 呈現的按鈕是更扁平的設計。

Carbon 的文件也如同 Ant Design ，包含的 Components 豐富且文件詳細。 Components 的 Live Demo 還可嘗試在不同的背景下 Components 會是什麼樣子 ( 對設計師來說蠻方便的！需要考量到深色、淺色背景下 Components 顏色是否好辨識、是否刺眼等）

<a href="https://www.carbondesignsystem.com/components/button/usage/#live-demo" target="_blank" rel="noopener">
  <img src="//images.ctfassets.net/8er52l3j5u76/1yIAsDxPZimVoC0FcKqReU/06413128bbe86ad7f5e63cd88bcbf820/Carbon-Button_Live_demo.gif" alt="Carbon-Button Live demo">
</a>

如果是使用 Carbon Design System 我會認為盡量沿用 Carbon 的 Guideline ，也許調整主色，但 Components 可能直接取用會比較快，原因是他們的 Components 其實已經相當完整，而且也考量到不同狀態下 Components 應該如何使用。他的客製化程度較低，但支援度廣包含 [Vue.js](https://www.carbondesignsystem.com/developing/frameworks/vue) / [Angular](https://www.carbondesignsystem.com/developing/frameworks/angular) 到設計師的教學文件都有，適合用在 Dashboard 或是以功能為導向的頁面上。

## [Chakra Design](https://chakra-ui.com/)

<a href="https://chakra-ui.com/" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/2GdyTPGVS6oQX0IM4m1a56/af7d1078d7070617b96178aeb25e5ee1/Chakra_Design.jpg" alt="Chakra Design - 讓人心動的 6 個 React Design Systems">
</a>

Chakra 也是一個提供高度客製化的 Design System ，他的樣式源自於 [Tailwind CSS](https://v1.tailwindcss.com/) (1.9.0) ，但他們兩者的顏色樣式現在其實已經有點落差了，所以如果你想要 Tailwind CSS 的顏色用在 Chakra 的 Component 上，會建議另外 Customize 自己的色表喔！

除此之外我有用過 Chakra ，雖然他的 Components 和 Ant Design & Carbon Design 比起來少很多，少一點，但如果你想要建立一個簡單的部落格、 Landing page ， Chakra 算是一個蠻好上手且輕量的 UI Library ，一些基礎的功能例如深淺模式 Toggle 或是他所提供的 Hooks (ex. [useBoolean](https://chakra-ui.com/docs/hooks/use-boolean) / [useClipboard](https://chakra-ui.com/docs/hooks/use-clipboard) )  都算是蠻好做使用的，非常推薦大家試用看看喔！

<a href="https://chakra-ui.com/docs/hooks/use-controllable#usage-1" target="_blank" rel="noopener">
  <img src="https://images.ctfassets.net/8er52l3j5u76/4zpzeitOSGXA7Ak4xdKDnK/342224b1daf7d873e85b6ef0f6e926d8/Chakra_-_useControllableState.gif" alt="Chakra - useControllableState">
</a>

上圖是他們所提供的 [useControllableState](https://chakra-ui.com/docs/hooks/use-controllable#usage-1) 動畫截圖，可以看到設定相應的數值，就能做出加法或減法數值，最後再透過 `{value}` 傳出去。

## [Material UI](https://material-ui.com/)

<a href="https://material-ui.com/" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/3mLXe8uxwAgmFGR6x3zBJx/3ec693729b0a69aa027d5630084ebb33/Material_UI.jpg" alt="Material UI - 讓人心動的 6 個 React Design Systems">
</a>

如果心儀 Google 的 [Material Design](https://material.io/design) 的話，可以用 Material-UI ，他們有提供中文文件， Components 的 Props 支援豐富，如同 Carbon Design & Ant Design 部分 Components 提供 Live Demo 演示讓設計師可以透過演示找到理想的狀態和樣式：

<a href="https://material-ui.com/components/chips/#chip-playground" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/5rNBamk7WY0ucfITUyzdp3/ec4819be045724bb23654a945ce4ecec/Material-UI-Chip_Playground.gif" alt="Material-UI-Chip Playground">
</a>

Material-UI 我也會認為比較適合用類似 Dashboard 、後台等功能導向為主的頁面，原因是他的效果樣式是滿滿的 Material 風格 😂  ( Button 冒泡的效果.. ) 如果不想要有這麼像 Material 的話，也可以參考他們的 [Template](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=home-store) 。

另外如果你是 Vue 開發者的話，[Vue Material](https://vuematerial.io/) 也提供豐富的 Components 做使用喔！

## [Primer Design](https://primer.style/)

<a href="https://primer.style/" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/7ICL21Ju8M8ZEOMlWb38B5/057723df796a5afca6145a2a387a63fb/Primer_Design.jpg" alt="Primer Design - 讓人心動的 6 個 React Design Systems">
</a>

Primer Design 是 [GitHub](https://github.com/) 開源的 Design System 除了支援 React 外也支援 Ruby on Rails 的 ViewComponents ，如果你是 Ruby on Rails 的開發者可以做很好的引入，以 React 的文件來說支援的 Hooks 相較 Chakra 來得少，但  Components 也算多，只是 Components 可設定或細節樣式不多 (可能是因為這個 Design System 開源的時間還不夠久 😂) 像是我 2021 / 5 月份來看 [Buttons](https://primer.style/components/Buttons) 所提供的樣式只有一個尺寸：

<a href="https://primer.style/components/Buttons" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/2R7D8dwRZL7s9LcYna7LEJ/7c9c330188ae0d2967fde8092fdca158/Primer-buttons.png" alt="Primer-buttons">
</a>

就目前來說如果要使用這個 Design System 可能樣式自由度還不夠高，如果喜歡 GitHub 介面或樣式的朋友也許可以試試看，但如果我的話應該會在觀望一陣子等待他提供的樣式夠多時使用 😂

## 大彙整

看完了這些 Design System 各位有沒有想要嘗試的 System 呢？如果是用在個人的 Side project 製作像是部落格、文件等建議可以使用 Chakra / atomize ，如果是要架設一個後台系統介面可以試著導入看看 Ant Design 或是 Material UI ，又或者想嘗試想要嘗試特別的風格的話可以試試看 Carbon Design 。

<a href="http://images.ctfassets.net/8er52l3j5u76/V8Abu76soCDLMBXGDtEPK/747f572b45a48c37f71e4262f700070b/____Design_System_______.jpg" target="_blank" rel="noopener">
  <img src="http://images.ctfassets.net/8er52l3j5u76/V8Abu76soCDLMBXGDtEPK/747f572b45a48c37f71e4262f700070b/____Design_System_______.jpg" alt="各 Design System 比較 - 讓人心動的 6 個 React Design Systems">
</a>

## 我該如何挑選適合的 Design System?

除了上述的 Design System 外， [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems) repo 收錄大量的 Design System，這麼多資源下哪些才是適合你的專案呢？下方條列了一些問題，也許可以作為考量點：

1. **Design System 的 Components 夠多嗎？**

    Components 夠多的話，理想上就考慮到越多的情境和設計，這些都能減輕在開發時的樣式維護的負擔。例如需要什麼樣的 Button 樣式，就請團隊成員或設計師看 System 的 Button 文件，這樣溝通上也較為快速。

2. **還有在維護嗎？** 

    如果你點進去 GitHub 頁面最新一次 commite 是 2 年前，那我會勸你放棄 😂

3. **文件夠詳細嗎？** 

    文件詳細可能包含樣式只能在什麼樣情境下使用、尺寸限制、如何撰寫、有哪些 Ppops 或 API ，甚至是 Live Demo 。

4. **Props 的設定自由度夠高嗎？**

    如果連最基礎的 Button 都只有一種 size 或樣式那麼就有點薄弱了，或是如果你的頁面融入大量的漸層、特效等，也許就不該使用 Design System 或是選擇自由度較高的 Desin System 像是 Ant Design / Atomize Design 等。

5. **有提供 Design Kit 嗎？** 

    這一項是非必要的，但如果你是想要運用這個 System 在有設計師的團隊裡，有 Design Kit 的話對設計師來說是省蠻多功，讓團隊可以專注在功能和流程上。

## 結語

以上是單純以網頁設計師 & 30% 的 React 初階工程師的整理介紹。

看到這些 Design System 有時候都會想說為什麼當初要刻那麼辛苦啊啊啊 ((哭

不過也是經歷過刻 Components 後更了解 React 的 Components 系統、命名、資料、狀態管理等細節。

這麼多 Design System 最多也只是一個 『工具』，為的是減輕設計師和前端工程師的負擔，如果只是一個頁面、簡單 Input 輸入表單、按鈕連結等功能，也許大部分的 Design System 都能達成，但視覺上要如何排列、文字內容要如何呈現、哪些功能要先開發等，這些都還是需要 UI/UX 設計師、文案、 PM 等其他專業的人員一起完成，而開發方面工程師也會需要整理資料狀態、判斷、擴充性等維護的工作，讓產品或網站功能更完整。
也就是說 Design System 沒有取代了設計師或前端工程師的工作，但都有了共同的文件和語言可以溝通。

如果，你有在使用上面任何一種 Design System 或是有發現更好用的 System 都歡迎[來信](mailto:hi@5xcampus.com)和我們交流！

或是到我們的[專頁](https://www.facebook.com/5xruby)上留言！

謝謝你的閱讀！ 🙂

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 React 觀念和原理嗎？
>
> 我們有開設 💠 [React 全攻略入門班](https://5xruby.tw/courses/react) 課程唷 ❤️️
>


Post - 讓人心動的 6 個 React Design Systems

讓人心動的 6 個 React Design Systems

隨著網頁技術發展，現在的網站可以做到許多事，除了購物外、還能開發各式的工具，例如你可以透過瀏覽器收發信件 (Gmail) 、存取檔案 (Dropbox)、輕鬆的看電影（Netflix）、專案管理 (Trello)、線上會議 (Google Meet) 等；那麼要如何開始著手撰寫網站呢？

你需要先知道建構網站的三大要素：**HTML / CSS / JavaScript**

簡單來說 HTML 決定了網頁的『架構』、CSS 形成網頁『樣式』，最後 JavaScript 讓網頁動起來(像是畫面淡入、文字淡出等)、讓網頁與使用者互動(例如，點擊按鈕跳出視窗、輸入文字等)。

接下來將會逐步介紹這三者的關係，進入正題 🏃‍♀️

## 什麼是 HTML ?

HTML 是一種用來建構網頁的 **標記語言** 而非程式，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。HTML 是告訴瀏覽器網頁上有哪些標題？標題放在哪裡？圖片在哪裡等。

不同的元素，會用標籤 `<>`  標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。大部分標籤會有開頭、結尾，讓網頁知道所謂的“標題”內的文字有哪些。這時候會像這樣標示：

```html
<h1>我是標題</h1>
```

或是按鈕：

```html
<button>我是一顆按鈕</button>
```

少部分標籤沒有結尾標籤，例如圖片：

```html
<img src="https://i.imgur.com/P8U0L2O.jpg" alt="替代文字">
```

附帶一提，在上方圖片標籤 `<img>` 可以看到裡面包含了 `src` 和 `alt` 這些都是這個標籤的『**屬性**』；每個標籤都有提供不同的屬性，讓這個標籤的資訊能夠更完整。

HTML 提供很多標籤做使用，但標籤使用也是需要留意的，例如 Google 進行爬蟲，定期會將發佈的網頁收錄在索引內，讓使用者可以透過搜尋找到網頁。Google 會盡可能的收錄完整資訊的網站，但如果是標籤使用濫用，嚴重可能會引響搜尋排名。因此善用 HTML 標籤也是一門學問，這方面我們也有開設[相關的課程](https://5xruby.tw/courses/html)，有興趣的人可以查閱 :)

## 什麼是 CSS ?
在 MDN 的 [CSS 基礎](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics) 有明確的解釋：

> CSS 既非標準程式語言，也不是標記語言, 而是一種風格頁面語言（style sheet language）

我們常形容 HTML 猶如一個人的骨架，而 CSS 就像是為這個人穿上衣服，你可以透過 CSS 自訂網頁字體樣式、顏色，網頁排版橫排、直排、動畫等，除此之外，CSS 最主要還能製作成 RWD (Responsive Web Design) 響應式網頁，使頁面不管是在任何尺寸下都整到適合的瀏覽樣式。

來看看 CSS 長什麼樣子吧：

![CSS 樣式](https://i.imgur.com/HvliE0u.jpg)

可以看到上面 『**選取**』了 HTML 頁面中的 `h1` 顏色變成藍色。

如果你想要將你的網頁上其他 HTML 標籤更改樣式，可以透過上面的方式撰寫。

CSS 可以做到哪些有趣的效果呢？
不妨查看 GitHub 上的： [You Don't Need JavaScript
](https://github.com/you-dont-need/You-Dont-Need-JavaScript)

當中示範了 [跳出視窗](https://github.com/you-dont-need/You-Dont-Need-JavaScript#modalpopup)：

![](https://i.imgur.com/SQZ3Mjn.png)
<small> [CodePen Home Modal Container without JS](https://codepen.io/chrisburnell/pen/scyKF) from [Chris Burnell](https://codepen.io/chrisburnell) </small>

[Tab 切換](https://codepen.io/fusco/pen/Wvzjrm)

![](https://i.imgur.com/5SWhzPX.png)

<small> [Transitioning Between Variable Heights with CSS Tabs](https://codepen.io/fusco/full/Wvzjrm) from [Joseph Fusco](https://codepen.io/fusco) </small>

這些都只使用 CSS 和 HTML 撰寫，是不是令人振奮呢！

但，先別急著開始寫網站，有了這兩項神器外，絕對不能錯過網站重要角色： JavaScript

## 什麼是 JavaScript ?

JavaScript (簡稱 JS) 是一個簡單、以物件為基礎的腳本語言。這樣說可能有點抽象，讓我們繼續引用前述的 HTML 像是人的『骨架』、CSS 是『衣服樣式』，那麼 JavaScript 就像是人的『神經系統』。

我們能透過 JavaScript 讓網頁骨架移動、改變樣式、獲取資料(如果你有聽過網站 API 串接)、讓使用者和你的網站互動(像是讓他們輸入文字後顯示正確或錯誤的提示)等許多事。

JavaScript 的程式碼長什麼樣子呢？來看看以下例子：

```javascript=
// 這邊準備執行一件事，並且將這件事命名為 “sayHello”：
function sayHello() {
  alert('Hello World!');
}

// 執行上面的 sayHello 這件事 
sayHello();

```

在 JavaScript 的執行區域或檔案內輸入上面的程式碼，即會顯示跳出視窗：

示範：https://jsbin.com/bibabiqugo/edit?js,output

![](https://i.imgur.com/QYnFGUl.gif)

就這樣輸入了程式碼，我們讓網頁跳出了訊息，這就是 JavaScript 提供的方法之一。

你或許有聽過 React 、 Vue.js 、 Angular 或是 jQuery，這些都是從 JavaScript 發展而成的，而 React / Vue.js / Angular 皆是『[前端框架](https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)』， [jQuery](https://jquery.com/) 則為 JavaScript 的 『函式庫(Library)』，這些框架和函示庫誕生除了解決 JavaScript 本身某些問題、優化開發和維護效率等，也使得 JavaScript 成了[蟬聯最熱門的程式語言榜首](https://octoverse.github.com/) 多年的原因。

---

以上就是 HTML / CSS / JavaScript 簡介，如果對於這三個主題有興趣，

推薦上 MDN 文件查閱：
[學習該如何開發 Web | MDN](https://developer.mozilla.org/zh-TW/docs/Learn) 

在 MDN 上有詳盡的指令、語法說明，算是一個網站開發的線上辭典，不妨多多利用！

如果你對於這樣的文件感到複雜的話，同樣可以透過 Google 搜尋，在開發者社群內也許會遇到和你有相同問題的人，有很許多優秀、樂於分享的開發者也會透過文章的方式記錄這些解決或理解的過程，寫法或描述可能有誤或是過時，在搜尋時也請記得多方比較喔！

試著 Google 輸入你的問題關鍵字吧！

如果你已經有在寫 HTML / CSS 的話，這邊可以看到我們先前所做的懶人包：

<a href="https://www.facebook.com/520517765024852/posts/901393513603940/?d=n" target="_blank" rel="noopener">
  <img src="https://i.imgur.com/zAX0pqH.jpg" alt="Markdown 語法懶人包">
</a>

<a href="https://www.facebook.com/520517765024852/posts/843516712724954/?d=n" target="_blank" rel="noopener">
  <img src="https://i.imgur.com/ZklArtO.jpg" alt="如何寫出最佳的 HTML & CSS 程式碼？">
</a>

<a href="https://www.facebook.com/520517765024852/posts/875234692886489/?d=n" target="_blank" rel="noopener">
  <img src="https://i.imgur.com/P8U0L2O.jpg" alt="CSS 修圖效果 8 大招">
</a>

或是追蹤我們 [專頁](https://www.facebook.com/5xruby)，我們將不定期更新技術懶人包、文章。

和我們一起學習網頁開發技能！ 💪💪


post - 網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？

網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？

<small>Photo by Kun Fotografi from [Pexels](https://www.pexels.com/zh-tw/photo/1230302/ "Pexels")</small>

## 前言

近期跟學員們介紹如何使用 Fetch API 串接資料時，發現同學對於回傳的 Promise 物件似乎有很大的疑惑。藉此來介紹何謂 Promise，也收集了一些同學們的常見問題來展開初探 Promise 之旅。

## 何謂 Fetch API

#### 為何 Fetch API 回傳會是個 Promise 物件 ？

比起過去常使用的 XMLHttpRequest，Fetch 的設計角度和使用方法都很不同，而 Fetch 實際在取得遠端資訊時，語法相較 XMLHttpRequest 簡潔且過程容易許多，卻可以達到相同的效果。

#### 至於 Fetch API 為何是 Promise 物件 ？ 

首先科普一下 Fetch API 是提供 JavaScript Interface 來處理 HTTP pipeline，例如：  `request` 和 `response`。就如上述 Fetch 就是基於 ECMAScript6 Promise 語法結構開發出來了的技術，因為如此，我們可以無痛使用，且彈性較高。

## 何謂 Promise ?

Promise 為建構函式，此函式必須傳入一個參數(該參數為函式)，這參數函式又包含兩個參數(都為函式)，分別為 `resolve` 和 `reject` 。 而 `resolve` 和 `reject`，這兩個函式分別代表成功與失敗的回傳結果，且這兩個方法是 JaveScript 引擎幫我們準備好了，無需再額外定義，但我們要注意的地方為兩個函式只能回傳一個，當回傳結果後，一個 Promise 就代表結束了。 

而 Promise 大多使用在非同步處理，至於何謂同步和非同步，大家可以參閱另外一篇文章 [無痛理解 JS | 非同步怎麼運作？](https://5xruby.tw/posts/how-js-synchronous-works)，相信大家就可以有基本了解。

## 何謂 Promise 物件 ?

Promise 物件是以 Promise 建構函式為原型，並使用 `new Promise()` 建立起來的物件。

Promise 物件一旦建立起來就有 `then`、`catch`、`finaly` 等方法可以呼叫。

```javascript
const promiseObject = new Promise((ressolve, reject)=>{})

promiseObject.then() : 接收 Promise 回傳正確的結果。
promiseObject.catch() : 接收 Promise 回傳失敗的結果。
promiseObject.finaly() : 無論正確或失敗都會回傳。
```

## Promise 狀態

### Promise 的狀態有三種：

#### 1. pending

![](https://i.imgur.com/LFW1tlm.png=400x)

#### 2. fulfilled

![](https://i.imgur.com/XZBLzZD.png=400x)

#### 3. rejected

![](https://i.imgur.com/jP3DSuI.png=400x)

Promise 的狀態一開始會是 `pending` ， 一旦 `resovle()` 被使用，狀態就會轉變為 `fulfilled`，而 `reject()` 被使用，狀態就會被轉變為 `rejected`。

這裡需注意的地方為 Promise 只有結果會影響狀態，無法透過一般外力操作使其更改狀態，而狀態一旦從 `pending` 改變後，就無法改變了。

## Promise 用法

試著建立一個 Promise 吧！

舉個例子：

![](https://i.imgur.com/m1W2zuF.jpg)
<small>Photo by 甲上，2017.04.18</small>

泡麵，有專屬於它的烹調時間，這就來用程式來判別一個泡麵是否有完美成功，
首先我們準備了 `cookFoodPromise function` 來執行我們的完美料理，而這個 `function` 裡面也有一個承諾 (Promise) 會告知我們每煮出來的一碗泡麵是否是完美的，絕對不會破壞我們的用餐體驗，這時我們只要帶入兩個參數，菜名和烹調時間(分鐘計)，時間會隨機產生，如果在 3 和 5 分鐘之間，就會完美成功，其他則會失敗。

```javascript
let cookFoodPromise = (foodName, time) => {
  return new Promise((resolve, reject) => {
    if (time > 3 && 5 > time) {
      resolve(`${foodName} 完美`)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

const cookTime = parseInt(Math.random() * 10) // 隨機帶入分鐘
cookFoodPromise('泡麵', cookTime)
.then((res) => { console.log(res) }) // 泡麵 完美
.catch((err) => { console.log(err) }) // 泡麵 失敗
```

當執行完 `cookFoodPromise function` 後，如果完美泡麵被煮出時，立刻上桌享用，此時可以使用 `then()` 這個托盤（方法），來接這碗泡麵 (Promise 回傳 `resolve` 的結果)。
不完美的話，則使用 `catch()` 這個廚餘桶（方法）來處理這碗泡麵 (Promise 回傳 `rejected` 的結果)。

## Promise 鏈接

不僅僅是上述例子如此，我們還可以使用 `then` 來串接上一個的結果繼續做事情，如下：

```javascript
let cookFoodPromise = (foodName, time) => {
  return new Promise((resolve, reject) => {
    if (time > 3 && 5 > time) {
      resolve(`${foodName} 完美`)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

const cookTime = parseInt(Math.random() * 10) // 隨機帶入分鐘
cookFoodPromise('泡麵', cookTime)
.then((res) => { return res + '好吃'} )
.then((res) => {console.log(res)}) // "泡麵 完美好吃"
.catch((err) => { console.log(err) }) // "泡麵 失敗"
```

但是我們在某個階段發生錯誤時，該階段下一個是 `then` 的話就不會執行，會直接跳到 `catch`。

其實 `catch` 執行完畢後，還是可以繼續使用 `then` 串接，但在實務上我們很少會這麼做，如下：

```javascript
let cookFoodPromise = (foodName, time) => {
  return new Promise((resolve, reject) => {
    if (time > 3 && 5 > time) {
      resolve(`${foodName} 完美`)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

const cookTime = parseInt(Math.random() * 10) // 隨機帶入分鐘
cookFoodPromise('麻油雞泡麵', cookTime)
.then((res) => { return cookFoodPromise('花雕雞泡麵', 6)} ) //煮第一碗成功，接著煮第二碗固定失敗
.then((res) => {console.log(res)}) // 不執行
.catch((err) => {return err+ '準備'})
.then((failure) => {console.log(failure + '倒進廚餘桶')}) //第一碗就失敗："麻油雞泡麵 失敗準備倒進廚餘桶" 第二碗才失敗："花雕雞泡麵 失敗準備倒進廚餘桶"
```

## Promise.all()

有時候我們可能會想同時享用多碗泡麵，這時候就需要使用複數個爐台，這個複數爐台就是 `Promise.all()`，其背後操作則是使用陣列將多個 `promise` 函式打包，當全部執行完成後回傳陣列結果，而陣列的結果順序與一開始傳入的一樣。 但是一旦有 Promise 物件失敗，將回傳失敗那個物件回傳的結果，如果是全部失敗，則回傳第一個 Promise 物件的失敗結果，來當成整個最後的錯誤訊息。

### 成功：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.all([cookFoodPromise('花雕雞泡麵', 5, 1500), cookFoodPromise('麻油雞泡麵', 5, 3500)])
.then(res => console.log(res)) // ["花雕雞泡麵 完美", "麻油雞泡麵 完美"]
```

### 失敗：

一個失敗的例子：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.all([cookFoodPromise('花雕雞泡麵', 5, 2500), cookFoodPromise('麻油雞泡麵', 2, 1500)])
.then(res => console.log(res))
.catch(err => console.log(err)) // "麻油雞泡麵 失敗"
```

全部失敗的例子：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.all([cookFoodPromise('花雕雞泡麵', 2, 2500), cookFoodPromise('麻油雞泡麵', 2, 1500)])
.catch(err => console.log(err)) // "花雕雞泡麵 失敗"
```

## Promise.race()

`race` 和 `all` 不同的是只要有一個 Promise 物件回傳結果，不論成功或失敗，都會結束該次 Promise.race() 呼叫。

### 成功：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.race([cookFoodPromise('花雕雞泡麵', 5, 4500), cookFoodPromise('麻油雞泡麵', 5, 3500)])
.then(res => console.log(res)) // "麻油雞泡麵 完美"
.catch(err => console.log(err))
```

### 失敗：

```javascript
let cookFoodPromise = (foodName, cookTime, timer) => {
  return new Promise((resolve, reject) => {
    if (cookTime > 3 && 6 > cookTime) {
      setTimeout(() => {
        resolve(`${foodName} 完美`)
      }, timer)
    } else {
      reject((`${foodName} 失敗`))
    }
  })
}

Promise.race([cookFoodPromise('花雕雞泡麵', 2, 1500), cookFoodPromise('麻油雞泡麵', 5, 3500)])
.then(res => console.log(res))
.catch(err => console.log(err)) // "花雕雞泡麵 失敗"
```

## 結語

今天跟大家簡單介紹 Promise 以及其用法，相信學習 Promise 後，對於非同步處理就再也不那麼陌生，整個流程控制也會掌握得比較好，後續有機會的話，可以和大家來介紹專屬於它的語法糖衣 - `Async` & `Await`，希望透過本篇大家對 Promise 可以有初步的了解 😀

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
> 
> 我們近期也有開設 JavaScript 課程喔！ 👉  [https://reurl.cc/KxGnVq](https://reurl.cc/KxGnVq)
> 
> 講者是『 0 陷阱！0 誤解！8 天重新認識 JavaScript！』作者 - 🧑‍💻 __Kuro 老師__ 
> 

post - 你今天 Promise 了嗎？

你今天 Promise 了嗎？

<small> Photo by [Alexandru Acea](https://unsplash.com/@alexacea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/developer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)</small>

筆者身為網頁設計師一半設計師、一半工程師，蠻多時候會花時間在設計稿與 CSS 樣式調整，以下我將分享工作中常用的小工具網站，減少設計稿和網頁切版的落差。

如果你有推薦的工具也歡迎[來信](mailto:debby@5xcampus.com)和我交流 😉

話不多說，正文開始！

## [HTML COLOR CODES](https://htmlcolorcodes.com/) - 線上配色、選色小工具

![HTML COLOR CODES](https://i.imgur.com/PiFdFqM.jpg)

HTML color codes 基本的功能除了可以在首頁色盤上選色外，另一個實用功能是 [Color Picker](https://htmlcolorcodes.com/color-picker/) ：他可以在色盤上選色後，在下方的選單選擇配色方式，例如 Complementary (互補色) / Analogous (類比色)等，就會顯示對應的色票。

![Color Picker](https://i.imgur.com/zTMQ6as.jpg)

頁面底下也附上這些配色原理，例如 Tetradic Colors (矩形配色) 上相應另外三個顏色[[1]](#cite_note-crabtree)，透過這樣的些配色方法，能夠產生出有趣的色彩配色。

![Tetradic Colors](https://i.imgur.com/8iSWe5a.jpg)

<br>

筆者較常使用的功能是 [Color Chart](https://htmlcolorcodes.com/color-chart/)：

此功能收錄 Flat Design / [Material design](https://material.io/design/color/the-color-system.html#tools-for-picking-colors) / [Web safe colors](https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2) 的色票，如果臨時想找一個主色或配色，能夠試著使用 Flat Design 或 Material design 的色票！他們的色彩和諧度很高，使用兩色的配色後，顏色上沒有太大的問題。

![Color Chart](https://i.imgur.com/0ro43tS.jpg)

## [CSS Gradient](https://cssgradient.io/) - 線上漸層色與 CSS 產生器

![](https://i.imgur.com/KtykfqJ.jpg)

CSS Gradient 提供一個可以線上拉漸層色的工具，讓你可以在網頁上拉出漸層色後，下方產生出 CSS，即可應用在網站上。

想要美麗的漸層色票？分享另一個網站：[WebGradients](https://webgradients.com/) 

WebGradients 列出優美的漸層色，並同時提供 CSS / Photosop 檔，讓使用者能夠自由存取，光看到這些漸層色就讓人感覺心情愉快呢！（偷偷說，這裡的漸層色配色也是我很常參考的靈感來源！想像這些美麗的漸層色上面加上白色字，是不是很美呢？ 🌸 )

![WebGradients](https://i.imgur.com/8qulNdw.jpg)

## [PX to REM converter | nakoCalc](https://nekocalc.com/px-to-rem-converter) - Pixel 與 REM 換算工具

![PX to REM converter | nakoCalc](https://i.imgur.com/hEtjmT5.jpg)

網頁設計師蠻常會需要確認頁面區塊的距離、單位、大小等，而 Figma 或 一般標註工具使用的單位是 Pixel ，但如果是使用 [Tailwind CSS](https://tailwindcss.com/) 或 [Bootstrap](https://getbootstrap.com/) 這樣的 Framework 多是以 REM 、 EM 為單位，這時候可以使用這個網站換算 Pixel 和 REM 單位。換算完 REM 後，再到 Tailwind CSS 查詢對應的距離。（算是筆者在切版時最常使用的網站！）

另外網站還有提供其他[單位換算工具](https://nekocalc.com/)喔！

## [Type Scale](https://type-scale.com/) - 文字規範制定

![](https://i.imgur.com/LpPAnpD.jpg)

在製作網站 Design Guideline 時，會需要制定文字的標題、副標 (H1、H2、H3) 大小；像是需要多大的標題？標題與副標的大小比例？

 [Type Scale](https://type-scale.com/)：他提供黃金比例、Perfect Fourth、Augmented Fourth 等比例，可以在選取後立即的看到文章的標題和文章內文的文字比例。

筆者在剛開始建立規範時，也是透過這個網站免去糾結各種標題的大小設定，如果你也在設計規範，不妨試試看使用這個網站喔！

![文章預覽](https://i.imgur.com/wQpDlPx.jpg)

## [Smoot Shadows](https://shadows.brumm.af/) - 做出柔和的陰影吧！

![Smoot Shadows](https://i.imgur.com/6jWvWrt.jpg)

同樣是在設計稿轉到 CSS 時，經常會遇到陰影呈現的問題，CSS 提供的 [box-shadow](https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-shadow) 屬性相當多，前端工程師或設計師可以利用數值玩出不同的漸層樣式，只是每次都要條數值有點不夠直覺，這時利用 Smoot Shadows 這個工具，視覺化的拉出陰影的平滑程度、間距等，然後再將結果的 CSS 複製起來利用。

設計師也在網站上，試著調整出想要的陰影樣子後，直接複製中間的 CSS 給工程師，就可以立即地使用。

## [Design Systems for Figma](https://designsystemsforfigma.com/) - 網羅各家 Design System！

![Design Systems for Figma](https://i.imgur.com/4UCVkTV.jpg)

此網站蒐集了在 Figma 上各家 Design System ，設計師可以透過這些大量的設計規範，學習到如何制定規範、Components 設計、文字、顏色等。

是一個靈感滿滿的搜集網站～！

---

以上的工具，歡迎大家試試看！希望對你來說有幫助！

如果有任何有趣、常用的工具也歡迎 [來信](mailto:debby@5xcampus.com) 或 [GitHub](https://github.com/purple1007) 和我分享，或是設計師、前端工程師切版、職涯交流都歡迎～！👋

<br>

<span id="cite_note-crabtree"></span>

> 註1：常見的配色方法，可以從[色環](https://zh.wikipedia.org/wiki/%E8%89%B2%E7%92%B0)上找到兩點直線的顏色即是互補色，或是三點等距產生的顏色所產生的三次色。
> 
> 更詳細的色環與配色，歡迎查閱：[設計配色完整攻略：色彩意義、色彩理論、色彩心理學 | shutterstock](https://www.shutterstock.com/zh-Hant/blog/complete-guide-color-in-design)


posts - 網頁設計師六個實用小工具分享

網頁設計師的六個實用小工具分享

(Photo by Markus Winkler on <a href="https://unsplash.com/s/photos/search" rel="nofollow noopener noreferrer" target="_blank">Unsplash</a>)

Google 在今年5月28日發表了一篇關於提升網站使用體驗為的<a href="https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html" rel="nofollow noopener noreferrer" target="_blank">部落格文章</a>，公布新的搜尋引擎排名指標 *Core Web Vitals*，以三個使用者體驗導向的指標所組成，分別為：

- *Largest Contentful Paint (LCP)*
- *First Input Delay (FID)*
- *Cumulative Layout Shift (CLS)*

經 Google 統計調查，網頁的三個指標分數如果有超過其設定的門檻值，約 `24%` 的使用者不會因使用者體驗因素提前離開網頁。另外附帶的好處是， *Google Top Stories* 將不再專屬 <a href="https://amp.dev" rel="nofollow noopener noreferrer" target="_blank">AMP</a> 文章網頁，未來只要網頁有通過門檻值，就有機會在 *Google Top Stories* 上曝光。

看到這可能心想：聽起來很誘人，不過一次推三個新的<strike>代辦事項</strike>排名指標是要逼死誰？！好消息（也是壞消息），因為武漢肺炎疫情影響，Google 將 *Core Web Vitals* 上線做為搜尋排名指標的時間點延後至明年，並且會提前六個月公告。不仿趁現在還有充足時間為這次更新做好準備！

## 診斷/開發工具
著手進行改善之前的第一步是整理調查網站的評分現況。Google 已經陸續將許多診斷與協助開發工具上線供網站管理者與開發者使用，下圖為官方提供的檢測工具列表，以下將列舉筆者較常用的工具。

![Core Web Vital 檢測工具](//images.ctfassets.net/8er52l3j5u76/7wDmRRH5uanxggX4bSmipL/d0c3290821b40c7f24ff88b90d56aadf/Vitals-Tools1.png)

<small>圖片來源：<a href="https://web.dev/vitals-tools/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

如果你是行銷人或網站管理者，對於 *Google Search Console* 應該不陌生。從 Dashboard 左側選單 `Core Web Vitals` 進入可以檢視評分狀態，除了可以依指標檢視未達標準的網頁數量並檢視『部分』網頁網址。用於診斷整體網站相當便利。

![google-search-console-core-web-vitals](//images.ctfassets.net/8er52l3j5u76/58dbGwMHvRNtp2MOlRlJj6/567421279027f0c51a338013932a4bc2/google-search-console-core-web-vitals.jpg)

<a href="https://developers.google.com/speed/pagespeed/insights/" rel="nofollow noopener noreferrer" target="_blank">PageSpeed Insights</a> 提供單一網頁詳細的跑分報告。除了各項指標的跑分結果之外，下方詳細列出具體的建議改善的項目。稍微需要留意的部分是跑分結果分為 Field 與 Lab Data，前者為 Google 以過去 28 天真實使用者瀏覽網頁的資料做計算得出；後者則為在控制環境內（網路、裝置...等）的跑分結果。因為 Field Data 為累計資料且有其他不定因素影響（如使用者網路速度），以 Lab Data 作為改善前後差異的比對依據較為便利。

![pagespeed-insights-core-web-vitals](//images.ctfassets.net/8er52l3j5u76/5CdR0sweuJnDkL23FPCGDo/a4751820d5a0543af6a063b7446fec51/pagespeed-insights-core-web-vitals.jpg)

另外，也可以考慮安裝 <a href="https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en" rel="nofollow noopener noreferrer" target="_blank">Web Vitals Extension</a>，快速檢視當前瀏覽網頁的指標分數。

在開發過程較常使用 *Chrome DevTools* 內建的 Lighthouse 工具，用來即時檢視單一項目調整之後的效果。在 Performance 底下多了一個 *Experience* 區域（或由 lighthouse report 中的 `View Trace` 按鈕進入）。
![chrome-dev-tool-lighthouse](//images.ctfassets.net/8er52l3j5u76/2qJq9iXAYzmuTGcF6n9noe/4efb6688481f2f3d7e96ea3e2695eb92/chrome-dev-tool-lighthouse.jpg)

## Largest Contentful Paint (LCP)

![Largest Contentful Paint](//images.ctfassets.net/8er52l3j5u76/4p1YppHqaXFhoOBAQa0aLl/215861265188769be93c940919cedba0/lcp_8x2.svg)

<small>圖片來源：<a href="https://web.dev/lcp/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

LCP 檢視網頁載入時可視範圍（viewport）內最大內容區塊的速度。就官方說明，內容區塊元素包含：

- 圖片(`<img>`)
- 內含 `<image>` 的 SVG
- 含預覽圖的影片
- 使用 CSS `url()` 載入的背景圖
- 文字區塊

當中比較需要留意圖片元素的尺寸計算方式。假設圖片原始尺寸為 600x300，使用 CSS 將其顯示尺寸縮減為 300x150 時，以 300x150 做計算；如果將顯示尺寸放大至 900x450，以原始尺寸 600x300 做計算。另外，使用 CSS（margin, padding ...等）增加的尺寸或 overflow 可視範圍外的區域則不在計算範圍內。

網頁在讀取過程常有延遲載入的區塊，LCP 有可能因此被重新計算。以下圖為例，網頁讀取過程一開始 LCP 是標題文字區塊，接下來因為延遲載入的圖片比文字區塊大，LCP 變以該圖片計算。當使用者開始與網頁互動時（如點擊、捲動行為），LCP 停止計算。

![Largest Contentful Paint example](//images.ctfassets.net/8er52l3j5u76/4XMGknESPRttKY0KgKfDQf/e98b7a08e670a92dc93ea6f0864572cd/lcp-cnn-filmstrip.png)

<small>圖片來源：<a href="https://web.dev/lcp/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

要找出網頁的 LCP 相當容易，在 *Chrome DevTools* 的 Performance 底下應該會看到 `LCP` 標示，滑鼠移至標示區域時該網頁區塊會同步 highlight。
![使用Chrome 開發者工具檢視 LCP](//images.ctfassets.net/8er52l3j5u76/2GeG0A4F2rzz8y5SMDVTYc/c13e5eaf3ec6dbb3b42c33a963ef9638/chrome-dev-tool-lcp.jpg)

### 優化 LCP
<a href="https://web.dev/optimize-lcp/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a> 歸納四個 LCP 分數建議改善方向，以下在各類別內挑出幾個較容易下手的改善項目說明：
#### Slow server response times
- 使用 CDN 縮短使用者與主機的距離因此降低傳輸時間
- 使用 cache
- 如果 LCP 區域使用第三方資源，使用 `rel="preconnect"` 與 `rel="dns-prefetch"` 讓瀏覽器即早建立連線

#### Render-blocking JavaScript and CSS
##### CSS
- 使用打包工具如 *Webpack* 最小化與壓縮檔案
- 移除未使用 CSS
  - 基本：如使用 <a href="https://purgecss.com/" rel="nofollow noopener noreferrer" target="_blank">PurgeCSS</a>
  - 進階：<a href="https://web.dev/extract-critical-css/" rel="nofollow noopener noreferrer" target="_blank">Extract critical CSS</a>、<a href="https://web.dev/defer-non-critical-css/" rel="nofollow noopener noreferrer" target="_blank">Defer non-critical CSS</a>

##### JavaScript
- 使用打包工具如 *Webpack* 最小化與壓縮檔案
- 延遲載入，如 `<script defer src="..."></script>`

#### Slow resource load times
- 降低圖片尺寸（可用該元素在 viewport 內最大寬度做標準）、在可接受的範圍內壓縮品質
- 使用新的圖片格式（JPEG 2000、 JPEG XR 或 WebP）
- 圖片使用 CDN
- 使用 `rel="preload"` 提前載入必要資源

#### Client-side rendering
- 最小化檔案
- 延遲載入 viewport 內未使用到的 Javascript
- 使用伺服器端渲染（server-side rendering）

## First Input Delay (FID)

![First Input Delay](//images.ctfassets.net/8er52l3j5u76/3uO08FyYZg3ok86WDFy0ZW/686915e9c2c617cf376d6b2096f2ea61/fid_8x2.svg)

<small>圖片來源：<a href="https://web.dev/fid/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

FID 的 `Input` 指的不是的網頁表單 `<input>`，而是量測使用者與網頁『首次互動』的延遲時間，例如點擊連結、按鈕或按壓鍵盤（捲動、放大網頁不在計算範圍內）。這種的狀況通常發生在瀏覽器主執行序（<a href="https://developer.mozilla.org/en-US/docs/Glossary/Main_thread" rel="nofollow noopener noreferrer" target="_blank">Main thread</a>）忙著讀取 Javascript 檔案、還無法回應使用者在頁面上所做的互動行為。

等一下，我的網頁連結沒用到 Javascript 為什麼也在 FID 計算範圍內？即使一些原生 HTML 元素（如 `<a>`、`input`、`textarea`）與使用者互動不需要 JS ，還是需要上述『主執行緒』運作。

再等一下，那如果使用者完全沒跟網頁『互動』呢？這樣的情況下，該使用者的網頁瀏覽過程將沒有 FID。另外，目前 FID 也是 *Core Web Vitals* 中唯一只在 Field Data 有資料的指標。通常 FID 與 *Time to Interactive (TTI)* 正相關，優化時也可以依此作為參考。

### 優化 FID
#### Reduce JavaScript execution time
- 移除或延遲載入網頁沒有使用到的 JavaScript。從 *Chrome DevTools* 的 Sources/Coverage 可以找出哪些是當前頁面用不到的部分。將檔案拆成多個小的區塊，並使用 `defer` 或 `defer` 延遲載入在頁面 inital load 時用不到的程式碼區塊

![使用Chrome 開發者工具檢視 LCP](//images.ctfassets.net/8er52l3j5u76/EQ825uMhq5wu8EXECueVH/80dae6b6e90644135676486c5f918527/coverage-panel-js.png)

<small>圖片來源： <a href="https://web.dev/optimize-fid/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

#### Delay third party scripts
- 常見的第三方程式碼如行銷追蹤碼與廣告。如果頁面有多個廣吿版位，延遲載入 viewport 以下的 scripts

#### Use a web worker
- 使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" rel="nofollow noopener noreferrer" target="_blank">Web Worker</a> 將無關 UI 的 JS 以背景作業方式處理

## Cumulative Layout Shift (CLS)

![Cumulative Layout Shift](//images.ctfassets.net/8er52l3j5u76/3ZwurqVHNCL2fZKWg7tuHZ/d166054c489ba76279fa828636b7881f/cls_8x2.svg)

<small>圖片來源： <a href="https://web.dev/cls/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

CLS 量測『未預期』版位移動。以下圖為例，網頁初始讀取只有兩個文字區塊，當使用者往下滑動時突然跑出了一個按鈕（更常見是廣告）造成使用者誤觸與不佳的使用體驗。對於『預期』版位移動，就 *Web.dev* 的定義是由使用者所觸發的版位移動（如下拉選單）或 CSS 動畫，則不在計算範圍內。

![Cumulative Layout Shift](//images.ctfassets.net/8er52l3j5u76/3MiHeFlWpjEWZgGmyXzZh9/454aff10f4a616fc3b7b3fc353cdda11/layout-shift-3.png)

<small>圖片來源： <a href="https://web.dev/cls/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

不同於 FCP 與 FID 都以『時間』為計算依據，CLS 計算『位移』，公式為 `Layout shift score = impact fraction * distance fraction`，數字越低越好。

*Impact fraction* 計算不穩定版位在移動前後共佔據 viewport 空間的比例；*Distance fraction* 計算版位移動距離佔據 viewport 空間的比例，另外，位移可能為水平與垂直移動，計算方式為取大的一方。

以下圖為例，一開始文字區塊佔畫面 50%，位移 25% viewport 高度，前後共佔畫面 75%。因此 *Layout shift score* 為 `0.1875`(0.75*0.25)。

![Cumulative Layout Shift Distance Fraction](//images.ctfassets.net/8er52l3j5u76/2ikpywLtr2FMeGtf7BG3jW/0653e87ebb7ba18fd132d848d2abd3f6/layout-shift-2.png)

<small>圖片來源： <a href="https://web.dev/cls/" rel="nofollow noopener noreferrer" target="_blank">web.dev</a></small>

### 優化 CLS
#### Images

- 在 `<img>` 內加上 `width` 與 `height` 屬性，例如 `<img src="https://fakeimg.pl/300/" width="640" height="360" alt="hello">`
- 
- 如果是在容器內的圖片，可使用 CSS `img { height: auto; width: 100%; }` 讓寬度與父層寬度一致並確保圖片長寬比

#### Ads, embeds, and iframes
- 預先定義廣告區塊寬度與高度（需留意如果是實際廣告尺寸小於定義尺寸時的呈現效果），留白區域可考慮加上 placeholder
- 如果可以，減少使用放置於 viewport 頂端的廣告。原因為至頂廣告的內容常多於其他區域版位，意即較多的版位移動。
- 為嵌入元素區域預先定義寬高尺寸，留白區域可考慮加上 placeholder

#### Dynamically injected content
- 盡量避免在非使用者觸發的狀況下動態插入網頁元素。如果有此需求，可以評估是否可以在現有內容區塊後加上新區塊方式呈現

### 結語
看到這是否覺得<strike>眼神死</strike>躍躍欲試？ *Core Web Vitals* 三項指標固然是明年度 SEO 的重點之一，在 ranking factors 只是一小部分，另外關於使用者體驗的 Search Signal 還包含其他四個項目<strike>眼神再死</strike>（如下圖），如果有興趣，可以參考此篇[說明](https://developers.google.com/search/docs/guides/page-experience)

![Search signals for page experience](//images.ctfassets.net/8er52l3j5u76/lBiVLeoBDi9kBfaWZK1qj/7fbeaf9860609d7d0b94184f4a95875e/Search_Page_Experience_Graphic.jpg)

<small>圖片來源：[web.dev](https://web.dev/)</small>

cover-2021 行銷人與開發者都要懂的 SEO Core Web Vital

2021 行銷人與開發者都要懂的 SEO Core Web Vital


大家是否有在使用瀏覽器『擴充套件』呢？筆者已經使用 [uBlock](https://github.com/gorhill/uBlock) 這款開源的廣告阻擋器多年囉，但是一直以來都不知道瀏覽器擴充套件是如何製作以及其可取用的 API 為何，前陣子花了點時間研究一下，才發現在 Chrome/Chromium 上開發擴充套件竟然是如此的簡單，而且可取用的 API 跟在 Web 上也完全不是同一個檔次，今天就來看看這些東西，順便找些場景來應用。

## 如何建立，並開始開發 Chrome 擴充套件

首先去看了官方文件：[https://developer.chrome.com/extensions/getstarted](https://developer.chrome.com/extensions/getstarted)

請先建立一個空的資料夾作為擴充套件專案資料夾，接著在資料夾中建立 `manifest.json`，用來設定擴充套件的名字，敘述等：

```json
{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}
```

接著打開 Chrome 瀏覽器到 `chrome://extensions/`（在網址列上直接輸入即可），右上角有個 `Developer mode` (開發模式)，把它打開：

![](https://i.imgur.com/Frw9ya4.png)

你會發現有幾個按鈕跑出來：

![](https://i.imgur.com/Rvlsf5x.png)

按下 `Load unpacked` 並且選取 `manifest.json` 所在的資料夾，接著可以看到擴充套件就這樣出現了：

![](https://i.imgur.com/SMMXxdu.png)

沒錯，就是這麼簡單，幾乎不用任何開發工具，就是 chrome 跟你最愛的編輯器即可；當然 `manifest.json` 還能放[其他欄位](https://developer.chrome.com/extensions/manifest)，例如加上 `icons`:

```json
{
  ...
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  ...
}
```

`icon.png` （或是其他檔名也可以）隨便找一張圖即可，就直接放在跟 `manifest.json` 同個資料夾下即可；在修改之後會需要來按下這邊的重整按鈕 **更新**擴充套件，這樣一來我們就可以測試剛改好的擴充套件是否如預期執行：

![](https://i.imgur.com/AwVCb3O.png)

## Chrome 擴充套件能做哪些事？

上面建立了一個 chrome 擴充套件，但是它什麼功能也沒有，毫無反應；官方文件有一頁概觀列出擴充套件上可以使用的功能：

[https://developer.chrome.com/extensions/devguide](https://developer.chrome.com/extensions/devguide)

這篇文章將以兩個情境來介紹筆者比較有興趣的幾個功能

## 情境 1: PTT 新文章提醒

其實就是文章**爬蟲**，只是透過 chrome 瀏覽器**定期**進行檢查，並且比對是否跟**上次**爬的資料一樣，不一樣的話**通知**使用者，這樣聽起來會需要幾個功能：

* 定期在背景執行程式
* 進行 http call 抓回網頁資料
* 資料儲存功能
* 通知功能

在[官方 get started](https://developer.chrome.com/extensions/getstarted) 建立擴充套件之後第一件事就是在 `manifest.json` 給一個 `background.js` 讓擴充套件有程式可以執行：

```json
{
  ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  ...
}

```

可以先在 `background.js` 寫上一個 `console.log('hello chrome extension!')` 測試一下，並請他在安裝好的時候執行：

```javascript
chrome.runtime.onInstalled.addListener(() => {
  console.log('hello chrome extension!');
})
```

重整更新之後可以看到 `Inspect views background page` 出現了，點下去就是熟悉的 Chrome DevTools:

![](https://i.imgur.com/bMJfVqJ.png)

### 定期在背景執行程式

這個功能叫做 [alrams](https://developer.chrome.com/apps/alarms)，首先必須要在 `manifest.json` 加入權限：

```json
{
  ...
  "permissions": ["alarms"],
  ...
}
```

接著在安裝好擴充套件時加入 alarm，這邊請他每分鐘執行一次：

```javascript
chrome.runtime.onInstalled.addListener(() => {
  chrome.alarms.create('check', { periodInMinutes: 1 })
})
```

> [官方文件上其他執行時機的選項 (alarmInfo)](https://developer.chrome.com/apps/alarms#method-create)

同時加上 alarm callback 作為定期執行的程式：

```javascript
chrome.alarms.onAlarm.addListener(alarm => {
  console.log("Got an alarm!", alarm);
});
```

一樣戳一下重整按鈕，一分鐘之後應該可以看到：

![](https://i.imgur.com/neroB2T.png)

### 進行 http call 抓回網頁資料

既然是在瀏覽器的 Javascript 環境，第一個想到的 API 就是 [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 了，假設要來抓 [PTT mobilesales](https://www.ptt.cc/bbs/mobilesales/index.html):

```javascript
fetch('https://www.ptt.cc/bbs/mobilesales/index.html')
```

馬上就會看到錯誤發生，Chrome 也很好心地直接在擴充套件管理界面上讓你知道有事情不太對勁：

![](https://i.imgur.com/K142TGD.png)

![](https://i.imgur.com/Cusc460.png)

沒錯，[跨站存取問題](https://zh.wikipedia.org/wiki/%E8%B7%A8%E4%BE%86%E6%BA%90%E8%B3%87%E6%BA%90%E5%85%B1%E4%BA%AB)，不過我們可是擴充套件，只要在 `manifest.json` 的 `permission` 給上允許存取的 [URL pattern](https://developer.chrome.com/extensions/match_patterns) 即可，像是這樣就可全開：

```json
{
  ...
  "permissions": [..., "*://*/"]
  ...
}
```

那麼接下來的問題就是如何從 html 中找到要找的資料，筆者使用 [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)，接著就可以用 Web/DOM API 享受找元素的方便性（例如 `querySelector`），迅速找到 mobilesales 最新的文章標題。

### 資料儲存功能

Chrome 擴充套件提供了自己的 [storage API](https://developer.chrome.com/extensions/storage)，首先得上 `"storage"` 到 `manifest.json` 的 `permission`:

```json
{
  ...
  "permissions": [..., "storage"]
  ...
}
```

接著就可以透過這樣的語法進行讀寫，把 `fetch` 到的文章主題存起來：

```javascript
chrome.storage.local.set({ key: value }, callback)
chrome.storage.local.get('key', result => { console.log(result.key) })
```

這組 API 是非同步的，所以需要 callback 來接，筆者看到這就立刻用 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 包起來接下來就能用 async/await 寫更漂亮的語法。

### 通知功能

定期抓資料回來比對跟上次存起來的文章標題是否一樣，不一樣的時候就是有新文章，這時通知使用者，chrome 擴充套件也有 [notifications API](https://developer.chrome.com/apps/notifications)，第一件事情一樣是加上  `manifest.json` 的 `permission`:

```json
{
  ...
  "permissions": [..., "notifications"]
  ...
}
```

我們就可以呼叫 API 通知使用者：

```javascript
chrome.notifications.create('reminder', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'ptt mobilesales first post:',
  message: '[賣/台北/面交] iPhone ...', // fetch 到的最新文章主題
});
```

![](https://i.imgur.com/FHXOhfD.png)

接下來就是寫 Javascript 進行邏輯串接了，筆者也有進行一些改良，完整程式碼請見 Github repo: [https://github.com/pastleo/ptt-watcher-chromext](https://github.com/pastleo/ptt-watcher-chromext)

## 情境 2: 單字蒐集

這個就有趣了，使用者在**任何網頁上瀏覽時**，看到一個沒學過的單字想要**紀錄**下來，於是把文字選取起來，**按下隨即出現的 `Add` 按鈕**把文字加入複習清單內。點選 UI 上的擴充套件 icon 會有 **popup** 看到蒐集的單字數量；也可以打開一個**擴充套件頁面**來進行複習，這樣聽起來會需要幾個功能：

* 在瀏覽中的網頁上執行指定的 Javascript
  * 而且可以存取到頁面上的 BOM/DOM、擴充套件 API
* 點選擴充套件 icon 有個 popup
* 打開並顯示一個複習頁面

當然還是需要資料儲存功能，上面已經提過就不再提，這部份最有趣的部份就是 `在瀏覽中的網頁上執行指定的 Javascript`，也就是在別人的網站上執行自己寫的 Javascript。

### 在瀏覽中的網頁上執行指定的 Javascript

這個功能就是 [**`content_scripts`**](https://developer.chrome.com/extensions/content_scripts)，需要 [`activeTab`](https://developer.chrome.com/extensions/activeTab) permission，所以當然還是得先在 `manifest.json` 上寫好，同時也要告訴 chrome 你要執行的 Javascript 檔名跟執行的網頁 [URL pattern](https://developer.chrome.com/extensions/match_patterns):

```json
{
  ...
  "permissions": [..., "activeTab"],
  "content_scripts": [{
    "matches": ["https://*/*", "https://*/*"],
    "js": ["contentScript.js"]
  }]
  ...
}
```

照這樣設定，在瀏覽任何網頁時都會在上面執行 `contentScript.js`，我們就可以所有網站加上我們自己想要的行為。

#### 關於 `contentScript.js`

* 根據[官方文件](https://developer.chrome.com/extensions/content_scripts#run_time)，`contentScript.js` 預設會在 `document_idle` 時執行，也就是說至少都已經 [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event)
* `contentScript.js` 可以透過 `window`/`document` 操作網頁的 BOM/DOM
* 有趣的是，`contentScript.js` 同時還可以呼叫 `chrome.storage` 等擴充套件才有的 API

> 根據[官方文件](https://developer.chrome.com/extensions/content_scripts#isolated_world)，`contentScript.js` 跟原本網頁是不同的 Javascript runtime 實體，經過測試確實是如此，使用 `window.testVar = 123` 在另外一邊是拿不到的，但是 BOM/DOM 操作對象是同一個

#### 文字選取偵測，偵測到時加上按鈕

策略很簡單，就是在整個 `document` 上監聽 `click` 事件，並使用 [`window.getSelection()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) 看是否有文字被選取，有的話就放上按鈕把選取的文字儲存起來：

```javascript
document.addEventListener('click', event => {
  const selected = window.getSelection().toString();
  if (!selected) return;

  button = document.createElement('button');
  button.textContent = 'Save this';
  // 設定 button.style 使得按鈕出現在滑鼠附近

  button.addEventListener('click', () => {
    // 透過 chrome.storage 把 selected 存起來
  });

  document.body.appendChild(button);
})
```

### Popup 以及複習頁面

* 點選擴充套件 icon 時的行為可以透過設定 [browserAction](https://developer.chrome.com/extensions/browserAction) 來決定，指定 `default_popup` 到一個 html 檔案即可
* 複習頁面的部份就建立一個 html 網頁
  * 同時我們來把這個複習頁面當成 [擴充套件選項頁（Options）](https://developer.chrome.com/extensions/options#full_page)

在 `manifest.json` 中指定這些 html 檔案：

```json
{
  ...
  "browser_action": {
    "default_popup": "popup.html"
  },
  "options_page": "review.html",
  ...
}
```

接下來內容排版、行為實做就是一般靜態網頁的開發，唯一的差別就是多了擴充套件 API 可以使用，像是上面提到的 [storage API](https://developer.chrome.com/extensions/storage)

擴充套件的所有資源都有一個特定的 URL 可以連到，透過 `chrome.runtime.getURL('review.html')` 得到擴充套件內 `review.html` 的 URL，然後在 popup html 內加入一個按鈕來開啟這個 URL。

> 想知道 `chrome.runtime` 還有什麼 API 可用？請參考[官方文件](https://developer.chrome.com/擴充套件s/runtime)

同樣地筆者也進行一些改良，簡易字卡蒐集小工具就這樣完成囉：

<amp-iframe width="560" height="315" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0" src="https://www.youtube.com/embed/NL5ajwr88Yw" allowfullscreen >
</amp-iframe>

完整程式碼請見 Github repo: [https://github.com/pastleo/word-cards-chromext](https://github.com/pastleo/word-cards-chromext)

---

今天透過兩個場景介紹了幾個基礎的擴充套件 API，光是這些東西就已經足以做很多強大的功能了，而且還不只有這些，它甚至還可以操作[書籤](https://developer.chrome.com/extensions/bookmarks)、[Tabs](https://developer.chrome.com/extensions/tabs) 等，就算沒有要發布到 [Chrome web store](https://chrome.google.com/webstore)，用自己寫的程式解決日常使用 Chrome 瀏覽時遇到的問題也是很有趣的，接下來就讓各位讀者們自己去探索囉！

同時筆者會基於這篇『單字蒐集』的擴充套件進行加強，開設工作坊給大家一起學習體驗，有興趣的朋友請關注五倍粉絲團：[https://www.facebook.com/5xruby](https://www.facebook.com/5xruby)

> 本文同步發表在筆者的部落格：[https://pastleo.me/post/20200731-chromext-apis-word-cards](https://pastleo.me/post/20200731-chromext-apis-word-cards)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 JavaScript 觀念和原理嗎？
>
> 我們有開設 📒 [JavaScript / jQuery 前端開發入門實戰](https://5xruby.tw/courses/javascript) 課程唷 ❤️️
>


post-PTT新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

PTT 新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

(Photo by <a href="https://www.facebook.com/yuapala" rel="nofollow noopener noreferrer" target="_blank">Apa yu</a>)

## 前言
隨著網路技術的發展，前端應用已經是網頁開發不可或缺的一塊，隨手打開一個網站，隨處都可以看到互動元素，從大至首頁炫炮華麗的 JavaScript 特效，小到輸入資料出現的驗證訊息，甚至是早些年代最愛用的跑馬燈(<strike>不要問我什麼是跑馬燈</strike>)，或是近幾年熱門的 <a href="https://en.wikipedia.org/wiki/Single-page_application" rel="nofollow noopener noreferrer" target="_blank">Single-page application</a>，都屬於前端應用的一環，也因為如此，瀏覽器跟編輯器一樣，已經是網站開發人員，最常用也是最熟悉的...

### 等等，你真的熟悉瀏覽器了嗎？

如果你是一個網站開發者，相信你可能已經聽過或用過 <a href="https://developers.google.com/web/tools/chrome-devtools?hl=zh-tw" rel="nofollow noopener noreferrer" target="_blank">Chrome DevTools</a> 這套內建在 Chrome 裡面的開發輔助工具，中文叫 「Chrome 開發者工具」(下圖紅框所示)

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/chrome-devtools](//images.ctfassets.net/8er52l3j5u76/3Sgn6cB9jGRVwILWnD27ML/e3b495046d2ecaa4422c3a68339b4a2b/chrome_devtools.png)

> 要啟動開發者工具，可以在網頁上按右鍵點擊，選擇 “檢查”，或是使用快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)

這套工具可以快速方便的從面板上，直接調整 `CSS` 的樣式或是 `HTML` 的結構，讓你很多時候不用修改原始碼，就可以先看修改後的效果

但除了調整 `CSS` 和 `HTML` 的功能以外，裡面還有一些可以加速你開發的小技巧，利用這些小技巧，可以增加開發的效率，減少解決問題的時間，而接下來的這篇文章，我將會用情境題的方式，來模擬出大家可能在開發網站時，會遇到的問題，並且解說如何使用 `Chrome DevTools` 來解決這些問題。

## 情境1: 好想要網頁上那個顏色阿，可是色碼好難找...

開發網站時，應該很常遇到我想要參考<strike>複製</strike>這個顏色，或是套用別人寫好的 framework 時，想要更改某個顏色，但色碼太多顏色太接近不知道怎麼找，這時候你可能會想，那我是不是可以去安裝類似像 `Photoshop`  顏色選取外掛？再不然就去翻原始碼呀

### 修但幾勒！

其實在 `Chrome Devtools` 已經內建 `color picker` 的功能，只要按照下面的步驟，就可以快速知道，在這個頁面上所有顏色的色碼是多少

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/color-picker](//images.ctfassets.net/8er52l3j5u76/4WY6HBPGLebUmDtHekFD1i/cf9b2ae0869d11c55646b556ae35a93b/color_picker.gif)

> 在右側的 `Styles` 樣式面板裡面，將滑鼠移到右下角點擊選單，出現選取器，將選取器移動到網頁上任何想要參考的顏色，並且點擊選取

## 情境2: 想要看某支 JavaScript/CSS 檔案，但都被壓縮(minify)過了耶

因為前端漸漸受到重視，網站開始包含許多 `CSS` 和 `JavaScript` 檔案，間接也影響到網站讀取的速度，如何在讀取速度與互動效果之間取得平衡，也是網站開發人員需要注意的課題，好在現在有許多方便的打包工具，可以將所有的 `CSS` 和 `JavaScript` 做壓縮打包，但這時候如果你去看每個網站的原始碼就會發現，這些檔案怎麼已經不是平常我們所熟悉的格式？

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/js-minify](//images.ctfassets.net/8er52l3j5u76/2Zsq1aUOoBjSFpfpR5vedM/227cf13c67a1fc6fda7778bacdff0448/js_minify.png)

最明顯的改變，就是去除掉了所有的註解、空白、換行，但如果因為某些原因，你想要閱讀裡面的程式碼，是不是就得要先下載下來，再去找網路上找工具做還原呢？

### 修但幾勒！

千萬不要繞那麼大一圈，只要像下面步驟一樣，運用 `Chrome Devtools` 內建的排版功能，就可以輕鬆展開閱讀

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/js-format](//images.ctfassets.net/8er52l3j5u76/M5uuegXiaYifLSNr8MK8a/bf36ef7dc46d9bd8a6067ab73f0a8be8/js_format.gif)

> 點擊 Sources 面板左下角的 `{}`，就會自動幫你排版完成，同樣的原理，`CSS` 檔案也是可以哦！

#### 冷知識: 更換變數

在看其他人的原始碼可能會發現，為什麼有些人的 `JavaScript` 的變數命名都用 `a`、`b`、`c` 這種看不出意義的名稱？我記得書本上不是都寫，變數命名要讓人容易理解嗎？

```javascript
function i(a, b, c) {
            b in a ? Object.defineProperty(a, b, {
                value: c,
                enumerable: !0,
                configurable: !0,
                writable: !0
            }) : a[b] = c;
            return a
        };
```

那是因為有一些軟體在壓縮 `JavaScript` 的過程中，會將一些不太重要的變數做替換，盡可能的縮短命名長度，畢竟字數多寡會直接影響檔案 loading 的速度，另一方面也可以達到混淆的效果，增加一點安全上的保護

## 情境3: 一直切來切去的，:hover 效果好難調整

如果有寫過 `:hover` 效果的人，應該知道在網頁的世界裡面，連結可以有很多種狀態，常見的像是 `:hover` 或是 `:active`， 善用這些狀態，會讓使用者清楚知道那些東西是可以點擊，那些東西曾經點擊過，但是對於要寫出這樣效果的人來說，為了要測試這些狀態，是不是只能不停的切換視窗點來點去呢？

### 修但幾勒！

同樣的，在 `Chrome Devtools` 打開 `Elements` 面板，點選你要的 `<a>` 元素，如下圖所示，就可以快速切換元素狀態

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/toggle-element](//images.ctfassets.net/8er52l3j5u76/2vLdtnyTqLkXZbfo7niHbQ/2a9a16d3422302f4589ae67b871cfdac/toggle_element_state.gif)

> 在面板右上角有一個 `:hov`，打開後就可以看到許多的元素狀態，點擊就可以做切換，更方便的是，在下方的 `Style` 樣式欄裡面，可以直接對現在的狀態，立即更改 `CSS` 樣式

## 情境4: 我想要知道延遲的效果，網路速度可以慢一點嗎？

相信大家對於 <a href="https://en.wikipedia.org/wiki/Ajax_(programming)" rel="nofollow noopener noreferrer" target="_blank" > Ajax </a> 並不陌生，在撰寫 `Ajax` 時，為了讓使用者知道現在正在等待資料當中，常會運用一些簡單的 `CSS` 效果，但往往因為可能開發環境的網路速度太快，才按一下資料就更新完成，根本看不到自己寫好的等待動畫，難道要為了看這個效果，在後端故意延遲傳送？<strike>或是同時下載電影來佔用頻寬</strike>

### 修但幾勒！

你可能不知道 `Chrome Devtools` 竟然連網路速度都可以模擬，按照下圖所示，就可以模擬出各種傳輸速度，更厲害的是，還可以自訂 `上傳/下載` 速率，想要有多慢就可以有多慢<strike>可惜不能想要有多快就有多快</strike>

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/slow-loading](//images.ctfassets.net/8er52l3j5u76/ifQvMd8WCtGr3BR2iYSX8/4be14ca4965ba473319c47736ca24b0e/slow_loading.gif)

> 點擊 `Network` 面板，點選 `Online` 的下拉選單，選取或是自訂網路速度，再按一次重新整理就可以感受到網路明顯變慢

## 情境5: 老闆要我做 RWD，但是尺寸那麼多怎麼測試？

5G網路的來臨，用手機來瀏覽網站已經是家常便飯的事情，更不用說還有各種大小的平板螢幕，為了讓每個尺寸都有最佳的瀏覽體驗，現今大多數的前端架構裡面都會包含 <a href="https://en.wikipedia.org/wiki/Responsive_web_design" rel="nofollow noopener noreferrer" target="_blank" > Responsive web design(簡稱RWD) </a>，但身為開發者的你，要如何測試多種尺寸大小的螢幕？嗯？不是用滑鼠拉一下視窗就好了嗎？

### 修但幾勒！

雖然拉視窗也是可以看出效果，但是你知道你目前所拉的視窗大小到底有多大嗎？更不用說現在螢幕尺寸的規格這麼多，這樣的測試方式非常沒有效率，還好 `Chrome Devtools` 一樣幫我們解決了這個問題

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/rwd](//images.ctfassets.net/8er52l3j5u76/49tKTnvIzxePILAz1pqVu8/bb6771a4af6cbe985fb03e85512a061e/rwd.gif)

> 在面板左上角有一個「手機和平板的小圖示」點下去後，在上方的 `Responsive` 選單裡可以挑選想要的尺寸大小，除了選單上面的螢幕規格以外，也可以按照自己的需求自訂

#### 小提示: 把兩個技巧組合在一起運用吧！

用這種調整尺寸的方式，再加上剛剛所說的降低網路速度，就可以模擬出手機用戶的網路速度來瀏覽你的網站，有些商業平台對於這種延遲體驗非常在乎，不希望使用者在一片空白的頁面等待太久，至少可以先出現網站的基本架構，圖片什麼的慢一點載入沒關係，但這並不是一定的標準，實際情況還是要看業主需求

## 情境6: 我不想清掉整個瀏覽器的 cookie，只想清除自己開發的網站，該怎麼辦？

這是曾經發生在自己身上的故事，在開發網站的過程中，製作會員系統時，忘記加上登出按鈕，結果臨時想登出卻無法登出，只好趕快把登出功能加上，但遇到這種情況時，其實也有另一種做法，就是把 `cookie` 清掉，但所謂的清掉 `cookie`，並不是要你清掉整個瀏覽器的 `cookie`，這樣做得後果會導致所有網站的登入紀錄都被清除，<strike>想到要一個一個重新登入就眼神死</strike> ，但一般來說，清掉 `coolie` 都要從瀏覽器的設定選單裡面找到...

### 修但幾勒！

雖然說可以去 `設定` 裡面清除某一個網站底下的 cookie，但使用起來並不是那麼方便，應該沒有人會想要一直開啟又關閉設定，好在 `Chrome Devtools` 一樣也提供方便的清除功能

![post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/clear-cookie](//images.ctfassets.net/8er52l3j5u76/l0BWl3sjOrgaUpX7P0wcQ/c77b2ebabb34cfb2c190910734c73946/clear_cookie.gif)

> 點選 `Application` 面板，在左側 `Storage` 底下有一個 `Cookies` (一個小餅乾的圖示)，點擊你要刪除的網站(如果是開發伺服器的話通常都是 `127.0.0.1` 或是 `localhost` 諸如此類)，就會在面板中間顯示你在這個網站所儲存的 `cookie`，按下清除即可

#### 溫馨小提示

一般來說並不會在 cookie 裡面存放使用者的敏感資訊，如果你發現了，可以寫信提醒網站開發人員<strike>或是快逃阿</strike>

## 結語: 工具只是輔助，如何靈活運用才是學問

以上所提到的六個小技巧，其實只是整個 Chrome Devtools 的冰山一角，在整個 Chrome Devtools 還包含了許多主題和功能，並不是一篇教學就可以敘述完全，裡面還有許多內容有待讀者去做探索，以我的習慣會不定時的打開面板摸索新功能，時常就會有，**"阿！原來 Chrome Devtools 有這個功能阿"** 的體悟，對於開發者來說，這些工具也只是個輔助，但學會如何靈活運用這些工具，往往會決定在開發的這條道路上，會不會更有效率

希望大家會喜歡這篇文章，也歡迎大家在下面分享，其他可以加快開發速度的小技巧

## 參考資料
<a href="https://en.wikipedia.org/wiki/Responsive_web_design" rel="nofollow noopener noreferrer" target="_blank" >Chrome DevTools - 20+ Tips and Tricks</a>

<a href="https://developers.google.com/web/tools/chrome-devtools?hl=zh-tw" rel="nofollow noopener noreferrer" target="_blank" >Chrome 開發者工具</a>

post-開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站/Cover

開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站

(Photo by <a href="https://labs.clio.com" rel="nofollow noopener noreferrer" target="_blank">Clio Labs</a> on <a href="https://labs.clio.com/removing-string-literals-in-sql-with-arel-776d01594c1c" rel="nofollow noopener noreferrer" target="_blank">Medium</a>)

本篇文章主要是在說明如何在 Rails 中 使用 `Arel` 來做資料查詢, 以及解釋為何要使用 Arel 來操作的原因

使用的開發環境設置如下:

- Rails: `6.0.3`
- Ruby: `2.7.1`

## Arel sql

<a href="https://github.com/rails/arel" rel="nofollow noopener noreferrer" target="_blank">Arel</a> (A Relational Algebra) 是 Ruby 的一種 SQL 抽象語法樹（Abstract Syntax Tree-like, AST）管理器, 允許開發者可以在 Rails 中寫複雜的 SQL 查詢語法.

## 為何使用 Arel sql

為了節省不必要的資料撈取, 我們可能會在 Rails 中使用 `pluck` 的方式, 來選取需要的欄位資料.

```ruby
Task.all.pluck([:id, :title])
```

但在執行時, 會在 console 中看到了以下的警示訊息. 雖然資料正常的撈取回來, 並且不影響程式執行.

```shell
DEPRECATION WARNING: Dangerous query method (method whose arguments are used as raw SQL) called with non-attribute
argument(s):  [:id, :title]. Non-attribute arguments will be disallowed in Rails 6.1.
This method should not be called with user-provided values, such as request parameters or model attributes.
Known-safe values can be passed by wrapping them in Arel.sql(). (called from irb_binding at (irb):35)
```

為何會出現這個訊息呢? 原來是 <a href="https://github.com/rails/rails/pull/27947/files" rel="nofollow noopener noreferrer" target="_blank">Rails</a> 已經在版本 5.2 時, 就將部分的 `raw sql` 的查詢方式列為有潛在風險.

會在開發者使用時提醒開發者, 這樣的方式是存在著潛在的 `SQL Injection` 的風險, 並且建議使用 `Arel sql` 的方式來進行資料檢索.

另外, 提示訊息中也有補充說明到, 在 Rails 6.1 版本時, 這樣的操作方式可能就會無法執行.

> 什麼樣的 ActiveRecord 操作方法會造成的 `SQL Injection`,  詳情可以參閱 <a href="https://rails-sqli.org/" rel="nofollow noopener noreferrer" target="_blank">Rails SQL Injection Examples</a>

## 使用 Arel sql 檢索資料

在 Rails 中, 可以使用兩種方式來做資料查詢.

第一種是直接透過 `Arel.sql` 的方式來指定所需要的欄位

```ruby
Task.all.pluck(Arel.sql('id, title'))

```

第二種是使用 `arel_table` 的方式來查詢資料.

```ruby
table = Task.arel_table
Task.all.pluck(table[:id], table[:title])
```

若要在 Model 中來使用的話, 可以參考以下的方式, 在 scope 中直接使用 `arel_table` 來操作查詢.

```ruby
class Task < ApplicationRecord
  scope :get_id_title, -> { pluck(arel_table[:id], arel_table[:title]) }
end
```

### Arel 其他操作方式

舉例, 如果要找尋任務開始日期為 `2020-07-14` 之後的搜尋條件, 可能會使用以下的操作方式.

```ruby
Task.where("start_date >= ?", Date.parse('2020-07-14'))

# or

Task.where(start_date: Date.parse('2020-07-14')..Float::INFINITY)
```

而 Arel 提供許多方式, 可以方便地來進行資料檢索.

這邊就可以改用 `arel_table` 來進行欄位條件設定.

```ruby
table = Task.arel_table
Task.where(table[:start_date].gteq(Date.parse('2020-07-14')))
```

如果要看更多 Arel 提供的檢索方式, 可以參考 <a href="https://qiita.com/akicho8/items/c3bfd39213d6e9843e4f" rel="nofollow noopener noreferrer" target="_blank">arel_table 的檢索條件</a>.

### 使用 Arel 轉換 SQL 複雜的搜尋

這邊用一個簡單的情境來做說明如何使用 `arel_table` 來做複雜搜尋

情境: 使用者有很多任務, 且任務可以標記很多標籤, 而 Model 關聯設定如下.

```ruby
class User < ApplicationRecord
  has_many :tasks
end

class Task < ApplicationRecord
  belongs_to :user
  has_many :taggings
  has_many :tags, through: :taggings
end

class Tagging < ApplicationRecord
  belongs_to :tag
  belongs_to :task
end

class Tag < ApplicationRecord
  has_many :taggings
  has_many :tasks, through: :taggings
end

```

假設管理者想知道所有使用者的任務, 從任務開始日 `2020-07-14` 的所有任務中, 總共使用了多次標籤.

這邊就會考慮先用 ras sql 來確認資料結構.

```sql
SELECT
  USERS.*,
  TOTAL_TAGGINGS.TAGGINGS_COUNT
FROM
  "USERS"
INNER JOIN (
  SELECT
	  "TASKS"."USER_ID",
	  COUNT("TAGGINGS"."TAG_ID") AS TAGGINGS_COUNT
  FROM "TASKS"
  INNER JOIN "TAGGINGS"
  ON "TASKS"."ID" = "TAGGINGS"."TASK_ID"
  AND "TASKS"."START_DATE" >= '2020-07-14'
  GROUP BY "TASKS"."USER_ID"
) TOTAL_TAGGINGS
ON "USERS"."ID" = TOTAL_TAGGINGS."USER_ID"
ORDER BY TOTAL_TAGGINGS.TAGGINGS_COUNT DESC
```

接著再開始使用 `arel_table` 轉換上述的 `raw sql` 語法.

轉換的流程這邊會以由內而外的方式, 將整段 SQL 語法作轉換處理.

從內部的 JOIN 語法，可以看到，Task 與 Tagging 除了 JOIN 之外, 還有設定日期條件以及 GROUP BY 的方式.

```ruby
INNER JOIN (
  SELECT
	  "TASKS"."USER_ID",
	  COUNT("TAGGINGS"."TAG_ID") AS TAGGINGS_COUNT
  FROM "TASKS"
  INNER JOIN "TAGGINGS"
  ON "TASKS"."ID" = "TAGGINGS"."TASK_ID"
  AND "TASKS"."START_DATE" >= '2020-07-14'
  GROUP BY "TASKS"."USER_ID"
) TOTAL_TAGGINGS
```

因此, 這邊只需要用到 Task 與 Tagging 的 Model, 透過相對應的語法來做轉換.

而 `.project` 代表的是撈取得欄位, `.as` 則代表命名一個名稱, 後續就改使用這個名稱做應用

```ruby
  def total_taggings
    @total_taggings ||= begin
      tasks = Task.arel_table
      taggings = Tagging.arel_table
      tasks.join(taggings).on(tasks[:id].eq(taggings[:task_id])
                              .and(tasks[:start_date].gteq(Date.parse(start_date))))
            .project(tasks[:user_id], taggings[:tag_id].count.as('taggings_count'))
            .group(tasks[:user_id])
            .as('total_taggings')
    end
  end

```

接著再透過上面已經處理好的對應結構與 User 來做 JOIN.

這邊可以看到, 在 join 這段程式碼有使用到 `join_sources` 這個語法. 這是因為目前整段語句都是 Arel Table 的結構,

而最後要與 ActiveRecord 搭配使用, 就必須使用 `join_sources` 將整個結構做轉換.

```ruby
  def join_clause
    @join_clause ||= begin
      users = User.arel_table
      users.join(total_taggings).on(users[:id].eq(total_taggings[:user_id])).join_sources
    end
  end

```

接著將所有轉換的語法搭配 User 串接使用. 整個完整的轉換內容如下.

```ruby
# frozen_string_literal: true
class UserTaggings < Struct.new(:start_date)
  def fetch
    User.joins(join_clause)
      .select('users.*, total_taggings.taggings_count')
      .order('total_taggings.taggings_count DESC')
  end

  private

  def join_clause
    @join_clause ||= begin
      users = User.arel_table
      users.join(total_taggings).on(users[:id].eq(total_taggings[:user_id])).join_sources
    end
  end

  def total_taggings
    @total_taggings ||= begin
      tasks = Task.arel_table
      taggings = Tagging.arel_table
      tasks.join(taggings).on(tasks[:id].eq(taggings[:task_id])
                              .and(tasks[:start_date].gteq(Date.parse(start_date))))
            .project(tasks[:user_id], taggings[:tag_id].count.as('taggings_count'))
            .group(tasks[:user_id])
            .as('total_taggings')
    end
  end
end

```

要怎麼使用 `UserTaggings` 呢? 這邊可以先在 `Rails console` 中, 使用下列方式來做資料查詢.

```ruby
UserTaggings.new('2020-07-14').fetch
```

確認沒問題之後, 後續再應用在程式碼之中吧!

## 總結

運用 `arel_table` 將複雜的 SQL 拆解成程式碼, 主要目的是為了降低與 `raw sql` 的耦合, 且可以配合單元測試進行驗證.

未來在因需求調整時, 也可以方便擴充使用. 而不在只是字串(String) 到處串來串去.

當然也是有缺點, 就是查詢語法相當複雜的時候, 要使用 Arel 的話會非常費時. 且可能程式碼的複雜度會大大提升.

以下列出使用 Arel sql 的優缺點比較, 提供給大家做參考.

優點

- 使用 Ruby 語法, 而不是 String
- 可重複使用 Arel 的表達式
- 容易撰寫測試程式進行驗證

缺點

- 比較難閱讀
- 冗余的程式碼
- 出錯時不容易 debugging

此篇文章同步發佈在我的[技術部落格](https://lancerabbit.github.io/2020/07/19/use-arel-sql-in-rails/)

## 參考資料

1. <a href="https://www.gapintelligence.com/blog/how-to-build-complex-queries-using-arel/" rel="nofollow noopener noreferrer" target="_blank">How to build complex queries using Arel - gap intelligence</a>

2. <a href="http://danshultz.github.io/talks/mastering_activerecord_arel/#/" rel="nofollow noopener noreferrer" target="_blank">Mastering ActiveRecord and Arel</a>

3. <a href="https://rails-sqli.org/" rel="nofollow noopener noreferrer" target="_blank">Rails SQL Injection Examples</a>

4. <a href="https://qiita.com/akicho8/items/c3bfd39213d6e9843e4f" rel="nofollow noopener noreferrer" target="_blank">arel_table 的檢索條件</a>

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


五倍紅寶石・專業程式教育機構

ASTRO Camp

線上課程

短期課程

技術文章

五倍消息

技術文章

讓人心動的 6 個 React Design Systems

網站開發新手必知 - 什麼是 HTML / CSS / JavaScript ？

你今天 Promise 了嗎？

網頁設計師的六個實用小工具分享

2021 行銷人與開發者都要懂的 SEO Core Web Vital

PTT 新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

開發不難，會 Debug 就好！如何靈活運用 Chrome DevTools 來開發網站

如何在 Rails 中使用 Arel SQL

訂閱文章

電話 | (02) 2331-5247

信箱 | [email protected]

地址 | 10046 台北市中正區衡陽路 7 號 5 樓

專業課程

ASTRO Camp

線上課程

短期課程

關於我們

關於五倍紅寶石

聯絡我們

媒體報導

加入我們

部落格

技術文章

五倍消息

幫助與政策

常見問題

隱私權政策

服務條款