讓網頁標題文字更均衡、好讀，使用 react-wrap-balancer

總結與回顧：一個炫砲技術部落格的誕生 - Modern Next.js Blog 系列 #30

在 Next.js Contentlayer blog 實作舊路徑轉址 - Modern Next.js Blog 系列 #29

使用 next-i18next 實作中英文多語系 - Modern Next.js Blog 系列 #28

在 kbar Command Palette 實作文章搜尋 - Modern Next.js Blog 系列 #27

使用 kbar 加入 Command Palette 指令面板 - Modern Next.js Blog 系列 #26

使用 giscus 在 Next.js 加入留言系統 - Modern Next.js Blog 系列 #25

在 MDX 文章側邊加入目錄 - Modern Next.js Blog 系列 #24

使用 nprogress 加入換頁進度條 - Modern Next.js Blog 系列 #23

圖片效能最佳化，使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22

強化內文連結換頁速度、加入外部連結 icon - Modern Next.js Blog 系列 #21

為內文小標題加入 anchor 錨點連結 - Modern Next.js Blog 系列 #20

使用 feed 生成 RSS Feed - Modern Next.js Blog 系列 #19

使用 next-sitemap 生成 Sitemap - Modern Next.js Blog 系列 #18

加入 Open Graph、LD-JSON 等 SEO meta data - Modern Next.js Blog 系列 #17

加入程式碼區塊「複製按鈕」，使用客製化 MDX 元件 - Modern Next.js Blog 系列 #16

加入程式碼區塊標題，使用 rehype-code-titles - Modern Next.js Blog 系列 #15

加入程式碼 Syntax Highlighting，使用 rehype-prism-plus - Modern Next.js Blog 系列 #14

文章內頁樣式切版 - Modern Next.js Blog 系列 #13

首頁樣式切版 - Modern Next.js Blog 系列 #12

全站樣式切版 - Modern Next.js Blog 系列 #11

Dark Mode 深色模式支援，使用 Tailwind CSS、next-themes - Modern Next.js Blog 系列 #10

安裝 Tailwind CSS 和相關 ESLint、Prettier 設定 - Modern Next.js Blog 系列 #09

讓 Contentlayer 文章支援 MDX - Modern Next.js Blog 系列 #08

文章內頁功能實作，渲染 Markdown 文章內容 - Modern Next.js Blog 系列 #07

首頁功能實作，加入 Contentlayer 文章列表 - Modern Next.js Blog 系列 #06

Markdown 簡介 & 安裝 ContentLayer - Modern Next.js Blog 系列 #05

ESLint、Prettier、TypeScript 等 Next.js 專案基礎設定 - Modern Next.js Blog 系列 #04

將 Next.js 專案部署上 Vercel 平台 - Modern Next.js Blog 系列 #03

簡介前端開發生態＆建立 Next.js 專案 - Modern Next.js Blog 系列 #02

「從零開始打造炫砲個人部落格」系列簡介 - Modern Next.js Blog 系列 #01

解決 CORS 跨域請求問題，使用 Create React App 內建 Proxy 繞過它

何謂演算法技術面試？讀《Cracking the Coding Interview（提升程式設計師的面試力）》

不要再從舊檔案複製貼上了！使用 Hygen 快速建立 Blog 新文章 Markdown 檔案

Product Hunt Today 專案 - 自動產生短影片介紹熱門 Product Hunt 專案的推特機器人

Day12 用 TailwindCSS 切版部落格首頁，顯示 WordPress 文章列表

Day11 TailwindCSS 介紹，在 Next.js 專案安裝 TailwindCSS

Day10 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（下）

Day9 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（上）

Day8 GraphQL 介紹、在WordPress 上安裝 WPGraphQL plugin

Day7 使用 Vercel 發布我們的 Next.js 網站，搭配 Github 實現自動部署

Day6 建立 Next.js 專案 - 使用 create-next-app

Day5 Next.js 介紹 - Production-ready 的 React.js 框架

Day4 WordPress 介紹，基礎設定與發文

Day3 WordPress 架設 - 尋找最適合我們的 WordPress 架站平台 BlueHost

Day2 個人部落格需求規劃 - Next.js Frontend + Headless WordPress

Day1 用 Next.js 拆分 Wordpress 前端 - 系列簡介

設定 Gatsby 部落格文章的舊路徑重導向，使用 gatsby-redirect-from 插件

部落格搬遷紀錄，用 Gatsby.js 取代 Hexo

【專案】科幻風造型獎盃

【專案】智慧釀藏酒大師 Winster

【專案】智慧手套 Smart Gloves

【專案】SigmaGO 智慧導盲犬

Botkit初體驗，寫一隻Slack聊天機器人吧！

開發藍芽鋼琴APP！使用AppInventor結合Arduino、HC05、與蜂鳴器

《為什麼聰明人都用方格筆記本》，用筆記術變身強者吧

【閱讀筆記】《魅力學》，培養魅力的第一本書

在MacOS使用putty key進行ssh連線

使用production mode啟動你的rails專案

【DailyUI #003】Landing Page

【DailyUI #002】Credit Card Checkout

【DailyUI #001】Sign Up

【DailyUI #000】成為最強前端設計師吧

【閱讀筆記】從《他是玩真的！》汲取鋼鐵人Elon Musk創造未來的關鍵能力

【100sites #011】LifeGame，生命遊戲模擬無限的可能性

【100sites #010】Piano，用P5js的sound函式庫實作虛擬鋼琴

【100sites #009】Flame，P5js酷炫小動畫

【100sites #008】Showcase，單頁式網站設計展示我的作品集

【100sites #007】Pong，使用P5.js建構的復古遊戲

如何在Mac OS X上安裝Verilog環境

【閱讀筆記】少，但是更好——精準生活，拿回人生主控權

【100sites #006】Snack

【100sites #005】Drawer

【100sites #004】Firework

【100sites #003】TodoList

【100sites #002】Pomodoro

【100sites #001】Timer

【100sites #000】我的全端工程師之路

「閱讀筆記」槓桿閱讀術——本田直之

使用 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，從做中學，高效地提升我所需要的能力。

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

all-posts