May. 2023 ​

1 st ​

Web API ​

• MutationObserver

  追蹤 DOM 的變化，無論是子節點的變動或內容、屬性的變動，並且獲得相關的資訊，以便作出後續的行動。

  js

  const observer = new MutationObserver(callback)

  1
  

  指定「被觀察的對象」

  js

  observer.observe(target, options)

  1
  

  • target：受到觀察的 DOM 節點。
  • options：初始化設定物件，用來指定 DOM 節點的哪些項目需要被觀察等相關設定。
    
    ⋯ Reference

2 nd ​

元件庫 ​

• HeadlessUI

  完全未樣式化、完全可存取的 UI 元件，旨在與 Tailwind CSS 完美整合。

• Zag

  由有限狀態機所支援、不依賴於特定框架的 UI 元件。

• inkline

  UI 元件庫，為構建高品質、可存取和可自定義的 Vue3 設計系統提供了開發者友好的基礎。
  旨在使用一致和表達性的 API 提供優秀的使用者界面（UI）、使用者體驗（UX）和開發者體驗（DX）。

工具 ​

• Dreamsands

  圖片轉程式碼平台，可以從任何圖片或截圖中生成程式碼，並在自己的專案中做使用。

3 rd ​

CSS ​

• @layer
  

  依照 layer 宣告的順序來決定樣式的優先順序，後宣告的即使權重較小也會覆寫。

  使用方式

  css

  @layer layer_name {
    /* ... */  
  }

  1
  2
  3
  

  css

  @import 'example.css' layer(example);

  1
  

  @layer 也可以是巢狀結構。

  css

  @layer layer_container {
    @layer layer_A {
      /* ... */
    }
  
    @layer layer_B {
      /* ... */
    }
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

  注意

  1. 在沒有 !important 的情況下，non-layered style 比 layered style 優先。
     （就算寫在 layered style 之前也一樣）
  2. 在皆有 !important 的情況下，layered style 比 non-layered style 優先。
  3. 即使沒有宣告所有 Layer 的順序，沒被宣告的 Layer 依然存在，且順序如同 style 中的順序往後排在宣告過的 layer 後面。

  ⋯ Reference

• @container

  可以根據父容器的大小來設定元素的樣式。
  要使用 container query，需要在父容器上聲明一個 containment context，以便瀏覽器知道苦可能會查詢此容器的尺寸。
  
  為此，可以使用 container-type 屬性：

  1. size：創建一個查詢容器，支援對 inline 和 block 的尺寸進行查詢。
  2. inline-size：創建一個查詢容器，支援對 inline 的尺寸進行查詢。
  3. normal：創建一個查詢容器，但只提供樣式查詢，不支援任何尺寸的查詢。
     
     

  另外，也可以使用 container-name 屬性為 containment context 命名。
  該名稱可以在 @container 查詢中使用，以便針對特定容器進行定位。

  縮寫版本

  css

  .class-name {
    container: container-name / container-type;  
  }

  1
  2
  3
  

  ⋯ Reference

4 th ​

套件 ​

• feTS

  使用 TypeScript 和 OpenAPI，以 end-to-end 的型別安全方式構建和使用 REST API 的新方法。
  

  feTS Client
  具有完全型別安全性的 HTTP 客戶端，使用 OpenAPI 規範。
  可以自動從檔案中推斷型別，並提供一組具有型別安全性的 API，以與自己的 API 進行互動。

  feTS Server
  創建具有完全型別安全性的 REST API 函式庫。
  若使用者是 JavaScript 環境，強烈建議使用 feTS Client 做配合。

工具 ​

• Swagger UI

  在沒有實現任何邏輯的情況下，對 API 的資源進行可視化和互動。
  根據 OpenAPI 規範自動生成，視覺化檔案使後端實現和客戶端使用都變得更輕鬆。

• HD Gradients

  使用工具調整以產生漸變的 CSS 程式碼。

7 th ​

Vue ​

• Vue RFCs

  Request For Comments
  RFCs 流程的目的是提供一致且受控的途徑，讓新功能進入框架。
  許多更動（包括錯誤修復和文件改進）皆可以透過正常的 GitHub pull request workflow 來實作和審查。
  然而，有些改變是重大的，這些改變需要經過設計過程，並在 Vue 核心團隊和社群中產生共識。

  RFC 過程

  1. Pending：當 RFC 作為討論主題提交時。
     我們使用 Discussions 而不是 Pull Requests，因為前者提供更好的討論程序。
  2. Active：當 RFC 被確認並正在實作時，該功能可能會以實驗性的方式發佈。
  3. Landed：當 RFC 的建議更改在發佈中作為穩定版本時。
  4. Rejected：當 RFC 被正式拒絕或取消時。

VSCode Extension ​

• vscode-inline-html

  ES6 Template Strings 中對 HTML / CSS 的 Syntax Highlight、Emmet、IntelliSense 支援。
  在 JavaScript 或 TypeScript 檔案中使用 /*html*/、html、/*css*/、css、/*style*/、style 以及反引號 `，可以在 Template 中獲得完整的編輯器支援。

工具 ​

• Emmet

  用於提升 HTML 和 CSS 語言編寫效率的 Web 開發工具包。
  可以輸入類似於 CSS 選擇器的表示式（縮寫），然後將其轉換為 HTML 片段。

8 th ​

Vue ​

• SFC

  Vue Single-File Components
  也被稱為 *.vue 檔案，是一種特殊的檔案格式。
  可以將 Vue 組件的 <template>、<script> 和 <style> 封裝在一個單獨的檔案中。

套件 ​

• vite-plugin-vue-nested-sfc

  可以在 SFC 中嵌套 SFC。

• ftld

  針對 TypeScript 的小型函式庫，專注於提供一組 functional primitives 以協助建構堅固且具彈性的應用程式。
  使用 ftld 提供的函式和工具可以更有效且易維護的方式實現 functional programming 的概念和技術。

9 th ​

Web API ​

• View Transitions API

  ⚠️ 實驗性功能（部分瀏覽器仍開發中）
  提供了一種機制可以輕鬆地在不同 DOM 狀態之間創建動畫轉換，同時一步更新 DOM 內容。

工具 ​

• Vue DevTools

  目的在於增強 Vue 的開發者體驗的 Vite 套件。

• AFFiNE.PRO

  將規劃、分類和創建結合在一起。
  隱私至上、開源、可客製化且隨時可用 —— Notion & Miro 的免費替代品。

套件 ​

• vite-plugin-vue-component-preview

  此 Vite 套件支援在 SFC 中使用 <preview lang="md"> 自定義區塊來 preview 單個 Vue 組件。

10 th ​

Mixed Content ​

一個含有 HTTP 明文內容的 HTTPS 頁面。
這種頁面只有部份加密，沒有加密的內容易於遭到竊聽和中間人攻擊，令網頁不安全。

被動 / 顯示型混合內容（mixed passive / display content）
內容包在 HTTPS 頁面，但無法改變其他部分的 HTTP 內容。
威脅程度較低（可能有錯誤內容、或者用戶的 cookie 遭到竊取）。

主動型混合內容（mixed active content）
有權訪問文件 HTTPS 頁面、物件模型的內容。
這種混合內容可以改變 HTTPS 頁面行為、並暗自竊取用戶的敏感資訊。
因此，主動型混合內容除了內容除了上文所述的風險外，還容易受到其他攻擊媒介的威脅。 混合內容涉及的風險，取決於用戶訪問的網站類型、還有該網站資訊的敏感程度。
網頁可能有公諸於世的公開資料、也可能有僅限授權者閱覽的私人資料。
即使網頁是公開的，也沒有用戶的敏感資料，混合內容依舊給攻擊者把用戶重定向到其他 HTTP 頁面、並從這些網站竊取 HTTP cookie 的機會。

⋯ Reference

SDK（軟體開發套件） ​

一組針對特定平台的開發人員所設計的工具集合。
在建立特定平台、作業系統或程式設計語言上可執行的程式碼時，通常需要偵錯工具、編譯器和程式庫等元件。
SDK 的優點在於它將開發和執行軟體所需的所有元件都整合在一個地方，並且提供文件、教學和指南等資源，以及可以加速應用程式開發速度的 API 和架構。

⋯ Reference

11 st ​

JS ​

• use strict

  目的是為了讓編寫具穩定性的 JavaScript 更容易，在不穩定的語法或妨礙最佳化的語意都會跳出警告，讓開發者避開這些寫法。
  

  1. 整支檔案使用：加在 JS 檔案最前面。
     
  2. 指定函式使用：加在函式的第一行（只有這個函式套用了嚴格模式）。
     

  ⋯ Reference

CSS ​

• CSS Sprites

  一種網站圖片應用的方法，將很多小張的圖片合併到一張圖裡。
  透過這樣的方式就可以只送一次 HTTP request，並僅載入一張圖，降低網頁載入的時間。
  可以藉由 Sass / Scss 和 Compass 自動產生 CSS Sprites。

12 nd ​

套件 ​

• google-webfonts-helper

  自行架設 Google 字型。
  獲取 eot、ttf、svg、woff 和 woff2 檔案 + CSS 程式碼片段。

• TresJS

  使用 Vue 組件進行聲明式的 ThreeJS。
  建立在 Vue 自定義渲染器的基礎上，並由 Vite 提供動力。

無障礙網站 ​

WAI-ARIA 是一個由 W3C 編撰的規格，定義一套額外的 HTML 屬性能用於元素上提供額外的語意及改善可及性，當元素缺乏這些條件時可適用。

定義三個特點：

• Roles
  

  定義元素是什麼或是做什麼事。
  

  大部分重複了 HTML5 結構化元素的語意值：
  （e.g. role="navigation" = <nav> 或 role="complementary" = <aside>）
  但也有其他描述不同的頁面結構者：
  （e.g. role="banner"、role="search"、role="tabgroup"、role="tab"）

• Properties
  

  這些用以定義元素的屬性，可用來賦予元素額外的意義或語意。
  

  範例：

  1. aria-required="true"：指定一個表單輸入必須填寫才有效。
     
  2. aria-labelledby="label"：允許在元素上放置一個 ID，然後在頁面的其他地方引用它作為標籤。
     這在頁面上含有多個元素，而不適合使用 <label for="input"> 的情況下非常有用。
     
  3. aria-labelledby：指定一個鍵盤快速鍵描述，將其用作圖片的 alt 文字的替代方案。 透過指定頁面上現有的資訊作為圖片的 alt 文字，而不是重複放在 alt 屬性內部，可以提升可達性。

• States
  

  定義目前元素狀態的特殊屬性，例如 aria-disabled="true" 是對螢幕報讀器指定表單輸入目前是停用的狀態。
  

  狀態不同於屬性，在於屬性在應用程序整個生命週期中不會改變，而狀態通常會透過 JavaScript 改變。

有關 WAI-ARIA 屬性的重點是不會影響網頁的任何內容，除了透過瀏覽器無障礙 API 揭露資訊之外（螢幕報讀器即從中獲得資訊）。
儘管 WAI-ARIA 屬性對 CSS 選擇元素很有用，但不會影響網頁結構、DOM 等。

⋯ Reference

15 th ​

JS 效能優化 ​

• 並行 await

  ❌ 使用 for 迴圈迭代 await

  javascript

  for (let promise of promiseList) {
    await promise
  }

  1
  2
  3
  

  ✅ 使用 Promise.all

  javascript

  await Promise.all(promiseList)

  1
  

• 避免使用 new URL()

  new URL() 是很耗時的！

  ❌ 使用 new URL()

  javascript

  new URL(url)

  1
  

  ✅ 操作字串

  javascript

  // 透過操作字串以得到新的 URL

  1
  

• 將正則提出來

  如果一個正則會被多次使用，最好提出來成為一個變數，因為這樣只會構建一次。

  ❌ 直接使用正則

  javascript

  /\d/i.test('')

  1
  

  ✅ 將正則另外提出來

  javascript

  const reg = /\d/i
  reg.test('')

  1
  2
  

• 使用 startsWith / slice 代替正則 replace

  正規表達式很強大、很方便，但大部分情況下效能不如 String.prototype 上的 API 好。

  ❌ 使用 replace 搭配正則

  javascript

  str.replace(/^node:/, '')

  1
  

  ✅ 使用 startsWith 搭配 slice

  javascript

  const prefix = 'node:'
  str.startsWith(prefix) ? str.slice(prefix.length) : str

  1
  2
  

• 使用 includes 代替正則匹配

  1. 構建正規表達式比構建字串更為耗時。
  2. RegExp.prototype.test() 比 String.prototype.includes() 更耗時。

  ❌ 使用正則匹配

  javascript

  /abc/.test(str)

  1
  

  ✅ 使用 includes

  javascript

  str.includes('abc')

  1
  

• 使用 === 代替 endsWith

  ❌ 使用 endsWith

  javascript

  str.endsWith('/')

  1
  

  ✅ 使用 ===

  javascript

  str[str.length - 1] === '/'

  1
  

⋯ Reference

工具 ​

• PhantomJS

  基於 WebKit 的伺服器端 JavaScript API，無需瀏覽器的支援即可實現對 Web 的支援，且原生支援各種 Web 標準，如：DOM 處理、JavaScript、CSS 選擇器、JSON、Canvas 和 SVG。
  主要是透過 JavaScript 和 CoffeeScript 控制 WebKit 的 CSS 選擇器、SVG 和 HTTP 網路等各個模組。

  使用場景

  1. 無需瀏覽器的 Web 測試：支援很多測試框架。
  2. 頁面自動化操作：使用標準的 DOM API 或一些 JavaScript 框架（e.g. jQuery）訪問和操作 Web 頁面。
  3. 螢幕捕獲：以程式設計方式抓起 CSS、SVG 和 Canvas 等頁面內容，即可實現網路爬蟲應用。構建服務端 Web 圖形應用（e.g. 截圖服務）。
  4. 網路監控：自動進行網路效能監控、跟蹤頁面載入情況以及將相關監控的資訊以標準的 HAR 格式匯出。

⋯ Reference

VSCode Extension ​

• Nuxtr

  可以創建各種項目（e.g. Components、Pages、Layouts、Stores），從 VSCode 的指令面板執行 Nuxt.js 指令。
  從狀態列切換 Nuxt Devtools，管理 Nuxt.js 專案相依性，以一鍵的方式尋找、安裝和新增模組到 nuxt.config.ts 檔案中等等。

18 th ​

套件 ​

• tailwind-merge

  旨在沒有 style 衝突的情況下合併 TailwindCSS classes。

• vue-promised

  Composable Promises & Promises as components

• BootstrapVue

  為 Vue 提供了 Bootstrap v4 實現，擁有廣泛且自動化的 WAI-ARIA 可訪問性標記。

工具 ​

• Pulumi

  主要用於創建、部署和管理雲端基礎設施。
  可以根據個人喜好的語言撰寫程式碼，Pulumi 將自動根據 infrastructure-as-code 的方式，在 AWS、Azure、Google Cloud Platform、Kubernetes 等 120 多個供應商上進行資源的規劃和管理。

  Infrastructure as Code（IaC）

  基礎架構即程式碼，是 DevOps 裡重要的元素之一。
  透過自動化工具以寫程式的方式建置基礎架構，不同於人工去一步步下指令，透過寫程式的方式用各種處理程式碼的方式去對待基礎架構。

  ⋯ Reference

• Postman

  模擬 HTTP Request 的工具，其中包含常見的 HTTP 的請求方式，例如： GET、POST、PUT、DELETE，而它的主要功能就是能夠快速的測試 API 是否能夠正常的請求資料，並得到正確的請求結果。

  ⋯ Reference

19 th ​

問題 ​

• 從輸入網址到網頁出現

  1. 域名解析（DNS Lookup）
  瀏覽器需要向 DNS 找到網域 (domain) 所對應的 IP。
  

  在實際向 DNS 發出請求之前，瀏覽器會依序檢查 cache（瀏覽器 cache、OS cache、Router cache、ISP cache）。
  如果這些 cache 中沒有該網域，ISP 會發起 DNS lookup：ISP 的 DNS server 會問其他 name server，name server 又會問其他 name server，直到找到需要的 domain，這種搜尋方式是一種遞迴搜尋 (recursive search)，而發起搜尋的 ISP DNS server 稱為 DNS recursor。

  DNS（Domain Name System）

  用來儲存網域對應到的 IP 位址的服務。

  2. 建立 TCP 連接
  得知伺服器 IP 後，瀏覽器會和對方建立連線以傳送資料，使用的是 TCP protocol。
  建立連接的過程稱為 TCP/IP three-way handshake：

  1. Client 向 server 發送 SYN packet
  2. Server 如果有 open port 可以接受新連線，則回傳 SYN/ACK packet
  3. Client 收到 SYN/ACK packet 後，向 server 發送 ACK packet
     

  TCP 連線建立完成就可以開始傳輸資料。

  3. 瀏覽器發起 HTTP(S) 請求
  瀏覽器會向 server 發出一個 HTTP request，包含 Methods (GET)、URL、以及其他資訊例如 User-Agent、Accept、Connection: Keep-Alive、Host、Cookie 等 headers。

  4. 伺服器處理請求並回傳
  伺服器端經過處理之後，將資料以 HTTP response 回應，其中包含 HTTP status code 以及其他訊息，例如 Content-Encoding、Cache-Control（瀏覽器如何快取頁面）、Cookie 等 headers。

  HTTP 狀態碼意義

  • 1XX：某種消息 (informational message)
  • 2XX：成功
  • 3XX：轉導
  • 4XX：Client-Side 出錯
  • 5XX：Server-Side 出錯

  5. 瀏覽器渲染畫面
  伺服器的回應是一個 HTML 文件。瀏覽器會解析 HTML 的內容並繪製到螢幕上。

測試工具 ​

• Mocha

  用於 node.js 和瀏覽器的 javascript 測試框架。

• UQuit

  易於使用的 JavaScript 單元測試框架。

SCSS ​

• @mixin

  將經常被重複使用的程式碼獨立撰寫，以 @mixin 語法包裝起來，需要時再透過 @include 引用，即可根據不同參數來設定相似的樣式。

  css

  @mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  
  // 套用
  .box { 
    @include transform(rotate(30deg));
  }
  .avatar { 
    @include transform(rotate(90deg));
  }

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  

22 nd ​

Vue ​

• Vue2 生命週期

  1. beforeCreate（創建前）
  完成實例初始化，初始化非響應式變量。

  2. created（創建後）
  實例創建完成。
  完成資料（data、props、computed）的初始化導入依賴項。
  可訪問 data、computed、watch、methods 上的方法和資料。

  3. beforeMount
  能找到對應的 template。

  4. mounted
  完成掛載 DOM 和渲染，可對 DOM 進行操作。
  可在發起後端請求，拿取資料。

  5. beforeUpdate
  資料更新之前。
  可在更新前訪問現有的 DOM。

  6. updated
  完成虛擬 DOM 的重新渲染，組件 DOM 已完成更新。

  WARNING

  不要在此函數中操作數據，會陷入死循環。

  7. beforeDestroy
  在執行 app.$destroy() 之前。
  可用於銷毀定時器，解綁全局時間銷毀插件對象。

  8. destroyed
  在實例銷毀之後調用。
  調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀，無法在其中進行任何操作。

  ⋯ Reference

• Vue3 生命週期

  1. beforeCreate
  Vue 初始化時期，在這邊的動作會在 Vue 導入期就被執行。

  2. created
  Vue 已被建立，在這個階段的動作可以拿到 Vue Data, Function, Watch, Computed...等，但這時 HTML 還沒準備好，所以拿不到元素內容。

  3. beforeMount
  已經載入原始 HTML 至虛擬 DOM，但內容尚未透過 Vue 進行渲染。

  4. mounted
  已經透過 Vue 進行渲染 HTML，並且取代原本的元素內容。

  5. beforeUpdate
  當 Vue 中的 Data 被改變或是強制讓 Vue Update（vm.$forceUpdate），準備重新渲染頁面之前。

  6. updated
  當頁面上的更新已經完成渲染之後。

  7. beforeUnmount
  在 Vue 被摧毀前。

  8. unmounted
  將所有綁定、事件監聽、Watch 與渲染至目標的 HTML DOM 等等移除。

XSS（Cross-Site Scripting） ​

網站被攻擊者植入程式碼。

• XSS Game

• 阻止攻擊者在網站植入程式碼

  只要有輸入的地方，都應該要做驗證。在輸出不被信任的資料時應該要做跳脫（escape）。
  例如：在渲染時將 < 轉換成 &lt（e.g. "、'、>、&）。
  
  其他要小心的部分還有像是 <a href="javascript:alert(1)">my website</a>，可以藉由檢查開頭必須為 https:// 之類的方式。
  雖然目前大部分前端框架都處理過了，但仍會有漏洞要注意。

• 阻止惡意程式碼被執行

  藉由 CSP 設定規則，與瀏覽器說明哪些來源的資源可以被載入，哪些禁止。

  CSP（Content-Security-Policy）

  提供給瀏覽器，會寫在從伺服端回應給使用者瀏覽器端網頁的 HTTP Header 內。
  主要用來限制網頁中對外部的請求來源（e.g. CSS、JS、WebFont、img、video、iframe），還有部份是禁止 HTML 行內的 JS 或 CSS 運作，以及限制 <form> 的指向網址。

  • Content-Security-Policy：設定相關政策，當瀏覽器發現頁面上的內容行為不符合政策時，就會阻擋下來。
  • Content-Security-Policy-Report-Only：當發現不符合政策的頁面內容時，會先發送到後端的一個端點記錄下來。 在所有被發現存在問題的頁面都已經修正後，再改成設置為 Content-Security-Policy。

  ⋯ Reference

• 降低 XSS 攻擊之損害

  可以藉由設定 HttpOnly，確保前端無法直接使用 document.cookie 取得 cookie。
  若攻擊者已拿到身份登入帳號，也可以透過檢查地點，告知原使用者有可疑的登入。
  若攻擊者已能夠任意執行程式碼，則也可以打 API，因此通常會設置手機驗證等方式，確保惡意操作。

⋯ Reference

工具 ​

• GA（Google Analytics）

  網站分析工具。
  只要在網站上安裝 GA 的追蹤代碼（tracking code），即可監測和蒐集使用者在網站上的各種行為資料（e.g. 流量來源、停留或導向於哪些頁面、耗費多少時間）。
  將基本的行為進行資料解讀、分析後，可以從中整理成獨特的商業洞見，包含優化網站設計、規劃行銷活動，甚至是擬定品牌策略時最好的參考依據。
  數位世界擁有現實世界沒有的可追蹤性，所以這些洞見是在數位之外的行銷領域中很難獲得的。

  ⋯ Reference

JS ​

• Bookmarklet

  js

  javascript:console.log('Hello')

  1
  

  javascript: + 一段程式碼。（告訴瀏覽器接下來的部分請幫我執行 JS）
  通常用於 <a> 的 href 中。

24 th ​

套件 ​

• AutoAnimate

  使用一行程式碼增加動態效果。
  零配置、輕鬆套用的動畫工具，可以為網頁應用程式添加平滑的過渡效果。

工具 ​

• PageSpyWeb

  用於網頁專案的遠端 debug 工具。
  基於對原生網頁 API 的封裝，當呼叫原生方法時，它會過濾和轉換參數，並將其轉換為特定格式的訊息，供偵錯程式客戶端使用。
  偵錯程式在接收到訊息資料後，以一種互動式的開發者工具樣式的方式呈現用於輕鬆檢視。

• Redux

  全域的狀態管理工具，能管理整個網站需要的狀態。
  

  1. 狀態是 Immutable Object
  2. 所有的 State Change 都必須經過 Actions
  3. Reducers 每次呼叫都是使用當前的 State：(state, action) => state

25 th ​

Server Engine ​

• Nitro

  創建可在任何地方運行的 Web Server。
  用於構建超快速 Web Server 的開源 TypeScript 框架。
  （Nuxt 的開源引擎，並對所有人開放）

  1. 快速的開發體驗：
  開箱即用的特性，無需任何配置，就可以啟動具有 HMR 的開發伺服器，寫完程式碼存檔後，就能讓伺服器載入新的程式邏輯。
  2. 基於檔案系統的路由：
  只需要專注在建立伺服器的目錄與頁面，就能擁有自動載入與路由的效果。
  3. 可移植且便攜：
  基本上 Nuxt3 使用的依賴套件都在 package.json 檔案的 devDependencies 中，建構正式環境的網站時，Nitro 自動拆分的程式碼與打包出來的 .output 目錄不再需要安裝依賴套件，意味著不再有 node_modules，因此部署時更輕便好攜。
  4. 混合模式：
  透過混合模式（Hybrid mode）可以將一部分頁面預渲染產生出靜態頁面，部分頁面是動態的在伺服器或客戶端渲染，讓每個路由頁面有不同的靜態或動態甚至擁有快取規則，這將讓 Nuxt3 的通用渲染（Universal Rendering）方式更進一步成混合渲染（Hybrid Rendering）也能結合無伺服器（Serverless）來配置混合模式。

  ⋯ Reference

套件 ​

• Standard.js

  JavaScript Standard Style
  不用設定檔，不用管理 .eslintrc、.jshintrc 或 .jscsrc 等檔案，在專案中最簡單的方法去強迫統一樣式。
  詳細規則

測試 ​

• Smoke Testing（冒煙測試）

  一種預測試，用來在 code 正式編譯、交付測試之前，消除其表面的錯誤，以減少後期測試的負擔。
  Smoke Testing 的執行是在 code review 之後、daily build 之前完成的工作。
  
  Smoke Test 在軟體上的執行有分以下階段：
  1. 形成集成測試版本以前
  目的是驗證各個單元能夠成功執行，並保證測試版本能夠順利集成。
  2. 形成集成測試版本以後
  在程式碼 check in 到 daily build 之前執行 Smoke Testing，以保證新的或者更改過的代碼不破壞集成版本的完成性和穩定性。
  3. 後期預測試 Bug 的修正
  後期 daily build 相對穩定時，針對每個 Bug 所做的 Bug Fix 都要先在乾淨的 build 中進行 Smoke Testing，測試通過的 Bug Fix 才能 check in 到新的 daily build 中。
  
  ⋯ Reference

26 th ​

Lint 檢查工具 ​

• ESLint

  JavaScript 程式碼靜態檢查工具。
  核心是透過對程式碼解析得到的 AST（Abstract Syntax Tree，抽象語法樹）進行模式匹配，分析程式碼達到檢查程式碼品質和風格問題的能力。
  提供的格式化功能有限，在程式碼風格上面做的不是很好，只能格式化 JS，不支援 CSS、HTML 等語言。
  
  通常以在根目錄建立 .eslintrc.js 的方式對 ESLint 進行配置。
  

  • files：表示配置適用的檔案範圍的 glob 模式陣列。在沒有指定的情況下，配置物件適用於所有與其他配置物件匹配的檔案。
  • ignores：表示配置物件不應適用的檔案的 glob 模式陣列。如果沒有指定，配置物件將適用於所有由 files 匹配的檔案。
  • languageOptions：用來配置如何檢查 JavaScript 程式碼的特定選項的物件。
  • linterOptions：與提示過程有關的設定物件。
  • processor：指定某個檔案類型所使用的處理器，該屬性需要包括形如 "pluginName/processorName" 的處理器名稱，以引用其他套件的處理器，或是包括使用 preprocess() 和 postprocess() 函式的物件。
  • plugins：外掛名稱與對應的外掛物件的物件。如果指定了 files，則只適用於與之匹配的檔案。
  • rules：配置規則的物件。如果指定了 files 或 ignores，則規則只適用於與之匹配的檔案。
  • settings：指定應該在其所有規則中共享的資訊。

• JSLint

  用於檢查 JavaScript 程式碼品質的工具。

• commitlint

  檢查 commit 訊息。
  助於團隊遵循 commit 約定，透過支援 npm 安裝的配置，使得共享 commit 約定變得輕鬆。

• git-commit-plugin

  輔助產生 git commit。

工具 ​

• Prettier

  是一種程式碼格式化工具，可以格式化程式碼，但不具備檢查功能。
  支援包括 JavaScript、TypeScript、各種 CSS、Vue 和 Markdown 等前端絕大部分的語言和檔案格式。
  一般會將 ESLint 和 Prettier 結合起來使用，用 ESLint 進行程式碼校驗，用 Prettier 統一程式碼風格。

  eslint-plugin-prettier
  關閉所有不必要或可能會與 Prettier 衝突的規則。

28 th ​

套件 ​

• Vue Vine

  Vue 的另一撰寫風格。
  支援在單一檔案中編寫多個 Vue 組件。

圖片格式 ​

• next-gen

  1. JPEG2000
     優點就是沒有 JPEG 壓縮中的馬賽克失真效果，主要為模糊失真。
     但在低壓縮比情形下（比如壓縮比小於10：1），JPEG圖像質量還是會比 JPEG 2000 要好，因此 JPEG 2000 適用在壓縮比較高的情形下，優勢才會明顯。
  2. JPEG XR
     使用與 JPEG 算法相當的計算量與內存消耗可以得到明顯的與 JPEG 2000 相當的圖像品質。在有損壓縮的情況下可以得到明顯比 JPEG 好的品質並且文件大小減小一半。
  3. Web P
     由 Google 推出。
     跟 JPEG 採用同樣的壓縮技術，根據 Google 較早的測試，WebP 的無失真壓縮比網路上找到的 PNG 檔少了 45％ 的檔案大小。

  以上這些圖檔格式的壓縮效率雖然優於 PNG 或 JPEG，能夠減少數據用量，較快完成下載。
  但由於 next-gen 格式的圖片尚未這麼普遍，有些瀏覽器甚至未能支援，也可能因為高壓縮而導致圖片大大失真、色偏，因此這個只是改善方式之一，也能先從將網站內的 PNG 先轉為 JPEG 就好，除非圖片真的需要透明背景。

  
  

  ⋯ Reference

29 th ​

Link Tag ​

• prefetch：提早取得不限於當前頁面會用到的資源。
• preload：提早取得當前頁面會用到的資源。（e.g. 字體）
• preconnect：事先建立與指定 Domain 的連線，以備之後的資源載入。
• dns-preconnect：與 preconnect 類似，差別在於不是直接建立連線，只有做 DNS 域名解析。
• prerender：提前下載對應的資源，並進行解析。

⋯ Reference

工具 ​

• UglifyJS

  JavaScript 壓縮器（最小化工具）。

• defu

  遞迴地分配默認屬性。

  javascript

  const options = defu(object, ...defaults)

  1
  

  範例：

  javascript

  defu({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } })
  // { a: { b: 2, c: 3 } }

  1
  2
  

31 st ​

函式庫 ​

• ECharts

  提供互動式圖表與數據可視化的函式庫。

資料視覺化 ​

• 點：展現資料之間的關聯

  1. 散布圖
  呈現兩組資料之間的關聯或分布。
  e.g. 消費者購買力與購買頻率之間的關聯、各產品的市占率與成長率之間的分布。

  2. 泡泡圖
  呈現三組資料之間的關聯或分布。
  e.g. 一段時間內，客戶最近一次購買的時間、頻率以及金額之間的關聯與分布情況。

• 線：展現資料隨時間變化的趨勢

  1. 折線圖
  呈現單組或多組資料的變化趨勢。
  e.g. 過去十年公司營收年成長率的變化、不同產品銷售額各自的成長趨勢。

  2. 斜線圖
  呈現二個時間點的資料變化，又稱為斜率圖（slopegraphs）。
  e.g. 過去兩年員工在各項指標上的滿意度變化、公司各項產品營收比例在上、下半年的變化。

• 面：展現資料之間的規模的比較

  1. 長條圖
  呈現單組或多組資料的大小比較。
  e.g. 台灣各縣市的降雨量比較。
  
  長條圖也可以用來呈現資料隨時間變化的趨勢，但座標軸必須從零開始，不像折線圖可以透過改變座標軸來放大或壓縮變化的幅度。

  2. 圓餅圖
  展現多組資料在比例大小的比較。
  e.g. 不同手機品牌在市占率的比較、產品成本中各項目的大小比較。

  3. 瀑布圖
  呈現資料之間的增減變化過程。
  e.g. 銷售收入與稅後淨利之間，各項成本的增減變化。

  4. 雷達圖
  呈現單組或多組資料在不同維度的比較。
  e.g. 不同員工在各項能力上的相對表現比較。

⋯ Reference

工具 ​

• DataVizProject

  呈現所有相關資料視覺化的網站，方便找到合適的視覺化方式並獲得靈感。

• The Data Visualisation Catalogue

  建立一個（非基於程式碼的）不同的資訊視覺化類型的函式庫。