想在瀏覽器裡用 JavaScript 寫出音樂嗎？Tone.js 是專為前端與音樂人打造的強大音頻框架，讓你輕鬆實現合成器、節奏控制、聲音特效與互動音樂應用。本文帶你從安裝、基礎語法到進階應用，全面掌握網頁音樂開發的關鍵技術。
非工程師也能參加黑客松？這篇 AMA 回顧分享 AI 工具、自學技巧與非技術角色的實戰參與方式，讓每個人都能在創新場域中找到價值定位。
想讓你的部落格或產品頁在社群平台上更吸睛？這篇文章教你如何用 Vercel 開源工具 Satori，快速生成動態 OG 圖像，支援 Next.js、Astro、Hono 等框架，提升分享效率與視覺質感。
在 Web3 開發過程中，檢查用戶的代幣餘額是一項基本而重要的功能。本文將詳細介紹如何使用 viem 這一現代化的以太坊庫來查詢特定地址（包括 ENS 域名）的 USDC 代幣餘額。我們將以知名的以太坊創始人 Vitalik Buterin 的 ENS 域名 vitalik.eth 作為示例，展示完整的實現流程。
Slidev 是專為開發者與技術講者打造的開源簡報工具，支援 Markdown 撰寫、Vue 組件擴充、程式碼高亮、Mermaid 圖表與 LaTeX 數學公式，讓你輕鬆製作互動、可客製化的專業技術簡報。
在現代數位工作流程中，Google Forms 已成為收集和組織資料的強大工具。透過 Google Apps Script，我們可以程式化地創建、修改和管理 Google Forms，讓整個過程更加自動化和高效。本文將深入探討如何使用 Google Apps Script 創建功能豐富的 Google Form，並連接到 Google Sheets 收集回應。
Notyf 是一款體積不到 3KB、零依賴的 JavaScript Toast 通知庫，支援 React、Vue 等主流框架，具備高度可定制性與無障礙設計。本文將帶你深入了解 Notyf 的核心特性、安裝方式與實作範例，幫助你在不犧牲效能的前提下，快速打造現代化的通知系統。
在現代前端開發中，不可變性 (Immutability) 已成為處理狀態的重要範式，尤其是在 React、Redux 等生態系統中。Immer.js 作為一個輕量級的庫，提供了一種優雅的方式來處理 JavaScript 中的不可變狀態，並在 2019 年贏得了 React 開源"年度突破"獎和 JavaScript 開源"最具影響力貢獻"獎。本文將深入探討 Immer.js 的優勢及其在實際開發中的應用。
探索 Iconify 如何革新前端圖標使用，提供統一且靈活的圖標管理方式，並了解其在 Vue 專案中的實際應用和優勢。
JavaScript 作為一門功能強大的程式語言，提供了多種操作陣列的高階函數方法，其中 forEach、map 和 reduce 是最常用且最具表達力的三種方法。這些方法為開發者提供了簡潔、可讀性高的寫法，能夠以宣告式而非命令式的方式處理陣列資料。本文將深入探討這三種方法的原理、使用方式、差異及適用場景，幫助開發者在實際專案中更有效地選擇和使用它們。
在現代網頁開發中，滾動進度條已成為提升用戶體驗的重要元素，它能直觀地向訪客展示頁面閱讀進度。本文將深入探討如何利用 Astro 框架創建一個高效、輕量級的滾動進度條，並分析其背後的技術原理與優勢。Astro 作為一個專注於性能的現代前端框架，為此類功能實現提供了優秀的開發體驗與執行效率。
使用 CSS 為 console.log 加上顏色與樣式，讓前端除錯變得更直觀有效。本文介紹如何利用 %c 格式說明符，在 Google Chrome 開發者工具中實現彩色輸出，並提供多種實用範例與應用技巧。
想知道 Axios 是什麼？這篇教學將帶你深入了解這個最受歡迎的 JavaScript HTTP 客戶端，從基本用法到錯誤處理、請求攔截、取消請求等進階功能，幫助你有效管理 Web API 串接工作。
React 組件卡頓、重新渲染太慢？本文深入解析 useMemo 的使用方式與實戰案例，幫你解決效能瓶頸，打造流暢的 React 應用體驗。
第一次參加 Web3 黑客松就獲獎？這篇文章記錄我如何用 React、TypeScript、Tailwind 與 RainbowKit 打造 OrbitGO，36 小時完成一個多鏈資產儀表板的開發心得。
Decimal.js 是一個為 JavaScript 和 TypeScript 設計的任意精度十進制運算庫，專為解決 JavaScript 原生數字型別在處理浮點數時所面臨的精度問題。對於需要高精度計算的金融和科學應用來說，這個庫提供了一個強大且可靠的解決方案。
Socket.IO 是一個強大的實時通訊庫，為開發者提供了建立低延遲、雙向、事件導向的客戶端與伺服器之間通訊的能力。在現代網頁應用程式中，Socket.IO 已成為實現即時互動的首選解決方案。本文將深入探討 Socket.IO 的核心優勢，並通過實用的代碼示例展示其應用。
Wagmi 是一個專為以太坊應用程序設計的 React Hooks 集合，提供開發者所需的一切工具，使區塊鏈前端開發變得簡單高效。通過類型安全、可擴展和模塊化設計，Wagmi 讓開發者能夠專注於構建高性能的區塊鏈前端體驗，而不必擔心底層複雜性。
TypeScript 已成為現代前端與全端開發的主流選擇，越來越多開發者和企業選擇從傳統 JavaScript 轉向 TypeScript。本文將深入分析從 JS 轉向 TS 的主要優勢，並提供實際案例與轉換策略，幫助您判斷是否應該為團隊或個人專案進行這項技術升級。
模糊搜尋技術在現代應用程式中扮演著關鍵角色，特別是當需要處理用戶輸入錯誤和提供更智能的搜尋體驗時。Fuse.js 作為一款輕量級且功能強大的 JavaScript 模糊搜尋庫，正逐漸成為前端開發者的首選工具。本文將深入探討 Fuse.js 的核心功能、技術優勢及其實際應用場景。
Alpine.js 是一個小巧但功能強大的 JavaScript 框架，為開發者提供了一種簡單直接的方式來增強網頁互動性。作為前端開發領域的新星，Alpine.js 結合了大型框架的反應式特性與輕量級的實現方式，為開發者帶來了高效且易於使用的解決方案。本文將深入探討 Alpine.js 的特點、優勢及其實際應用案例。
Mermaid.js 是一個強大的 JavaScript 庫，允許開發者使用簡單的類似 Markdown 的語法創建各種圖表和可視化效果。無需繪圖工具或設計技能，僅通過文本定義就能生成專業的圖表，包括流程圖、餅圖、時間線、序列圖等多種類型。本文將探討 Mermaid.js 的主要優勢，並提供三種常用圖表的實用示例。
Astro 是專為內容導向型網站而生的超輕量框架，兼具極速效能與自由整合力，本文將從實戰角度出發，帶你深入理解為何我從 GatsbyJS 遷移至 Astro。
TypeScript 作為 JavaScript 的超集，自 Microsoft 推出以來，逐漸成為許多開發者，特別是處理大型應用程序的團隊的首選語言。它不僅增強了 JavaScript 的功能，還通過靜態類型檢查和豐富的工具支持，顯著提高了開發效率和代碼質量。本文將深入探討 TypeScript 的核心特性，以及使用 TypeScript 相較於 JavaScript 的諸多優勢。
Recharts 是一個專為 React 應用打造的強大圖表庫，它提供了簡潔的聲明式語法和豐富的定制選項，使開發者能夠輕鬆創建互動式數據可視化組件。本文將深入探討 Recharts 的核心特性、安裝方法、基本使用以及其在 React 專案中的優勢。
在當今網絡環境中，通過 IP 地址獲取用戶地理位置信息已成為眾多網站和應用程序的基本需求。IP-API 提供了一個功能強大且部分免費的地理位置 API 服務，使開發者能夠輕鬆獲取 IP 地址相關的地理數據。本文將深入探討 IP-API 的功能特點、使用免費數據的優勢，以及如何通過 Fetch API 進行實際應用。
深入剖析 JavaScript 非同步程式設計的最新發展！從基礎概念到進階應用，本文完整介紹 async/await 的強大功能、最佳實踐和效能優化技巧。透過實用範例，了解如何運用 async/await 提升程式碼品質並避免常見陷阱。
在 2025 年 3 月 18 日，styled-components 核心維護者 Evan Jacobs（quantizor）宣布曾經風靡 React 社群的 CSS-in-JS 解決方案正式進入維護模式。這個消息對於前端開發社群產生了相當大的迴響，也標誌著前端樣式處理技術的一個重要轉折點。
viem 是一個功能強大的 TypeScript 接口，為以太坊和其他 EVM 兼容區塊鏈提供低層次的無狀態原語。作為 ethers.js 和 web3.js 的替代品，viem 在開發者體驗、穩定性、捆綁包大小和性能方面有著顯著優勢。本文將深入探討 viem 的特性及其為 Web3 開發者帶來的獨特價值。
在現代網頁開發的快節奏環境中，代碼的一致性和可讀性變得越來越重要。作為開發人員，我們經常花費大量時間調整代碼風格、確保跨文件的一致性，以及解決因格式不一致導致的合併衝突。Prettier 作為一種自動化代碼格式化工具，能夠有效解決這些問題，提升開發效率和代碼質量。
在當今高度競爭的網絡環境中，前端網站性能已成為用戶體驗的關鍵因素。網站加載速度慢不僅降低用戶滿意度，還會影響搜索引擎排名和轉化率。本文將深入探討三種強大的前端優化技術：樹搖優化、打包分析 和 代碼拆分，在 Vite 中實現這些技術，並詳細介紹如何利用 Vite 大幅提升前端應用性能。
CSS-in-JS 是一種革命性的樣式技術，它使用 JavaScript 來創建、添加和管理樣式。當 JavaScript 被解析時，CSS 會被動態生成並附加到 DOM 中。這種方法將樣式的抽象提升到了組件級別，使開發者能夠使用 JavaScript 以聲明性和可維護的方式描述樣式。這篇文章將深入探討 CSS-in-JS 的優勢以及如何在 React.js 應用中實現它。
React 19 引入了一系列創新功能，其中最引人注目的之一是 useActionState Hook。這個強大的新工具為前端開發者提供了更簡潔、更高效的方式來管理表單操作和狀態更新。本文將深入剖析 useActionState 的實用性，並通過實例演示如何在項目中有效地運用它。
前端開發作為一個不斷演進的領域，每年都有新的技術和框架湧現。作為一名全棧開發者，我長期以來一直在思考如何系統化地組織前端知識，並將這些知識有效地傳遞給更多人。這篇文章將分享我如何基於台灣招聘市場的研究，構建了一套全面的前端技能圖譜，以及我未來的寫作計劃。
SCSS 作為現代 Web 開發中日益流行的樣式預處理器，為前端開發人員提供了比傳統 CSS 更強大的功能和更高效的工作流程。本文將深入探討 SCSS 的優勢、與 CSS 的主要區別，以及如何在 React TypeScript 項目中有效地使用它，幫助開發者提升樣式編寫效率和代碼可維護性。
Medium-Zoom 是一個專注於提供類似 Medium 網站風格圖像縮放效果的輕量級 JavaScript 庫。這款工具能讓使用者點擊圖像後獲得沉浸式的放大視圖，提供更好的圖像細節瀏覽體驗，同時保持網站的整體美觀和用戶體驗流暢度。本文將深入探討 Medium-Zoom 的核心功能、使用優勢，以及與市場上其他類似解決方案的比較。
在當今數據驅動的網絡環境中，網站分析工具是了解用戶行為和優化網站性能的關鍵。Umami 作為一個開源的網站分析解決方案，正逐漸成為 Google Analytics 的有力競爭者。本文將深入探討 Umami 的特點、優勢，以及如何使用 Umami Cloud 或自托管方式部署這一強大工具。
在多鏈生態系統快速發展的當下，不同區塊鏈之間的互操作性變得尤為重要。Circle 的跨鏈傳輸協議（Cross-Chain Transfer Protocol，簡稱 CCTP）作為一個革命性的解決方案，正在改變 USDC 在不同區塊鏈之間的轉移方式。最近，Circle 推出了 CCTP v2，引入了多項重要升級，大幅提高了跨鏈轉賬的速度和靈活性。本文將深入探討 CCTP 的核心概念、優勢、v2 版本的改進以及其應用場景。
在現代軟體開發中，前端與後端開發經常需要同步進行，但後端 API 通常需要較長的開發時間。當後端尚未準備好時，前端開發人員如何繼續他們的工作？這時，API 模擬工具就顯得至關重要。本文將深入探討 Mockaroo 這款強大的數據模擬工具，解析它如何加速開發流程，詳細指導如何使用它，並分析其相比其他模擬服務的優勢。
在測試驅動開發中，斷言是驗證程式碼行為的關鍵。傳統的 assert 僅顯示斷言失敗的簡單訊息，而 Power Assert 則提供了直觀、詳細的失敗原因視覺化展示，讓除錯過程更加高效。本文深入介紹 Power Assert 的使用方法、配置選項及其在現代前端開發中的應用。
React 開發團隊於 2025 年 2 月 14 日正式宣布淘汰 Create React App (CRA)，並鼓勵開發者轉向使用現代框架或構建工具如 Vite、Parcel 或 RSBuild。這一決定標誌著前端開發工具生態系統的重大轉變，開啟了以框架為中心的新時代。
在當今的 Web 開發中，表單是與用戶交互的最重要界面之一。對於 React 開發者來說，有多種表單解決方案可供選擇，其中 React JSONSchema Form (RJSF) 以其獨特的方式脫穎而出。本文將深入探討這個強大的表單庫，了解如何利用它構建複雜表單，以及如何通過自定義組件提升用戶體驗。
在現代應用程序開發中，安全存儲用戶密碼至關重要。本報告將詳細介紹如何在 Node.js 中使用 bcrypt 進行密碼加密，探討為何 bcrypt 優於其他哈希方法，並提供密碼加密的最佳實踐。
ShareThis 是一種社交分享工具，允許用戶在不同社交網絡平台上輕鬆分享網站內容。它提供多種免費工具、應用程序和插件，幫助網站管理員增加流量和社交關注。在全球擁有超過 5 億用戶，每天被數千家企業使用，ShareThis 不僅僅是一個分享按鈕工具，還提供數據解決方案，幫助企業優化營銷策略，深入瞭解用戶行為。
在當今數位化的演講和教學環境中，創建互動式、視覺吸引力強的幻燈片演示文稿變得越來越重要。本文將向您展示如何結合使用 Vite 和 Reveal.js 來快速建立一個簡單而功能強大的網頁演示文稿系統，讓您能夠通過 HTML 和 Markdown 創建精美的幻燈片。
AutoCorrect 是一個強大的文案格式化工具，能夠自動糾正中日韓（CJK）與英文混合使用時的常見問題，如標點符號、空格等。本文將介紹如何透過 GitHub Actions 的自動化工作流程，讓您的繁體中文文章在推送到 GitHub 時自動進行格式化，有效提升文章的專業度和可讀性。
REST Countries API 是一個功能強大的開放源碼 RESTful 服務，提供世界各國豐富的資訊。本文將深入探討這個 API 的工作原理、主要功能以及實際應用案例，特別聚焦在台灣及其主要區域的數據查詢範例。
TypeScript 最近宣佈的 Go 語言原生實現（被稱為 TSGo 或 Corsa）標誌著這一流行編程語言發展歷程中的重要里程碑。這項於 2025 年 3 月 11 日公布的重大技術轉變，不僅展示了引人矚目的性能提升，還反映了更廣泛的 JavaScript 生態系統中正在發生的構建工具轉向 Rust 和 Go 等編譯型語言的趨勢。
MyGO!!!!! Telegram 機器人是一個結合了現代邊緣計算技術與動漫文化的創新項目。這個基於 Grammy 和 Hono 框架構建的 Telegram 機器人，能讓用戶通過關鍵詞搜索 MyGO!!!!! 的圖片。本文將深入探討該機器人的背景、技術實現和功能特點，展示如何利用 Cloudflare Workers 部署高效能的 Telegram 機器人。
Web3 的機會已經來臨，接下來的三個月，我必須全力以赴。以下是我 2024 年的學習計畫：
當我閱讀《射鵰英雄傳》時，左右互搏術讓我聯想到測試驅動開發（Test-Driven Development，TDD）。這裡以編寫購物車功能為例，分享如何運用 TDD 來協助編寫程式碼
當今的數位世界中，網站用戶要求即時、動態和高度互動的體驗。我們需要確保用戶始終能夠訪問最新的內容，同時保持優秀的性能。在這方面，透過結合 Cloudflare Pages、Worker 和 KV，我們可以實現伺服器端渲染，提供動態且實時的內容，從而提升網站的性能和可用性。本文將深入探討這三個工具，解釋它們如何協同運作，以實現即時伺服器端渲染，提供更出色的用戶體驗。
我們在提供出色的用戶體驗的同時，也要顧及前端工程師的開發體驗。本文將帶您深入了解我常用的核心技術：Astro、Tailwind CSS 和 Animate.css，它們為前端工程師提供了更高效的工作方式，同時帶來更優秀的性能、設計和互動體驗。
2023 年，我回到香港，從全棧工程師，行過死蔭幽谷，現在成爲系統架構師。能夠在 Web3 的世界自由自在地行走，十分感激當初的百般試煉。現在，就讓我回顧這一年我採用的前端後端雲端 Web3 方案，希望可以拋磚引玉
作為資深開發者，我經常需要將複雜的技術概念傳遞給團隊成員，以確保項目順利進行。這推動我將複雜知識轉化為易懂形式，促進團隊合作，並加強自身學習。本文將分享如何在實際工作中運用費曼學習法，幫助團隊理解複雜技術，實現項目成功
透過重構博客網站，我得以體會結合 Static Site 和 Vue 的優點。在靜態網站生成和動態組件的結合下，可以實現更出色的網站開發，接下來的內容中將分享開發心得
Storybook 最大的優點是它可以提供不同的頁面來顯示組件的不同狀態，讓我們在各種不同的情況下測試和評估組件。通過為不同狀態創建不同的頁面，我們可以輕鬆地測試組件。另外，Storybook 也可以輸出一個 Static Website，可以輕鬆分享給設計師和其他團隊成員，讓他們容易理解組件的外觀和行為。
我在今年 3 月初的時候，透過 Mind Map 整理自己作爲 Full Stack Developer 的日常，並且花了很多時間去改善日常工作流程。最近我有點時間，於是就把那份 Mind Map 寫成文章，希望可以繼續拋磚引玉。謝謝大家支持
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 會是另外一個解決方案。
GatsbyJS 提供了一個簡單易用的命令行工具，我們可以透過它來構建一個基本的 React 網站，並實時看到修改代碼所帶來的變化。
時光飛逝，我已從大學畢業成為前端工程師。回想這一年，我完成了三件事情：改版博客系統，讓不同用戶可以快速啟動項目，它是我第一個過百 Star 數的項目；翻譯並校對技術文章，學習了不少前端實用的技術；對博客系統框架的 GatsbyJS，ReactJS 技術研究。
感謝各位這些年來閱讀我的博客文章，以及優化博客系統框架，現在，我將為你帶來一個前後端徹底分離，而且可以一鍵啟動的博客框架。
上次我們提到 GatsbyJS，它是一個可以獲取任意數據，並生成靜態化網站的系統。這一次，就讓我們以 Calpa 的技術博客作為例子來開始架構網站吧
GatsbyJS 是一個現代化開發網站的網站產生系統，擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用，讓前端工程師，編輯，用戶都感到滿意。就讓我們一步步地探索這個系統吧。
學習如逆水行舟，不進則退。透過這個清單，我可以不斷學習前端知識，掌握更新的技能，天天進化。
在程序員的日常精進之中，閱讀優秀的代碼是必不可少的。透過 TDD 的開發模式，可以模仿那些優秀的代碼，從而提升自己代碼水平。下面介紹如何從零開始搭建 TDD 環境，並構建 isEven 代碼
對於代碼裡面的 if else，我們可以使用邏輯判斷式，或更好的三元判斷式來優化代碼。除了可以降低維護項目的成本之外，還可以提升代碼可讀性。就讓我們從最簡單的 if else 例子開始吧。
世界上不同的程序員，因開源活動而連接一起。這次 Hacktoberfest 活動除了可以拿到活動的限量衣服和貼紙之外，更可以認識到世界上不同的程序員。我看著不斷而來的討論和 PR，我找回了自己在編程上的熱情。如果你有興趣參與開源活動，但不知道如何入手的話，它會是一個不錯的起點。
為了提升用戶的加載頁面速度，我們可以使用懶加載這個方法。當用戶打開頁面的時候，只需要載入首屏的資源，從而節省流量，提升加載速度。而用戶滾動到圖片佔用位置，瀏覽器才載入圖片資源。利用 `lozad.js`，我們可以簡單容易地懶加載圖片。它是一個可以單獨運行的工具，gzip 後的體積只有 910B，可以說是超輕量的工具庫。除了加載圖片之外，它還可以加載任意元素，例如 iframe，影片。在過去的一年，博客就已經啟動這個懶加載的功能了，也算是通過了眾多不同用戶的考驗了。
這次 Google 開發者大會請來了 Lighthouse 的工程師 - Eric Bidelman，分享如何簡單地使用 Lighthouse, Puppeteer 來自動化我們日常的流程。它是一個開源的自動化工具，用於改進網絡應用質量。您只需要提供網址，它就測試該頁面，並生成頁面性能報告。你可以看看採取哪些措施來改進您的應用
Day.js 是一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持完全一樣。如果您曾經用過 Moment.js, 那麼您已經知道如何使用 Day.js
如果你熟悉申請大學流程的話，你也可以理解 JavaScript 的 filter 方法。相對於 JavaScript 裡面的 map() 和 reduce() 方法來說，filter() 方法也許是最一目了然的方法。
當我查看 CPU 和系統狀態時，我希望可以更加快捷，直觀地找出問題所在。vtop 則可以幫助我們節省分析過多數據，還提供 hjkl 一樣的 vim 鍵位，非常方便易用。如同 top 一樣，它可以顯示系統中各個進程中資源佔用狀況，並終止特定進程。
時光飛逝，轉眼已經離開香港兩個月。上有天堂，下有蘇杭。我也開始習慣這裡的生活，無論是生活節奏，還是工作習慣，都有所不同。這就是我這些天來最大的體會。
async/await 能讓開發者享受異步操作的快感，解決回調地獄的問題。然而，編譯器對於 async/await 的編譯有時候卻不和我們想象中的一樣。透過安裝正確插件，或改回 Promise 版本，我們可以解決這個問題。
你好，歡迎來到我的博客。我是 Calpa，一個喜歡寫技術文章的前端程序員。
趁著深夜有空，我就翻譯了一篇有趣的文章。這篇文章是說如何插入任意文本到任意文本。有時候，文章都會被某些網站會直接引用博客內容。這一類的插入空白字符串方法，可以成為其中一個有力的追蹤源頭的線索。
一直收聽知乎無限 live 的時候，我都會想：如何才能更有效率地收聽這些計畫內的 live 呢？於是我心血來潮，把無限 live 的資料拿了下來，然後做一個數據流的網站。這個網站展示和源碼已經放在 Github。這個項目可能適合那些喜歡看到很多數據的同學
當我在更新 gatsbyjs 本體和 `gatsbyjs-*` 插件後，就發現構建 JavaScript 代碼的時候失敗。解決問題的過程，需要多聯想關鍵字。但簡單來說，只要安裝正確的 babel 轉換插件，就可以解決這個問題。
最近忙著大學的事情，少了時間寫博客文章。可是沒想到在過去那一篇文章發佈之後，就遇到 Gitalk 評論區出現 Error: Validation Failed. 這樣的問題，在 Github 上面和網友討論之後，想出了一個解決方法，希望可以拋磚引玉。
console.log() 這一個方法可以說是前端工程師最常用的調試方法之一。當我在研究音樂播放器 Aplayer 源碼的時候，發現其中有一行有趣的代碼，可以在 console 裏面輸出自帶顏色的圖案，故在此記錄一下。
從最初的失望與後悔，到最後的興奮與感動，2017 年可以算是充滿挑戰與機遇的一年。雖然我依然是一個非科班學生，但是這沒有阻止我轉行成為前端工程師，反而成為向前邁進的動力之一。如果沒有這些經歷，我也不會發現自己對於編程的那份熱愛。在此，就讓我回顧一下這一年在自學編程轉行的經歷吧。在開始這篇文章之前，我先戴上頭盔，以防意外。
如果你有試過打包整個 Node 項目到服務器上，那麼你發現自己的項目體積比較大，其中一個原因是 `node_modules` 文件夾包含很多不必要的檔案。在使用 npm 安裝不同插件時，往往會包含很多不必要的文件夾，例如`example`, `doc`。要麼我們就是手動刪除它們，要麼我們就是自己寫一個自動腳本。而開發 Koa、Co、Express 的 TJ 大神則提供了一個簡單輕巧的工具。我們可以學習一下他的思路，以及使用這個工具。
良好的代碼規範，能夠提高代碼的可閱性，使得項目維護更友好。除了自己設定一個規範外，我們也可以借鑒一下現在流行的代碼規範，讓我們成長之後，再去看細節。
首先，我要感謝網易。作為一個香港人，能夠拿到杭州的面試機會，實屬機會難得。這次的兩輪技術面試，考察點廣泛而深入。雖然問題比較深入，但這讓我感覺對於技術要求比較高，這是一件好事，因為可以反映公司對於技術的重視。在大四的這一年裡，我會繼續努力，爭取時間學習一個。本文將會記錄我面試時遇過的問題，以及作為一個香港人在杭州遇到的困難。
異步操作是非常常見的操作，也是其中一題常見的前端工程師面試題目。在日常開發中，我們會和伺服器交互，或者是和用戶的行動作出反應，比如說監聽某些點擊事件。這個時候，其實我們是執行了異步操作，我們需要等待對方若干時間才能收到返回值，甚至是一個錯誤的值。因此，異步操作很容易產生一些誤會。這裡，我會說一下異步操作，及其返回的處理方法。
React-markdown 可以把 markdown 語句轉譯為 React 組件，十分方便使用。
create-react-app 提供了很方便的創建 React 應用途徑。它已經把 webpack, Babel, Autoprefixer, ESLint, Jest 等常用工具打包進去。可以說是一個非常方便，好用的製造 React 應用工具。當我打算把包裝好的檔案推上去的時候，我卻發現打包之後的檔案大小有點大，因此我就開始優化這個網頁應用了。第一點我優化的地方就是 Source Map。
以前，我的博客是用 Disqus 的評論插件，但是無論是載入速度，還是樣式上，都是有所缺乏的。我一直沒有安裝其他的評論插件，因為覺得搬家有點麻煩。但是當我試用一下之後，我就覺得這個插件安裝很方便，功能也很實用，尤其是可以寫 Markdown 評論，讓我非常喜歡這個插件了。
上天對於每個地球人都是公平的，每個人都一天只有 24 小時。為什麼有的人會停留不前，有的人卻會不斷有所成長？其中一個原因是當遇到問題時，他們解決問題的方法是非常不同的。同樣是遇到問題，與其伸手，等其他程序員幫助去解決問題，倒不如自己先嘗試各種方法，然後才問人家。我會在這篇文章簡單說一下在你提問之前，你可以做的六個步驟。
如果你用過 Font Awesome 等圖標，你可能會覺得它們很好看，用起來很很方便。但是，在用戶點擊這些圖標的時候，它們是不會有反應的。如果有這些圖標會動的話，那就更加好。Titanic 提供一系列的動畫圖標，以及以 JavaScript 的調用圖標動畫的方法。
在網頁開發的世界裡，尤其是前端開發，我們會用很多時間尋找最好的設計，以及最好的內容。雖然這是沒有錯的，但是，我們會忘記去優化我們的網頁。這會讓用戶需要很久的時間，比如說，瀏覽器需要六秒到十秒以上才能完成整個渲染過程。在這篇文章，我會分享優化網頁的檢查清單。如果你覺得我有錯漏的地方，請在下面留言。這張清單會包含一些優化搜尋引擎排名 (SEO) 的技巧，以及減少網頁加載時間的最佳實踐。
大約兩個星期之前，我在 Facebook 上看到 2017 年的香港開源年會的消息。我想，我是不是可以透過這個機會，認識一下不同領域的程序。於是，我在 EventBrite 上面買了學生票。但最終我拿到 VIP 票了，感覺有點激動。我把這一次的會議做了幾點筆記，也許，每一個人都應該參加最少一次如此有規模的大會。我會在這裡說說我參與這次會議所發生的一些事。
經過 2017 年香港開源年會之後，我都沒有去看香港的開放數據做得怎麼樣。今天香港正懸掛八號風球，正好是一個機會去了解一下。香港政府有一個開放數據平台，資料一線通，以多種檔案格式提供多個政府部門類別，機構的一些查詢資料，比如說天氣預報，中學教育統計資料。值得注意的是，這些檔案並不是 ODF，而是 xls, xml, csv, json, gif, txt, tif。
如果我想轉換數組裡面的字符串為數字的話，很自然就會想到 `map` 和 `parseInt` 這兩個方法。但是用起來的時候卻不是我想要的結果。
平日開發的時候，我們會選擇使用一些框架來避免重複製造輪子，減輕我們的工作量。然而，我們卻不能透過使用更好的工具，或者更換框架來解決一些基礎開發問題。因此打好基礎很重要，不但決定前端程序員解決基礎問題的能力，還決定了面對日新月異框架時的掌握能力。當我開發 React 應用的時候，遇到的問題多是我對於 JavaScript 的理解不夠充分。因此，我在這裡寫一下如何打好 JavaScript 基礎，希望拋磚引玉 XD
每一種編程語言都有數據結構，但他們各有不同之處。JavaScript 是一種動態語言，變數的類型不用提前聲明，你可以使用同一個變數來保存不同的數據類型。
初探 React 組件生命週期
正則表達式是一個非常簡單的語法，但它也是神兵利器，可以說是程序員必須要理解的工具之一。它就像一本會不斷成長的寶刀，隨著程序員對它的理解，它的威力也跟著增強。
如果你遇到 CreateListFromArrayLike 的報錯的話，那麼可以看看代碼裡面調用 apply 方法的地方，call 是用 0 個或者更多的參數，而 apply 則是用一個數組。
LocalStorage 和 SessionStorage 的對比
3082 分享
2025年3月21日
2160 分享
2023年10月13日
1472 分享
2025年3月17日
1357 分享
2025年3月25日
1159 分享
2025年4月18日
1017 分享
2025年3月29日
968 分享
2025年4月06日
917 分享
2023年12月04日
867 分享
2025年3月28日
2025年4月20日
2025年4月19日
86 分享
384 分享
2025年4月17日
448 分享
2 分享
