如何計算檔案的 MD5 ?
上傳檔案時，API 會要求先計算出檔案的 MD5 連同檔案一起上傳，後端再根據 MD5 確認檔案是否傳輸正確，JavaScript 該如何計算出檔案的 MD5 呢 ?
タグ : Vue
當 Either 遇見 Promise
當有 Function 回傳 Either，而後續的 Function 都在 Either 內執行時，卻又有 Function 回傳 Promise，這就造成 Either 內有 Promise 窘境，實務上該如何處理這種兩層 Monad 呢 ?
當 Maybe 遇見 Promise
當有 Function 回傳 Maybe，而後續的 Function 都在 Maybe 內執行時，卻又有 Function 回傳 Promise，這就造成 Maybe 內有 Promise 的窘境，實務上該如何處理這種兩層 Monad 呢 ?
如何以 Point-free 處理 Binary Function ?
Point-free 天生適合 Unary Function，但實務上還是常常遇到 Binary Function 甚至 Ternary Function，對於這類 Function 該如何在 Vue 3 搭配 Point-free 呢 ?
使用 Maybe 取代 undefined
由於 Vue 3 支援 Composition API，不只 Function Pipeline 與 Point-free 得以實現，如 FP 慣用的 Maybe 在 Vue 3 裡也得以發揮。
使用 Either 處理 Exception
由於 Vue 3 支援 Composition API，不只 Function Pipeline 與 Point-free 得以實現，如 FP 慣用的 Either 在 Vue 3 也得以發揮。
使用 Dynamic Router Matching 以 Route 為參數
在實務上 Route 也會如 RESTful API 一樣，動態在 Route 中夾帶 Data，此時可使用 Dynamic Route Matching，而不用將 Route 寫死。
Web Worker 初體驗
由於 Browser 只有一個 UI Thread 特性，若同時在此 Thread 執行很耗 CPU 運算，將使得 UI 有 Freeze 感覺，若能改用 Web Worker 執行耗 CPU 部分，將大幅提升使用者體驗。
Web Worker 初體驗
由於 Browser 只有一個 UI Thread 特性，若同時在此 Thread 執行很耗 CPU 運算，將使得 UI 有 Freeze 感覺，若能改用 Web Worker 執行耗 CPU 部分，將大幅提升使用者體驗。
使用 Vuelidate 驗證 Form
Vue 雖然也能搭配 HTML 5 的 Form Validation，但 Vue 的 Model-based 與 HTML 的 Element-based 則大異其趣，Model-based 更直覺且可讀性更高。
使用 Webpack 管理 Vue Paper Dashboard
若使用一些為 Vue 量身定做的 Template，會發現很多 Designer 還是習慣將 Bootstrap 或 Font Awesome 以 CDN 放在 index.html，若 Production 環境並沒有外網，這些 CDN 將造成 CSS 失效。
實作 File Upload
若要上傳檔案，最簡單就是使用 HTML 的 <input type=file>，但 HTML 的 <input> 顯示太過陽春，不太符合目前主流 Web 顯示，當然可以找 Package 達成需求，事實上以 Tailwind CSS 就能簡單實作出漂亮的 File Upload。
使用 Transition 讓 v-if 逐漸變化
當使用 v-if 讓 Element 顯示或消失時，若希望能漸漸變化，Vue 提供了 Transition Component 與相對應 CSS Class，亦可直接搭配 Tailwind CSS。
Vue 2 安裝 TailwindCSS 2.1
TailwindCSS 2.1 支援 Just-in-Time Compiler，讓我們在 Development 階段也能使用 PurgeCSS 讓 CSS 變小，是 TailwindCSS 很大進步。
使用 Docker Compose 執行 Cypress
若要在 CI 以 Cypress 測試 Vue，勢必面對 Cypress Dependency 與 Web Server 執行 Vue 問題，我們可透過 docker compose 同時執行 Cypress 與 Nginx 兩個 Container 進行測試。
使用 serve 測試 Build 過的 Vue
平常開發可使用 Webpack 的 DevServer，但最後應該測試經過 Webpack 、Babel 、PostCSS …等工具處理過的檔案，畢竟這才是最後在 Production Server 執行的 HTML、CSS 與 JavaScript。
Vue 使用 Tailwind UI
Tailwind UI 基於 Tailwind CSS，使用之前須先設定好 Tailwind CSS，然後再設定 Tailwind UI 的 Plugin。
使用 Vue 改變 Local CSS Variable
若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可：若能將 JavaScript Variable 與 CSS Variable 綁定，則可使用 JavaScript 動態改變 CSS。
使用 Vue 改變 Global CSS Variable
若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可，若使用 Global CSS Variable，由於 Vue 2 沒有直接支援，只能使用 Vanilla CSS 方式改變之。
使用 Vue 改變 Component CSS Variable
若有數值在 CSS 重複出現，我們可將其抽成 CSS Variable，將來只需維護一處即可；若能將 JavaScript Variable 與 CSS Variable 結合，則可使用 JavaScript 動態改變 CSS。
Vue + JSX 初體驗
Vue 傳統都會以 Template 處理 HTML，Script 處理 JavaScript，事實上 Vue 有另外一種寫法：在 redner() 以 JSX 完全在 JavaScript 處理 HTML。
Tailwind CSS 與 Class Binding
Tailwind 的 Utility 其實就是一堆預先定義好的 CSS Class，若要能根據 State 動態改變 Utility 使其 Reactive，就要使用 Vue 的 Class Binding。
使用 WebStorm 開發 Vue
WebStorm 已經提供 Vue Plugin 完整支援 Vue，唯一只有 .vue 格式縮排部分，Webstorm 與 Vue 的看法迥異，在 Reformat Code 之後，縮排會完全跑掉，需要稍微調整。
Vue 3 安裝 TailwindCSS 2
TailwindCSS 基於 Functional CSS，讓我們只要組合 Utility 就能達成效果，不必再寫 CSS，且搭配 PurgeCSS 後，還可將沒用到的 CSS 拿掉。
Vue 註冊 DOM Event
Vue 並沒有包括所有 DOM Event，但我們可使用 addEventListener() 與 removeEventListener() 自行註冊 DOM Event 到 Vue。
Vue 2 安裝 TailwindCSS 1
TailwindCSS 基於 Functional CSS，讓我們只要組合 Utility 就能達成效果，不必再寫 CSS，且搭配 PurgeCSS 後，還可將沒用到的 CSS 拿掉。
使用 $route 讀取 Query Parameter
目前實務上較少使用 Query Parameter 傳遞資料，而改用 Vue Router 與 Prop，若真的要使用，亦可使用 $route 讀取。