Astro 是專為內容導向型網站而生的超輕量框架,兼具極速效能與自由整合力,本文將從實戰角度出發,帶你深入理解為何我從 GatsbyJS 遷移至 Astro。
當我寫過八十篇技術文章之後,我發現技術文章越是簡單,越有效地傳播知識。這裡分享一下如何運用單一功能原則寫出更加容易理解的技術文章。
最近,一些朋友向我詢問如何自學成為前端工程師,這讓我回想起五年前我自己曾經處於迷茫的交叉路口。當時,我正面臨著轉行的艱鉅挑戰,但我絕不願意放棄。我開始執筆技術文章,並積極參加各種技術競賽。我希望這封信能夠超越時間的限制,給予過去的自己對未來的期望:
在博客的反向連結(backlink)檢查過程中,發現許多網站引用我的技術文章。然而,由於年代久遠,這些網站使用的連結往往導向 404 頁面,所以我就在 Astro 的 404 頁面寫一段代碼解決這個問題。
當今的數位世界中,網站用戶要求即時、動態和高度互動的體驗。我們需要確保用戶始終能夠訪問最新的內容,同時保持優秀的性能。在這方面,透過結合 Cloudflare Pages、Worker 和 KV,我們可以實現伺服器端渲染,提供動態且實時的內容,從而提升網站的性能和可用性。本文將深入探討這三個工具,解釋它們如何協同運作,以實現即時伺服器端渲染,提供更出色的用戶體驗。
我們在提供出色的用戶體驗的同時,也要顧及前端工程師的開發體驗。本文將帶您深入了解我常用的核心技術:Astro、Tailwind CSS 和 Animate.css,它們為前端工程師提供了更高效的工作方式,同時帶來更優秀的性能、設計和互動體驗。
2023 年,我回到香港,從全棧工程師,行過死蔭幽谷,現在成爲系統架構師。能夠在 Web3 的世界自由自在地行走,十分感激當初的百般試煉。現在,就讓我回顧這一年我採用的前端後端雲端 Web3 方案,希望可以拋磚引玉
ZEIT 平台提供了免費的網站空間平台給開發者,我們可以透過 ZEIT 平台來部署 Node.js, Express.js, Koa.js 等應用。如果你有寫過 Node.js 應用,又想找個免費空間部署這些應用的話,那麼 ZEIT 會是一個不錯的選擇。
如果你想要部署自己的前端項目的話,那麼 Netlify 提供了一個一站式的解決方法,讓你可以持續部署,以及自動開啟 HTTPS。如果你想要部署 Node.js 應用的話,那麼 ZEIT 會是另外一個解決方案。
GatsbyJS 提供了一個簡單易用的命令行工具,我們可以透過它來構建一個基本的 React 網站,並實時看到修改代碼所帶來的變化。
時光飛逝,我已從大學畢業成為前端工程師。回想這一年,我完成了三件事情:改版博客系統,讓不同用戶可以快速啟動項目,它是我第一個過百 Star 數的項目;翻譯並校對技術文章,學習了不少前端實用的技術;對博客系統框架的 GatsbyJS,ReactJS 技術研究。
感謝各位這些年來閱讀我的博客文章,以及優化博客系統框架,現在,我將為你帶來一個前後端徹底分離,而且可以一鍵啟動的博客框架。
上次我們提到 GatsbyJS,它是一個可以獲取任意數據,並生成靜態化網站的系統。這一次,就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧
GatsbyJS 是一個現代化開發網站的網站產生系統,擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用,讓前端工程師,編輯,用戶都感到滿意。就讓我們一步步地探索這個系統吧。
學習如逆水行舟,不進則退。透過這個清單,我可以不斷學習前端知識,掌握更新的技能,天天進化。
世界上不同的程序員,因開源活動而連接一起。這次 Hacktoberfest 活動除了可以拿到活動的限量衣服和貼紙之外,更可以認識到世界上不同的程序員。我看著不斷而來的討論和 PR,我找回了自己在編程上的熱情。如果你有興趣參與開源活動,但不知道如何入手的話,它會是一個不錯的起點。
你好,歡迎來到我的博客。我是 Calpa,一個喜歡寫技術文章的前端程序員。
當我在更新 gatsbyjs 本體和 `gatsbyjs-*` 插件後,就發現構建 JavaScript 代碼的時候失敗。解決問題的過程,需要多聯想關鍵字。但簡單來說,只要安裝正確的 babel 轉換插件,就可以解決這個問題。
console.log() 這一個方法可以說是前端工程師最常用的調試方法之一。當我在研究音樂播放器 Aplayer 源碼的時候,發現其中有一行有趣的代碼,可以在 console 裏面輸出自帶顏色的圖案,故在此記錄一下。
從最初的失望與後悔,到最後的興奮與感動,2017 年可以算是充滿挑戰與機遇的一年。雖然我依然是一個非科班學生,但是這沒有阻止我轉行成為前端工程師,反而成為向前邁進的動力之一。如果沒有這些經歷,我也不會發現自己對於編程的那份熱愛。在此,就讓我回顧一下這一年在自學編程轉行的經歷吧。在開始這篇文章之前,我先戴上頭盔,以防意外。
與其說黑客馬拉松是一場比賽,不如說它是一場程序員的盛會。作為一個前端開發者,也是蠻喜歡參加這樣的比賽。畢竟可以把自己的想法,在 24 小時之內把自己的想法,或是按著比賽主題做個原型出來。無論你是什麼技術背景的人,都歡迎你來參與這些盛會。
首先,我要感謝網易。作為一個香港人,能夠拿到杭州的面試機會,實屬機會難得。這次的兩輪技術面試,考察點廣泛而深入。雖然問題比較深入,但這讓我感覺對於技術要求比較高,這是一件好事,因為可以反映公司對於技術的重視。在大四的這一年裡,我會繼續努力,爭取時間學習一個。本文將會記錄我面試時遇過的問題,以及作為一個香港人在杭州遇到的困難。
上天對於每個地球人都是公平的,每個人都一天只有 24 小時。為什麼有的人會停留不前,有的人卻會不斷有所成長?其中一個原因是當遇到問題時,他們解決問題的方法是非常不同的。同樣是遇到問題,與其伸手,等其他程序員幫助去解決問題,倒不如自己先嘗試各種方法,然後才問人家。我會在這篇文章簡單說一下在你提問之前,你可以做的六個步驟。
在網頁開發的世界裡,尤其是前端開發,我們會用很多時間尋找最好的設計,以及最好的內容。雖然這是沒有錯的,但是,我們會忘記去優化我們的網頁。這會讓用戶需要很久的時間,比如說,瀏覽器需要六秒到十秒以上才能完成整個渲染過程。在這篇文章,我會分享優化網頁的檢查清單。如果你覺得我有錯漏的地方,請在下面留言。這張清單會包含一些優化搜尋引擎排名 (SEO) 的技巧,以及減少網頁加載時間的最佳實踐。
大約兩個星期之前,我在 Facebook 上看到 2017 年的香港開源年會的消息。我想,我是不是可以透過這個機會,認識一下不同領域的程序。於是,我在 EventBrite 上面買了學生票。但最終我拿到 VIP 票了,感覺有點激動。我把這一次的會議做了幾點筆記,也許,每一個人都應該參加最少一次如此有規模的大會。我會在這裡說說我參與這次會議所發生的一些事。
經過 2017 年香港開源年會之後,我都沒有去看香港的開放數據做得怎麼樣。今天香港正懸掛八號風球,正好是一個機會去了解一下。香港政府有一個開放數據平台,資料一線通,以多種檔案格式提供多個政府部門類別,機構的一些查詢資料,比如說天氣預報,中學教育統計資料。值得注意的是,這些檔案並不是 ODF,而是 xls, xml, csv, json, gif, txt, tif。
從第一篇《Hello World》文章,我已經開始寫博客半年了,一共寫三十多篇,平均一個禮拜出一篇文章。其實,我沒有想那麼多,直接就開始寫文章了。可能我的博客沒有其他人寫得那麼好,但是我依然堅持寫博客。每一篇文章是需要一點時間構思、撰寫,但是這點時間是很值得的。
Hello World
二十一世紀的鍊金術士,以 AI 為觸媒,將想法具現化,以邏輯築陣、用創作構築可能。
從 2017 年開始寫作,目前已累積 292 篇煉金筆記。
如果你有 AI 專案、網站開發或技術整合需求,歡迎來信交流: partner@calpa.me
離職後我沒投履歷,改用 AI 工具建立每日寫作與實作節奏,打造可擴展的創作系統。這篇文章記錄這段失業期間的節奏、過程與轉機,也是一場關於「如何被看見」的真實實驗。
2025年6月12日
4944 分享
React 開發團隊於 2025 年 2 月 14 日正式宣布淘汰 Create React App (CRA),並鼓勵開發者轉向使用現代框架或構建工具如 Vite、Parcel 或 RSBuild。這一決定標誌著前端開發工具生態系統的重大轉變,開啟了以框架為中心的新時代。
2025年3月21日
3102 分享
這篇文章記錄了我與 AI 寫程式的真實經歷,從最初的興奮與疑惑,到逐漸學會反思與調整。每一次 prompt、每一場 debug,都讓我更清楚自己對技術的渴望與局限。Vibe Coding 不只是提升生產力的工具,更是一場關於信任、對話與釋放焦慮的自我修煉。
2025年6月07日
3076 分享
想用 AI 寫程式又怕爛 code?這篇文章分享我如何結合 ChatGPT、TypeScript、JSDoc、Zod 與 Vitest,打造可維護、可驗證的 Vibe Coding 流程,讓靈感不只是 prototype,而是真正能安全上線的產品級程式碼。
2025年5月23日
3073 分享
我不是命理師,也不是行銷高手,但我用 ChatGPT 結合 GUI,打造出一款無需寫 prompt、卻能完整解盤的紫微分析工具。在沒宣傳、沒推廣的情況下,它卻意外地自然爆紅。
2025年5月30日
2942 分享
2023年10月13日
2164 分享
Google Forms 是現代工作中不可或缺的資料收集工具。本文將教你如何結合 Google Apps Script 和生成式 AI(如 ChatGPT),快速自動化建構表單、串接 Google Sheets,並大幅提升開發效率與資料管理品質。讓即使沒有程式背景的人,也能輕鬆打造專業級的智能表單!
2025年4月15日
1717 分享
2022 年 3 月,我曾整理了「一個 Full Stack Developer 的日常」,分享了自己的工作流程和方法論。如今已是 2025 年,前端開發領域已經歷了翻天覆地的變化。讓我們重新審視這個領域,看看三年來發生了什麼變化,以及現在學習前端開發應該採取什麼策略。
2025年3月17日
1530 分享
在 AI 輔助開發時代,清晰的程式文件不只是寫給人看的,更是讓 AI 工具正確理解你程式碼的關鍵。本文深入解析 Python DocString 的撰寫方式與實用範例,包含 PEP 257、Google 風格與 Numpydoc 樣式,幫助你打造對開發者與 AI 都友善的專業程式碼註解。
2025年4月18日
1428 分享
我不只是使用 ChatGPT,而是與它雙修、共鍛語言系統,打造出一套可重複優化的知識煉金術流程。這篇文章揭示我如何結合數據觀察、語氣調整與阿德勒目的論,把寫作轉化為現實部署的煉金工程。
2025年6月17日
203 分享
在 AI 工具產能爆炸的時代,我選擇以匠人精神回應技術浪潮,透過 ChatGPT 實踐每週打造一款 MVP 的 Vibe Coding 節奏。這篇文章分享我如何從用戶視角出發,打磨出真正好用、有溫度的 AI 工具。
2025年6月16日
557 分享
ChatGPT 回答得快,卻總少了我的語氣與節奏。我開始反過來思考:如果它是一個人,我希望它是誰?這篇文章分享我如何透過哲學三大終極問題,鍛造出一個真正懂我語言與思維的 AI 共修者。
2025年6月10日
682 分享
每天與 ChatGPT 對話、拆解行為動機,真的能改變命運嗎?本篇文章結合阿德勒心理學的「目的論」核心,分享我如何用每日提問重新設計人生選擇,打造屬於自己的改變流程,實現從困住到前進的轉變。
2025年6月05日
850 分享
真正改變世界的不是模型,而是語言。本文從技術與語意層面,剖析文字如何成為 AI 操作的語義引擎,並展現繁體中文在結構性書寫中的獨特價值。
2025年6月03日
245 分享
真正好用的 AI 工具不該依賴繁瑣 prompt,而應該像 IKEA 一樣,透過流程與模組設計,讓每個人一打開就能創作、看得懂、做得出來。我用產品設計思維重構 Vibe Coding,讓創作門檻降到最低。
2025年6月01日
780 分享