所有文章

輕鬆在不同時區之間轉換時間並比較重疊時間段

使用 react-wrap-balancer 在 React.js 網頁實作 Balance Text，平衡每一行文字寬度，讓視覺更舒服。輕量化簡單易用，支援 React 18 及 Next.js SSR

總結這系列 30 天內從零開始、用現代前端技術打造的炫砲個人部落格，回顧學到的內容、實作出的功能、及用到的技術

在 Next.js 的 getStaticProps 裡，實作每篇 MDX 文章的舊路徑轉址

在 Next.js Contentlayer 部落格中，使用 next-i18next 實作中英文多語系，包含語系切換按鈕及 Command Palette

讓 Command Palette 指令面板能搜尋所有文章，並跳轉到特定文章內頁

安裝 kbar 套件來實作 Command Palette 指令面板，並使用 Tailwind CSS 美化樣式

使用 @giscus/react 來在 Next.js 部落格內加入留言系統，綁定 Github Discussions 來當作留言板

在 Contentlayer 部落格加入文章側邊目錄，讓讀者一目瞭然文章結構，使用 github-slugger 及 IntersectionObserver

使用 nprogress 套件加入頁面切換進度條，改善讀者體感效能

使用客製化 MDX 元件 CustomImage，搭配 Next.js <Image/> 及 plaiceholder 套件，最佳化內文圖片效能

修改內文 CustomLink，針對內部連結使用 Next.js 提供的 <Link/> 加速頁面切換；針對外部連結則加入外聯 icon 提示

使用 rehype-slug 套件在內文小標題補上 id 屬性，並使用客製 MDX 元件 CustomHeading 加入 anchor 連結

在部落格加入 RSS Feed 功能，讓讀者能以 RSS 形式訂閱最新文章

用 next-sitemap 生成 Sitemap 網站地圖，讓爬蟲了解網站結構，強化 SEO

使用 next-seo 為全站設定標題、描述文字、縮圖、Open Graph、LD-JSON，讓搜尋引擎理解每個頁面意義，強化 SEO

使用客製化 MDX 元件 CustomPre，在程式碼區塊加入「複製按鈕」

使用 rehype-code-titles，為每個程式碼區塊加入標題

使用 rehype-prism-plus 套件，讓程式碼區塊有 Syntax Highlighting 效果

使用 Tailwind CSS 切版 Blog 內文樣式

繼續使用 Tailwind CSS 切版 Blog 首頁樣式

使用 Tailwind CSS 開始 Modern Blog 全站樣式切版，包含 Header、Footer 等

在 Tailwind CSS 支援深色模式，並使用 next-themes 套件來偵測讀者偏好模式，並實作切換按鈕

安裝 Tailwind CSS 這套 CSS 工具，設定好對應的 ESLint, Prettier 規則

在 Contentlayer 支援 MDX 格式，能在 Markdown 內插入任何 React 元件，提升文章內容靈活度

實作 Contentlayer 文章內頁，呈現完整文章 Markdown 內容

使用 Contentlayer 實作首頁文章列表功能，呈現所有 Markdown 文章

使用 Markdown 語法撰寫文章，以及安裝 Contentlayer 將 Markdown 檔案轉換成文章

Next.js 專案基本設定，讓後續開發體驗更流暢、專案結構更易讀。包含用 .nvmrc 鎖定 Node.js 版本、導入 ESLint 和 Prettier、使用 /src 資料夾、設定 Absolute Import

Vercel 架站平台介紹、將上一篇的 Next.js 空專案部署上 Vercel，並串接 Github CI/CD

開幹部落格之前，先來了解前端開發生態、安裝 JS 套件管理器 npm 及 pnpm，並建立基礎 Next.js 前端專案

這系列我們會在 30 天內從零開始，用最現代的前端技術，做出你的炫砲個人部落格！簡介本系列的目標讀者、成果 Demo、內容規劃、及用到的技術

如何設定 Create React App 內建的 Proxy server，來在開發階段繞過呼叫 API 遇到的 Cross-Origin Resource Sharing (CORS) 問題

軟體工程師面試 FANNG 大公司時，必不可少的演算法面試，到底在考些什麼？該如何準備？一起來讀面試聖經《Cracking the Coding Interview（提升程式設計師的面試力）》

我在個人部落格導入了 Hygen 程式碼產生器，讓我能使用 hygen post new 指令，快速建立新文章草稿 .mdx 檔案，簡化繁瑣步驟。

全自動的推特機器人。每日透過 Product Hunt API 爬取熱門專案、React.js Remotion 產生短影片，Twitter API 發佈到貼文到推特上。

使用 Tailwind CSS 做點簡單切版，美化文章列表的樣式！

安裝 Tailwind CSS 這套 CSS 框架在 Next.js，準備做點簡單切版，美化文章列表的樣式

在 Next.js 使用 ApolloClient 串接 WordPress GraphQL API，抓取文章列表資料，顯示在部落格首頁

在 Next.js 安裝 apollo-graphql package，將用來串接 WordPress 的 GraphQL API

在 WordPress 上安裝 WPGraphQL plugin，建立 GraphQL API，提供 Next.js 前端抓取文章資料

將 Next.js 專案發布到 Vercel，在線上看到你的成果，並且使用 Github 自動部署。

使用 create-next-app 建立 Next.js 專案，目標是能在自己電腦上成功開啟 Next.js 網頁。

Next.js 是高級版的 React.js 全端開發框架，支援 Server Side Rendering 等各種渲染策略，大幅提升 DX 開發者體驗及 UX 網站訪客體驗，是非常值得學習的技術。

設定個人部落格 WordPress 的基礎設定，完成文章發布

為我們的個人部落格尋找 WordPress CMS 託管平台，選擇 CP 值最高的 BlueHost 實作，手把手完成架設

這系列文章我們會實作個人部落格，使用 Next.js 前端搭配 Headless WordPress as CMS 後端。改善 DX 開發者體驗、編輯者體驗、UX 讀者體驗、SEO 搜尋引擎優化

這系列文章我會詳實紀錄我用 Next.js 拆分 WordPress 前端的過程，比重大概 30% 會在 WordPress 調整，70% 會在 Next.js 新專案建立、畫面切版、功能實現。會以建立個人部落格為主題，從最初 WordPress 架設，到 Next.js 優化

新的 Gatsby 部落格有自己一套路由設定，與原先 Hexo 不同。於是我使用 gatsby-redirect-from plugin 將文章舊路徑重導向。

當完兵過年期間閒的蛋疼，想要嘗試新技術，於是決定用 Gatsby.js 來重架部落格啦！

科幻風造型獎盃，是我在2017年11月時，受新竹黑客松官方委託打造的，希望能呈現出科技感、及體現創客們的創造力。

「智慧釀藏酒大師 Winster」，是一套幫助您釀酒和控管酒況的釀藏酒平台。主要能夠提供專業釀酒玩家、小型釀酒企業，酒的品種以及產地的分析和釀酒過程的錯誤偵測。

智慧手套旨在取代鍵盤及滑鼠，成為下個世代的人機介面裝置，希望使用者能透過智慧手套，操控生活中的所有事物，例如：控制智慧家電、作為遊戲控制器、演奏虛擬樂器等。

專案目的是開發低成本的智慧導盲犬，取代需要龐大成本訓練的傳統導盲犬，造福盲人朋友的生活。

一個簡單的番茄鐘工作法計時器。

一個很簡單的倒數計時器。

為了成為全端工程師，我決定開始做大量的side-project，從做中學，高效地提升我所需要的能力。

提升商業書「閱讀效益」，以「投資」的角度進行閱讀。