全選
清除
JavaScriptPerformanceVueFull StackTypeScriptts-restAlgorithmVitestmarkdown-itVitePressNode.jsWeb WorkerComlinkRemedaLodashFront-EndAIQuasarPiniaElectronLLMBabylon.jsShaderWebGLGLSL
文章列表
共 59 篇文章
2026/04/16
用 Vue Router 的 Data Loader 解決 fetch 瀑布流問題
Vue
元件層層嵌套，API 一個等一個？來看看 Vue Data Loader 怎麼解決 fetch 瀑布流問題。(ﾉ>ω<)ﾉ
2026/04/13
AI 可能會寫的 Vue Composable 地雷，你踩過了嗎？
Vue
AI
把 ref 放在 composable 外面共用狀態，方便是方便，但是可能會埋下地雷喔。(´・ω・`)
2026/04/10
鱈魚的 Shader 筆記 - EP02：認識 Vertex Shader
Shader
WebGL
GLSL
JavaScript
從 Attribute 到 Varying，搞懂 Vertex Shader 怎麼控制每個頂點的位置、大小與顏色！(｢･ω･)｢✧
2026/04/06
互動式視錯覺展
Vue
拉動滑桿揭開錯覺真相，Web 上的互動式視錯覺展
2026/04/02
鱈魚的 Shader 筆記 - EP01：甚麼是 Shader
Shader
WebGL
GLSL
JavaScript
從 JavaScript 開發者的角度出發，一起來看看 Shader 的核心概念吧！(｢･ω･)｢✧
2026/03/18
JS Utility Function 和 Vue Composable，傻傻分不清楚
Vue
Vue composable，比一般的 JS function 多了些約定，讓我們來看看吧。(´・ω・`)
2026/03/14
Comlink 讓 Web Worker 不再難用
Vue
Web Worker
Comlink
Web Worker 很棒，但 postMessage 用起來實在太痛苦了，讓 Comlink 來救場吧！( •̀ ω •́ )✧
2026/03/11
神隱的 DOM ref
Vue
註冊在 DOM 的事件莫名失效？來看看如何解決這個問題。(´・ω・`)
2026/03/11
HexaZen - EP09：WebGPU 與效能優化
Babylon.js
最終章！WebGPU 優先策略、智慧鏡頭限制、還有各種讓體驗更流暢的小細節。✧⁑｡٩(ˊᗜˋ*)و✧⁕｡
2026/03/10
HexaZen - EP08：UI 設計與國際化
Babylon.js
倒角邊框、聲景混音器、還有不用 vue-i18n 的輕量國際化方案。੭ ˙ᗜ˙ )੭
2026/03/09
HexaZen - EP07：分享編碼與 URL 壓縮
Babylon.js
每個積木只佔 25 bits，用 Bit-packing 把整個場景塞進一條短短的 URL 裡。(/≧▽≦)/
2026/03/08
HexaZen - EP06：積木選擇器與縮圖生成
Babylon.js
30 多種積木怎麼讓使用者挑選？用無頭 Babylon.js 場景產生即時縮圖吧！ヾ(◍'౪`◍)ﾉﾞ
2026/03/07
HexaZen - EP05：天氣與粒子系統
Babylon.js
下雨了！用 GPU 粒子系統撒下 5 萬顆雨滴，再搭配射線投射讓水花不會浮空。ˋ( ° ▽、° )
2026/03/06
HexaZen - EP04：3D 場景互動
Babylon.js
讓積木可以放置、旋轉、移除，還有滑順的動畫與視覺效果。◝(≧∀≦)◟
2026/03/05
HexaZen - EP03：音效播放引擎
Babylon.js
怎麼讓白噪音不再重複？雙軌交叉淡入淡出加上隨機播放，讓耳朵不再疲勞。♪( ◜ω◝و(و
2026/03/04
HexaZen - EP02：六角格與聲景系統
Babylon.js
如何讓六角積木組合出千變萬化的自然音效？讓我們從座標系統開始聊起。✧⁑｡٩(ˊᗜˋ*)و✧⁕｡
2026/03/03
HexaZen - EP01：前言
Babylon.js
同一個白噪音聽到快背起來了，來試試自己做一個 3D 白噪音混音器吧。◝(≧∀≦)◟
2026/01/16
Vue template 編譯魔法
Vue
常聽別人說 Vue template 有編譯魔法，來仔細看看到底差在哪，順便看看酷酷的 Vapor 模式。ლ(´ڡ`ლ)
2026/01/15
說好的虛擬呢？記憶體爆炸啦！
JavaScript
Performance
使用虛擬列表時，記憶體不斷上升，甚至爆炸，該怎麼辦呢？
2025/12/23
那些黏不起來的元素，讓我們加點 JS 吧！
JavaScript
Vue
CSS sticky 好用，但是有限制，讓我們想辦法突破限制吧。
2025/09/30
初探 Nuxt UI v4
Vue
Nuxt UI 釋出 v4 了，免費開放許多進階元件，馬上來研究看看 ლ（´∀`ლ）
2025/09/18
自動解除的魔法呢？Vue Directive 和 Effect Scope
Vue
Directive 內沒有自動解除響應式資料與副作用的魔法呦 (・∀・)
2025/08/26
越暗的地方你越亮，透過 JS 標記關鍵字吧
Vue
JavaScript
在 JavaScript 實作網頁文字搜尋關鍵字的 highlight 效果
2025/08/14
前後端不再打架，讓 ts-rest 發揮 TypeScript 的魔法吧！（實務篇）
Full Stack
TypeScript
ts-rest
紀錄一下使用 ts-rest 實際開發的點點滴滴
2025/08/07
如何實現靈活的資料排序
Algorithm
JavaScript
如何實現靈活的資料排序
2025/06/30
酷酷元件背後的星點 - EP01：前言
Vue
小廢物們背後的技術亮點
2025/06/12
甚麼？圖片還沒好喔！Σ(ˊДˋ;)
Vue
Vitest
確保圖片都乖乖載入完成，一個都不能少！順便玩玩看 Vitest 的 Browser Mode(・∀・)９
2025/05/26
懶有懶的好處，聊聊 Lazy Evaluation
Remeda
JavaScript
Performance
remeda 實作中有 lazy evaluator 有甚麼好處？來 Bench 一下看看◝( •ω• )◟
2025/05/19
幫 Quasar Menu 加上 hover 開啟功能
Vue
Quasar
原本想說應該很簡單，仔細探討後發現事情沒有像憨魚想的那麼簡單。(◉◞౪◟◉ )
2025/03/25
Vue 之 triggerRef 問題
Vue
前陣子使用 triggerRef 時發現某些情境下無法觸發響應，一起來看看發生甚麼事吧 (´・ω・`)
2025/03/21
你是個成熟的 function 了，該自己記得結果了
JavaScript
Lodash
Performance
最近遇到從大矩陣資料找出指定資料的需求，是時候使用 memoization 來提升效能了。੭ ˙ᗜ˙ )੭
2025/02/25
remeda piped 之 reference 問題
Remeda
JavaScript
使用 remeda piped 時，不小心給自己埋了地雷，來筆記一下。(。-`ω´-)
2025/01/22
CodToys - EP04：請支援近義詞
Electron
LLM
忘記原本的關鍵字怎麼辦？請支援近義詞搜尋 ლ(╹ε╹ლ)
2025/01/17
善用 computed
Vue
Performance
常聽說不要把複雜的表達式寫在 template 裡，應先用 computed 裝起來，來試試有甚麼差別吧。ლ（´∀`ლ）
2025/01/15
關於 Vue 資料流那檔事
Vue
Vue 資料流實作筆記，還請大家多多指教 (*´∀`)~♥
2025/01/02
臉被切到了怎麼辦！來自定義 markdown 語法吧
markdown-it
顏文字換行會原地變為一坨亂碼，該怎麼辦呢？(PД`q｡)
2025/01/02
CodToys - EP03：顏文字資料庫
Electron
上一章節我們完成了快捷鍵開關視窗功能，這一章節我們來實作功能選項部分吧！
2024/12/26
CodToys - EP02：功能選項
Electron
上一章節我們完成了快捷鍵開關視窗功能，這一章節我們來實作功能選項部分吧！
2024/12/22
聽說 forEach 比 for 迴圈慢？
JavaScript
Performance
常聽到別人說特定情境下 forEach 比 for 迴圈還慢，剛好有個好機會，讓我來試試看吧。ԅ(´∀` ԅ)
2024/12/21
CodToys - EP01：緣起
Electron
沒有順手的小工具怎麼辦？用 Electron 動手做一個吧！(´,,•ω•,,)
2024/12/10
VitePress 之所以我說那個響應式圖片呢？
VitePress
VitePress 沒有 Nuxt Image 那樣方便且自動的圖片處理，該怎麼辦呢？ლ(・´ｪ`・ლ)
2024/10/07
Vue 的 shallowRef 是啥？和 ref 有甚麼差別？
Vue
熟悉 Vue 的朋友們一定知道 `ref` 是啥，一起來看看 `shallowRef` 和 `ref` 有甚麼差別吧！ԅ( ˘ω˘ԅ)
2024/09/09
要不要來點 Side Project 啊？ԅ(´∀` ԅ)
JavaScript
Front-End
分享一下鱈魚的 Side Project 靈感與發想。(๑•̀ㅂ•́)و✧
2024/09/05
Vue 3.5 更新，onWatcherCleanup 與 onCleanup
Vue
Vue 3.5 更新新增了 onWatcherCleanup，用於清理 watcher 中的副作用（Side Effect），可是原本的 watch 已經有 onCleanup，所以到底差在哪呢？(╯▽╰ )
2024/08/26
藉由 Sentry 讓錯誤無所遁形吧！
Front-End
系統上線後常常遇到前端錯誤不好追蹤問題，使用者很難說得清楚發生甚麼事，Sentry 可以協助記錄錯誤，並且提供更多資訊，讓開發者更容易追蹤問題。
2024/08/23
打包後順便壓縮一下吧，使用 Node.js 自動產生壓縮檔
Node.js
JavaScript
有些案子需要打包、壓縮後交付，雖然壓縮按一下很簡單，但是一直重複就不簡單了。讓我們使用腳本自動產生壓縮檔，不用再手動壓縮了。♪(^∇^*)
2024/07/25
所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！
Vue
Quasar
TypeScript
先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。ლ(╹◡╹ლ)
2024/07/16
TypeScript 之 DX 體驗更好的列舉資料定義方式
TypeScript
不管是 enum 和 literal 的方式其實都有些小缺點，以下推薦一個個人認為體驗更好的方式
2024/07/15
藉由 Vue h function 讓 Quasar Dialog 更簡單複用
Vue
Quasar
Quasar Dialog 的 Invoking custom component 很好用，但是有些困擾的地方，一起來看看有甚麼辦法吧。
2024/07/10
Vue 元件太肥，切換頁面卡卡怎麼辦？讓 Suspense 登場吧！
Vue
切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
2024/07/01
誰偷了我的鳳梨！聊聊意外修改 Pinia 資料問題
Vue
Pinia
有時候使用 Pinia 會遇到資料意外變更問題，這其實不是鳳梨的錯，讓我們看看怎麼回事吧。( ´ ▽ ` )ﾉ
2024/06/28
前後端不再打架，讓 ts-rest 發揮 TypeScript 的魔法吧！（概念篇）
Full Stack
TypeScript
ts-rest
ts-rest 可以實現從伺服器到客戶端的全型別安全，可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)
2024/06/28
回不去惹，用 await-to-js 讓你的 Promise 操作簡潔又俐落！
JavaScript
可以在特定情境下簡化 Promise 寫法
2024/06/20
Vue Reactive 使用筆記
Vue
現在官方推薦使用 ref 就行，所以 reactive 還有甚麼用處呢？讓我們筆記一下。(。・∀・)ノ
2024/06/06
Vue watch 前先小等一下
Vue
watch 不是不能用，而是在使用 watch 之前，先想想有沒有其他方案，真的沒有才用 watch。
2024/06/06
小心遺漏的 watch 讓網頁爆炸
Vue
某些情境會讓 watch 不會自動解除，一起來看看吧！(ˊДˋ;)
2024/04/17
Vue 泛型元件，讓 TypeScript 更精確
Vue
Vue 3.3 終於新增了泛型元件（Generic Component），可以在 TypeScript 環境中得到更準確的型別提示了！ˋ( ° ▽、° )
2024/04/10
其實 Vue 不一定要在 onMounted 取 API
Vue
Vue 你還在 onMounted 中取 API 嗎？其實不一定要這樣做，來看看不同做法吧。( ͡~ ͜ʖ ͡°)
2024/03/24
好 pipe 不用嗎？藉由 remeda 讓程式碼更簡潔彈性吧！
Remeda
JavaScript
pipe 代表函數式程式設計中的概念，利用多個功能結合在一起，資料依序通過每個功能進行處理