項目案例 (46 篇文章)

個人項目展示 (1) 開源貢獻 (19) 博客系統開發 (30) 技術實踐總結 (6)

黑客松不是工程師專利：AI、自學者與非技術人的實戰指南

非工程師也能參加黑客松？這篇 AMA 回顧分享 AI 工具、自學技巧與非技術角色的實戰參與方式，讓每個人都能在創新場域中找到價值定位。

April 19, 2025

Astro 實作教學：打造高效滾動進度條的完整範例

在現代網頁開發中，滾動進度條已成為提升用戶體驗的重要元素，它能直觀地向訪客展示頁面閱讀進度。本文將深入探討如何利用 Astro 框架創建一個高效、輕量級的滾動進度條，並分析其背後的技術原理與優勢。Astro 作為一個專注於性能的現代前端框架，為此類功能實現提供了優秀的開發體驗與執行效率。

April 10, 2025

前端除錯新境界：用 CSS 為 console.log 加上顏色與樣式

使用 CSS 為 console.log 加上顏色與樣式，讓前端除錯變得更直觀有效。本文介紹如何利用 %c 格式說明符，在 Google Chrome 開發者工具中實現彩色輸出，並提供多種實用範例與應用技巧。

April 9, 2025

首戰 Web3 黑客松，用 React 打造 Web3 儀表板，勇奪 1inch 賽道銀獎！

第一次參加 Web3 黑客松就獲獎？這篇文章記錄我如何用 React、TypeScript、Tailwind 與 RainbowKit 打造 OrbitGO，36 小時完成一個多鏈資產儀表板的開發心得。

April 8, 2025

Wagmi 使用指南：以 React 快速建立高效區塊鏈應用

Wagmi 是一個專為以太坊應用程序設計的 React Hooks 集合，提供開發者所需的一切工具，使區塊鏈前端開發變得簡單高效。通過類型安全、可擴展和模塊化設計，Wagmi 讓開發者能夠專注於構建高性能的區塊鏈前端體驗，而不必擔心底層複雜性。

April 3, 2025

Astro 是什麼？專為內容驅動網站設計的高效前端框架

Astro 是專為內容導向型網站而生的超輕量框架，兼具極速效能與自由整合力，本文將從實戰角度出發，帶你深入理解為何我從 GatsbyJS 遷移至 Astro。

April 1, 2025

使用 Cloudflare Worker、Hono 和 Telegram Bot API 構建 RSS 訂閱推送系統

本文將詳細介紹如何使用 Cloudflare Worker、Hono 框架和 Telegram Bot API 構建一個自動化系統，該系統能夠監控 RSS 訂閱源並將最新更新推送到 Telegram 頻道。這個解決方案完全基於 Serverless 架構，無需管理伺服器，且大部分情況下可以在 Cloudflare 的免費方案內運行，非常適合個人開發者和小型團隊使用。

March 18, 2025

利用 AutoCorrect 與 GitHub Actions 提升繁體中文寫作品質

AutoCorrect 是一個強大的文案格式化工具，能夠自動糾正中日韓（CJK）與英文混合使用時的常見問題，如標點符號、空格等。本文將介紹如何透過 GitHub Actions 的自動化工作流程，讓您的繁體中文文章在推送到 GitHub 時自動進行格式化，有效提升文章的專業度和可讀性。

March 16, 2025

MyGO!!!!! Telegram 機器人：邊緣計算與動漫文化的融合

MyGO!!!!! Telegram 機器人是一個結合了現代邊緣計算技術與動漫文化的創新項目。這個基於 Grammy 和 Hono 框架構建的 Telegram 機器人，能讓用戶通過關鍵詞搜索 MyGO!!!!! 的圖片。本文將深入探討該機器人的背景、技術實現和功能特點，展示如何利用 Cloudflare Workers 部署高效能的 Telegram 機器人。

March 15, 2025

AI 代理 2025 年進入職場，提升企業生產力

解析 OpenAI CEO Sam Altman 對 AI 代理在 2025 年進入職場的預測，探討其對企業生產力和全球經濟的影響。

January 6, 2025

從零開始的 dApp 開發：2024 年學習路線圖

Web3 的機會已經來臨，接下來的三個月，我必須全力以赴。以下是我 2024 年的學習計畫：

December 18, 2023

淺談單一功能原則：編寫更易讀技術文章的關鍵

當我寫過八十篇技術文章之後，我發現技術文章越是簡單，越有效地傳播知識。這裡分享一下如何運用單一功能原則寫出更加容易理解的技術文章。

December 6, 2023

給過去的的自己的一封信：如何自學轉行成爲前端工程師？

最近，一些朋友向我詢問如何自學成為前端工程師，這讓我回想起五年前我自己曾經處於迷茫的交叉路口。當時，我正面臨著轉行的艱鉅挑戰，但我絕不願意放棄。我開始執筆技術文章，並積極參加各種技術競賽。我希望這封信能夠超越時間的限制，給予過去的自己對未來的期望：

December 4, 2023

如何使用 Astro 404 頁面重定向正確的文章頁面？

在博客的反向連結（backlink）檢查過程中，發現許多網站引用我的技術文章。然而，由於年代久遠，這些網站使用的連結往往導向 404 頁面，所以我就在 Astro 的 404 頁面寫一段代碼解決這個問題。

November 30, 2023

Cloudflare Pages、Worker 和 KV：實現伺服器端渲染的強大組合

當今的數位世界中，網站用戶要求即時、動態和高度互動的體驗。我們需要確保用戶始終能夠訪問最新的內容，同時保持優秀的性能。在這方面，透過結合 Cloudflare Pages、Worker 和 KV，我們可以實現伺服器端渲染，提供動態且實時的內容，從而提升網站的性能和可用性。本文將深入探討這三個工具，解釋它們如何協同運作，以實現即時伺服器端渲染，提供更出色的用戶體驗。

November 23, 2023

Astro、Tailwind CSS 和 Animate.css：提升網站性能和設計風格的關鍵工具

我們在提供出色的用戶體驗的同時，也要顧及前端工程師的開發體驗。本文將帶您深入了解我常用的核心技術：Astro、Tailwind CSS 和 Animate.css，它們為前端工程師提供了更高效的工作方式，同時帶來更優秀的性能、設計和互動體驗。

November 20, 2023

回顧我的 2023 開發者生涯：前端、後端、雲端、到 Web3

2023 年，我回到香港，從全棧工程師，行過死蔭幽谷，現在成爲系統架構師。能夠在 Web3 的世界自由自在地行走，十分感激當初的百般試煉。現在，就讓我回顧這一年我採用的前端後端雲端 Web3 方案，希望可以拋磚引玉

October 13, 2023

優雅地使用 Storybook 建立 React.js 組件

Storybook 最大的優點是它可以提供不同的頁面來顯示組件的不同狀態，讓我們在各種不同的情況下測試和評估組件。通過為不同狀態創建不同的頁面，我們可以輕鬆地測試組件。另外，Storybook 也可以輸出一個 Static Website，可以輕鬆分享給設計師和其他團隊成員，讓他們容易理解組件的外觀和行為。

January 11, 2023

如何透過 ZEIT 方便快捷地部署免費的 Node.js 項目？

ZEIT 平台提供了免費的網站空間平台給開發者，我們可以透過 ZEIT 平台來部署 Node.js, Express.js, Koa.js 等應用。如果你有寫過 Node.js 應用，又想找個免費空間部署這些應用的話，那麼 ZEIT 會是一個不錯的選擇。

March 4, 2019

為什麼函數式組件需要引進 React？

在編寫組件時，最讓我迷惑的是在我編寫純函數組件，為什麼沒有在代碼裡面調用 React 都需要導入 React。經過一番調研，我發現是因為 JSX 轉譯的設定。不過，人是比較懶惰的，透過安裝 babel-plugin-react-require 插件，達到自動導入 React 的效果。這篇文章將會講述我的調研經歷和一點反思。

February 26, 2019

超好用的全棧項目部署構建平台 - Netlify, ZEIT

如果你想要部署自己的前端項目的話，那麼 Netlify 提供了一個一站式的解決方法，讓你可以持續部署，以及自動開啟 HTTPS。如果你想要部署 Node.js 應用的話，那麼 ZEIT 會是另外一個解決方案。

February 17, 2019

GatsbyJS 入門（三）：從零開始架構 React 靜態網站

GatsbyJS 提供了一個簡單易用的命令行工具，我們可以透過它來構建一個基本的 React 網站，並實時看到修改代碼所帶來的變化。

January 16, 2019

從博客系統回顧我的 2018 年前端生涯

時光飛逝，我已從大學畢業成為前端工程師。回想這一年，我完成了三件事情：改版博客系統，讓不同用戶可以快速啟動項目，它是我第一個過百 Star 數的項目；翻譯並校對技術文章，學習了不少前端實用的技術；對博客系統框架的 GatsbyJS，ReactJS 技術研究。

December 24, 2018

基於 GatsbyJS 的博客系統正式開源：gatsby-starter-calpa-blog，及其使用方法

感謝各位這些年來閱讀我的博客文章，以及優化博客系統框架，現在，我將為你帶來一個前後端徹底分離，而且可以一鍵啟動的博客框架。

December 3, 2018

GatsbyJS 入門（二）：如何以 Starter 快速架構網站

上次我們提到 GatsbyJS，它是一個可以獲取任意數據，並生成靜態化網站的系統。這一次，就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧

November 23, 2018

GatsbyJS 入門（一）：打造開箱即用的現代化前端網站

GatsbyJS 是一個現代化開發網站的網站產生系統，擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用，讓前端工程師，編輯，用戶都感到滿意。就讓我們一步步地探索這個系統吧。

November 16, 2018

前端工程師的日常修煉清單

學習如逆水行舟，不進則退。透過這個清單，我可以不斷學習前端知識，掌握更新的技能，天天進化。

November 5, 2018

Hackoberfest 2018 ﹣ 面向所有人群的開源社區最大活動

世界上不同的程序員，因開源活動而連接一起。這次 Hacktoberfest 活動除了可以拿到活動的限量衣服和貼紙之外，更可以認識到世界上不同的程序員。我看著不斷而來的討論和 PR，我找回了自己在編程上的熱情。如果你有興趣參與開源活動，但不知道如何入手的話，它會是一個不錯的起點。

October 9, 2018

【譯】以申請大學流程來解釋 JavaScript 的 filter 方法

如果你熟悉申請大學流程的話，你也可以理解 JavaScript 的 filter 方法。相對於 JavaScript 裡面的 map() 和 reduce() 方法來說，filter() 方法也許是最一目了然的方法。

September 17, 2018

Google Chrome 69 地址欄隱藏子域名後暴露的安全問題

定期更新軟件可以修復其自身的漏洞，即使是 Google Chrome，它的更新也是有安全問題的。在 Chrome 69 的版本裡面，`www` 被認定為 `trivial` 的子域名，因而隱藏了它之前的字眼。雖然可以提升一點用戶體驗，但卻帶來了另外一個風險點。

September 7, 2018

關於 2018 年的 Calpa Liu

你好，歡迎來到我的博客。我是 Calpa，一個喜歡寫技術文章的前端程序員。

May 1, 2018

Gatsbyjs async/await 更新報錯解決方法

當我在更新 gatsbyjs 本體和 `gatsbyjs-*` 插件後，就發現構建 JavaScript 代碼的時候失敗。解決問題的過程，需要多聯想關鍵字。但簡單來說，只要安裝正確的 babel 轉換插件，就可以解決這個問題。

March 21, 2018

美化 console.log 輸出

console.log() 這一個方法可以說是前端工程師最常用的調試方法之一。當我在研究音樂播放器 Aplayer 源碼的時候，發現其中有一行有趣的代碼，可以在 console 裏面輸出自帶顏色的圖案，故在此記錄一下。

March 4, 2018

又到了年度總結的季節 ﹣ 我的 2017 前端開發回顧

從最初的失望與後悔，到最後的興奮與感動，2017 年可以算是充滿挑戰與機遇的一年。雖然我依然是一個非科班學生，但是這沒有阻止我轉行成為前端工程師，反而成為向前邁進的動力之一。如果沒有這些經歷，我也不會發現自己對於編程的那份熱愛。在此，就讓我回顧一下這一年在自學編程轉行的經歷吧。在開始這篇文章之前，我先戴上頭盔，以防意外。

December 31, 2017

你可能不知道的 JavaScript 代碼規範

良好的代碼規範，能夠提高代碼的可閱性，使得項目維護更友好。除了自己設定一個規範外，我們也可以借鑒一下現在流行的代碼規範，讓我們成長之後，再去看細節。

November 8, 2017

參加八次黑客馬拉松的個人體會與總結

與其說黑客馬拉松是一場比賽，不如說它是一場程序員的盛會。作為一個前端開發者，也是蠻喜歡參加這樣的比賽。畢竟可以把自己的想法，在 24 小時之內把自己的想法，或是按著比賽主題做個原型出來。無論你是什麼技術背景的人，都歡迎你來參與這些盛會。

November 6, 2017

【圖多】《遠征成功﹣﹣一個香港人北上杭州豬場的前端面試之路》

首先，我要感謝網易。作為一個香港人，能夠拿到杭州的面試機會，實屬機會難得。這次的兩輪技術面試，考察點廣泛而深入。雖然問題比較深入，但這讓我感覺對於技術要求比較高，這是一件好事，因為可以反映公司對於技術的重視。在大四的這一年裡，我會繼續努力，爭取時間學習一個。本文將會記錄我面試時遇過的問題，以及作為一個香港人在杭州遇到的困難。

September 30, 2017

React-markdown -- 實時渲染 Markdown 的 React 工具

React-markdown 可以把 markdown 語句轉譯為 React 組件，十分方便使用。

August 31, 2017

項目代碼調試：提問前要做的六個步驟

上天對於每個地球人都是公平的，每個人都一天只有 24 小時。為什麼有的人會停留不前，有的人卻會不斷有所成長？其中一個原因是當遇到問題時，他們解決問題的方法是非常不同的。同樣是遇到問題，與其伸手，等其他程序員幫助去解決問題，倒不如自己先嘗試各種方法，然後才問人家。我會在這篇文章簡單說一下在你提問之前，你可以做的六個步驟。

July 24, 2017

簡單易用的開源 JavaScript 動畫圖標庫 -- Titanic

如果你用過 Font Awesome 等圖標，你可能會覺得它們很好看，用起來很很方便。但是，在用戶點擊這些圖標的時候，它們是不會有反應的。如果有這些圖標會動的話，那就更加好。Titanic 提供一系列的動畫圖標，以及以 JavaScript 的調用圖標動畫的方法。

July 6, 2017

【翻譯】前端性能優化必備工具清單

在網頁開發的世界裡，尤其是前端開發，我們會用很多時間尋找最好的設計，以及最好的內容。雖然這是沒有錯的，但是，我們會忘記去優化我們的網頁。這會讓用戶需要很久的時間，比如說，瀏覽器需要六秒到十秒以上才能完成整個渲染過程。在這篇文章，我會分享優化網頁的檢查清單。如果你覺得我有錯漏的地方，請在下面留言。這張清單會包含一些優化搜尋引擎排名 (SEO) 的技巧，以及減少網頁加載時間的最佳實踐。

June 19, 2017

2017 年香港開源年會後記

大約兩個星期之前，我在 Facebook 上看到 2017 年的香港開源年會的消息。我想，我是不是可以透過這個機會，認識一下不同領域的程序。於是，我在 EventBrite 上面買了學生票。但最終我拿到 VIP 票了，感覺有點激動。我把這一次的會議做了幾點筆記，也許，每一個人都應該參加最少一次如此有規模的大會。我會在這裡說說我參與這次會議所發生的一些事。

June 14, 2017

香港開放數據平台 - 從入門到放棄

經過 2017 年香港開源年會之後，我都沒有去看香港的開放數據做得怎麼樣。今天香港正懸掛八號風球，正好是一個機會去了解一下。香港政府有一個開放數據平台，資料一線通，以多種檔案格式提供多個政府部門類別，機構的一些查詢資料，比如說天氣預報，中學教育統計資料。值得注意的是，這些檔案並不是 ODF，而是 xls, xml, csv, json, gif, txt, tif。

June 12, 2017