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

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

CSS-in-JS：現代 React 開發的樣式解決方案

CSS-in-JS 是一種革命性的樣式技術，它使用 JavaScript 來創建、添加和管理樣式。當 JavaScript 被解析時，CSS 會被動態生成並附加到 DOM 中。這種方法將樣式的抽象提升到了組件級別，使開發者能夠使用 JavaScript 以聲明性和可維護的方式描述樣式。這篇文章將深入探討 CSS-in-JS 的優勢以及如何在 React.js 應用中實現它。

Tailwind CSS 與 React.js：打造現代前端開發環境

本文深入探討了 Tailwind CSS 的眾多優勢，以及如何在 Vite 驅動的 React.js 專案中有效實施它。通過整合這兩種強大技術，開發者可以顯著提升開發效率，同時維持高度自訂的設計靈活性。本文還將展示如何構建一個精美的登入表單，並探討如何結合 SCSS 與 Tailwind CSS 來優化您的前端開發流程。

React 19 的革新：深入探討 useActionState Hook

React 19 引入了一系列創新功能，其中最引人注目的之一是 useActionState Hook。這個強大的新工具為前端開發者提供了更簡潔、更高效的方式來管理表單操作和狀態更新。本文將深入剖析 useActionState 的實用性，並通過實例演示如何在項目中有效地運用它。

QuickNode：Web3 基礎設施的高性能解決方案

在區塊鏈開發加速的當今時代，選擇正確的基礎設施提供商對項目成功至關重要。QuickNode 為開發者提供高性能節點和 API 服務，使構建 dApp 變得更加簡單高效。本文將探討 QuickNode 的優勢，並詳細介紹如何使用 TypeScript 通過 QuickNode API 獲取以太坊的費用歷史數據。

利用 Git 增強 LLM 程式碼開發效率：減少幻覺與提升生產力的實踐指南

隨著 LLM 在軟體開發中的應用日益廣泛，工程師積極將 AI 工具整合到日常工作流程中。然而，儘管 LLM 顯著提高了編碼效率，但它也可能生成內容不精確或包含幻覺。本文探討 Git 如何與 LLM 協同工作，提高開發效率，減少 LLM 生成內容中的錯誤和幻覺，並介紹 Git 提供的獨特優勢。

PostCSS：現代化的 CSS 處理工具及其在 Vite 中的應用

PostCSS 作為一個強大且靈活的 CSS 處理工具，已經在前端開發社區獲得了廣泛的認可和應用。本文將深入探討 PostCSS 的本質、使用 PostCSS 的諸多優勢，以及如何在 Vite 項目中高效地集成和配置 PostCSS。

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

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

Medium-Zoom：提升網站圖像交互體驗的現代解決方案

Medium-Zoom 是一個專注於提供類似 Medium 網站風格圖像縮放效果的輕量級 JavaScript 庫。這款工具能讓使用者點擊圖像後獲得沉浸式的放大視圖，提供更好的圖像細節瀏覽體驗，同時保持網站的整體美觀和用戶體驗流暢度。本文將深入探討 Medium-Zoom 的核心功能、使用優勢，以及與市場上其他類似解決方案的比較。

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

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

運用 Uptime Kuma 強化網站可靠性

Uptime Kuma 作為一種開源監控工具，可為企業提供全面的網站與服務可用性監控解決方案。在當今數位化時代，網站和數位服務已成為企業營運的核心部分，任何停機或性能問題都可能導致收入損失和客戶流失。本文將探討 Uptime Kuma 的主要功能、其如何增強網站穩定性，以及為何企業應採用此類監控工具來確保業務連續性。

Monad：重新定義 EVM 兼容的高性能 L1 區塊鏈

Monad 作為一種創新的 Layer 1 區塊鏈解決方案，旨在提供前所未有的性能，同時保持與以太坊虛擬機（EVM）的完全兼容性。本文將深入探討 Monad 的技術原理、其創新架構以及與傳統 L2 解決方案的比較。

AVIF：下一代圖像格式的技術深度解析

2025 年 AVIF（AV1 圖像文件格式）已成為網頁圖像優化的重要選擇。本文將深入分析 AVIF 的技術優勢、性能表現，以及如何使用 libavif 庫來處理這種先進的圖像格式。

Foundry：構建和部署 Web3 智能合約的強大工具

Foundry 已經成為開發人員在以太坊及其 L2 鏈上構建、測試和部署智能合約的首選工具之一。這篇文章將深入探討 Foundry 的優勢、使用方法，並通過一個簡單的 Counter 合約示例展示如何使用 Forge 部署合約以及如何使用 Cast 與合約互動。

Umami 分析工具：簡單、隱私、強大的網站分析解決方案

在當今數據驅動的網絡環境中，網站分析工具是了解用戶行為和優化網站性能的關鍵。Umami 作為一個開源的網站分析解決方案，正逐漸成為 Google Analytics 的有力競爭者。本文將深入探討 Umami 的特點、優勢，以及如何使用 Umami Cloud 或自托管方式部署這一強大工具。

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

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

使用 Docker Compose 構建全棧應用：React、Express 與 MySQL

在複雜的全棧開發環境中，管理前端、後端和數據庫之間的配置和依賴關係可能會非常耗時且易於出錯。Docker Compose 提供了一個優雅的解決方案，使開發人員能夠輕鬆地定義、配置和運行多容器應用程序。本文將詳細介紹如何使用 Docker Compose 創建一個整合了 React.js 前端、Express.js 後端和 MySQL 數據庫的全棧應用，並提供一個使用 Vite、Express 和 MySQL 的實用示例。

Mockaroo：加速前端開發的 API 模擬工具詳解

在現代軟體開發中，前端與後端開發經常需要同步進行，但後端 API 通常需要較長的開發時間。當後端尚未準備好時，前端開發人員如何繼續他們的工作？這時，API 模擬工具就顯得至關重要。本文將深入探討 Mockaroo 這款強大的數據模擬工具，解析它如何加速開發流程，詳細指導如何使用它，並分析其相比其他模擬服務的優勢。

Cloudflare R2 與 AWS S3 雲存儲服務比較：2025 年最新技術特性、定價與優勢

Cloudflare R2 是一個現代化的雲存儲解決方案，專為開發者設計，以解決傳統雲存儲服務中的成本和效能挑戰。本文將深入分析 R2 的最新技術特性、與 AWS S3 的全面對比，以及作為圖像託管選擇的優勢。

Power Assert - JavaScript 測試中最智能的斷言工具

在測試驅動開發中，斷言是驗證程式碼行為的關鍵。傳統的 assert 僅顯示斷言失敗的簡單訊息，而 Power Assert 則提供了直觀、詳細的失敗原因視覺化展示，讓除錯過程更加高效。本文深入介紹 Power Assert 的使用方法、配置選項及其在現代前端開發中的應用。

Docker 基礎映像選擇指南：最佳實踐與 2020-2025 年趨勢分析

Docker 基礎映像是構建容器的起點，其選擇直接影響應用的性能、安全性和可維護性。在 2020 至 2025 年間，基礎映像的使用趨勢經歷了從極簡主義到更平衡的實用主義轉變。本文將深入探討不同基礎映像的優缺點、選擇最佳實踐，以及近年來的發展趨勢，幫助開發者做出更明智的決策。

GitFlow 工作流最佳實踐：結構化分支策略與軟件開發應用

GitFlow 作為一種結構化的分支管理模型，為軟件開發團隊提供了一個清晰的框架來管理代碼變更和版本發布。自 2010 年由 Vincent Driessen 提出以來，GitFlow 已被眾多團隊採用，尤其是那些有計劃發布週期和需要管理多個版本的項目。這種工作流通過定義特定的分支結構和使用規則，幫助團隊更有效地協作並維護穩定的代碼庫。本文將深入探討 GitFlow 的核心概念、各類分支的工作機制，以及如何將這種思維模式應用到現代軟件開發中。

Create React App 的終結：為何被淘汰及 Vite 的崛起

React 開發團隊於 2025 年 2 月 14 日正式宣布淘汰 Create React App (CRA)，並鼓勵開發者轉向使用現代框架或構建工具如 Vite、Parcel 或 RSBuild。這一決定標誌著前端開發工具生態系統的重大轉變，開啟了以框架為中心的新時代。

React JSONSchema Form：構建強大且靈活的動態表單

在當今的 Web 開發中，表單是與用戶交互的最重要界面之一。對於 React 開發者來說，有多種表單解決方案可供選擇，其中 React JSONSchema Form (RJSF) 以其獨特的方式脫穎而出。本文將深入探討這個強大的表單庫，了解如何利用它構建複雜表單，以及如何通過自定義組件提升用戶體驗。

使用 GitHub Actions 自動化 Docker 映像構建與發佈流程

在當今的開發環境中，自動化發佈流程已成為提高開發效率的關鍵因素。本文將探討如何利用 GitHub Actions 構建 Docker 映像並推送到 DockerHub，以創建更高效、更可靠的發佈工作流程。

關於 Calpa

2023 年，我回到香港，從全棧工程師，行過死蔭幽谷，現在成爲系統架構師。能夠在 Web3 的世界自由自在地行走，十分感激當初的百般試煉。

在 Node.js 中使用 bcrypt 加密密碼的完整指南

在現代應用程序開發中，安全存儲用戶密碼至關重要。本報告將詳細介紹如何在 Node.js 中使用 bcrypt 進行密碼加密，探討為何 bcrypt 優於其他哈希方法，並提供密碼加密的最佳實踐。

ShareThis：網站分享工具的全面解析

ShareThis 是一種社交分享工具，允許用戶在不同社交網絡平台上輕鬆分享網站內容。它提供多種免費工具、應用程序和插件，幫助網站管理員增加流量和社交關注。在全球擁有超過 5 億用戶，每天被數千家企業使用，ShareThis 不僅僅是一個分享按鈕工具，還提供數據解決方案，幫助企業優化營銷策略，深入瞭解用戶行為。

如何使用 Vite 和 Reveal.js 創建簡單的 HTML 演示文稿

在當今數位化的演講和教學環境中，創建互動式、視覺吸引力強的幻燈片演示文稿變得越來越重要。本文將向您展示如何結合使用 Vite 和 Reveal.js 來快速建立一個簡單而功能強大的網頁演示文稿系統，讓您能夠通過 HTML 和 Markdown 創建精美的幻燈片。

使用 Docker 和 Docker Compose 建立 Neo4j 資料庫

Neo4j 是一個強大的圖形資料庫，透過 Docker 和 Docker Compose 部署可大幅簡化安裝和管理流程。本報告將詳細介紹如何使用容器技術快速建立 Neo4j 環境，涵蓋從基本設置到進階配置的完整過程，適合開發者快速實現圖形資料庫的部署與管理。

使用 Google Colab 理解線性代數中的 A=CR 分解：Gilbert Strang 講座解析

在 Gilbert Strang 教授的 MIT 線性代數課程"Matrix Methods in Data Analysis, Signal Processing, and Machine Learning"的第一講中，我們遇到了一個基本而強大的矩陣分解方法：A=CR 分解。這個分解不僅是線性代數的基石，也是理解矩陣結構與向量空間的關鍵。本文將使用 Google Colab、NumPy 和 Matplotlib 來實現並視覺化這個概念，幫助我們從計算和幾何角度理解 A=CR 分解。

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

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

探索 GitHub Actions：自動化發布流程及其優勢

GitHub Actions 作為 GitHub 生態系統中的強大自動化工具，為開發者提供了簡化工作流程和實現 CI/CD（持續整合/持續交付）的絕佳方案。本文將深入解析如何透過 GitHub Actions 實現自動化發布流程，並探討相較於手動部署的諸多優勢。

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

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

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

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

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

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

UV：基於 Rust 的超高速 Python 包管理工具

在當前 Python 生態系統中，包管理一直是開發者面臨的痛點之一。多種工具分散使用，效率低下，安裝依賴時常需等待漫長時間。今天，我們將介紹一個革命性的解決方案——UV（及其命令行工具 UVX），這是一個用 Rust 編寫的極速 Python 包管理器，正在迅速改變 Python 開發者的工作流程。

使用 AI 輔助開發 Go 語言專案：urusai 的誕生與研究型編程的樂趣

本文分享了我如何在沒有 Go 語言經驗的情況下，借助 AI 輔助開發出 urusai 工具的經歷。探討研究型編程的方法、AI 在軟體開發中的角色，以及這種開發模式對未來技術創新的啟示。

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

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

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

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

成功企業家的秘密：方向感的價值

探討方向感在企業家成功中的關鍵作用，分析為什麼方向感比計劃和時間表更重要，以及如何培養正確的方向感。

利用大型語言模型提升軟體開發效率的策略

探討如何有效利用大型語言模型（LLMs）來提升軟體開發效率，分析程式碼生成技術的優勢和最佳實踐。

簡單旅行，享受內心平靜

分享如何通過簡單的旅行方式獲得內心平靜，探討旅行中的消費觀和生活態度，以及如何在旅途中找到真正的快樂。

AI 與創意：現代魔法的實現

探討人工智慧如何成為現代創意工作者的魔法工具，分析創造力與 AI 技術的結合如何改變工作方式和創作過程。

時間自由是成功的基石

探討時間自由如何成為成功的關鍵要素，從深入研究到價值轉換，分析成功者如何利用時間自由實現自我價值。

職場真相：每個人的真實目標

探討職場中每個層級的人真實目標，從老板到基層員工，揭示職場生態的真相，幫助讀者更好地理解和應對職場環境。

專注價值而非情感的交換

探討在人際交往中應該優先關注價值交換而非情感交換，分析如何通過提供價值來建立更有效的社交關係。

避免被環境同化：堅持自己的道路

探討如何在追求成就的過程中避免被環境同化，保持自我意識並堅持自己的目標和理想。

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

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

成就大事者的內在特質分析

深入分析能成就大事的人所具備的共同特質，包括堅持閱讀和健身的習慣、沉穩的性格特徵等關鍵要素。

段永平的智慧：做對的事情比勤奮更重要

解析企業家段永平的成功哲學，探討為什麼做對的事情比單純的勤奮更重要，以及如何在人生道路上做出正確的選擇。

財務自由的里程碑與生活享受

探討在加密貨幣時代追求財務自由的過程，強調在追逐目標的同時學會感恩和享受每個階段的成就。

Google 公佈 AI Agent 白皮書：探討 AI 的代理功能

解析 Google 最新發布的 AI Agent 白皮書，探討 AI 模型如何通過結合推理、邏輯和外部工具來擴展其功能。

尋找自我：一生的旅程

探討人生中尋找自我的永恆主題，思考如何在不隨波逐流的過程中發現真實的自己，擁抱獨特性。

AI Agent 的認知架構：代理如何運作

通過廚師工作的類比，深入解析 AI Agent 的認知架構，探討其如何收集資訊、進行內部推理並執行任務。

專注核心用戶：提升產品價值的策略

探討如何通過專注於核心用戶來提升產品價值，以 Apple 為例分析高端產品定位的商業策略。

精準提問的重要性：AI 時代的競爭優勢

探討從互聯網到 AI 時代，精準提問能力如何成為關鍵競爭優勢，以及如何提升這一能力以適應技術發展。

流動性質押協議的變化與市場反應

分析以太坊流動性質押協議的最新發展，探討 LSDs 市場變化及其對 DeFi 生態系統的影響。

從焦慮到平靜：寫作的力量

分享個人通過寫作克服焦慮的經歷，探討如何將內心的擔憂轉化為文字，實現心靈的平靜。

複雜化與簡化：賺錢的兩面

探討商業中複雜化與簡化的策略運用，分析如何通過把握事物核心、創造框架和展示結果來提升盈利能力。

提升生活品質的關鍵：少看新聞

探討如何通過減少新聞消費，專注於事實而非情緒，以及關注具體問題而非個人感受，來提升生活品質和決策能力。

查理·芒格的成功智慧：耐心與行動的平衡

解析查理·芒格的成功哲學，探討如何在投資和生活中平衡耐心與行動，以及如何通過避免愚蠢決策來獲得長期優勢。

低薪的長遠影響：職場薪資的基準效應

分析初期低薪對職業生涯的長期影響，探討薪資談判中的基準效應，以及如何突破薪資增長的限制。

堅持的力量：從失敗中學習成長

探討如何在人生的低谷中保持前進的動力，接納失敗和不完美，通過堅持不懈找到成功的契機。

犯錯與人生容錯率的關係

探討人生中的錯誤與容錯率，如何以更寬容的心態看待過去的失誤，理解時間長河中真正重要的事物。

Ethena 擴展影響力：2025 年新計劃詳解

解析 Ethena 2025 年路線圖「Convergence」，探討其產品在傳統金融領域的擴展計劃，包括 iUSDe 的推出及其戰略意義。

中年人與時代的接軌：為何應該與年輕人為伍

探討中年人如何通過與年輕人互動來保持思維活力，打破固有思維模式，實現個人成長和時代同步。

副業變現的三大戰略架構：人本思維、行動韌性與時機洞察

在當代經濟結構快速變遷的環境下，副業已從單純的「額外收入來源」轉型為個人職涯風險分散、技能延展與財富槓桿的重要工具。根據麥考利夫婦的實證研究，副業經營的成功率與「選對合作對象」、「執行紀律強度」及「市場週期判斷」呈現高度正相關。本文透過解析 15 項實務案例與學理基礎，深度解構副業變現的三大核心要素，並提出可操作性策略建議。

服務用戶一輩子的產品：長期價值與獲客策略

探討如何打造具有長期價值的產品，分析終身價值與獲客成本的平衡，以及如何通過產品力建立持久的競爭優勢。

假裝直到成功：心理學背後的策略

在當代心理學與自我發展領域中，「假裝成功直到真正成功」（Fake it till you make it）已成為一種廣受討論的策略。這種方法主張透過行為與認知上的模仿，逐步重塑自我認同，最終實現目標。本文將深入探討其心理學基礎、實證研究、實際應用與潛在爭議，並結合神經科學與社會文化視角，全面解析此策略的運作機制。

在日本花多少日元能過上小資生活？

日本作為全球生活成本較高的國家之一，如何在有限的預算內實現「小資生活」成為許多外籍人士與本地居民的關注焦點。根據多項統計資料與實務經驗，小資生活的定義應兼顧基本生活品質與適度休閒，其核心在於「合理分配開銷」與「有效運用資源」。本文將深入分析日本主要城市的必要支出結構，並提出系統性的節約策略，最後總結實現小資生活的關鍵要素。

2025 年的新決心：持續完善自己的投資框架

分享 2025 年在投資領域的新目標，探討如何堅持自己的投資哲學，完善投資框架，以及在市場誘惑中保持理性判斷。

正念與效率：心靜如水的智慧

探討如何通過正念實踐提高生活效率，以平靜的心態面對日常挑戰，在忙碌中保持內心的寧靜與智慧。

AI 加速社會不平等的四個面向

深入分析 AI 技術如何在使用機會、地域限制、語言能力和經濟資源等方面加劇社會不平等，挑戰知識平權的迷思。

陽明知行合一與致富之道

探討王陽明知行合一理論在財富積累中的應用，分析為何知道致富方法卻不願執行的心理障礙，以及如何突破這些限制。

人生中的命運與選擇：如何面對挫折

探討如何在人生的挫折中保持積極態度，理解命運與個人選擇的關係，以及如何在逆境中找到前進的動力。

2025 年財務計劃：大膽消費與投資

分享對金錢觀念的轉變，從過度節儉到合理消費與投資的思維轉變，探討如何讓金錢發揮最大價值。

AI 代理：超越對話的下一代生成式 AI

探討 AI 代理如何結合大型語言模型的對話能力與行動導向功能，開創人機互動的新紀元，重新定義生成式 AI 的應用場景。

行動的力量：如何減少內耗並達成目標

探討如何通過立即行動來減少內心消耗，擺脫完美主義的束縛，以行動為導向達成目標的實用方法。

掌控未來：積極面對人生選擇

探討人生選擇的重要性，如何在過去的決策中學習，並積極把握未來的機會，創造屬於自己的獨特人生道路。

重新定義工作與學習：AI 時代的思考

探討 AI 時代如何重塑工作與學習方式，強調想像力和創造力的重要性，以及如何在這個充滿機遇與挑戰的時代保持競爭力。

小改變大影響：如何改變人生

探討人生改變的本質，揭示小改變如何帶來巨大影響。本文分析人生的非線性特質，幫助讀者理解持續的小改變如何累積成重大的人生轉變。

以太坊 Gas 費用低位時的三大操作建議

當以太坊 Gas 費用處於低位時，有哪些值得操作的機會？本文分享三個具體建議，幫助你充分利用這個低成本時期。

持續成長的秘訣：日復一日的努力

成長不是一蹴而就的，而是需要日復一日的努力。本文探討如何通過持續學習和實踐，在人生的每個階段都保持進步。

積極輸出：找到方向的關鍵

當感到迷茫時，持續輸出內容是一個找到方向的有效方法。本文分享如何通過寫作和記錄來整理思緒，發現新的可能性。

成功的關鍵：不斷學習與模仿

成功需要持續的刻意練習和改變。本文探討如何通過不斷學習和模仿，突破自我限制，實現個人成長。

投資者如何在牛市中獲利

本文分析當前市場的特點，包括低波動性、強勁上升趨勢和投機機會，並探討如何在這樣的市場環境中獲得投資收益。

寫在 2024 年末的最後反思

命與運：改變的力量

人生路上的選擇：敢於嘗試，找到出路

財務自由的真諦：不僅是金錢，更是生活方式

AI 交互的未來：超越聊天框的多樣化體驗

保持內心平靜的關鍵：情緒調節技巧

在這個快節奏的世界中，掌握情緒調節技巧不僅能幫助我們應對壓力，更能讓我們在人生的旅途中保持內心的平靜與喜悅。

技術人員的管理轉型指南

從技術轉向管理崗位是一個重要的職業轉折點，本文分享如何成功實現這個轉變，包括減少具體工作、專注全局管理等關鍵步驟。

如何在牛市中避免虧損：保持冷靜與堅持

在牛市中避免虧損的關鍵在於保持冷靜，不要過於浮躁。本文分析牛熊市的不同邏輯，幫助投資者在市場上漲時保持理性判斷。

叛逆的優秀：為什麼不服從的人更容易成功

文學：流量時代的核心競爭力

現代社會財富創造的雙重核心：專精化與槓桿效應的結構性分析

在當代經濟體系中，個人財富積累的本質已從工業時代的線性勞動模式，轉變為知識經濟下的非線性價值創造。透過整合矽谷創投家納瓦爾·拉維肯（Naval Ravikant）的槓桿理論與行為科學實證研究，本報告揭示「專精化」（Specialization）與「槓桿效應」（Leverage Effect）如何共同構建現代財富創造的底層邏輯。數據顯示，運用數位槓桿的個體創業者，其單位時間產值可達傳統職業的 7-8 倍，而具備「獨特知識」（Specific Knowledge）的專業人士，其市場議價能力更呈現指數級成長。

商業的本質：價值交換與持續收入

Chainlink SVR：提升 DeFi 協議價值回收

Chainlink 的 Smart Value Recapture (SVR) 是一項新推出的解決方案，旨在幫助 DeFi 協議（如 AAVE）回收因 Maximal Extractable Value (MEV) 而流失的價值。MEV 是指區塊生產者通過調整交易順序、插隊或取消交易等方式所獲得的額外利潤。在 DeFi 協議中，特別是在清算過程中，這種價值通常被第三方（如搜索者和驗證者）所捕獲，而原本應該返回給協議的價值卻未能實現。

三個必備的投資組合

加密市場的長期持有之道

人生至暗時刻應該如何度過？

爆倉之後的反思

幣圈中的耐心與信心

副業的重要性：提升人生抗風險能力

加密貨幣項目進入用戶爭奪階段

當市場波動時，保持冷靜

給負債和走投無路的人的翻身建議

我每天都會收到大量的求助信息，無論是巨額爆倉、要跳樓、還是離婚後養不起小孩的人們都有。我深感同情，但我認為最好的建議是不依賴任何人的施舍或借款，有手有腳就應該靠自己，哪怕去送外賣，只有這樣你才有可能真正翻身。

ERC-7683：Ethereum 上跨鏈意圖的標準

Ethereum 的第二層（Layer 2, L2）解決方案已有效地解決了可擴展性問題，使得用戶能夠快速且廉價地進行交易。然而，這些進展也引入了碎片化問題，導致不同鏈之間的互操作性變得複雜。

為什麼我放棄持有以太坊

作為一名技術人，我對以太坊的技術升級感到非常高興。然而，作為投機者，我已經清倉了。以下是我放棄持有以太坊的原因：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

關於我成爲鍊金術士的二三事（第二章）

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

東京四天三夜考察之旅感想

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

關於我成爲鍊金術士的二三事（第一章）

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

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

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

首爾見聞錄：Korea Blockchain Week 2023

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

從「費曼學習法」到團隊的實際應用：促進知識分享與合作

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

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

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

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

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

一個 Full Stack Developer 的日常

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

如何找到加拿大工作？

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

從遊戲角度探討 Software Engineering 工作

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

如何利用 Stack Overflow 高效學習 JavaScript？

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

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

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

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

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

如何使用 React 渲染 Markdown？

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

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

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

十年挑戰之水平垂直置中

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Awesome Promise Methods

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

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

lozad.js ﹣ 高性能、無依賴的純 JS 任意元素懶加載插件

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

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

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

5 分鐘掌握 Day.js，輕量化處理時間和日期

Day.js 是一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持完全一樣。如果您曾經用過 Moment.js, 那麼您已經知道如何使用 Day.js

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

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

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

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

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

vtop ﹣ 一個你用了就會愛不釋手的圖形化進程管理工具

當我查看 CPU 和系統狀態時，我希望可以更加快捷，直觀地找出問題所在。vtop 則可以幫助我們節省分析過多數據，還提供 hjkl 一樣的 vim 鍵位，非常方便易用。如同 top 一樣，它可以顯示系統中各個進程中資源佔用狀況，並終止特定進程。

來杭工作兩個月後的生活與工作總結

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

Uncaught ReferenceError: regeneratorRuntime is not defined 解決方法

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

關於 2018 年的 Calpa Liu

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

【方法】在直接複製貼上內容的時候，可能已經不知不覺注入了一段不可視的「空白」

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

知乎無限 live 數據流網站

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

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

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

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

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

美化 console.log 輸出

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

域名託管計劃

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

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

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

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

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

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

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

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

前端程序員的必備工具清單（MacOS）

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

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

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

異步操作見聞錄

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

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

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

React 應用輕量化（一）Source Map

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

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

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

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

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

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

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

神兵利器 -- HHKB Pro 2 開箱文

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

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

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

2017 年香港開源年會後記

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

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

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

5 分鐘製作 Markdown PowerPoint

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

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

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

為什麼要寫技術博客？

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

打好 JavaScript 基礎的 6 個步驟

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

深入 ECMAScript 的數據類型

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

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

初探 React 組件生命週期

初探正則表達式

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

CreateListFromArrayLike called on non-object 報錯的解決方法

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

Coders of the Caribbean Online Contest 後記

Codingame

HackUST 2017 後記

【React Native】安裝 Android Apk 而無需連接伺服器的方法

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

14 種常見的 HTTP 狀態碼

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

Git 多人合作開發工作流程

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

localStorage vs sessionStorage

LocalStorage 和 SessionStorage 的對比

Hello, World!

Hello World

Guest Book