CSS

CSS Transition 動畫效能提升與方法的選擇!

在開發側邊選單時,我遇到一個有趣的效能問題,當點擊按鈕改變選單的 width 時,transition 動畫會明顯卡頓。表面上看起來是個簡單的寬度變化,但實際上因為粗心所以第一時間沒發現子元件隱藏著嚴重的效能問題。

Mike

19 Nov, 2025

Vibe Coding

Spec Kit 指令快速打造 SDD 規格驅動開發文件使用指南 !

在 Vibe Coding 開發的時代,我們經常遇到一個問題是給 AI 一個模糊的描述,它卻產生了完全不符合期望的程式碼,然而 GitHub 推出的 Spec Kit 透過規格驅動開發(Spec-Driven Development, SDD),徹底解決了這個問題。

Mike

22 Sept, 2025

Vue

關於 Vue 控制 CSS Style 的小技巧!

關於 Vue 控制 CSS Style 的技巧!

Mike

27 Aug, 2025

Nuxt

Vite 與 Nuxt 環境變數的安全遷移指南!

過去在做專案的遷移的時候,許多開發者在使用 Nuxt3 時,會延續 Nuxt2 或其他框架的習慣,使用 vite.define 來處理環境變數。這種方式超級不安全的,近期就發現公司其他的專案環境變數的 token 居然就外洩出去了

Mike

3 July, 2025

前端

深入了解 DOM 操作原理

文件物件模型(Document Object Model,Web 的程式界面。它提供了一個樹狀結構化表示法,並讓程式可以存取並修改網頁的架構、風格(style)和內容(value)等等。

Mike

30 June, 2025

Vue

使用 Vue3 開發 Web Component 入門

因為透過 vite + vue3 的方式來開發 web component ,過程會簡單很多,而且可以使用 Vue SFC 的方式來開發,程式碼看起來比較簡潔,可以達到跟原生 Web Component 一樣的效果。

Mike

30 June, 2025

JavaScript

JavaScript BroadcastChannel API 如何做到跨視窗溝通!

這是我最近做出來的一個簡單的 Demo,主要是利用 JavaScript 的 BroadcastChannel API 來達到瀏覽器互相傳遞資訊,進一步溝通來達到有趣互動的效果。

Mike

29 June, 2025