喜歡研究手帳術時間管理

寫過 WordPress 與手帳書籍的前端工程師

善用 Notion 行事曆,一次規劃行程與待辦事項

Notion 的行事曆功能提供了資料呈現的靈活性,適合用於行程與待辦事項的規劃。可以分開私人與工作行程,並識別小孩的活動。行事曆與待辦清單可用標籤管理,讓行程與待辦事項清晰可見。

行事曆使用 calendar view,待辦清單則用 table view,並設定提醒功能。選擇日期時可設置提醒,包含時與分的靈活選項,方便管理日常事務。這樣的設計讓行程安排更有條理,提醒功能則確保不會遺漏重要事項。...

陸劇 閃耀的她 觀後心得

秦嵐與王陽的 CP 吸引觀看,劇中秦嵐飾演女強人,演技成熟,但與王陽的 CP 感不足。劇情著重事業發展,32 集中大部分時間在描繪職場成就,感情線略顯突兀。管文角色強大,獨立不需戀愛對象,兩人職場合作展現強強聯手魅力。

劇中景知秋與陳萱萱的婚姻故事展示不同面向,王立仁忠於婚姻,支持妻子追求夢想;林浩則是虛偽,出軌對妻子不忠。婚姻應基於平等與愛,犧牲需衡量,無人應成附屬品。每個人都應成為獨立、閃耀的自己。...

透過 img object-fit 屬性取代 CSS 的 background 語法,輕鬆實現圖片背景的效果

在網頁開發中,使用 object-fit 屬性可取代 CSS 的 background 語法,輕鬆實現圖片背景效果。object-fit 支援 SEO,圖片可用 img 標籤寫在 HTML 檔案中,讓搜尋引擎更易索引。這避免了 background 將圖片寫在 CSS 檔案中,無法被搜尋引擎收錄的問題。

object-fit 可應用於圓形頭像、整齊縮圖排列、Banner 底圖等場景,保持圖片比例不變,提升 SEO 效果。這屬性提供了靈活的圖片顯示方式,簡化了代碼,適用於多數現代瀏覽器。object-position 也可用於調整圖片定位,進一步增強設計靈活性。...

在 Vite 專案中按需引入檔案,並自訂 chunk 分割代碼

在 Vite 專案中,按需引入檔案可減少不必要的資源載入。使用 Vue Router 的路由懶加載,將每個路由拆分成獨立的 chunk,僅在需要時載入相關檔案。設定 import 動態載入路由,能有效提升效能。

完成路由懶加載後,若發現過大的檔案,可使用 Vite 的 build.rollupOptions.output.manualChunks 手動拆分 node_modules 的 package。對於 element-plus 等框架,使用其內建的按需引入功能。另可透過 vite-plugin-compression 插件進行 gZip 壓縮,減少檔案大小,提升載入速度。...

用 v-html 來載入語系檔案的缺點與解決方案

用 v-html 會導致 XSS 攻擊風險,因為 HTML 標籤直接暴露。為了避免這種風險,可以使用替換參數的方法。將語系中的 HTML 標籤替換為參數,如 ${0},然後在 template 中使用 標籤來替換參數,這樣可以避免安全漏洞。

這種方法不僅提高了網站安全性,還避免了 console 報錯。建議檢查網站是否有類似問題,並採用這種寫法來增強安全性。...

Vue 父元件傳遞 API 資料給子元件

Vue 父子元件可以傳遞資料,但若在 onMounted 時渲染非即時資料,可能會報 undefined。此時可使用 watch 監聽資料變化,確保父元件資料改變時,子元件能即時處理。

使用 Vue3 + TypeScript + setup 語法糖,父元件透過 props 傳遞資料給子元件,子元件利用 watch 監聽 props.data,資料變化時執行 fetchData 操作,達到資料同步更新。...

用 CSS 製作垂直滾動的跑馬燈

HTML 的 標籤已被淘汰,但可以用 CSS 製作垂直滾動的跑馬燈。需要一個包含多張圖片的容器,並設置樣式來實現效果。使用 CSS 變數設定圖片間距、滾動時間等。.marquee 容器使用 flex 布局,隱藏溢出內容。

aria-hidden="true" 用於隱藏第二個 .marquee--group,避免滾動時出現空白。--scroll-end: calc(-100% - var(--gap)); 確保無縫滾動。調整滾動速度和間距,只需修改 CSS 變數。...

用 React Hook 規劃路由

學習 React 路由時,需自行處理更多細節,並了解底層邏輯。利用 React Hook 將類似 Vue 的功能串聯,如 router-view 和導航守衛。未登入時,所有網址跳轉至 /login;登入後顯示固定元件,並根據不同網址渲染對應元件。建立 PublicRoute 和 ProtectedRoute 來實現導航守衛,並在 Routes.tsx 中配置路由。最後在 App.tsx 渲染路由元件,根據 token 顯示 Navbar。...

使用 Vue 自定義指令(custom directive)製作網站權限

Vue 支援自定義指令,如 v-role,可用來設計網站權限。只需在 template 中使用 v-role 設定會員權限即可。這些指令可應用於 router,實現選單的顯示與隱藏,並可連接後端資料庫動態修改會員權限。

main.ts 中定義指令,並封裝後匯入。使用 pinia 管理 roles data,或暫存於 localStorage。設置 router meta 定義不同權限的訪問路由,使用 nav guard 確保未授權用戶被導回 /home。...

Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.