Aug. 2023

1 st

資料庫

Turso
基於 libSQL 的邊緣託管（edge-hosted）分散式資料庫，libSQL 是 SQLite 的開源和開放貢獻分支。
目標是在查詢來自世界各地的應用程式時，最大限度地減少查詢延遲。
特別是，它與 CloudFlare、Netlify 和 Vercel 等雲平臺提供的邊緣功能很好地配合，透過將資料地理位置接近訪問它的程式碼，實現良好的效果。
邊緣託管（edge-hosted）
描述資料或服務在分散式網絡的邊緣節點上進行托管和處理的情況。
邊緣節點是指位於地理位置靠近用戶或終端設備的節點，這樣可以減少數據傳輸的延遲和提高處理效率。
SQLite
SQLite 是一個以 C 語言編寫的庫，實現了一個小型、快速、自包含、高可靠性、功能豐富的 SQL 資料庫引擎，是世界上使用最廣泛的資料庫引擎。
它內建於所有行動電話和大多數計算機中，並打包在無數其他日常使用的應用程式中。
SQLite 檔案格式穩定、跨平臺，並且向後相容，開發人員承諾將保持這種方式至 2050 年。

3 rd

工具

sidebase
用於快速構建生產就緒全端應用程式的 Web 應用程式開發工具包。
提供模組化、現代化、完全類型化和最佳實踐方法，以 TypeScript 和 Nuxt 3 為核心，並新增了 Prisma ORM、tRPC、身份驗證、CI、測試等元件。
You don’t need Lodash/Underscore
現代瀏覽器已經提供許多 ECMAScript5（ES5）和 ECMAScript2015（ES6）原生支援。
如果希望選擇依賴較少的外部函式庫，並且確定目標瀏覽器，那可能不需要再選擇 Lodash、Underscore。
radash
強調現代、簡單、型別化的功能函式庫。

4 th

Lint

zhlint
給中文文本內容使用的 linting 工具。

工具

TypeChat
助於從語言模型獲得經過良好型別化的回應，以構建實用的自然語言界面。

6 th

UI 框架

oku-ui
無樣式、可存取的 UI Component Library，用於在 Vue 中構建設計系統及 Web 應用程式。
PrimeVue
開源 Vue UI 框架。

工具

pkg-size
可以透過此網頁查詢 npm package 的真實大小。

7 th

套件

pkg-types
Node.js 的實用工具和 TypeScript 定義，用於處理 package.json 和 tsconfig.json。

應用程式

Obsidian
一款私密的寫作應用程式，將筆記儲存於個人的設備上，即使在離線狀態下也可以同樣能使用。
並且是使用開放的、非專有文件，因此可以長期保存資料。

8 th

工具

brotli
Brotli 壓縮和解壓縮工具，通過 WebAssembly 支援 Node.js 和瀏覽器。
可以在 HTTP Toolkit 的生產環境中在 Node.js 和瀏覽器中使用，並包括了自動構建以及 Node.js 和瀏覽器測試，以確保其可靠性。
為 HTTP Toolkit 的一部分：用於構建、測試和調試 HTTP(S) 的強大工具。
http-toolkit
用於在 Windows、Linux 和 Mac 上進行 HTTP(S) 的偵錯、測試和構建的開源工具。
可以擷取並檢視所有 HTTP(S) 請求，模擬 endpoint 或整個伺服器，以及重寫、重定向或注入錯誤。

10 th

套件

typescript-eslint
使 ESLint 和 Prettier 能夠支援 TypeScript 的工具。
TypeBox
具有 TypeScript 靜態型別解析的 JSON 架構型別產生器。
為 runtime 型別產生器，可以創建推斷為 TypeScript 型別的 Json Schema 物件。

工具

TanStack
針對網頁開發人員的高品質開源軟體。
無界面、類型安全且強大的工具，用於狀態管理、路由、資料可視化、圖表、表格等。

12 nd

個人經驗紀錄

Vue2.6 -> Vue2.7
1. 將 @vue/cli-xxx 相關套件升級至可適用的最新版本
2. 將 Vue 升成 ^2.7.0
3. 移除 vue-template-compiler 若有使用到 @vue/test-utils 則不能刪除。
4. 升級 eslint-plugin-vue 至 v9 以上
5. 如果原本有使用 @vue/composition-api 要注意 Vue2.7 可能無實作部分功能（例如：createApp）
6. 如果有相關報錯，需要：npm install --save-dev ajv@^7
官方建議參考升級指南
Vuex 替換成 Pinia
1. 下載 Pinia
2. 有使用到 Vuex 的 mapState 和 mapGetters 都改成由 pinia import 的 mapState
3. 有使用到 Vuex 的 mapMutations 和 mapActions 都改成由 pinia import 的 mapActions
4. 調整 Vuex 內部檔案及語法（pinia 為扁平化、沒有 mutation 等）
5. 刪除 Vuex

Webpack 替換成 Vite（Vue2.7）

下載 vite、@vitejs/plugin-vue2
將 index.html 移至根目錄
調整 index.html 內容
html
<!DOCTYPE html>
<html>
  <body>
    <noscript>
      
      <strong> <%= ... %> </strong>
    </noscript>
    <div id="app"></div>
    
    
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
process.env 要換成 import.meta.env
調整 package.json 的 scripts
json
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint"
}
1
2
3
4
5
根目錄新增 vite.config.js
如果開發環境的網址是 127.0.0.1，想換成 localhost，可以新增 dns.setDefaultResultOrder('verbatim')。
確認沒問題再移除 vue-cli 相關套件以及 sass-loader

14 th

TypeScript

tsconfig
常見檔名
- tsconfig.json：TypeScript 設定的入口點。
- tsconfig.app.json：通常是給 app（瀏覽器）環境用的 TypeScript 設定。
- tsconfig.config.json：通常是給 config（node）環境用的 TypeScript 設定。
- tsconfig.node.json：通常是給 node 環境用的 TypeScript 設定。
內容
- extends：引入其他配置檔案，繼承配置。default 包含當前目錄和子目錄下所有 TypeScript 文件。
- include：指定編譯需要編譯的文件或目錄。
- references：指定要引入的檔案。

⋯ Reference

16 th

TypeScript

typeof
分為在 TypeScript 以及在 JavaScript 的 typeof。
在 TypeScript 中，typeof 僅為型別運算，而在 JavaScript 則為值運算。
因此無法在判斷或運算式內期望它能判斷 TypeScript 定義的型別。
js
```
// TypeScript
type A = typeof B

// JavaScript
if (typeof A === 'string')
```
1
2
3
4
5

工具

Prisma
針對 Node.js 和 TypeScript 的下一代 ORM。
支援 PostgreSQL、MySQL、MariaDB、SQL Server、SQLite、MongoDB 和 CockroachDB。
ORM（Object Relational Mapping）
ORM 在網站開發結構中是在「資料庫」和「Model 資料容器」兩者之間。
幫助使用者更簡便、安全的去從資料庫讀取資料，透過程式語言（Ruby、Java），去操作資料庫語言（SQL）。
同時也是實作了物件導向的概念，產生的一種工具模式。
⋯ Reference

17 th

套件

Chart.js
使用 <canvas> 標籤，適用於現代 Web 簡單而靈活的 JavaScript 圖表庫。
vue-chartjs
在 Vue 內更簡單地使用 Chart.js，封裝了基本邏輯，但同時也暴露了 Chart.js 物件，以提供最大的彈性。

工具

VOLTA
由 Rust 構建的管理 JavaScript Command-line 工具的方法。
可以快速安裝運行任何 JS 工具，並可以在不同的專案之間切換，不再需要手動切換 Node。

18 th

問題

flex-grow: 1
在使用 flex-grow 時，會自動將 min-width 設為 auto，所以即使希望父組件的寬度或高度只佔滿剩餘的空間，卻還是有可能因為子組件的寬高過長，而突破了父組件的寬高，與期望不符。
解決方式可以直接將父組件的樣式加上 min-width: 0;，蓋過原本的 auto 即可。
⋯ Reference
git cherry-pick
可以將多個 commit 轉移至當前分支上。
sh
```
git cherry-pick <commit_hash_1> <commit_hash_2>
```
1
若需要轉移連續多個 commit，例如：轉移從 1 到 N 的（不包含 1）所有 commit。
sh
```
git cherry-pick <commit_hash_1>..<commit_hash_N>
```
1
注意
需要按照正確的順序放置：commit 1 必須早於 commit N，否則命令將失敗（但不會報錯）。
若需要包含 commit 1，可以寫成：
sh
```
git cherry-pick <commit_hash_1>^..<commit_hash_N>
```
1
⋯ Reference

21 st

框架

NativeScript
能夠直接從 JavaScript 存取 native API，目前提供 iOS 和 Android 的執行，可用於豐富的 Mobile 開發，適用於多種不同的使用情境。
允許使用各種模板來搭建項目，以啟動應用程式開發。

22 nd

微前端

无界 wujie
基於 Web Components + iframe 的微前端框架，成本低、速度快、原生隔離、功能強等優點。
能夠完善的解決適配成本、樣式隔離、執行效能、頁面白屏、子應用通訊、子應用保活、多應用啟用、vite 框架支援、應用共享等。
MicroApp
借鑑了 WebComponent 的思想，通過 CustomElement 結合自定義的 Shadow DOM，將微前端封裝成一個類 WebComponent 元件，從而實現微前端的元件化渲染。
由於自定義 Shadow DOM 的隔離特性，micro-app 不需要像 single-spa 和 qiankun 一樣要求子應用修改渲染邏輯並暴露出方法，也不需要修改 webpack 配置，是接入微前端成本極低的方案。
Shadow DOM
為 WebComponent 中的 DOM 和 CSS 提供了封裝，實際上是在瀏覽器渲染文件的時候會給指定的 DOM 結構插入編寫好的 DOM 元素，但是插入的 Shadow DOM 會與主文件的 DOM 保持分離，也就是說 Shadow DOM 不存在於主 DOM 樹上。
並且 Shadow DOM 封裝出來的 DOM 元素是獨立的，外部的配置不會影響到內部，內部的配置也不會影響外部。
例如：<input>、<video>、<audio>、<textarea>，和 <div> 不同，簡單寫個標籤就能渲染出對應的樣式與功能。
⋯ Reference
乾坤 qiankun
基於 single-spa 架構，包含所有構建微前端系統時所需要的基本能力，例如：樣式隔離、js sandbox、preload 等。
任意 js 框架皆可使用，像使用接入一個 iframe 系統一樣簡單，但實際不是 iframe。

25 th

套件

VueEmail
使用 Vue 構建和發送電子郵件。
目標是提供一切與使用 Vue 建立和發送電子郵件相關的內容，包括組件和渲染工具。
vite-plugin-checker
Vite 插件，提供 TypeScript、ESLint、vue-tsc 等型別檢查並支援 linting。

CSS

vh
1vh（Viewport Height）為 1/100 的視窗高度。
vmin
為當前視窗寬度（vw）和視窗高度（vh）中較小的值。
vmax
為當前視窗寬度（vw）和視窗高度（vh）中較大的值。

WARNING

vh 在 Mobile 上存在著重大問題！
100vh 不總是等同於螢幕的高度，有的時候高度會出現 Scrollbar。

lvh
The large viewport units：lvw、lvh、lvi、lvb、lvmin、lvmax
視窗的大小會假設任何動態擴充套件和縮回的 UA 介面皆為非展開的狀態。
svh
The small viewport units：svw、svh、svi、svb、svmin、svmax
視窗的大小會假設任何動態擴充套件和縮回的 UA 介面皆為展開的狀態。
dvh
The dynamic viewport units：dvw、dvh、dvi、dvb、dvmin、dvmax
當動態工具欄展開時，動態視窗（dynamic viewport）等同於小視窗（small viewport）的大小。
當動態工具欄被縮回時，動態視窗（dynamic viewport）等同於大視窗（large viewport）的大小。

TIP

vi（Viewport Inline）
在水平書寫方向上，這對應於視窗的寬度；而在垂直書寫方向上，這表示視窗的高度。
記住 inline 方向的簡單方法是記住它與文字的方向相同。
vb（Viewport block）
這與 vi 水平書寫方向相反，這將對應於視窗高度；而在垂直文件中，這將表示視窗的寬度。

⋯ Reference

27 th

微前端

single-spa
用於在前端應用中整合多個 JavaScript 微前端。
- 在同一頁面上使用多個框架，無需重新整理頁面（React、AngularJS、Angular、Ember 或其他你正在使用的框架）
- 獨立部署你的微前端
- 使用新框架編寫程式碼，無需重寫現有的應用程式
- 進行懶載入（Lazy load）程式碼，以改善初始載入時間

28 th

套件

Shikiji 式辞
shiki 的 ESM（ECMAScript Module）重寫，基於 TextMate 語法的漂亮語法 highlighter。
TASUKU
適用於 Node.js 的極簡任務運行工具。
可以使用它來標記任何任務、函數，以便在終端機呈現其載入、成功和錯誤狀態。

UI 框架

Radix Vue
開源的 UI 元件庫 Radix UI 的 Vue 版本，兼容任何基於 Vue 的 UI 框架。
無樣式、易於客製化，非常適合構建設計系統和 Web 應用程式。

Aug. 2023 ​

1 st ​

資料庫 ​

3 rd ​

工具 ​

4 th ​

Lint ​

工具 ​

6 th ​

UI 框架 ​

工具 ​

7 th ​

套件 ​

應用程式 ​

8 th ​

工具 ​

10 th ​

套件 ​

工具 ​

12 nd ​

個人經驗紀錄 ​

14 th ​

TypeScript ​

16 th ​

TypeScript ​

工具 ​

17 th ​

套件 ​

工具 ​

18 th ​

問題 ​

21 st ​

框架 ​

22 nd ​

微前端 ​

25 th ​

套件 ​

CSS ​

27 th ​

微前端 ​

28 th ​

套件 ​

UI 框架 ​

Aug. 2023

1 st

資料庫

3 rd

工具

4 th

Lint

工具

6 th

UI 框架

工具

7 th

套件

應用程式

8 th

工具

10 th

套件

工具

12 nd

個人經驗紀錄

14 th

TypeScript

16 th

TypeScript

工具

17 th

套件

工具

18 th

問題

21 st

框架

22 nd

微前端

25 th

套件

CSS

27 th

微前端

28 th

套件

UI 框架