Dec. 2023 ​

3 rd ​

字體 ​

• monaspace

  Monaspace 字型系統是一個等寬字型，提供可變軸字型和靜態版本。
  內包含五個可變軸字型，每個都有獨特的風格，但它們在度量上相容，能夠混搭運用。

套件 ​

• V-Offline

  檢測離線和在線變化的簡單 VueJS 元件。

• nuxt-auth-utils

  Nuxt3 的 Auth Module，僅在啟用伺服器端渲染（SSR）時運作，因為它使用伺服器 API 路由。
  無法在 nuxt generate 模式下使用。

6 th ​

套件 ​

• vue-multiselect

  Vue.js 的通用 select / multselect / tagging 元件。

• vue3-touch-events

  啟用在 Vue.js 3.x 上的任何 HTML DOM 元素上的 tap、swipe、touch、hold、mouse down、mouse up 事件。
  使 Vue.js 互動內容適用於移動設備的最簡單方法，當 v-touch 事件添加到元素時，它以完全聲明式的語法在桌面和移動設備上運作。
  與其他 library 不同，無需在組件中添加任何特殊程式碼即可使其生效，只需全局註冊，將在整個應用程序中啟用新的事件。

元件 ​

• Flexmonster

  Flexmonster Pivot Table & Charts 是一個用於資料可視化和報告的 JavaScript 組件。
  適用於任何技術棧，處理來自任何來源的資料，並可以無縫整合到專案中。

8 th ​

Git 更改 commit ​

• 修改最近一次的 commit 資訊

  修改訊息

  bash

  git commit --amend

  1
  

  會出現修改訊息的介面，訊息會顯示於第一行，直接以編輯器規則修改儲存退出即可。

  修改作者、信箱

  bash

  git commit --amend --author="username <email>"

  1
  

  Example: --author="Minato1123 <slamdunk0522@gmail.com>"

  DANGER

  如果發現不需更改，或是不是這支 Commit： 可以使用 git reflog 查看原本所在的 commit hash 並利用 git reset [commit_hash] 退回原本的 commit。

• 修改過去的 commit 資訊

  bash

  # 更改最新兩條 commit
  git rebase -i HEAD~2
  
  # 更改此 commit 的下一條 commit 至最新的 commit
  git rebase -i [commit_hash]

  1
  2
  3
  4
  5
  

  編輯畫面會出現被選擇到的幾條 commit，再將需要修改的 commit 前面的 pick 改為 edit，並儲存退出。

  修改訊息

  bash

  git commit --amend

  1
  

  會出現修改訊息的介面，訊息會顯示於第一行，直接以編輯器規則修改儲存退出即可。

  修改作者、信箱

  bash

  git commit --amend --author="username <email>" --no-edit

  1
  

  Example: --author="Minato1123 <slamdunk0522@gmail.com>"

  同時修改訊息、作者與信箱

  bash

  git commit --amend --author="username <email>"

  1
  

  Example: --author="Minato1123 <slamdunk0522@gmail.com>"
  會出現修改訊息的介面，訊息會顯示於第一行，直接以編輯器規則修改儲存退出即可。

  WARNING

  修改完這一條 commit 後，執行下方指令以修改下一條 commit。

  bash

  git rebase --continue

  1
  

  TIP

  出現此提示時，表示所有 commit 修改完成。

  bash

  Successfully rebased and updated refs/heads/master.

  1
  

  最後將更改同步於雲端，記得小心會覆蓋掉其他人的程式碼。

  bash

  git push -f origin main

  1
  

⋯ Reference

13 rd ​

TypeScript ​

type A = {
	a: string
	b: string
}

type B = {
	b: string
	c: number
}

• keyof A & keyof B

  一般的交集，取得 A 的 keys 和 B 的 keys 才進行交集。

  typescript

  // A 的 keys
  a, b
  
  // B 的 keys
  b, c
  
  // 取交集
  b

  1
  2
  3
  4
  5
  6
  7
  8
  

• keyof (A & B)

  A 和 B 先進行 & 後才取 keys。

  typescript

  // A 和 B 進行 &，把兩個物件合併在一起
  {
    a: string
    b: string
    c: number
  }
  
  // 取 keys
  a, b, c

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• keyof A | keyof B

  一般的聯集，取得 A 的 keys 和 B 的 keys 才進行聯集。

  typescript

  // A 的 keys
  a, b
  
  // B 的 keys
  b, c
  
  // 取聯集
  a, b, c

  1
  2
  3
  4
  5
  6
  7
  8
  

• keyof (A | B)

  A 和 B 先進行 | 後才取 keys。

  typescript

  // A 和 B 進行，只會拿到共通的屬性
  {
    b: string
  }
  
  // 取 keys
  b

  1
  2
  3
  4
  5
  6
  7
  

14 th ​

套件 ​

• Vue-Ganttastic

  Vue 的 Gantt（甘特）圖組件，簡單、互動且高度可自定義的 Vue.js 甘特圖組件。

• file-icons

  此套件提供了對 vscode-icons 圖示的簡單且快速的程式訪問，可以在自己的專案中使用它們。
  這個套件匯出了兩個函數：getIconForFile 和 getIconForFolder。
  它們使用了一種類似於 vscode-icons 中使用的匹配搜索方式，以找到給定文件或文件夾的最佳匹配圖示。

CSS ​

• max-device-width

  裝置整個顯示區域的寬度，例如：真實裝置螢幕寬度。
  一般適合使用於 mobile 裝置。

• max-width

  目標顯示區域的寬度，例如：瀏覽器寬度。
  一般適合使用於電腦裝置。

⋯ Reference

16 th ​

套件 ​

• web-localstorage-plus

  基於 localStorage 再做一層封裝，以方便使用其功能。

• vue-cropper

  基於 Vue 的圖片剪裁套件。

• fabric.js

  Javascript HTML5 Canvas Library，SVG <-> Canvas parser。

Web API ​

• AbortController

  透過 AbortController.AbortController() 建立一個新的 AbortController 物件，可以在需要時中斷一個或多個 DOM 請求。
  AbortController.abort() 可以用來中斷 fetch request、對任何 response body 的讀取。

  javascript

  const controller = new AbortController()
  const signal = signal = controller.signal
  
  abort_button.addEventListener('click', () => {
    controller.abort() // 中斷 fetch
  })
  
  fetch_button.addEventListener('click', () => {
    try {
      // 把 AbortSignal 作為 options 傳入該 fetch 的 options 物件中
      // 這樣會把中斷訊號 (signal) 與控制器 (controller) 跟 fetch request 關聯起來，才可以透過呼叫 AbortController.abort() 來中斷該請求。
      const response = await fetch(url, { signal })
    } catch(e) {
      // 使用 abort 時，fetch 會被 AbortError 拒絕
    }
  })

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

19 th ​

UI 框架 ​

• Leafer UI

  基於 Leafer 開發的 UI 繪圖框架，可結合 AI 繪圖、生成介面。

  Leafer

  HTML5 Canvas 2D 圖形渲染引擎，定義了圖形渲染引擎的核心功能，提供超強的動力，可以瞬間建立 100 萬個圖形，與具體 UI、業務場景無關， 提供了效能優化和可擴充套件的空間，遵循 Leafer 介面之上開發的渲染器、佈局器、UI 框架之間可以互通有無。

套件 ​

• tailwindcss-magic

  為 TailwindCSS 提供豐富的動畫效果。

21 st ​

套件 ​

• vue-concurrency

  封裝異步操作並管理 Vue 和 Composition API 並發性的 Library。
  ember-concurrency 的移植版本，旨在解決相同範疇的問題。

  ember-concurrency

  Ember 套件，提供了一個強大的 Task primitive：支援取消操作、在該組件未渲染時自動取消⋯⋯等。

元件、工具庫 ​

• Maz-UI

  Vue & Nuxt（v3.x）的獨立組件和工具。

22 nd ​

套件 ​

• nuxt-edgedb

  將 Nuxt 3 與 EdgeDB 整合，以最少的配置為應用程式添加強大的資料庫層。

  tip

  設計為關聯式資料庫的精神繼承者的下一代圖形關聯資料庫。  
  繼承了 SQL 資料庫的優勢：型別安全、性能、可靠性和交易性。但是，與以關聯（表格）方式建模資料不同，EdgeDB 使用包含屬性和指向其他物件的連結的物件類型來表示資料。  
  利用這種物件導向的模型提供了一種超強大的查詢語言，解決了一些 SQL 最大的可用性問題。

  1
  2
  3
  

VSCode Extension ​

• turbo-console-log

  透過選取或 hover 變數配合快捷鍵自動產生有意義的 console.log。

25 th ​

Vuex vs Pinia ​

• Vuex

  1. Module
  透過 Vuex Module，可以基於 domain 功能將您的 store 拆分為多個檔案，使得可以在該特定命名空間中從 module 訪問狀態週期。

  2. HMR
  支援 Hot Reload 功能，利用 webpack 的 hot module 替換 API，可以繼續開發的同時快速重新載入您的 mutations、modules、actions 和 getters。

  3. Devtools 支援
  可以利用 Vue devtools 中的 Vuex tab，方便地訪問和 debug 我們的 mutations，以及查看狀態。

• Pinia

  1. Devtools 支援
  Pinia 對 Vue devtools 提供卓越的支援，讓開發者輕鬆 debug 和監控應用程序的狀態和變更。

  2. HMR
  透過 HMR，開發者可以對其程式碼進行更改，這些更改將立即反映在運行中的應用程序中，改進開發工作流程並減少開發時間。
  沒有 Pinia，全局狀態在 HMR 期間可能會被破壞和重置，但 Pinia 保留了它。

  3. Plugins
  Pinia 儲存可透過低階 API 進行全面擴充。
  使用 plugins，可以執行例如：本地存儲同步、ORM（物件關係映射）、在定義儲存時添加 options 等任務。
  當 Pinia 的默認行為不足夠時，可以使用現有的 plugins 或為自己的需求創建一個。

  4. 完整的 TypeScript 支援或 JS 使用者的 autocompletion
  開發者可以快速編寫程式碼，避免常見的錯誤，提高程式碼品質，減少開發時間。

  5. 伺服器端渲染（SSR）支援
  Pinia 支援 SSR，使開發者能夠在 SSR Vue.js 框架（如：Nuxt）中使用 Pinia。

• 為什麼 Pinia 更好？

  1. 直觀的設計
  透過直觀的 API，建立和組織 store 變得簡單、類似於建立元件。
  這種方法減少了對樣板程式碼的需求，相比於 Vuex 解決方案，學習的概念也更少。

  2. 不再需要 mutations
  不需要考慮創建更新狀態的規則，可以直接更新它們。

  3. 更完善的 TypeScript 支援
  一切都是有型別的，API 的設計方式盡可能地利用了 TS 型別推斷。

  4. Autocompletion
  自動完成功能可使您撰寫更好的程式碼。

  5. 更完善的 Module Structure
  不再需要嵌套結構化模組，Pinia 透過設計提供了一種扁平結構，同時仍然可以實現 store 之間的交叉組合。

  6. Lightweight
  Pinia 僅有 1 KB，非常容易整合到專案中。

⋯ Reference

27 th ​

JavaScript ​

• fn.bind(thisArg[, arg1[, arg2[, ...]]])

  透過 bind()，借用已建立的函式來創造新的函式，但將 this 綁到指定的物件上。

  js

  const name = 'foo'
  function logName(){
    console.log(this.name)
  }
  
  const tmp = {
    name: 'bar'
  }
  const newFunction = logName.bind(tmp)
  
  logName() // foo
  newFunction() // bar

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

• fn.call(thisArg[, arg1[, arg2[, ...]]])

  參數的傳入方法為逐項傳入。

• fn.apply(thisArg, [argsArray])

  參數的傳入方法為陣列型別。

問題 ​

• 使用 defineProperty 向物件添加屬性時，默認是不可列舉的

  js

  const person = { name: 'Lydia' }
  Object.defineProperty(person, 'age', { value: 21 })
  
  console.log(person) // { name: 'Lydia', age: 21 }
  console.log(Object.keys(person)) // ['name']

  1
  2
  3
  4
  5
  

30 th ​

JavaScript ​

• Number.isNaN vs isNaN

  Number.isNaN：真的是 NaN 才會回傳 true。
  isNaN：只要不是 number 就會回傳 true。

  	Number.isNaN()	isNaN()
  NaN	true	true
  'A String'	false	true
  undefined	false	true
  {}	false	true

套件 ​

• Biome

  針對 JavaScript、TypeScript、JSX 和 JSON 的快速 Formatter，其與 Prettier 有 97% 的相容性。
  高效的 JavaScript、TypeScript 和 JSX 的程式碼 linter，能在編寫程式碼的同時進行格式化和檢查錯誤的程式碼。

• bumpp

  互動式 CLI 以更新版號。