viem:下一代 Web3 開發的 TypeScript 接口

viem:下一代 Web3 開發的 TypeScript 接口

viem 是一個功能強大的 TypeScript 接口,為以太坊和其他 EVM 兼容區塊鏈提供低層次的無狀態原語。作為 ethers.js 和 web3.js 的替代品,viem 在開發者體驗、穩定性、捆綁包大小和性能方面有著顯著優勢。本文將深入探討 viem 的特性及其為 Web3 開發者帶來的獨特價值。

2025年3月29日
前端性能優化:Tree Shaking、Bundle Analysis 與 Code Splitting 在 Vite 中的實踐

前端性能優化:Tree Shaking、Bundle Analysis 與 Code Splitting 在 Vite 中的實踐

在當今高度競爭的網絡環境中,前端網站性能已成為用戶體驗的關鍵因素。網站加載速度慢不僅降低用戶滿意度,還會影響搜索引擎排名和轉化率。本文將深入探討三種強大的前端優化技術:Tree Shaking、Bundle Analysis 和 Code Splitting,並詳細介紹如何利用 Vite 大幅提升前端應用性能。

2025年3月28日
2025 前端技能圖譜:系統化學習之路—基於台灣招聘市場的研究與實踐

2025 前端技能圖譜:系統化學習之路—基於台灣招聘市場的研究與實踐

前端開發作為一個不斷演進的領域,每年都有新的技術和框架湧現。作為一名全棧開發者,我長期以來一直在思考如何系統化地組織前端知識,並將這些知識有效地傳遞給更多人。這篇文章將分享我如何基於台灣招聘市場的研究,構建了一套全面的前端技能圖譜,以及我未來的寫作計劃。

2025年3月25日
SCSS 技術詳解:優勢、與 CSS 的區別及在 React TypeScript 項目中的應用

SCSS 技術詳解:優勢、與 CSS 的區別及在 React TypeScript 項目中的應用

SCSS 作為現代 Web 開發中日益流行的樣式預處理器,為前端開發人員提供了比傳統 CSS 更強大的功能和更高效的工作流程。本文將深入探討 SCSS 的優勢、與 CSS 的主要區別,以及如何在 React TypeScript 項目中有效地使用它,幫助開發者提升樣式編寫效率和代碼可維護性。

2025年3月25日
Circle CCTP v2:推動 USDC 跨鏈交互的未來

Circle CCTP v2:推動 USDC 跨鏈交互的未來

在多鏈生態系統快速發展的當下,不同區塊鏈之間的互操作性變得尤為重要。Circle 的跨鏈傳輸協議(Cross-Chain Transfer Protocol,簡稱 CCTP)作為一個革命性的解決方案,正在改變 USDC 在不同區塊鏈之間的轉移方式。最近,Circle 推出了 CCTP v2,引入了多項重要升級,大幅提高了跨鏈轉賬的速度和靈活性。本文將深入探討 CCTP 的核心概念、優勢、v2 版本的改進以及其應用場景。

2025年3月23日
從 2022 到 2025:重新審視前端開發的演變

從 2022 到 2025:重新審視前端開發的演變

2022 年 3 月,我曾整理了「一個 Full Stack Developer 的日常」,分享了自己的工作流程和方法論。如今已是 2025 年,前端開發領域已經歷了翻天覆地的變化。讓我們重新審視這個領域,看看三年來發生了什麼變化,以及現在學習前端開發應該採取什麼策略。

2025年3月17日
利用 AutoCorrect 與 GitHub Actions 提升繁體中文寫作品質

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

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

2025年3月16日
REST Countries API:全面指南與台灣例子

REST Countries API:全面指南與台灣例子

REST Countries API 是一個功能強大的開放源碼 RESTful 服務,提供世界各國豐富的資訊。本文將深入探討這個 API 的工作原理、主要功能以及實際應用案例,特別聚焦在台灣及其主要區域的數據查詢範例。

2025年3月15日
MyGO!!!!! Telegram 機器人:邊緣計算與動漫文化的融合

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

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

2025年3月15日
TypeScript Go 實現的突破性改進與構建工具的語言演變

TypeScript Go 實現的突破性改進與構建工具的語言演變

TypeScript 最近宣佈的 Go 語言原生實現(被稱為 TSGo 或 Corsa)標誌著這一流行編程語言發展歷程中的重要里程碑。這項於 2025 年 3 月 11 日公布的重大技術轉變,不僅展示了引人矚目的性能提升,還反映了更廣泛的 JavaScript 生態系統中正在發生的構建工具轉向 Rust 和 Go 等編譯型語言的趨勢。

2025年3月15日
給過去的的自己的一封信:如何自學轉行成爲前端工程師?

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

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

2023年12月4日
如何利用 TypeScript 與 Viem 開發 ENS 查詢和頭像功能?

如何利用 TypeScript 與 Viem 開發 ENS 查詢和頭像功能?

從前我在接觸 Web3 應用的時候,都覺得不是那麼容易。而我們透過 TypeScript 和 viem,可以輕鬆獲取區塊鏈信息,這裡我就分享一下非常常見的 ENS 解析器用法。希望可以有更多人進入 Web3 開發的旅程當中~

2023年11月29日
左右互搏術:ChatGPT 與 TDD 結合心得

左右互搏術:ChatGPT 與 TDD 結合心得

當我閱讀《射鵰英雄傳》時,左右互搏術讓我聯想到測試驅動開發(Test-Driven Development,TDD)。這裡以編寫購物車功能為例,分享如何運用 TDD 來協助編寫程式碼

2023年11月27日
回顧我的 2023 開發者生涯:前端、後端、雲端、到 Web3

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

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

2023年10月13日
重構我的網站:Astro 與 Vue 重構心得分享

重構我的網站:Astro 與 Vue 重構心得分享

透過重構博客網站,我得以體會結合 Static Site 和 Vue 的優點。在靜態網站生成和動態組件的結合下,可以實現更出色的網站開發,接下來的內容中將分享開發心得

2023年8月13日
優雅地使用 Storybook 建立 React.js 組件

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

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

2023年1月11日
為什麼函數式組件需要引進 React?

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

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

2019年2月26日
超好用的全棧項目部署構建平台 - Netlify, ZEIT

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

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

2019年2月17日
GatsbyJS 入門(三):從零開始架構 React 靜態網站

GatsbyJS 入門(三):從零開始架構 React 靜態網站

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

2019年1月16日
從博客系統回顧我的 2018 年前端生涯

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

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

2018年12月24日
基於 GatsbyJS 的博客系統正式開源:gatsby-starter-calpa-blog,及其使用方法

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

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

2018年12月3日
GatsbyJS 入門(二):如何以 Starter 快速架構網站

GatsbyJS 入門(二):如何以 Starter 快速架構網站

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

2018年11月23日
GatsbyJS 入門(一):打造開箱即用的現代化前端網站

GatsbyJS 入門(一):打造開箱即用的現代化前端網站

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

2018年11月16日

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

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

2018年11月5日
透過 TDD 模式學習如何實現各種 npm 工具

透過 TDD 模式學習如何實現各種 npm 工具

在程序員的日常精進之中,閱讀優秀的代碼是必不可少的。透過 TDD 的開發模式,可以模仿那些優秀的代碼,從而提升自己代碼水平。下面介紹如何從零開始搭建 TDD 環境,並構建 isEven 代碼

2018年11月2日

深入淺出代碼優化﹣if/else

對於代碼裡面的 if else,我們可以使用邏輯判斷式,或更好的三元判斷式來優化代碼。除了可以降低維護項目的成本之外,還可以提升代碼可讀性。就讓我們從最簡單的 if else 例子開始吧。

2018年10月22日

Awesome Promise Methods

2018年10月15日
Hackoberfest 2018 ﹣ 面向所有人群的開源社區最大活動

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

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

2018年10月9日
網站性能調優開發工具:Lighthouse,Puppeteer 以及進階部分丨 Google 開發者大會 2018

網站性能調優開發工具:Lighthouse,Puppeteer 以及進階部分丨 Google 開發者大會 2018

這次 Google 開發者大會請來了 Lighthouse 的工程師 - Eric Bidelman,分享如何簡單地使用 Lighthouse, Puppeteer 來自動化我們日常的流程。它是一個開源的自動化工具,用於改進網絡應用質量。您只需要提供網址,它就測試該頁面,並生成頁面性能報告。你可以看看採取哪些措施來改進您的應用

2018年9月24日
【譯】以申請大學流程來解釋 JavaScript 的 filter 方法

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

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

2018年9月17日
GitGuardian:防止公開暴露敏感信息

GitGuardian:防止公開暴露敏感信息

2018年9月8日

Uncaught ReferenceError: regeneratorRuntime is not defined 解決方法

async/await 能讓開發者享受異步操作的快感,解決回調地獄的問題。然而,編譯器對於 async/await 的編譯有時候卻不和我們想象中的一樣。透過安裝正確插件,或改回 Promise 版本,我們可以解決這個問題。

2018年7月29日
關於 2018 年的 Calpa Liu

關於 2018 年的 Calpa Liu

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

2018年5月1日

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

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

2018年3月21日

Gitalk Error: Validation Failed. 442 報錯解決方法

最近忙著大學的事情,少了時間寫博客文章。可是沒想到在過去那一篇文章發佈之後,就遇到 Gitalk 評論區出現 Error: Validation Failed. 這樣的問題,在 Github 上面和網友討論之後,想出了一個解決方法,希望可以拋磚引玉。

2018年3月10日

美化 console.log 輸出

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

2018年3月4日

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

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

2017年12月31日
Node-prune:專門移除 node_modules 不必要檔案的輕量工具

Node-prune:專門移除 node_modules 不必要檔案的輕量工具

如果你有試過打包整個 Node 項目到服務器上,那麼你發現自己的項目體積比較大,其中一個原因是 `node_modules` 文件夾包含很多不必要的檔案。在使用 npm 安裝不同插件時,往往會包含很多不必要的文件夾,例如`example`, `doc`。要麼我們就是手動刪除它們,要麼我們就是自己寫一個自動腳本。而開發 Koa、Co、Express 的 TJ 大神則提供了一個簡單輕巧的工具。我們可以學習一下他的思路,以及使用這個工具。

2017年11月26日

異步操作見聞錄

異步操作是非常常見的操作,也是其中一題常見的前端工程師面試題目。在日常開發中,我們會和伺服器交互,或者是和用戶的行動作出反應,比如說監聽某些點擊事件。這個時候,其實我們是執行了異步操作,我們需要等待對方若干時間才能收到返回值,甚至是一個錯誤的值。因此,異步操作很容易產生一些誤會。這裡,我會說一下異步操作,及其返回的處理方法。

2017年9月27日
React 應用輕量化(一)Source Map

React 應用輕量化(一)Source Map

create-react-app 提供了很方便的創建 React 應用途徑。它已經把 webpack, Babel, Autoprefixer, ESLint, Jest 等常用工具打包進去。可以說是一個非常方便,好用的製造 React 應用工具。當我打算把包裝好的檔案推上去的時候,我卻發現打包之後的檔案大小有點大,因此我就開始優化這個網頁應用了。第一點我優化的地方就是 Source Map。

2017年8月27日

善用 Github Issue 的開源評論插件 -- Gitalk

以前,我的博客是用 Disqus 的評論插件,但是無論是載入速度,還是樣式上,都是有所缺乏的。我一直沒有安裝其他的評論插件,因為覺得搬家有點麻煩。但是當我試用一下之後,我就覺得這個插件安裝很方便,功能也很實用,尤其是可以寫 Markdown 評論,讓我非常喜歡這個插件了。

2017年8月4日

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

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

2017年7月24日
簡單易用的開源 JavaScript 動畫圖標庫 -- Titanic

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

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

2017年7月6日
【翻譯】前端性能優化必備工具清單

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

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

2017年6月19日

JavaScript Array.map(parseInt) 錯誤解決方案

如果我想轉換數組裡面的字符串為數字的話,很自然就會想到 `map` 和 `parseInt` 這兩個方法。但是用起來的時候卻不是我想要的結果。

2017年5月31日

深入 ECMAScript 的數據類型

每一種編程語言都有數據結構,但他們各有不同之處。JavaScript 是一種動態語言,變數的類型不用提前聲明,你可以使用同一個變數來保存不同的數據類型。

2017年5月18日

React 組件生命週期 - 加載組件

初探 React 組件生命週期

2017年5月16日

Guest Book

2017年1月1日