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

回顧博客網站的八十篇技術文章，我發現越是簡單的文章，就越有效地傳播出去。這裡分享一下如何寫出更加容易理解的技術文章。

最近有朋友向我詢問如何自學成為前端工程師，這讓我回想起五年前處於迷茫的十字路口的自己。當時面臨非科班轉行的挑戰，我沒有放棄，而是開始執筆技術文章，並積極參加各種技術競賽。如果可以的話，希望可以給予過去的自己對未來的期望：

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

在過去，當我踏足 Web3 開發領域時，感到陌生而困難。然而，透過 TypeScript 和 Viem，我們可以輕鬆與區塊鏈的智能合約進行交互。這裏分享簡單的 ENS（以太坊名稱解析）解析器示例，讓我們踏進學習圈。

當我閱讀《射鵰英雄傳》時，左手畫方，右手畫圓讓我想到開發與測試的關係。這裡分享如何透過 ChatGPT 結合 TDD，以 TypeScript X Jest 編寫購物車功能

當今的數位世界中，網站用戶要求即時、動態和高度互動的體驗。透過結合 Cloudflare Pages、Workers 和 KV 實現伺服器端渲染，提供動態且實時的內容，從而提升網站的性能和可用性。本文將探討如何將他們互相配合，實現即時伺服器端渲染，提供更出色的用戶體驗。

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

當天的咖啡廳氛圍如往常一樣，平凡而熟悉，但這個上午帶來了令人心跳加速的期待。我坐在角落的桌子前，靜靜品味著抹茶拿鐵，咖啡香氣在空氣中瀰漫，人們匆匆走過，我卻陷入了思考的深淵。這一天與眾不同，因為我的心被一封充滿謎團的金色邀請函所吸引，它或許將改變我的一生

數碼遊牧的生活非常實際，未來有更多的出國機會，可以送更多禮物給朋友。現在我想分享一下我的東京之行感想，儘管只有短短的幾天，但絕對是物超所值的。

許多年後，當 Calpa 站在開往東京灣的油輪上時，他會想起當年在香港的往事（新小說連載）

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

我剛從首爾回來，經歷了一場精彩的 Web3 之旅。在那裡，我真正體會到了 Web3 的樂趣和潛力。現在，我想分享一些我在首爾的體會。

作為資深開發者，我經常需要將複雜的技術概念傳遞給團隊成員，以確保項目順利進行。這推動我將複雜知識轉化為易懂形式，促進團隊合作，並加強自身學習。本文將分享如何在實際工作中運用費曼學習法，幫助團隊理解複雜技術，實現項目成功

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

Storybook 支援多種前端框架的工具，包括 React.js、Vue.js 和 Angular。它提供了一個獨立的環境，用於開發和測試組件。這個工具能夠協助我們更快速地建立和測試組件，同時確保它們在應用程式中的正確運作。在這裡，我希望分享一些有關 Storybook 的心得。

我在今年 3 月初的時候，透過 Mind Map 整理自己作爲 Full Stack Developer 的日常，並且花了很多時間去改善日常工作流程。最近我有點時間，於是就把那份 Mind Map 寫成文章，希望可以繼續拋磚引玉。謝謝大家支持

來到一個新地方，在上班之前，更加重要的是適應這個城市，融入其中的文化。

我越來越發現，要在 Software Engineering 這一行工作，就如同打遊戲一樣，大多時候都是說這些，天賦，技能樹，裝備，公會，隊友。

帶著問題去學習，會比單純看書的效果好得多。而 Stack Overflow 網站雲集世界上不同程序員遇到的問題，我們可以透過它來高效學習技能，比如說前端工程師的技能：JavaScript。

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

在編寫組件時，最令我感到困惑的是，當我在創建純函數型組件時，為何在代碼中未明確調用 React 卻仍需導入 React。經過一番深入研究，我發現這涉及到 JSX 轉譯的相關設定。然而，出於節省時間和提高效率的考慮，我選擇安裝了 babel-plugin-react-require 插件，以實現自動引入 React 的功能。本文將分享我的研究過程和一些反思。

Markdown 提供了一種方便的方式來撰寫文章。我們可以使用解析 Markdown 的工具，例如 Remarkable、Marked 等，將其轉換為 HTML，然後透過 React 原生的 dangerouslySetInnerHTML 方法將其嵌入到組件中。

如果您想要部署前端項目，Netlify 使您能夠持續部署，並自動啟用 HTTPS。如果您想要部署 Node.js 應用，那麼 ZEIT 將是另一個可考慮的解決方案。

相比起當年的水平置中手法，現在達到相同效果的方法多了很多，例如 Flex, Grid 等。就讓我們趁著 Facebook 回顧當年今日的浪潮重溫一下吧。

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

時光匆匆流轉，我已從大學畢業，成為前端工程師。回顧過去的一年，我成功完成了三個主要的任務：改版博客系統，讓不同的用戶可以快速啟動項目，它是我第一個過百 Star 數的項目；翻譯並校對技術文章，學習了不少前端實用的技術；對博客系統框架的 GatsbyJS，ReactJS 技術研究。過去一年對我而言充實而有意義，我期待著未來在前端工程師的職業生涯中繼續學習和成長。

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

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

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

前端工程師的職責範圍廣泛，需要不斷地學習和提升自己的技能。為了保持競爭力，我們需要有一套日常學習清單，幫助我們跟上行業的最新趨勢和技術。在這篇文章中，我分享各種學習和提升技能的方法，從參加技術大會到翻譯文章，從觀看教程視頻到貢獻開源項目。通過持續學習和不斷提升，我們可以保持在前端領域的競爭力，不斷演進和成長。

在程序員不斷精進的日常中，閱讀優秀的代碼是不可或缺的一環。透過TDD（測試驅動開發）的開發模式，我們可以模仿這些優秀的代碼，進而提升自己的程式碼水平。接下來，我們將介紹如何從零開始建立TDD環境，並開始構建一個isEven的程式碼。

我們可以透過 power-assert 中的 assert 方法，來減輕調試過程中的壓力。它不僅提供了更加直觀和具體的運行效果，還有助於更輕鬆地進行 DEBUG。事實證明，寫測試代碼可以變得相當容易。

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

在日常開發，Promise 是不可或缺的工具，但通過封裝和抽象方法，我們可以避免不必要的重複代碼，寫出更加優雅和可維護的程式碼。例如，我們可以將任意函數轉化為具有異步能力的函數，或者將其改造成可以處理上千萬個並行請求的函數。我們還可以使用Web Worker來實現多線程處理，或者實現在執行某些操作後暫停若干秒再繼續。在這裡，讓我們一同動手，學習如何封裝這些功能，使我們的代碼更加強大和靈活。

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

為了提升用戶的加載頁面速度，我們可以使用懶加載這個方法。當用戶打開頁面的時候，只需要載入首屏的資源，從而節省流量，提升加載速度。而用戶滾動到圖片佔用位置，瀏覽器才載入圖片資源。利用 `lozad.js`，我們可以簡單容易地懶加載圖片。它是一個可以單獨運行的工具，gzip 後的體積只有 910B，可以說是超輕量的工具庫。除了加載圖片之外，它還可以加載任意元素，例如 iframe，影片。在過去的一年，博客就已經啟動這個懶加載的功能了，也算是通過了眾多不同用戶的考驗了。

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

day.js 提供了處理日期的方法，並且擁有與 Moment.js 完全相同的API。這輕量級的日期庫能夠有效地減少網頁的加載體積，從而提高網站的加載速度，為用戶提供更好的體驗。

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

GitHub 作為程序員不可或缺的平台，我們上傳的代碼都會接受全天候的自動機器人掃描。然而，即使是安全意識高的同事，也有可能不小心上傳包含敏感信息的代碼。使用 GitGuardian，我們能夠即時接收通知，及時發現問題，迅速採取行動，以確保信息的安全，防止潛在風險。

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

當我需要檢查 CPU 和系統狀態時，我希望能夠以更迅速、直觀的方式識別問題。vtop 提供了一個便捷的解決方案，它不僅幫助我們精簡了繁雜的數據，還提供了與vim 相似的 hjkl 鍵盤快捷鍵，使用起來非常方便。類似於 top 命令，vtop 能夠顯示各個進程的資源使用情況，並且還可以終止特定的進程。

時光飛逝，轉眼已經離開香港兩個月。上有天堂，下有蘇杭。我也開始習慣這裡的生活，無論是生活節奏，還是工作習慣，都有所不同。這就是我這些天來最大的體會。

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

你好，歡迎來到我的博客。我是 Calpa，一個喜歡寫技術文章的系統架構師

趁著深夜有空，我就翻譯了一篇有趣的文章。這篇文章是說如何插入任意文本到任意文本。有時候，文章都會被某些網站會直接引用博客內容。這一類的插入空白字符串方法，可以成為其中一個有力的追蹤源頭的線索。

一直收聽知乎無限 live 的時候，我都會想：如何才能更有效率地收聽這些計畫內的 live 呢？於是我心血來潮，把無限 live 的資料拿了下來，然後做一個數據流的網站。這個網站展示和源碼已經放在 Github。這個項目可能適合那些喜歡看到很多數據的同學

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

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

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

在域名即將過期的約一個月前，Namecheap 這家域名註冊公司就會提前提醒我需要續訂。目前，我使用的域名託管服務來自 Namecheap，無論是收費還是提供的服務都非常滿意。除非有不可預見的情況，我計劃繼續使用這家公司，以免需要轉移域名和處理相關的繁瑣程序。

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

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

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

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

工欲善其事，必先利其器。一套完善的工具可以幫助我們事半功倍。而作為前端程序員的我，也是花了點時間為自己配置了一套工具。如果你也是使用 MacOS 作為你的開發系統的話，那麼你可以看一下這篇文章。

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

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

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

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

過去，我在我的博客中使用了 Disqus 的評論插件。然而，不論是載入速度還是外觀風格，都讓人感到有些不盡如人意。長時間以來，我一直避免安裝其他評論插件，因為遷移過程似乎有些繁瑣。但是當我決定嘗試其他選擇時，我立刻發現 Gitalk 插件的安裝非常簡便，且功能十分實用。特別是支援 Markdown 評論的功能，使我深深著迷於這款插件。

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

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

我一開始拿到 Happy Hacking KeyBoard Pro 2 時，我就問為什麼鍵盤可以完全沒有字的，那叫我如何輸入。雖然我可以盲打（不看鍵盤直接輸入），但也許我未必可以有能力使用這樣的鍵盤。但寫了一天代碼之後，我才發現，原來這一切都是自己的猜疑而已。這個鍵盤打起來就是一個字，爽。

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

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

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

利用 markdown 製作投影片，其實可以很簡單。

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

從第一篇《Hello World》文章，我已經開始寫博客半年了，一共寫三十多篇，平均一個禮拜出一篇文章。其實，我沒有想那麼多，直接就開始寫文章了。可能我的博客沒有其他人寫得那麼好，但是我依然堅持寫博客。每一篇文章是需要一點時間構思、撰寫，但是這點時間是很值得的。

平日開發的時候，我們會選擇使用一些框架來避免重複製造輪子，減輕我們的工作量。然而，我們卻不能透過使用更好的工具，或者更換框架來解決一些基礎開發問題。因此打好基礎很重要，不但決定前端程序員解決基礎問題的能力，還決定了面對日新月異框架時的掌握能力。當我開發 React 應用的時候，遇到的問題多是我對於 JavaScript 的理解不夠充分。因此，我在這裡寫一下如何打好 JavaScript 基礎，希望拋磚引玉 XD

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

初探 React 組件生命週期

正則表達式是一個非常簡單的語法，但它也是神兵利器，可以說是程序員必須要理解的工具之一。它就像一本會不斷成長的寶刀，隨著程序員對它的理解，它的威力也跟著增強。

如果你遇到 CreateListFromArrayLike 的報錯的話，那麼可以看看代碼裡面調用 apply 方法的地方，call 是用 0 個或者更多的參數，而 apply 則是用一個數組。

Codingame

經過一整天的不懈努力，我們成功晉級進入了最後的前五名。這次比賽非常有趣，基本上我們從第一天中午一直玩到晚上，然後第二天回來又繼續享受了美食。雖然最終未能獲得獎金，但我們在比賽中學到了許多寶貴的知識，例如如何解決安裝 npm 套件的問題和更新 npm 套件的技巧。

通常情況下，我們使用以下命令來在我們的手機上測試 React Native 應用程式：react-native run-android。然而，這個方法需要將手機連接到電腦上。為了達到無需伺服器的目標，我們可以使用以下指令來實現：

當用戶向伺服器發出請求時，狀態碼能夠描述伺服器返回的結果。

個人開發項目和與他人一同開發項目是兩回事來的

LocalStorage 和 SessionStorage 的對比

Hello World