2025年8月18日 星期一

Tailwind CSS 快速升級 v4

›
Tailwind CSS v4 在2025年1月推出，主打在效能上有顯著的提升，配置也變得更簡便。依照指示一步一步來調整專案，可以簡單快速完成設定。 手動升級 1. 更新及安裝套件 安裝新版的 tailwindcss 和 @tailwindcss/postcss np...
2025年8月14日 星期四

[Vue.js] SVG 引入與 Typescript 型別設定

›
❌錯誤示範 如何在vue專案裡使用 svg 檔案，最直覺的做法： <template> <svg> <use href="./assets/penguin-svgrepo-com.svg" width...
2025年7月27日 星期日

[Recat] JSX 常見語法雷區

›
1. JSX 中 HTML 標籤必須自閉合 HTML 中 input 是 void element，本來不需要閉合標籤。 // ✅ 正確 <input type="text" /> // ❌ 錯誤 <input type=...
2024年3月28日 星期四

[Javascript] 四種併發 Promise 差異比較

›
Promise 代表非同步操作的物件，一個 Promise 可區分成三種狀態: pending - 初始狀態，可以視為處理中 fulfilled - 表示操作成功 rejected - 表示操作失敗 Promise 的併發控制就是當我們傳入多個 Promise時，藉由達...
2023年10月12日 星期四

npm 安裝不依賴 --legacy-peer-deps 解決 Conflicting Peer Dependency 錯誤

›
當執行 npm install 時，出現錯誤 Conflicting peer dependecy: XXX ，並出現提示：Fix the upstream dependecy conflict, or retry this commaned with --force or ...
2023年8月26日 星期六

[Javascript] stopPropagation 停止事件捕捉及冒泡

›
近期工作上修正一個因為冒泡(bubbling) 導致的錯誤，神奇的是 chrome 異常但 safari 正常，因此想知道兩個瀏覽器為什麼會有這樣的差異，順便整理一下 stopPropagation 的使用方法。 冒泡(bubbling) 是 Javacript 事件傳遞...
2023年4月29日 星期六

[Javascript] 潛藏 setTimeout 的陷阱

›
setTimeout 和 setInterval 常用在倒數計時或是提醒等，一些時間有關的實作，然而精準校時卻是不可能的任務，只能盡可能減少誤差。 使用方法 setTimeout setInterval 說明與範例 非同步函式(Asynchronous ...
2023年3月11日 星期六

原始碼解析 create-vue 快速建立 Vue 專案

›
Vue 可以透過下面的指令，接著詢問一系列的問題，按照設定快速初始一個專案。(目前版本為 3.6.1) npm init vue@latest 實際是執行這個 create-vue ，想透過原始碼的解析，來了解怎麼樣做一個類似的功能，這個專案架構是如何、如何達成建立專案的...
2023年1月27日 星期五

[Jest+Testing Library] Vue + storybook interaction 元件測試範例

›
storybook 可以獨立建立元件，並搭配 @storybook/addon-controls 控制 props 輸入及 @storybook/addon-actions 顯示 emit 輸出的內容，當然可以透過手動開啟 GUI 來測試元件是否符合規格，storyboo...
2023年1月14日 星期六

第一個 Vue3 元件測試從 Vitest + Vue Test Utils 開始

›
延續「 mocha + webpack 的 Vue3 元件單元測試 」，既然使用 mocha 測試太卡關，這次安裝 Vitest 來試試看！ 一、安裝 先安裝 Vitest，另外 Vitest 需要使用 Node >=v14，並安裝 Vite >=v3.0....