Webpack 雖然在前端很強大，起專案和 HMR 的速度也跟著套件裝越多越慢，但隨著 IE 的沒落，很多套件其實都不需再使用。這時候新一代的技術 Vite 颳起一陣旋風，利用現代瀏覽器支持 ES 模塊的特性，直接用瀏覽器的資源做更快速的打包 & HMR，用了一次之後就回不去 Webpack 了 XD ~ 本篇說明如何用 NET 6 + Vite + Vue 3 來起一個新專案。

最近有藝術作品利用 AI 繪圖技術 Midjourney 製成參加比賽獲獎，有很多篇新聞報導，讓大眾開始反思 AI 繪圖的可能性。(AI 作品奪藝術獎：究竟甚麼是藝術？) 基於好奇，所以我也去試玩看看。

最近將舊的 Sketch 檔案匯入 Figma 時，會發生找不到 “Helvetica” 字體的問題。但我覺得這麼“基本”的字體應該 Figma 會有吧？！仔細一找真的不在 Figma 字體的下拉清單（眼神死…），所以我就跑去找有什麼相似的字體可以做替換。幸好，找到了不錯的資源，就趕緊記錄下來。

介紹如何用 SSMS 匯入 Azure DB。

很久沒來觀摩 Naver 的設計，剛好最近看到一篇關於穿戴式裝置 Apple Watch 的應用設計，所以想來學習學習。

最近因緣際會下本來想做個讀取 Google Sheet API 的 web app 放在 github page，但發現 github 有擋住部分功能，所以想說看能不能改放在 Azure 雲端上，搜尋之後發現這個神奇的 plugin，Azure Static Web Apps 可以在 vscode 做一些簡單的設定，就能把 github 上的前端 web app 自動透過 github Action，CICD 到 Azure Cloud 上，底層還是會在 Azure 建立一個 Azure Function。話不多說，直接來說明怎麼設定吧～

最近 Figma 功能換到團隊的訂閱制，終於可以使用 Library 的功能了！但之前還沒換過去之前，檔案內的 Components 都是在 Local 原檔案中，現在該是 Refactor 整理的時候了，把共用的 Components 改用 Library 的，並重新整理檔案。此篇紀錄其中碰到的問題並寫出使用了哪些 Plugin 來改善 Refactor 的效率。

.NET 出到 6 之後，原本官方的 SPA 套件被棄用，新版改成使用 Vue-CLI + SPA Proxy。我們就從零開始建立新的 .NET6 + Vue-CLI (Webpack base) + Vuetify 專案吧～

SVG 通常會搭配 CSS Animation 做動畫，效能很不錯。但問題來了，如果設計師給一張很複雜的 SVG Banner 圖，需要只動裡面其中幾個物件，那使用 JS 會比較方便，就不用每張切圖對 x,y 位置，且 JS 能撰寫比較多使用者互動。這次就來測試使用 SVG.js 做動畫。

Suspense 這個元件是 Vue 參考 React 那邊所得到的靈感。當我們打開頁面時，通常會有多個非同步的 API 呼叫，出現 Loading 中，等到資料都到齊，才會看到完整的頁面。以往都是用 v-if 來判別 data 是否都到齊，在 Vue 3 中就能用 Suspense 元件來做這件事情，且多個非同步的 API 也能自動判別，非常省時省力。