五倍直播間

Blogs - Sidebar

隨著網頁技術發展，現在的網站可以做到許多事，除了購物外、還能開發各式的工具，例如你可以透過瀏覽器收發信件 (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 - 網頁設計師六個實用小工具分享

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


大家是否有在使用瀏覽器『擴充套件』呢？筆者已經使用 [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 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

(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` 的所有任務中, 總共使用了多次標籤.

這邊就會考慮先用 raw 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) 課程唷 ❤️️
>


post-如何在 Rails 中使用 Arel SQL/cover

如何在 Rails 中使用 Arel SQL

## 前言

在軟體工作中，經常要對文字做處理，例如資料的搜尋、擷取並重組文字、驗證使用者輸入等等，遇到這類與字串有關的問題，依情況使用正規表達式可以免去很多處理上的麻煩，使程式碼更簡單好懂。
這篇文章將帶你用 15 分鐘的時間，透過 [MDN文檔](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions) 與幾個常見的例子，帶你初步認識並使用這門技術，我們話不多說直接開始吧！

## 什麼是正規表達式 ?

正規表達式 (Regular Expression)，是一種用來描述字串 `符合某個語法規則` 的模型 (pattern)，可以用來做文字的搜尋、比對、萃取、替代、轉換等等，在許多的程式語言中都支援正規表達式的使用，以下範例將以 Javascript 為例。

## 撰寫正規表達式

撰寫正規表達式時，使用兩個斜線 `/ /` 或是  `new RegExp()` 來建立一個 RegExp 物件。

```javascript
// 1. 使用 literal，這種方式會在 script 載入時就被編譯，效能較好。
const regex = /some text/

// 2. 使用 new 建構一個 RegExp 物件，適合用在需要動態產生 pattern 的場合。
const regex = new RegExp('some text')

// 加上 flag 設定，使比對的能力更強大。i：不區分大小寫，g：比對字串所有位置
const regex = /some text/i
const regex = new RegExp('some text', 'g')
```

## 使用正規表達式

建立了正規表達式後，就可以使用 `RegExp 物件`中 `test` 以及 `exec` 來對字串做處理囉。

```javascript
const regex = /hello world/i

// 使用 test 比對字串是否符合 pattern，回傳 boolean
regex.test('Hello World !!') // true

// 使用 exec 取得比對的詳細資訊，比對失敗時回傳 null
regex.exec('Hello World !!') // ["Hello World", index: 0, input: "Hello World !!", groups: undefined]
regex.exec('Hello Regex !!') // null
```

在 `String 物件` 中的 `search`、`match`、`replace`、`split` 等方法中，也有支援正規表達式寫法。

```javascript
const paragraph = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'

// 使用 search 搜尋字串是否在段落中，有找到回傳字串的起始位置，沒找到回傳 -1
paragraph.search('tExT') // -1
paragraph.search(/tExT/i) // 28

// 使用 match 找出第一個比對成功的詳細資訊，加上 g flag 則會列出所有比對成功的字串
paragraph.match(/ing/) // ["ing", index: 45, ...]
paragraph.match(/ing/g) // ["ing", "ing"]
```

## 特殊字元
在正規表達式中，某些特定的字元或符號屬於保留字，直接使用可能與預期的效果不同。

```javascript
const  str ='Rails is a web framework written in Ruby'

// ^ 表示 pattern 必須在字串的開頭
str.match(/^Rails/) // ["Rails", index: 0, ...]
str.match(/^Ruby/) // null

// $ 表示 pattern 必須在字串的結尾
str.match(/Ruby$/) // ["Ruby", index: 36, ...]
str.match(/Rails$/) // null

// | 表示 或(or)， | 前後的字串都可以比對
const regex = /color|colour/
regex.exec('color') // ["color", index: 0, ...]
regex.exec('colour') // ["colour", index: 0, ...]

// 當要比對這些特殊符號時，使用反斜線'\'來跳脫特殊字元
const regex = /\$100/
regex.test('$100') // true
```

## 集合 `[]`

在前面的例子中，`pattern` 都有指定明確的文字，如果想要比對的是英文、數字或是幾種特定的組合，就可以使用集合 `[ ]` 來將它們一網打盡，集合代表著 `這一個字元` 可以是 `[ ]` 內的其中一種。

```javascript
// 只要是英文大寫字母，就比對成功
const regex = /[ABCDEFGHIJKLMNOPQRSTUVWXYZ]/
'K'.match(regex) // ["K", index: 0, ...]
'δ'.match(regex) // null

// 可以使用 '-' 來簡化集合，'A-Z' 表示英文字母 A ~ Z 都符合
const regex = /[A-Z]/

// 若要比對的是英文或數字，可以這樣表示
const regex = /[A-Za-z0-9]/
```

一些常用的集合有對應的特殊字元。

```javascript
const regex = /./   // 比對換行符號外的任意一個字元
const regex = /\d/  // 比對一個數字，相等於 /[0-9]/
const regex = /\w/  // 比對一個英文、數字或底線，相等於 /[A-Za-z0-9_]/
const regex = /\s/  // 比對一個的空格 (ex: space, tab, 換行, ...)
```

使用排除法 `[^ ]` 來比對這個集合 `以外` 的字元

```javascript
const regex = /[^\w]/
regex.test('a') // false
regex.test('!') // true
```

## 量詞 `{}`

在集合的內容中我們提到，使用集合一次也只能比對一個文字，此時，若我們想比對連續的相同規則時，可以使用量詞 `{ }` 來修飾。

```javascript
// 不使用量詞時，要比對 5 個連續的數字就必須寫 5 次
const regex = /\d\d\d\d\d/
regex.test('12345') // true

// 使用 {5} 表示連續出現 5 次
const regex = /\d{5}/
regex.exec('abcde12345') // ["12345", index: 5, ...]
regex.exec('a1b2c3d4e5') // null

// 使用 {2,} 表示連續出現 2 次以上
const regex = /\w\+{2,}/
regex.exec('a+') // null
regex.exec('a++') // ["a++", index: 0, ...]

// 使用 {2, 5} 表示連續出現 2 ~ 5 次
const regex = /^\w{2,5}!/
regex.exec('Hi!') // ["Hi!", index: 0, ...]
regex.exec('Helloooo!') // null
```

量詞也有特殊字元可以替代。

```javascript
// 使用 ? 表示出現 0 或 1 次，等同於 {0,1}
const regex = /\w?/
// 使用 + 表示出現 1 次或以上，等同於 {1,}
const regex = /\w+/
// 使用 * 表示出現 0 次或以上，等同於 {0,}
const regex = /\w*/
```

使用上，`+`、`?`、`*`、`{2, 5}` 都是屬於 `Greedy 量詞`，意思是會以連續出現次數 `越多` 為優先，相反的，在量詞後面加上一個問號 `+?`、`??`、`*?`、`{2, 5}?` 就變成 `Lazy 量詞`，意思是以連續出現次數 `越少` 為優先。

```javascript
// '+' 出現的次數越多優先
const regex = /a\+{2,}/
regex.exec('a+++++') // ["a+++++", index: 0, ...]
// '+' 出現的次數越少優先
const regex = /a\+{2,}?/
regex.exec('a+++++') // ["a++", index: 0, ...]
```

## 練習1
看到這裡，已經可以使用正規表達式來做一些處理了，讓我們來練習一下。

### 1 使用正規表達式來檢驗日期格式是否正確。

```javascript
// 假設正確的日期格式為 '2020/07/15'
// 分析一下是由 "4個數字/2個數字/2個數字" 所組成，
// 把這個規則寫成正規表達式
const regex = /\d{4}\/\d{2}\/\d{2}/

// 若要支援'2020/07/15'、'2020-07-15'兩種寫法，可以使用集合來處理
const regex = /\d{4}[/\-]\d{2}[/\-]\d{2}/
regex.test('2020/07/15') // true
regex.test('2020-07-15') // true
```

### 2 使用正規表達式解析 excel 複製來的資料。

```javascript
// 假設使用者在 excel 選取了 'sn0001'、'sn0002'、'sn0003' 三個欄位
// 分析一下我們要的每一筆資料是由 "連續的英文或數字" 所組成
// 把這個規則寫成正規表達式
const regex = /[A-Za-z0-9]+/

// 在複製文字的時候會發現，除了流水號之外，分隔、換行符號也一起被複製了進來
// 用 replace 去 trim 掉不需要的字元在處理上比較麻煩
// 改使用 match 一次取出所有資料，並轉成陣列供後續使用
const copiedData = `
					sn001,
				    sn002,
				    sn003
				  `
copiedData.match(/[A-Za-z0-9]+/g) // ["sn001", "sn002", "sn003"]
```

### 3 使用正規表達式找出被 `* *` 包起來的片段。

```javascript
const paragraph= "Lorem Ipsum is simply dummy text of the *printing* and *typesetting* industry."
// 分析一下我們要的資訊是由 '*' + 任意內容 + '*' 所組成
// 把這個規則寫成正規表達式
const regex = /\*.*\*/g
paragraph.match(regex) // ["*printing* and *typesetting*"]

// 執行之後會發現結果不如預期
// 原因在於中間的任意內容我們是使用 Greedy量詞 '*' 去比對，也就是任意字元且越多越好
// 改使用 Lazy 量詞就能獲得想要的結果
const regex = /\*.*?\*/g
paragraph.match(regex) // ["*printing*", "*typesetting*"]
```

這裡小結一下，在上面的內容中，我們已經學會使用正規表達式來做簡單的搜尋與比對了，如果我想要把日期 `2020/07/15` 轉換成 `2020年07月15日` ，或是要將數字 `123456789` 加上三位一撇 `123,456,789` 該怎麼做呢？

下面我們將繼續介紹正規表達式中的 `群組` 以及 `斷言` 功能。

## 群組 (Capturing Group)

使用正規表達式時，除了比對文字外，也可以透過使用 `Group` 來捕獲特定的文字，被捕獲的文字會出現在比對的結果中，提供後續的程式使用。

```javascript
// 在使用 exec、match 等方法時，回傳的結果會有以下這些資訊
// [比對成功的字串, 捕獲的字串1, 捕獲的字串2, ..., 字串的起始位置, 命名的捕獲群組]
const regex = /user: (\w+)/
regex.exec('user: Alan') // ["user: Alan", "Alan", index: 0, ...]

// 每一個 Group 會 '由左至右，由外而內' 的被賦予編號，並被放在執行結果相應的 index 中
// 假設 regex = /((A)(B))/ ，那麼群組就分別是 1:(AB), 2:(A), 3:(B)
const regex = /fullName: ((\w+) (\w+))/
regex.exec('fullName: Alan Hsu') // ["fullName: Alan Hsu", "Alan Hsu", "Alan", "Hsu", ...]
```

如果想要比對的是重複出現的內容，可以使用反向參考 `backreference` 來代替已被捕獲的文字。

```javascript
// 假設想找出猜數字中 a 和 b 出現次數相同的回合
// 作法1 → 我們可以先把 a 與 b 的次數 Group 起來，再做判斷
const regex = /(\d+)a(\d+)b/
const result = regex.exec('1a1b') // ["1a1b", "1", "1", ...]
if (result[1] === result[2]) ...

// 作法2 → 使用 backreference，讓 \1、\2、... 替換成被捕獲的數字
const regex = /(\d+)a\1b/
regex.test('1a1b') // true
regex.test('1a2b') // false
```

捕獲的文字在使用上需要透過計算群組的編號來取得，反應在程式碼上並不是那麼語意化，這時我們可以改使用 `命名群組 (?<name> )` 來替群組命名， 反向參考的用法改為 `\k<name>` 。

```javascript
// 假設要抓出使用者的 firstName 與 lastName
const regex = /fullName: (?<firstName>\w+) (?<lastName>\w+)/
regex.exec('fullName: Alan Hsu') // [...,  groups: {firstName: "Alan", lastName: "Hsu"}]
```

群組也能搭配 `|` 或是 `量詞` 一起使用。

```javascript
// 使用群組簡化 | 的寫法
const regex = /good apple|bad apple/
const regex = /(good|bad) apple/

// 使用量詞簡化重複的規則
const regex = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
const regex = /(\d{1,3}\.){3}\d{1,3}/
regex.exec('192.168.0.1') // ["192.168.0.1", "0.", index: 0, ...]
```

如果捕獲的文字不是那麼重要，則可以改使用 `non-capturing group (?: )` 來撰寫。

```javascript
// 使用 non-capturing group，(?: )內的文字就不會被捕獲，也就無法使用 backreference
const regex = /(?:\d{1,3}\.){3}\d{1,3}/
regex.exec('192.168.0.1') // ["192.168.0.1", index: 0, ...]
```

## 斷言 (Assertions)

最後一個要介紹的主題是斷言 ，根據維基百科的解釋，
> 斷言是一種放在程式中的一階邏輯 ( 例如一個結果為 true 或 false 的判斷式 ) ，當程式執行到斷言的位置時就會執行判斷，若結果為 true 則繼續執行，結果為 false 則中止執行。

在正規表達式中，斷言可以用來指定字串中的某個錨點要符合一些條件，例如前面介紹的特殊字元 `在字串開頭 ^`、`在字串的結尾 $` 就是被歸類在斷言的用法中，常見的斷言還有 `文字邊界 \b` 與 `環顧 Lookaround` 。

```javascript
// 假設要找出 'Java' 而不是 'Javascript'
const str = 'difference between Javascript and Java.'
// 不使用斷言會找到 'Javascript' 的 'Java'
str.match(/Java/) // ["Java", index: 19, ...]
// 改使用文字邊界 \b 來比對，就能找到想要的結果了
str.match(/\bJava\b/) // ["Java", index: 34, ...]

// 文字邊界指的是在比對到 \b 的位置時，前後相鄰的字元必須有一個不是文字
// 使用 replace 把 \b 替換成 '|' 來看看它的效果
const regex = /\b/g
str.replace(regex, '|') // "|difference| |between| |Javascript| |and| |Java|."
```

字串與錨點的描述，建議到 regex101 實際操作一下，配合網站的視覺效果可以更好的理解它，如果想要判斷的是更複雜的條件，可以使用 `環顧 Lookaround` 。

```javascript
// Lookaround 分為兩種 `Lookahead` 以及 `Lookbehind`，各自又有 positive 與 negative 兩種判斷方式
// Positive Lookahead： A(?=B) → A 後方的條件要符合 B
// Negative Lookahead： A(?!B) → A 後方的條件不能符合 B
// Positive Lookbehind： (?<=A)B → B 前方的條件要符合 A
// Negative Lookbehind： (?<!A)B → B 前方的條件不能符合 A

// 假設要取出商品的金額
const str = '數量 2,實付金額 990元'
// 分析一下要擷取的資料 "前方有一個空格 + 金額 + 後方有一個'元'"
// 把規則寫成正規表達式
const regex = /(?<=\s)\d+(?=元)/
str.match(regex) // ["990", index: 10, ...]
```

要注意的是，斷言與群組的語法雖然很像，但是斷言的條件不會出現在比對的結果中，所以在正規表達式中也被稱為 Zero-Length Assertions。

## 練習2
最後我們再來做幾個練習。

### 1 使用正規表達式來轉換日期。

```javascript
// 將日期 '2020/07/15' 轉換為 '2020年07月15日'
const date = '2020/07/15'
// 使用 group 把年、月、日抽取出來
const regex = /(\d{4})\/(\d{2})\/(\d{2})/
// 使用 replace + backreference 轉換字串
// 在 replace 中是使用 $1、$2、... 替代群組捕獲的文字
date.replace(regex,'$1年$2月$3日') // "2020年07月15日"

// 使用命名群組讓程式碼更好讀
// 在 replace 中是使用 $<name> 替代命名群組捕獲的文字
const regex = /(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/
date.replace(regex,'$<year>年$<month>月$<day>日') // "2020年07月15日"
```

### 2 使用正規表達式幫數字加上三位一撇 (separator)。

<strike>其實可以直接用 toLocaleString( )</strike>

```javascript
const number = 123456789 // 123,456,789
// 分析一下條件，從個位數開始數，每三位數加上一個','
// 使用非文字邊界 \B 與 Lookahead 來撰寫條件，判斷右邊每 3 個數字為錨點
const regex = /\B(?=(?:\d{3})+)/g
number.toString().replace(regex, ',') // "1,2,3,4,5,6,789"

// 發現結果不如預期，從數字 5 開始往右數三個數字也符合條件
// 在 Lookahead 裡再加上一個 Negative Lookahead
// 判斷每湊滿 3、6、9、... 個數字之後，右邊不能再有其他數字
const regex = /\B(?=(?:\d{3})+(?!\d))/g
number.toString().replace(regex, ',') // "123,456,789"
```

### 3 使用正規表達式限制使用者只能輸入英文與數字

```javascript
// 分析一下條件，每個字元都只能是英文與數字
// 反過來說就是要 trim 掉不是英文與數字的字元
const value = e.target.value
this.value = value.replace(/[^A-Za-z0-9]/g, '')
```

## 總結

正規表達式這項技術除了在 web 開發上常被使用之外，在爬蟲、數據分析等應用也用得上，本期文章使用十五分鐘的時間帶大家初步認識正規表達式的用法，更多的內容例如比對的優先順序、多重條件的撰寫、正規表達式的效能等主題可以透過 [MDN文檔](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions) 、網路搜尋或是相關的書籍來做進一步的學習，以上就是這次的全部內容，若有錯誤或需要補充的部分還請不吝指出，感謝你的收看 : )

## 參考資料

- [正規表達式- JavaScript | MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions)
- [regex 101](https://regex101.com/)
- [斷言 - Wiki](https://zh.wikipedia.org/wiki/%E6%96%B7%E8%A8%80_(%E7%A8%8B%E5%BC%8F))
- [Number with commas - StackOverflow](https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript)
- [Google](https://www.google.com)

---

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

技術文章