# 鱈魚的魚缸

> 各種鱈魚滾鍵盤的雜記與研究

## Table of Contents

### 主題

- [ts-rest 躺得很安詳，決定來認識認識 oRPC](/blog-ocean-world/orpc-vs-ts-rest.md): ts-rest 作者人間蒸發，許久沒更新，來試試看 oRPC 吧
- [測試都加了還是出包？是不是少了流程測試？](/blog-program/bdd-with-vitest-cucumber.md): 單元、整合、突變測試全過，怎麼還是出包了？( ´•̥̥̥ ω •̥̥̥` )
- [一年後再看 Nuxt UI](/blog-vue/nuxt-ui-v4-revisited.md): 快一年前寫過 Nuxt UI v4 初探，當時列的坑補了幾個？這一年又多了哪些好東西？ლ（´∀`ლ）

### 專欄

- [CodToys - EP01：緣起](/column-cod-toys/01-origin.md): 沒有順手的小工具怎麼辦？用 Electron 動手做一個吧！(´,,•ω•,,)
- [HexaZen - EP01：前言](/column-hexazen/01-origin.md): 同一個白噪音聽到快背起來了，來試試自己做一個 3D 白噪音混音器吧。◝(≧∀≦)◟
- [鱈魚的 Shader 筆記 - EP01：甚麼是 Shader](/column-shader-notes/01-shader-intro.md): 從 JavaScript 開發者的角度出發，一起來看看 Shader 的核心概念吧！(｢･ω･)｢✧

### 蔚藍世界

- [ts-rest 躺得很安詳，決定來認識認識 oRPC](/blog-ocean-world/orpc-vs-ts-rest.md): ts-rest 作者人間蒸發，許久沒更新，來試試看 oRPC 吧
- [Skill 寫得很開心，但它真的有用嗎？來嘗試健檢看看](/blog-ocean-world/test-independent-review-skill.md): 快樂的設計了一個審查型 skill，怎麼知道它真的有用？沒有欺騙你的感情？
- [說好的虛擬呢？記憶體爆炸啦！](/blog-ocean-world/detached-dom-elements.md): 使用虛擬列表時，記憶體不斷上升，甚至爆炸，該怎麼辦呢？
- [那些黏不起來的元素，讓我們加點 JS 吧！](/blog-ocean-world/implement-sticky-using-js.md): CSS sticky 好用，但是有限制，讓我們想辦法突破限制吧。
- [越暗的地方你越亮，透過 JS 標記關鍵字吧](/blog-ocean-world/js-highlight-api.md): 在 JavaScript 實作網頁文字搜尋關鍵字的 highlight 效果
- [前後端不再打架，讓 ts-rest 發揮 TypeScript 的魔法吧！（實務篇）](/blog-ocean-world/unleash-the-magic-of-type-script-with-ts-rest-practical-experience.md): 紀錄一下使用 ts-rest 實際開發的點點滴滴
- [如何實現靈活的資料排序](/blog-ocean-world/flexible-data-reordering.md): 如何實現靈活的資料排序
- [甚麼？圖片還沒好喔！Σ(ˊДˋ;)](/blog-ocean-world/check-images-ready.md): 確保圖片都乖乖載入完成，一個都不能少！順便玩玩看 Vitest 的 Browser Mode(・∀・)９
- [臉被切到了怎麼辦！來自定義 markdown 語法吧](/blog-ocean-world/markdown-it-custom-syntax.md): 顏文字換行會原地變為一坨亂碼，該怎麼辦呢？(PД`q｡)
- [VitePress 之所以我說那個響應式圖片呢？](/blog-ocean-world/add-responsive-images-to-vite-press.md): VitePress 沒有 Nuxt Image 那樣方便且自動的圖片處理，該怎麼辦呢？ლ(・´ｪ`・ლ)
- [打包後順便壓縮一下吧，使用 Node.js 自動產生壓縮檔](/blog-ocean-world/use-nodejs-to-automatically-generate-the-compressed-file.md): 有些案子需要打包、壓縮後交付，雖然壓縮按一下很簡單，但是一直重複就不簡單了。讓我們使用腳本自動產生壓縮檔，不用再手動壓縮了。♪(^∇^*)
- [前後端不再打架，讓 ts-rest 發揮 TypeScript 的魔法吧！（概念篇）](/blog-ocean-world/unleash-the-magic-of-type-script-with-ts-rest.md): ts-rest 可以實現從伺服器到客戶端的全型別安全，可以有效降低前後端溝通血流成河的機率。(´,,•ω•,,)

### 程式浮潛

- [測試都加了還是出包？是不是少了流程測試？](/blog-program/bdd-with-vitest-cucumber.md): 單元、整合、突變測試全過，怎麼還是出包了？( ´•̥̥̥ ω •̥̥̥` )
- [測試覆蓋了卻還是有蟲蟲？來點突變吧！](/blog-program/what-is-mutation-testing-and-stryker.md): 測試覆蓋率蓋好蓋滿，卻還是有蟲蟲，有沒有一個更誠實的分數？
- [互動式視錯覺展](/blog-program/optical-illusion-museum.md): 拉動滑桿揭開錯覺真相，Web 上的互動式視錯覺展
- [Comlink 讓 Web Worker 不再難用](/blog-program/using-comlink.md): Web Worker 很棒，但 postMessage 用起來實在太痛苦了，讓 Comlink 來救場吧！( •̀ ω •́ )✧
- [懶有懶的好處，聊聊 Lazy Evaluation](/blog-program/remeda-lazy-evaluator.md): remeda 實作中有 lazy evaluator 有甚麼好處？來 Bench 一下看看◝( •ω• )◟
- [你是個成熟的 function 了，該自己記得結果了](/blog-program/improve-speed-using-memoization.md): 最近遇到從大矩陣資料找出指定資料的需求，是時候使用 memoization 來提升效能了。੭ ˙ᗜ˙ )੭
- [remeda piped 之 reference 問題](/blog-program/remeda-piped-references-problem.md): 使用 remeda piped 時，不小心給自己埋了地雷，來筆記一下。(。-`ω´-)
- [聽說 forEach 比 for 迴圈慢？](/blog-program/for-each-and-for-loop.md): 常聽到別人說特定情境下 forEach 比 for 迴圈還慢，剛好有個好機會，讓我來試試看吧。ԅ(´∀` ԅ)
- [要不要來點 Side Project 啊？ԅ(´∀` ԅ)](/blog-program/do-you-want-to-do-a-side-project.md): 分享一下鱈魚的 Side Project 靈感與發想。(๑•̀ㅂ•́)و✧
- [藉由 Sentry 讓錯誤無所遁形吧！](/blog-program/make-mistakes-invisible-with-sentry.md): 系統上線後常常遇到前端錯誤不好追蹤問題，使用者很難說得清楚發生甚麼事，Sentry 可以協助記錄錯誤，並且提供更多資訊，讓開發者更容易追蹤問題。
- [TypeScript 之 DX 體驗更好的列舉資料定義方式](/blog-program/better-enumeration-definition-for-improved-dx.md): 不管是 enum 和 literal 的方式其實都有些小缺點，以下推薦一個個人認為體驗更好的方式
- [回不去惹，用 await-to-js 讓你的 Promise 操作簡潔又俐落！](/blog-program/await-to-js-keeps-your-promises-slick.md): 可以在特定情境下簡化 Promise 寫法
- [好 pipe 不用嗎？藉由 remeda 讓程式碼更簡潔彈性吧！](/blog-program/remeda-pipe.md): pipe 代表函數式程式設計中的概念，利用多個功能結合在一起，資料依序通過每個功能進行處理

### Vue

- [一年後再看 Nuxt UI](/blog-vue/nuxt-ui-v4-revisited.md): 快一年前寫過 Nuxt UI v4 初探，當時列的坑補了幾個？這一年又多了哪些好東西？ლ（´∀`ლ）
- [用 Vue Router 的 Data Loader 解決 fetch 瀑布流問題](/blog-vue/solve-fetch-waterfall-with-data-loader.md): 元件層層嵌套，API 一個等一個？來看看 Vue Data Loader 怎麼解決 fetch 瀑布流問題。(ﾉ>ω<)ﾉ
- [AI 可能會寫的 Vue Composable 地雷，你踩過了嗎？](/blog-vue/vue-composable-outer-variable-trap.md): 把 ref 放在 composable 外面共用狀態，方便是方便，但是可能會埋下地雷喔。(´・ω・`)
- [JS Utility Function 和 Vue Composable，傻傻分不清楚](/blog-vue/js-util-vs-vue-composable.md): Vue composable，比一般的 JS function 多了些約定，讓我們來看看吧。(´・ω・`)
- [神隱的 DOM ref](/blog-vue/vue-v-once-preserve-canvas-ref.md): 註冊在 DOM 的事件莫名失效？來看看如何解決這個問題。(´・ω・`)
- [Vue template 編譯魔法](/blog-vue/vue-template-compilation-magic.md): 常聽別人說 Vue template 有編譯魔法，來仔細看看到底差在哪，順便看看酷酷的 Vapor 模式。ლ(´ڡ`ლ)
- [初探 Nuxt UI v4](/blog-vue/a-first-look-at-nuxt-ui-v4.md): Nuxt UI 釋出 v4 了，免費開放許多進階元件，馬上來研究看看 ლ（´∀`ლ）
- [自動解除的魔法呢？Vue Directive 和 Effect Scope](/blog-vue/vue-directive-and-effect-scope.md): Directive 內沒有自動解除響應式資料與副作用的魔法呦 (・∀・)
- [幫 Quasar Menu 加上 hover 開啟功能](/blog-vue/quasar-menu-hover-on-open.md): 原本想說應該很簡單，仔細探討後發現事情沒有像憨魚想的那麼簡單。(◉◞౪◟◉ )
- [Vue 之 triggerRef 問題](/blog-vue/vue-trigger-ref-problem.md): 前陣子使用 triggerRef 時發現某些情境下無法觸發響應，一起來看看發生甚麼事吧 (´・ω・`)
- [善用 computed](/blog-vue/make-good-use-of-computed.md): 常聽說不要把複雜的表達式寫在 template 裡，應先用 computed 裝起來，來試試有甚麼差別吧。ლ（´∀`ლ）
- [關於 Vue 資料流那檔事](/blog-vue/about-vue-data-flow.md): Vue 資料流實作筆記，還請大家多多指教 (*´∀`)~♥
- [Vue 的 shallowRef 是啥？和 ref 有甚麼差別？](/blog-vue/vue-shallow-ref-and-ref.md): 熟悉 Vue 的朋友們一定知道 `ref` 是啥，一起來看看 `shallowRef` 和 `ref` 有甚麼差別吧！ԅ( ˘ω˘ԅ)
- [Vue 3.5 更新，onWatcherCleanup 與 onCleanup](/blog-vue/vue-3-5-update-on-watcher-cleanup-with-the-forgotten-on-cleanup.md): Vue 3.5 更新新增了 onWatcherCleanup，用於清理 watcher 中的副作用（Side Effect），可是原本的 watch 已經有 onCleanup，所以到底差在哪呢？(╯▽╰ )
- [所以我說那個型別呢？來一個有形別提示的 Vue h function 吧！](/blog-vue/vue-h-function-with-type-hints.md): 先前提到 Quasar 的 Dialog Plugin 很好用，再讓我補充一個用法。ლ(╹◡╹ლ)
- [藉由 Vue h function 讓 Quasar Dialog 更簡單複用](/blog-vue/vue-h-function-makes-quasar-dialog-easier-to-reuse.md): Quasar Dialog 的 Invoking custom component 很好用，但是有些困擾的地方，一起來看看有甚麼辦法吧。
- [Vue 元件太肥，切換頁面卡卡怎麼辦？讓 Suspense 登場吧！](/blog-vue/use-suspense-to-load-components-asynchronously.md): 切換頁面卡卡有很多種原因，這裡舉的例子只針對元件太大的情境。除了想辦法拆分外，還有一個方法就是利用 Vue 的 Async Component。
- [誰偷了我的鳳梨！聊聊意外修改 Pinia 資料問題](/blog-vue/problem-with-accidentally-modifying-pinia-data.md): 有時候使用 Pinia 會遇到資料意外變更問題，這其實不是鳳梨的錯，讓我們看看怎麼回事吧。( ´ ▽ ` )ﾉ
- [Vue Reactive 使用筆記](/blog-vue/vue-reactive-cheat-sheet.md): 現在官方推薦使用 ref 就行，所以 reactive 還有甚麼用處呢？讓我們筆記一下。(。・∀・)ノ
- [Vue watch 前先小等一下](/blog-vue/hang-tight-for-a-sec-before-you-start-watch.md): watch 不是不能用，而是在使用 watch 之前，先想想有沒有其他方案，真的沒有才用 watch。
- [小心遺漏的 watch 讓網頁爆炸](/blog-vue/vue-watch-may-cause-a-memory-leak.md): 某些情境會讓 watch 不會自動解除，一起來看看吧！(ˊДˋ;)
- [Vue 泛型元件，讓 TypeScript 更精確](/blog-vue/vue-generic-components.md): Vue 3.3 終於新增了泛型元件（Generic Component），可以在 TypeScript 環境中得到更準確的型別提示了！ˋ( ° ▽、° )
- [其實 Vue 不一定要在 onMounted 取 API](/blog-vue/do-not-always-fetch-api-in-on-mounted.md): Vue 你還在 onMounted 中取 API 嗎？其實不一定要這樣做，來看看不同做法吧。( ͡~ ͜ʖ ͡°)

### 自己的工具自己做，用 Electron 仿造 PowerToys！

- [CodToys - EP01：緣起](/column-cod-toys/01-origin.md): 沒有順手的小工具怎麼辦？用 Electron 動手做一個吧！(´,,•ω•,,)
- [CodToys - EP02：功能選項](/column-cod-toys/02-feature-card.md): 上一章節我們完成了快捷鍵開關視窗功能，這一章節我們來實作功能選項部分吧！
- [CodToys - EP03：顏文字資料庫](/column-cod-toys/03-kaomoji-database.md): 上一章節我們完成了快捷鍵開關視窗功能，這一章節我們來實作功能選項部分吧！
- [CodToys - EP04：請支援近義詞](/column-cod-toys/04-kaomoji-add-llm.md): 忘記原本的關鍵字怎麼辦？請支援近義詞搜尋 ლ(╹ε╹ლ)

### 來個 3D 白噪音混音器

- [HexaZen - EP01：前言](/column-hexazen/01-origin.md): 同一個白噪音聽到快背起來了，來試試自己做一個 3D 白噪音混音器吧。◝(≧∀≦)◟
- [HexaZen - EP02：六角格與聲景系統](/column-hexazen/02-hex-grid-and-soundscape.md): 如何讓六角積木組合出千變萬化的自然音效？讓我們從座標系統開始聊起。✧⁑｡٩(ˊᗜˋ*)و✧⁕｡
- [HexaZen - EP03：音效播放引擎](/column-hexazen/03-soundscape-player.md): 怎麼讓白噪音不再重複？雙軌交叉淡入淡出加上隨機播放，讓耳朵不再疲勞。♪( ◜ω◝و(و
- [HexaZen - EP04：3D 場景互動](/column-hexazen/04-3d-scene-interaction.md): 讓積木可以放置、旋轉、移除，還有滑順的動畫與視覺效果。◝(≧∀≦)◟
- [HexaZen - EP05：天氣與粒子系統](/column-hexazen/05-weather-and-particles.md): 下雨了！用 GPU 粒子系統撒下 5 萬顆雨滴，再搭配射線投射讓水花不會浮空。ˋ( ° ▽、° )
- [HexaZen - EP06：積木選擇器與縮圖生成](/column-hexazen/06-block-picker-and-thumbnail.md): 30 多種積木怎麼讓使用者挑選？用無頭 Babylon.js 場景產生即時縮圖吧！ヾ(◍'౪`◍)ﾉﾞ
- [HexaZen - EP07：分享編碼與 URL 壓縮](/column-hexazen/07-share-codec.md): 每個積木只佔 25 bits，用 Bit-packing 把整個場景塞進一條短短的 URL 裡。(/≧▽≦)/
- [HexaZen - EP08：UI 設計與國際化](/column-hexazen/08-ui-and-i18n.md): 倒角邊框、聲景混音器、還有不用 vue-i18n 的輕量國際化方案。੭ ˙ᗜ˙ )੭
- [HexaZen - EP09：WebGPU 與效能優化](/column-hexazen/09-webgpu-and-performance.md): 最終章！WebGPU 優先策略、智慧鏡頭限制、還有各種讓體驗更流暢的小細節。✧⁑｡٩(ˊᗜˋ*)و✧⁕｡

### 鱈魚的 Shader 筆記

- [鱈魚的 Shader 筆記 - EP01：甚麼是 Shader](/column-shader-notes/01-shader-intro.md): 從 JavaScript 開發者的角度出發，一起來看看 Shader 的核心概念吧！(｢･ω･)｢✧
- [鱈魚的 Shader 筆記 - EP02：認識 Vertex Shader](/column-shader-notes/02-vertex-shader.md): 從 Attribute 到 Varying，搞懂 Vertex Shader 怎麼控制每個頂點的位置、大小與顏色！(｢･ω･)｢✧

### Other

- [`Promise<User>` 到底告訴了你什麼？來認識 Effect ( •̀ ω •́ )✧](/blog-program/getting-to-know-effect-ts.md): Promise<User> 到底告訴了你什麼？來認識把錯誤跟依賴通通寫進型別的 Effect ( •̀ ω •́ )✧
- [AI 都幫我寫好了，還需要管複雜度嗎？( ・ิω・ิ)](/blog-program/cyclomatic-complexity-in-the-ai-era.md): AI 很乖，需求一層一層疊上去，程式疊得比 100 還高 Σ(ˊДˋ;)
- [BeyBattle](/aquarium/beybattle.md): 組裝你的戰鬥陀螺，挑戰 AI 對手！
- [CodStack](/aquarium/codstack.md): 在網頁上組裝 3D 模型像疊積木一樣簡單 (・∀・)９
- [Cyber Scales Desktop](/aquarium/cyber-scales-desktop.md): 科幻風格的 Web Desktop 應用程式
- [Effect 接進真實專案是什麼感覺？Vue、NestJS、oRPC 通通試一遍 ( •̀ ω •́ )✧](/blog-program/effect-ts-in-real-projects.md): Effect 接進 Vue、NestJS、oRPC 是什麼感覺？順便實測效能，最後做一支 todo API ( •̀ ω •́ )✧
- [EnderBox](/aquarium/enderbox.md): 我把 Minecraft 搬到網頁上了！不過這次是操作終界使者，一起來挖方塊、瞬間移動吧！
- [HexaZen](/aquarium/hexazen.md): 組合多種場景並產生不同的自然音效
- [Minespace](/aquarium/minespace.md): 戴上耳機，在箱庭一隅聆聽。無盡白沙上散落二十二座木座箱庭，每座只收一種聲音的質地：連綿的風、稀疏的滴水、低頻的蛙鳴。
- [Minespace - EP01：從零打造一個方塊世界](/column-minespace/01-voxel-world.md): 從一張空白的畫布開始，架起引擎、光與霧，再把幾十萬顆方塊塞進一個繪製呼叫裡。%(｢･ω･)｢✧%
- [Minespace - EP02：燈火光暈](/column-minespace/02-lamp-glow.md): 方塊的自發光只讓燈自己是亮的，光沒有溢出來。想讓夜裡的石燈籠真的在發光，得在它前面掛一片會跟著鏡頭轉的圓盤。%( •̀ ω •́ )✧%
- [Minespace - EP03：日月光暈](/column-minespace/03-sky-glow.md): 天上那兩顆是方的。方形的太陽、有月海的月亮、一整片星空，全部共用同一套材質，差別只在那個自發光乘數。%( •̀ ω •́ )✧%
- [Minespace - EP04：接觸硬化陰影](/column-minespace/04-contact-shadow.md): 影子在柱腳要銳利、離遠了才化開，這樣柱子才是站在地上的。從 ShadowGenerator 最基本的用法一路做到 PCSS 與分層陰影。%( •̀ ω •́ )✧%
- [Minespace - EP05：雲影](/column-minespace/05-cloud-shadow.md): 天上飄著一整片方塊雲，地面卻從早到晚是同一個亮度。要把地上那塊暗補回來，得先認識材質外掛這套機制。%( •̀ ω •́ )✧%
- [Minespace - EP06：葉片透光](/column-minespace/06-leaf-translucency.md): 太陽在樹後面的時候，真實的葉子會透光，整棵樹在逆光裡是發亮的。方塊世界裡的樹卻剛好相反，背光那一側最暗。這一章用一次點積加一次次方把它換過來。%( •̀ ω •́ )✧%
- [Minespace - EP07：大氣透視](/column-minespace/07-aerial-perspective.md): 場景內建的霧只有一個顏色，走到底會出現遠山比天空還淡這種現實裡不存在的畫面。這一章用正規式把 Babylon 內建的霧那一行整段換掉。%( •̀ ω •́ )✧%
- [Minespace - EP08：水面高光](/column-minespace/08-water-glint.md): 靜水最有說服力的東西是太陽反在上面那一道光。這一章從 Blinn-Phong 講到法線擾動，順便講整套渲染裡唯一能突破亮度上限的那個通道。%( •̀ ω •́ )✧%
- [Minespace - EP09：岸線與漣漪](/column-minespace/09-water-shoreline.md): 湖心與腳邊的淺灘長得一模一樣，那片水就只是一塊藍色的蓋子。想讓水在岸邊自己浮出一圈白沫，得先自己再畫一趟深度。%( •̀ ω •́ )✧%
- [Minespace - EP10：水下焦散](/column-minespace/10-water-caustics.md): 少了水底那張晃動的亮網，一片水在視覺上就只剩「藍色的半透明蓋子」這一個作用。而重現它只要一張細胞紋，加上一張烘好的水位圖。%( •̀ ω •́ )✧%
- [Minespace - EP11：水面倒影](/column-minespace/11-water-mirror.md): 只映天空的話，池面上看得到雲飄過去，岸邊那圈石燈籠卻不在水裡，那片水面就成了一塊開在地上的天窗。%( ˘•ω•˘ )%
- [Minespace - EP12：雨後濕潤](/column-minespace/12-wetness.md): 濕的表面在物理上會同時變暗與變亮。只壓暗會變成髒，只加高光會變成上了一層蠟，兩件事得一起做。%( •̀ ω •́ )✧%
- [Minespace - EP13：空氣顆粒](/column-minespace/13-air-motes.md): 霧是一層數學，光束是一道後製，兩者之間什麼都沒有。要讓空氣看起來真的存在，得在裡面撒一把看得見的東西。%( •̀ ω •́ )✧%
- [Minespace - EP14：貼地晨霧](/column-minespace/14-ground-mist.md): 天亮前的那一段，地面上會積一層白。做這件事要兩套東西，近處的體積感靠粒子，遠處的層次靠一行霧的公式。%( •̀ ω •́ )✧%
- [Minespace - EP15：草叢踩踏](/column-minespace/15-grass-trample.md): 前面幾章的外掛都在改顏色，這一章改的是頂點的位置。風把草吹彎，人走過去草讓開，走遠了再慢慢站回來。%( •̀ ω •́ )✧%
- [Minespace - EP16：多重取樣](/column-minespace/16-multisampling.md): 方塊的斜稜線上永遠有一排階梯。抹開它有兩條路，而其中一條會順手把整片像素貼圖也一起抹掉。%( •̀ ω •́ )✧%
- [Minespace - EP17：打散色階](/column-minespace/17-dithering.md): 一整片藍天上浮出一圈一圈的等高線。八位元只有 256 階，而一條從天頂鋪到天邊的漸層剛好吃得下這麼多階。%( •̀ ω •́ )✧%
- [Minespace - EP18：體素全局光](/column-minespace/18-voxel-gi.md): 紅牆旁邊的地板該泛著一點紅。要在瀏覽器裡即時算出這道間接光，得先把整個世界壓成一份很粗的格子。%( •̀ ω •́ )✧%
- [Minespace - EP19：體積光束](/column-minespace/19-volumetric-light.md): 背對夕陽站在鳥居底下，光從身後穿過柱子與松枝灑進來。要看得到那一幕，得沿著每一條視線走一遍，還得問空氣願不願意把光散進眼睛。%( •̀ ω •́ )✧%
- [Untitled](/_frame.md)
- [快取梗圖](/aquarium/meme-cache.md): 常常找不到記憶中的梗圖嗎？我來幫你找找 ԅ(´∀` ԅ) 可用描述或圖中文字搜尋近千張迷因梗圖。
- [文章總覽](/article-overview.md): 來找吧！我把所有的文章都放在這了！
- [梗圖太糊怎麼辦？自動模糊偵測的踩坑之旅 %(・∀・)９%](/blog-ocean-world/meme-blur-detection.md): 如何用 Node.js 判斷梗圖是否模糊？從 Laplacian Variance 到分塊 P75，一路踩坑的演算法探索之旅
- [酷酷元件背後的星點 - EP01：前言](/column-chill-components/01-origin.md): 小廢物們背後的技術亮點
- [關於 Vue 元件拆分那檔事](/blog-vue/about-vue-component-splitting.md): 關於 Vue 元件拆分那檔事
- [音效來源](/public/minespace/sounds/CREDITS.md)
- [鱈魚的彈珠](/aquarium/codmarbles.md): 此專案沒有偉大的技術願景，純粹就是我想看東西滾來滾去而誕生的專案。(ゝ∀・)b