fallback機制
記錄一下看前端文章一直看到的fallback。 「fallback」的意思簡單來說就是當程式碼沒有正確執行時的一個備選方案或應急策略。譬如： 預期圖片如果沒有正確載入而執行的onerror事件 寫CSS font-family會寫成 { font-family: super-fancy-font, Arial, sans-serif } 避免網站不支援第一種字型 React Suspense
Lun's Blog
Latest articles
Vue: readonly的代理坑
最近寫composable要 return 響應式變數，因為希望外部在使用這個composable的時候不要去改動到這個響應式變數，故使用 readonly 去包覆這個響應式變數： // useComposable.js import { readonly } from "vue"; export default useComposable(){ const nested = re
Pinia: 在Vue元件以外安全地使用pinia
最近才發現Pinia跟React全域狀態管理的使用方式不一樣，有個很方便的特性是，如果要在Vue元件以外使用，只要pinia store是在 app.use(pinia) 後呼叫即可使用，其中更能確保pinia store被呼叫的方式是──在函式(function)內使用： The easiest way to ensure this is always applied is to defer
JS: Barrel file隱含的問題
以前實習時候學到用barrel file管理模組，因為可以讓模組管理變得很一目了然、import的時候可以一行引入多個模組，所以工作後仍持續使用barrel file，結果後來才發現barrel file其實藏有蠻多潛在問題： 降低開發體驗 以Vite開發模式來說，即便只引用barrel file內其中一個模組，Vite在初始化的時候需要時間去解析和轉換barrel file裡面所有export出
Vite: 引用svg檔案為React Component—使用vite-plugin-svgr v4
最近要更新專案的套件，發現svg引入方式跟以前稍微有點不同，所以記錄一下。 svg檔案如果是以 <img />的方式引入檔案就無法改變svg的屬性，譬如path等。那如果想要可以彈性一點，希望svg檔案能隨專案的色系變化，就要改以React component的方式引入。 要以component方式引入，首先安裝 vite-plugin-svgr 套件，如果版本是v4.0.0以後的要在vite.
AWS: 終止Amplify pending state
工作會使用Amplify部署專案，結果碰到Amplify一直顯示pending狀態，而且沒辦法透過Amplify本身的console面板去終止上傳。 後來看到stackoverflow網友的解法，可以用AWS cli去停止上傳，不過這要先設定個人的access key。 設定access key 💡 access key和secret access key只會顯示一次，所以要保存好。 使用AWS CLI終止pending狀態 安裝AWS CLI設定好個人的access...
Git: submodule指令
之前有鑑於工作處理的專案愈來愈多，面臨到程式碼在不同專案重複的問題。基於程式碼只能在公司內部發布使用，找了一些方法，如果不想用引入套件的方式去共用程式碼，可以用git submodule去處理。 基本操作指令 子模組路徑 <submodule_dir> 要是不存在的目錄，不可先建立空目錄 # 新增submodule $ git submodule add <remote_repo_url> <submodule_dir> # 查看子模組目前版本 $ git submodule $ git su...