Apr. 2023 ​

1 st ​

套件 ​

• v-lazy-show

  讓元件在第一次為 v-if="true" 前不被實際產生，之後改由 v-show 切換顯示。

工具 ​

• Hasura

  高性能、即時實時的 GraphQL API 引擎。
  可以透過實時 GraphQL API 即時訪問數據，更快地構建和發布現代應用程序和 API。
  Hasura 會連接到數據庫、REST 服務器、GraphQL 服務器和第三方 API，以提供跨所有數據源的統一、即時實時 GraphQL API。

2 nd ​

打包工具（bundler） ​

• Rollup

  可以將小塊的程式碼編譯成更大、更複雜的程式碼，適合 library 的打包。
  主要用於生產環境（Production Environment），也需要解析編譯，但是產物是兼容性更好的原生 JS。

• esbuild

  使用 Go 語言編寫的，採取併行性且有內存管理的機制，所以 esbuild 可以充分利用 CPU 來大量使用並行及內存機制，另外，esbuild 在開發時為全部自行撰寫程式，無使用第三方模組，因此速度優化上非常顯著。
  主要用於開發環境，解析依賴，將不同格式的文件編譯成可執行 ESM 的 JS。

• webpack

  可以打包 HTML、CSS、JavaScript，對於圖片等資源（asset）也有所支援，甚至可以支援 Scss、TypeScript 等轉換。

• Parcel

  可指定打包目標爲 node、browser、electron（預設爲 browser）。 支援 HTML、CSS、JavaScript、Pug、Scss、Less、Stylus、Vue、TypeScript、WebAssembly 等等，且無需配置。

4 th ​

套件管理工具 ​

• npx

  為 npm v5.2.0 之後內建的指令，是一種 CLI 工具，可以更方便的安裝或是管理依賴（dependencies）。
  使用 npx 命令會安裝在臨時安裝包上，等到專案初始化完成後就刪除，不用全局性的安裝，避免被汙染。

  ⋯ Reference

Atomic CSS Engine ​

• UnoCSS

  UnoCSS 為引擎，而非一款框架，因為它並未提供 core utilities，所有功能可以透過 presets 和 Inline configurations（直接在 HTML 標籤中使用 CSS 屬性的方式進行配置）提供。
  主要目標是直觀性和可客製化，輕鬆快速定義自己的 CSS 工具。

  屬性化模式（Attributify Mode）

  透過使用屬性更好地組織和分組你的 CSS 工具，由 @unocss/preset-attributify 提供。

  ⋯ Reference

6 th ​

Template ​

• Vitesse

  Vite + Vue Starter Template。

工具 ​

• PurgeCSS

  用於刪除未使用的 CSS 的工具。
  構建網站時，可能使用像 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等 CSS 框架，但是，只需要使用框架的一小部分，並且會包含大量未使用的 CSS 樣式。 PurgeCSS 將分析內容和 CSS 檔案，將檔案中使用的選擇器與內容中使用的選擇器進行匹配，並刪除未使用的選擇器，從而產生更小的 CSS 文件。

• Twind

  在運行時將 utility classes 轉換為 CSS 的小型的編譯器。
  這個專案的目標是將 CSS-in-JS 的靈活性與 Tailwind API 的精心考慮的限制結合起來。

7 th ​

CSS ​

• Fela

  高效並無關於框架的工具包，用於在 JS 中處理狀態驅動的 styling。
  動態設計，根據應用程式狀態渲染樣式。
  生成 atomic CSS，並支援所有常見的 CSS 功能，例如 media queries、pseudo classes、keyframes 和 font-faces。
  附帶 API 以添加 vendor prefixing 或 fallback value support 等功能。

API ​

• REST

  Representational State Transfer（表現層狀態轉移）

  限制

  1. Uniform Interface 統一介面：每個資源都可以透過 URI 存取到。
  2. Stateless 無狀態：伺服器不能儲存客戶端的資訊。每一次從客戶端傳送的請求中需包含所有的必須的狀態資訊，伺服器端根據這些狀態資訊來處理請求。
  3. 快取 Cacheability：管理良好的快取機制可以減少客戶端與伺服器之間的互動，進一步提了效能和可延伸性。
  4. 客戶端-伺服器 Client-Server：將使用者介面所關注的邏輯和資料儲存所關注的邏輯分離開來，有助於提高使用者介面的跨平台可移植性。
  5. 分層系統 Layered System：中間伺服器可以透過負載均衡和共享快取的機制提高系統的可延伸性，也便於安全策略的部署。
  6. 按需代碼 Code-On-Demand（Optional）：伺服器可以透過傳送可執行程式碼給客戶端的方式臨時性的擴充功能或者客製化功能。

  URI（Uniform Resource Identifier）

  統一資源標識符，用於標識某一網際網路資源名稱的字串。

  URL（Uniform Resource Locator）

  統一資源定位符，簡稱網址。

  補充：URL 一定是 URI，URI 不一定是 URL。

  RESTful API 要點

  1. 資源由 URL 進行指定
  2. 資源的操作包含 HTTP Request Methods 中的 GET、POST、PUT、DELETE 等方法。

  ⋯ Reference

  ⋯ Reference

10 th ​

Vue ​

• watch

  ts

  watch(
    [refA, refB],
    ([A, B], [prevA, prevB]) => {
    // ...
  })

  1
  2
  3
  4
  5
  

  callback function 的參數可以取得變化前（prev）與變化後的值。

網頁應用程式 ​

• PWA（Progressive Web Application）

  透過瀏覽器技術組合讓 PWA 除了網頁優勢也能夠有 native apps 的優點。

  • Progressive 漸進式：使用者於瀏覽器中即可操作 (各瀏覽器於各平台上支援度不一)。
  • Responsive 響應式：可操作於 desktop、mobile 或 tablet 等裝置上。
  • Connectivity independent 連結獨立：可基於 service workers 架構執行，於離線或在有線網路下操作。
  • App-like 近似 APP：類似 APP 的操作介面。
  • Fresh 維持新版：因 service worker 架構，讓應用程式隨時都是在更新狀態。
  • Safe 安全性：必須於加密模式之下進行，因此安全較受到保障。
  • Discoverable 可被搜尋：透過 manifest 設定檔案及 service worker 使搜尋引擎可正常搜尋到。
  • Re-engageable 有互動性：透過類似推播方式與使用者更加互動。
  • Installable 可安裝：可以拉存到手機的桌面，感覺就像是傳統的 APP (非每種瀏覽器均支援)。
  • Linkable 可連結：可經由連結分享。

  ⋯ Reference

• BEX（Browser Extension）

  在瀏覽器上下文中運行的應用程式，用於以某種方式自定義瀏覽器。
  基於 Web 技術（如 HTML、JavaScript 和 CSS）構建的，旨在實現單一目的。
  單一 BEX 可以按用戶所需的任何方式構建，但必須有助於實現該單一目的。
  例如：ad blocker、MetaMask 等附加於 browser 之上，可以與之互動且可能改變網頁呈現與功能的程式。

  BEX 可以執行以下幾項任務：

  1. 覆蓋頁面內容
  2. 添加或修改瀏覽器的介面
  3. 攔截頁面請求
  4. 成為在瀏覽器中運行的全功能應用程式
  5. 交互並修改瀏覽器的開發工具

  ⋯ Reference

  ⋯ Reference

11 st ​

框架 ​

• Cordova

  手機開發框架。
  使用 HTML5、CSS3、JS 進行跨平台開發。
  應用程式在針對每個平台的封裝中執行，並依賴於符合標準的 API 綁定，以訪問每個設備的功能，例如傳感器、數據、網絡狀態等。

工具 ​

• PostCSS

  利用 JS 插件轉換樣式的工具。
  可以對 CSS 進行 lint，支援變數和 mixin，轉譯未來的 CSS 語法，將圖片內嵌等等。

• Turborepo

  針對 JS 和 TS 程式庫進行最佳化的智能構建系統。
  程式庫任務（如 lint、構建和測試）執行速度可能不夠快，Turborepo 可使用快取來加速本地設置並加快 CI。

12 nd ​

Vue ​

• <KeepAlive>

  多個 components 之間動態切換時，可以根據條件緩存 component instance。

資源 ​

• ExplainThis

  分享免費的技術面試文章、問題與詳解等等。

套件 ​

• ofetch

  fetch API。
  透過原本的 fetch 在延伸其他功能（e.g. 建立攔截器）。

框架 ​

• Hexo

  基於 Node.js 的網誌框架，能夠快速、簡單的建置屬於自己的部落格，也可以透過 Markdown 解析文章。

13 th ​

套件 ​

• vue-reuse-template

  在 component 範圍內定義及覆用 Vue template。

• magicast

  使用由 recast 和 babel 驅動的簡化、優雅和熟悉的語法，以程式設計的方式修改 JS 和 TS 源程式碼。

工具 ​

• zeabur

  一鍵部署 service，不論是哪種程式語言或框架。

14 th ​

測試 ​

• Playwright

  為符合 end-to-end 測試需求而創建的工具，支援包括 Chromium、WebKit 和 Firefox 等所有現代渲染引擎。
  可透過錄影自動產生自動化程式碼。

JS ​

• WeakMap

  只能使用 object 作為 key（null 不行）。

  js

  const theWeakMap = new WeakMap()

  1
  

  WeakMap 中的 key 所指向的 object 不會被垃圾回收機制 (garbage collection) 計入參考。
  這也就是 weak 的意思 - 弱引用 (weakly reference)，所以這些 object 可能隨時會被自動回收，而當 object 被回收後，其所對應的 key-value pair 也會自動被刪除。

  通常應用於引用 DOM 元素物件，當 DOM 元素被移除後，相對應的 WeakMap 紀錄也會自動被移除，可以避免內存泄露 (memory leak) 的問題。

  不支援遍歷類型的操作

  ❌ keys(), values(), entries(), forEach(), size, clear()
  ⭕️ set(), get(), has(), delete()

  ⋯ Reference

問題 ​

• Vitepress 配合的 Algolia 搜尋不會回應任何東西。

  在 crawlerConfig.json 新增 lang 和 custom_settings。

  json

  {
    // ...
    "selectors": {
      "lang": {
        "selector": "/html/@lang",
        "type": "xpath",
        "global": true
      }
    },
    "custom_settings": {
      "attributesForFaceting": ["lang", "tags"]
    }
  }

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

  ⋯ Reference

  + VitePress Local Search | 1.0.0-alpha.66 | 2023-04-15

15 th ​

Glob ​

使用相對路徑或通配符來匹配多個檔案或目錄，讓你能夠更方便地進行文件操作。

• *：匹配任何字符（除了 /）

  e.g. *.js 匹配所有以 .js 結尾的檔案 e.g. src/**/test-*.js 匹配 src 目錄及其子目錄中所有以 test- 開頭且以 .js 結尾的檔案

• **：匹配任何字符（包括 /）

  e.g. src/**/*.js 匹配 src 目錄及其子目錄中所有以 .js 結尾的檔案

• ?：匹配任何單個字符
• []：匹配方括號內的任何一個字符
• ()：在括號中使用逗號分隔符來定義一組模式，其中至少有一個模式必須匹配
• !：指定要排除的模式

  e.g. !*.txt 排除所有以 .txt 結尾的檔案

17 th ​

工具 ​

• SWC

  用於編譯和打包。
  對於編譯，使用了現代 JS 功能取得 JS / TS 檔案，並輸出主要瀏覽器所支援的有效程式碼。

Vue ​

• vue-cli

  用於 Vue.js 開發的工具（webpack）。
  目前為維護模式。

• create-vue

  用於 Vue.js 開發的工具（Vite）。

CSS ​

• onu-ui

  UnoCSS 的 Component Library。

18 th ​

MVC（Model View Controller） ​

• Model：模型

  用於封裝邏輯相關的數據以及對數據的操作。

• View：視圖

  渲染圖形化界面、UI 界面。

• Controller：控制器

  M 和 V 之間的連接器，主要處理邏輯，包括顯示數據，頁面跳轉，管理頁面生命週期等。

當使用者的行爲觸發操作時，Controller 將更新，並通知 View 和 Model 更新，而 View 就會向 Model 請求新的數據。

MVP（Model View Presenter） ​

• Model：模型

  用於封裝邏輯相關的數據以及對數據的操作。

• View：視圖

  渲染圖形化界面、UI 界面。

• Presenter：控制器

  Model 和 View 之間的連接器，主要處理邏輯，包括顯示數據，頁面跳轉，管理頁面生命週期等。

所有從 View 發出的事件，都會透過代理給 Presenter 進行處理，同時，Presenter 也透過 View 暴露的接口與其進行通信。
View 與 Model 不溝通，都經過 Presenter 傳遞，完全把 Model 和 View 進行了分離，主要的程序邏輯在 Presenter 內實現。
Presenter 與具體的 View 是沒有直接關聯的，皆透過定義好的接口進行交互，使得在變更 View 時候可以保持 Presenter 的不變以方便覆用。

MVVM（Model View ViewModel） ​

• Model

  代表描述邏輯和數據的一系列類的集合，也定義了數據修改和操作的業務規則。

• View

  代表 UI 組件（e.g. CSS、jQuery、HTML 等），只負責展示從 Presenter 接收到的數據，也就是把 Model 轉換成 UI。

• View Model

  負責業務邏輯，並且連接 View 和 Model。可以連接到一個至多個 View。

由數據來驅動 View 的更新，當資料改變時，UI 自動更新（一般用觀察者模式實現）。

⋯ Reference　⋯ Reference　⋯ Reference

19 th ​

工具 ​

• UnJS

  許多 JS 小工具。

CSS ​

• Stylus

  用來產生 CSS 的程式語言，其語法基本上是從傳統的 CSS 簡化而來。
  利用縮排、空格和換行來減少需要輸入的字符，不過同時也兼容 CSS 語法。
  另外也加入一些函式與運算的功能，讓使用上更彈性。

函式庫 ​

• Remda

  專為 JS 設計的功能函式庫。
  本身有 Functional Programming 的功能，任何 API 只要沒有傳入參數就會自動做 curry，這提供了相當大的彈性。

  Functional Programming

  1. 同樣的 input 會輸出同樣的 output。
  2. 沒有副作用。

• Remeda

  專為 TS 所設計的 data-first ＆ data-last 功能函式庫。

20 th ​

Console ​

• console.assert(assertion, msg)

  assertion：Boolean。若為 false，將在主控台顯示錯誤訊息。
  msg：String。可用來顯示錯誤訊息。

• console.count(label)

  記錄調用 count() 的次數。
  label：String（Optional，預設為 default）。

• console.table(data, columns)

  將資料以表格的形式顯示。
  data：Array | Object。要顯示的資料。
  columns：Array。包含 key 的陣列，指定顯示的項目。

• console.time(label)

  啟動計時器，與 timeLog、timeEnd 的 label 要對到。
  label：String。用來標記此計時器。console.timeLog(label)：顯示與開始相隔的時間（ms）。
  console.timeEnd(label)：顯示與開始相隔的時間（ms），並停止計時。

• console.trace()

  顯示 Call stack 並直接展開。

⋯ Reference

框架 ​

• Flutter

  建立原生跨平台的框架，用 Dart 寫能同時讓 iOS 與 Android 平台使用的程式碼，也支援 Web 以及桌面應用程式。

21 th ​

Functional Programming（FP） ​

強調程式執行的結果而非執行的過程，利用幾個簡單的執行單元讓計算結果不斷漸進，逐層推導複雜的運算，而不是設計一個複雜的執行過程。

• 撰寫 pure function，盡量避免 side effect，讓除錯更加容易
• 善用 higher order function（高階函式），將部份實作委外，讓程式更有彈性
• 使用 lamda 寫出更簡短的 function
• 宣告式 (declarative) 思考，將程式步驟拆成更小、更明確運算單元，讓程式更好閱讀

⋯ Reference

Curry（柯里化） ​

又稱為 parital application 或 partial evaluation。
將一個接受 n 個參數的 function，轉變成 n 個只接受一個參數的 function。

原理是將傳入 function 的參數，利用 closure（閉包）特性，將它們存放在另一個 function 中並當做回傳值，而這些 function 會形成一個鏈（chain），待最後參數傳入，完成運算。

• 優點

  1. 簡化參數的處理，基本上一次處理一個參數，可提高程式的彈性和可讀性。
  2. 將程式碼依功能拆解成更細的片段，有助於重複利用。

sum(1, 2, 3) --> curriedSum(1)(2)(3)

⋯ Reference

23 rd ​

TypeScript ​

• ts-reset

  改進了常見 JavaScript API 的型別。
  e.g. .json 回傳的型別從 any 改為 unknown、.filter 回傳的型別符合期待。

套件 ​

• Swiper.js

  完整的幻燈片、跑馬燈套件，使用效能高，可運用在行動裝置上及混和式 App 上。

• ArkType

  runtime 驗證庫，可以推斷出 TypeScript 的定義，並將它們作為高度優化的驗證器來重複使用，以驗證資料。
  在輸入中，編輯器將立即給出回饋，可能是完全推斷出的類型，也可能是具體且有用的解析錯誤。

24 th ​

Vue ​

• v-cloak

  用於隱藏未編譯的 template，直到它準備好為止。

  WARNING

  這項功能只在沒有構建步驟的情況下中需要。

  在使用 DOM 中的 template 時，可能會出現「未編譯 template 的閃爍」。
  使用者可能會看到原始的 Mustache 標記，直到掛載的組件用渲染的內容替換它們。
  v-cloak 將維持在元素上，直到關聯的組件實例被掛載。
  結合 CSS 規則（e.g. [v-cloak] { display: none }）可以用於隱藏原始 template，直到組件準備就緒。

  vue

  <div v-cloak>
    {{ message }}
  </div>

  1
  2
  3
  

• v-memo

  對 template 的 sub-tree 進行記憶化，可用於元素和組件上。
  填入一個固定長度的陣列，以進行記憶化比較，如果陣列中的每個值與上一次渲染相同，則將跳過整個 sub-tree 的更新。

  TIP

  v-memo="[]" 在功能上等同於 v-once。

  vue

  <div v-memo="[valueA, valueB]">
    ...
  </div>

  1
  2
  3
  

套件 ​

• unlazy

  利用原生瀏覽器 API 的通用延遲加載函式庫，目的在與 (模糊的) 佔位圖像或 BlurHash 一起使用原生的 loading="lazy" 屬性。
  圖像最初使用模糊的佔位符進行渲染，留下頁面布局和內容的印象。
  當圖像進入 viewport（視區）時，會被全品質版本替換，提供更平滑的體驗。
  優先考慮頁面的初始渲染，並改善了使用者的感知性能，特別是當連接緩慢或不穩定時。

25 th ​

套件 ​

• husky

  讓 Hooks 的新增過程自動化，當專案中的依賴安裝完成後，Husky 會根據項目中 package.json 配置，確保所有 Hook 都將安裝在開發人員的裝置中。

  1. 本地建立 Hooks。
  2. 呼叫相關的 Git 命令時會自動執行對應的 Hook。
  3. 對協作者來說，專案中定義的程式設計規範是強制執行的。

  Git Hook

  使用 Git（git init）初始化專案時，自動會提供 Hooks（鉤子）的功能。
  路徑：<repo_name>/.git/hooks

  • pre-commit：用於保證程式碼提交前執行所有程式設計規範的鉤子（git commit 時執行）
  • pre-push：用於保證程式碼在推送到遠端之前符合程式設計規範。
  • pre-rebase：類似於以上的作用，在 rebase 完成之前執行的。
    所有可用的 Hooks 和它們的用法都可以在這裡找到。

  ⋯ Reference

  ⋯ Reference

• lint-staged

  針對暫存區的 git 檔案運行檢查器。

• AOS

  設置 scroll 動畫的函式庫。

JS ​

• three.js

  JS 的 3D 函式庫。

CSS ​

• stylelint

  CSS 檢查器，可輔助避免錯誤並強制執行規範。

28 th ​

套件 ​

• device.js

  基於語義，基於 Media Query 的設備檢測，無需特殊的 server 端配置。

• animated-scroll-to

  輕量級的滾動功能（含動畫），可以滾動視窗或任何其他 DOM 元素。

• js-cookie

  用於處理瀏覽器 cookie 的簡單、輕量級的 JavaScript API。

HTTP（Hyper Text Transfer Protocol） ​

此應用層的通訊協定最早被設計用來「傳送」與「接收」HTML 的頁面及內容。
HTTP 在 Client 端與 Server 端之間透過 TCP 協定來傳遞「請求」與「應答」的要求。

當使用者透過瀏覽器發起一個開啟網頁的請求時，該請求會被送至 Server 端，而網站通過預設的連接埠 80 接收，並將網頁 HTML 的內容（包含文字與圖片）應答傳送回 Client 端，為資訊透過 HTTP 傳遞的過程。

由於 HTTP 是以明文的方式傳遞訊息，因此若訊息傳輸的過程中沒有任何的保護措施，訊息就有可能被攔截、竄改或是竊取內容等。

HTTPS（Hyper Text Transfer Protocol Secure） ​

HTTPS 比起 HTTP 多加了許多安全上的考量，預設連接埠也從埠 80 改成了埠 443。

1. 加密：
原來傳輸時使用的是「共用金鑰加密」、「對稱式加密」，但仍有金鑰被竊取解碼的問題，因此 SSL/TLS 現在是使用「非對稱式加密」的方式來進行資訊加密的動作，在資料的安全上也比較有保障。

2. 驗證：
透過公開加密金鑰的方式（非對稱式加密），讓每個通訊者同時擁有「公鑰」及「私鑰」來解決加密上不安全的問題。
由公正的第三方機構來頒發數位憑證，以證明配對的「公鑰」與「私鑰」雙方是正確的，避免有被竊取金鑰並竄改的情況。

3. 完整性：
SSL/TLS 以 X.509 憑證將身分資訊（e.g. 網路主機名，組織名稱、個體名稱等）和簽章資訊等內容以數字形式的文件格式做成加密的「公鑰」與「私鑰」密鑰對。
任何擁有公鑰的人都可以使用它發送只有私鑰擁有者才能解密的訊息，及確認這個傳遞的訊息是該公鑰對應的私鑰所進行簽章。
也因為資料在伺服器端與使用者端傳輸時，兩端的金鑰可以以該組數位簽章確認彼此的身分與內容的完整性，所以我們才能確保在網路上彼此傳輸的資料是安全的。

⋯ Reference