2024-05-12 Web Image Optimization：網頁圖片優化：從基本概念到避免 CLS 的最佳實踐 Development 圖片是網頁設計中不可或缺的元素，但不當的處理方式可能導致頁面載入速度變慢，甚至影響用戶體驗和 SEO 排名。本文將深入探討網頁圖片優化的基本概念，包括圖片格式、HTML 標籤的使用，以及如何避免 Cumulative Layout Shift（CLS）問題，提供一系列最佳實踐，幫助你打造出更快、更穩定、更高效的網站。 Read more →
2024-05-08 使用 JavaScript 原生 Intl.NumberFormat 輕鬆實現數字格式化和貨幣標示 Development 在前端開發中，數字格式化和貨幣標示是常見的需求。過去通常需要借助第三方函式庫或自行編寫程式碼來處理，現在 JavaScript 提供了原生的 Intl.NumberFormat 物件，讓數字格式化和貨幣標示變得更加方便。本文介紹了 Intl.NumberFormat 的使用方式，包括 locales 和 options 參數的設置，以及如何使用 format 方法獲得格式化後的結果。 Read more →
2024-05-06 深入理解 CSS 中的格式化上下文與 Box Model Development 想要精通 CSS 佈局，就必須了解格式化上下文（Formatting Context）和 Box Model 的概念。本文將深入探討 BFC、IFC、GFC、FFC 的特性和應用，同時也會說明 Box Model 的計算方式，以及常見的外邊距折疊問題。 Read more →
2024-05-02 Webpack vs Vite：前端建置工具優缺點比較與應用場景 Development 比較 Webpack 和 Vite 兩大前端建置工具的優缺點，包括建構速度、學習成本、打包設置精細度、生態系成熟度等，並分析其應用場景，助您選擇最適合專案需求的建置工具。 Read more →
2024-04-30 7種常見的專案架構管理模式：優缺點分析與應用場景 Development 了解7種常見的專案架構管理模式：Monorepo、Multi-repo、微服務、模組化單體、外掛、分層架構，分析各自的優缺點、特性以及適用場景。 Read more →
2024-04-29 【前端開發必備工具系列】之三：pnpm - 更快、更節省空間的套件管理方案 Development 本篇介紹 pnpm 的特性與使用方式，以及深入瞭解 pnpm 的原理，當中包含了硬連結與符號連結的概念。 Read more →
2024-04-28 【前端開發必備工具系列】之二：yarn - 現代化的 JavaScript 套件管理工具 Development 本篇介紹由 facebook 開發，替代 npm 的管理工具——yarn，以及其的使用方式以及其優點。 Read more →
2024-04-27 【前端開發必備工具系列】之一：掌握 npm、nvm、npx，優化你的開發流程 Development 本篇介紹 npm、nvm 和 npx 的使用方式，以及如何透過這些工具來優化你的開發流程。 Read more →
2024-04-24 設計一個程式碼部署系統 心得 Development 早期大概三四年前，前端要簡易部署到雲服務，大部分是通過 PaaS 平台，那時候比較流行是用 heroku，當時需要在自己的專案上面裝 heroku-cli 工具，使用 command Line 才可以部署上服務，我依稀記得為了這件事我好像還串 CI/CD（那時候還沒有 Github Action），但現在已經不用這麼辛苦了。 Read more →
2024-04-22 快速建置 Line LIFF App Development Line LIFF 全名是 Line Front-end Framework，是由 Line 平台推出的一種前端框架，除了讓用戶可以省略這個步驟，增強用戶體驗的好方法。 Read more →
