# Eason Chang
> This is Eason Chang's website. You can find my interesting projects, thoughts, learning notes, dev experiences, etc.
Personal blog of Eason Chang, a fullstack developer from Taiwan living in Canada. Posts cover software engineering, web development, maker projects, and productivity, written in English and Traditional Chinese. Every post is also available as raw markdown by appending `.md` to its URL.
## Posts (English)
- [Building DailyWage: A Real-Time Salary Counter with a Corgi Companion](https://easonchang.com/posts/dailywage.md): DailyWage is a free iOS app from Aburi Studio that shows your salary ticking up every 100 ms, with a pixel corgi companion, tap-to-save goals, and widgets. No backend — your data never leaves your device.
- [FireFree: A FIRE Planning App That Calms Your Money Anxiety](https://easonchang.com/posts/firefree.md): FireFree is the FIRE planning app we built at Aburi Studio: no expense logging, no bank linking — just track your net worth and see the day you reach financial freedom. Free to sign up, with a no-account demo mode.
- [Building CoreHour: A Time-Boxing App Around the 80/20 Rule](https://easonchang.com/posts/corehour.md): CoreHour is a minimalist time-boxing app from Aburi Studio that helps you focus on the 20% of tasks that drive 80% of results. What it does, why we built it, and where it's headed.
- [Equation Pyramid - A Math Puzzle Game Inspired by The Devil's Plan](https://easonchang.com/posts/equation-pyramid.md): Equation Pyramid is an open-source 3D math puzzle game inspired by Netflix's The Devil's Plan: arrange arithmetic operations to form valid equations. Built with Next.js and React Three Fiber — playable right in your browser.
- [FocusZone - A visionOS Focus App with AI Distraction Detection](https://easonchang.com/posts/focuszone.md): FocusZone is a focus and productivity app for Apple Vision Pro: a Pomodoro timer paired with AI distraction detection (phone appearance, noise, head movement) that guards your attention inside immersive spaces.
- [Timez - Time Zone Converter: Convert time between different timezones](https://easonchang.com/posts/timezone-converter.md): Easily convert time between different timezones and compare overlapping time periods
- [Balancing and Improving Readability of Web Titles with react-wrap-balancer](https://easonchang.com/posts/react-wrap-balancer.md): Implement Balance Text with react-wrap-balancer, balancing the width of each line of text for improved visual comfort. Lightweight and easy to use
- [Summary and Review: The Birth of a Dazzling Tech Blog - Modern Next.js Blog Series #30](https://easonchang.com/posts/modern-nextjs-blog-summary.md): Summarizing this 30-day journey of building a dazzling personal blog from scratch with modern front-end technologies, revisiting the learned content, implemented features, and used technologies.
- [Implementing Old Path Redirection in Next.js Contentlayer Blog - Modern Next.js Blog Series #29](https://easonchang.com/posts/contentlayer-redirection.md): Implementing redirection for each MDX article's old path within Next.js's getStaticProps
- [Implementing Multilingual Support with next-i18next in a Next.js Contentlayer Blog - Modern Next.js Blog Series #28](https://easonchang.com/posts/next-i18next-multilingual.md): Implementing multilingual support for English and Chinese in a Next.js Contentlayer blog, including a language switch button and Command Palette
- [Implementing Article Search in kbar Command Palette - Modern Next.js Blog Series #27](https://easonchang.com/posts/kbar-post-search.md): Enabling article search in the Command Palette, allowing navigation directly to specific article pages
- [Adding a Command Palette with kbar - Modern Next.js Blog Series #26](https://easonchang.com/posts/kbar-command-palette.md): Installing the kbar package to implement a Command Palette, and styling it with Tailwind CSS
- [Adding a Comment System to Next.js with giscus - Modern Next.js Blog Series #25](https://easonchang.com/posts/giscus-comment-system.md): Using @giscus/react to add a comment system within a Next.js blog, binding to Github Discussions as the commenting platform
- [Adding a Table of Contents to MDX Articles - Modern Next.js Blog Series #24](https://easonchang.com/posts/post-side-toc.md): Adding a sidebar table of contents to Contentlayer blog articles to provide readers with a clear view of the article structure, using github-slugger and IntersectionObserver
- [Adding a Page Progress Bar with nprogress - Modern Next.js Blog Series #23](https://easonchang.com/posts/nprogress.md): Improving perceived performance for readers by adding a page transition progress bar with the nprogress package
- [Optimizing Image Performance Using Next.js Image, plaiceholder, and Custom MDX Components - Modern Next.js Blog Series #22](https://easonchang.com/posts/post-custom-image.md): Optimizing in-text image performance using a customized MDX component CustomImage, in conjunction with Next.js and the plaiceholder package
- [Enhancing In-text Link Page Speed and Adding External Link Icons - Modern Next.js Blog Series #21](https://easonchang.com/posts/post-custom-link.md): Modifying the in-text CustomLink, using Next.js's for internal links to accelerate page transitions; adding an external link icon for external links
- [Adding Anchor Links to In-text Subheadings - Modern Next.js Blog Series #20](https://easonchang.com/posts/post-heading-anchor.md): Using the rehype-slug package to add id attributes to in-text subheadings, and adding anchor links with the custom MDX component CustomHeading
- [Generating RSS Feed with feed - Modern Next.js Blog Series #19](https://easonchang.com/posts/rss-feed.md): Add RSS Feed functionality to the blog, allowing readers to subscribe to new articles via RSS
- [Generating Sitemap with next-sitemap - Modern Next.js Blog Series #18](https://easonchang.com/posts/next-sitemap.md): Generate a Sitemap for the website using next-sitemap, allowing crawlers to understand the site structure and enhance SEO
- [Adding Open Graph, LD-JSON, and Other SEO Meta Data - Modern Next.js Blog Series #17](https://easonchang.com/posts/next-seo-meta-data.md): Using next-seo to configure titles, descriptions, thumbnails, Open Graph, LD-JSON for the entire site, making each page understandable to search engines and enhancing SEO
- [Adding 'Copy Button' to Code Blocks Using Custom MDX Components - Modern Next.js Blog Series #16](https://easonchang.com/posts/code-copy-button.md): Add a 'Copy Button' to code blocks using the custom MDX component CustomPre
- [Adding Titles to Code Blocks Using rehype-code-titles - Modern Next.js Blog Series #15](https://easonchang.com/posts/rehype-code-titles.md): Using rehype-code-titles to add titles to each code block
- [Adding Syntax Highlighting to Code Blocks Using rehype-prism-plus - Modern Next.js Blog Series #14](https://easonchang.com/posts/rehype-prism-plus-syntax-highlighting.md): Using the rehype-prism-plus package to add Syntax Highlighting effects to code blocks
- [Styling the Article Detail Page - Modern Next.js Blog Series #13](https://easonchang.com/posts/blog-post-page-style.md): Using Tailwind CSS to style the blog post detail page
- [Styling the Blog Homepage - Modern Next.js Blog Series #12](https://easonchang.com/posts/blog-homepage-style.md): Continuing style the blog homepage using Tailwind CSS
- [Full Site Styling - Modern Next.js Blog Series #11](https://easonchang.com/posts/blog-site-style.md): Start styling the Modern Blog site using Tailwind CSS, including Header, Footer, and more.
- [Dark Mode Support with Tailwind CSS and next-themes - Modern Next.js Blog Series #10](https://easonchang.com/posts/darkmode-tailwindcss.md): Supporting dark mode with Tailwind CSS and using the next-themes package to detect reader's preferred mode and implement a toggle button
- [Installing Tailwind CSS and Related ESLint and Prettier Settings - Modern Next.js Blog Series #09](https://easonchang.com/posts/tailwindcss-setup.md): Installing Tailwind CSS, a CSS utility tool, and setting up the corresponding ESLint and Prettier rules
- [Enabling MDX Support in Contentlayer Articles - Modern Next.js Blog Series #08](https://easonchang.com/posts/contentlayer-mdx.md): Supporting MDX format in Contentlayer allows for the insertion of any React component within Markdown, enhancing the flexibility of article content
- [Implementing Post Page Features, Rendering Markdown Post Content - Modern Next.js Blog Series #07](https://easonchang.com/posts/contentlayer-post-content.md): Implementing Contentlayer post pages, displaying complete article Markdown content
- [Implementing Homepage Functionality, Adding Contentlayer Post List - Modern Next.js Blog Series #06](https://easonchang.com/posts/contentlayer-post-list.md): Implementing homepage post list functionality using Contentlayer, displaying all Markdown articles
- [Introduction to Markdown & Installing ContentLayer - Modern Next.js Blog Series #05](https://easonchang.com/posts/markdown-contentlayer.md): Writing articles using Markdown syntax and installing Contentlayer to convert Markdown files into articles
- [Basic Setup for Next.js Projects with ESLint, Prettier, TypeScript, etc. - Modern Next.js Blog Series #04](https://easonchang.com/posts/nextjs-dev-env.md): Basic setup for Next.js projects for a smoother development experience and a more readable project structure. Includes locking the Node.js version with .nvmrc, integrating ESLint and Prettier, using the /src folder, and setting up Absolute Import
- [Deploying a Next.js Project on Vercel Platform - Modern Next.js Blog Series #03](https://easonchang.com/posts/nextjs-to-vercel.md): An introduction to the Vercel hosting platform, deploying the Next.js empty project from the previous article on Vercel, and integrating GitHub CI/CD
- [Introduction to Front-End Development Ecosystem & Setting Up a Next.js Project - Modern Next.js Blog Series #02](https://easonchang.com/posts/frontend-intro-create-nextjs.md): Before starting the blog, let's understand the front-end development ecosystem, install the JS package managers npm and pnpm, and set up a basic Next.js front-end project
- [Building a Stunning Personal Blog from Scratch Series Introduction - Modern Next.js Blog Series #01](https://easonchang.com/posts/modern-nextjs-blog-intro.md): In this series, we will start from scratch and use the most modern front-end technologies to build your stunning personal blog over 30 days! Introducing the target audience, result demo, content planning, and the technologies used
- [Solving CORS Cross-Origin Issues: Bypass Them with the Built-in Proxy in Create React App](https://easonchang.com/posts/create-react-app-proxy.md): How to set up the built-in Proxy server in Create React App to bypass Cross-Origin Resource Sharing (CORS) issues when calling APIs during development
- [What Is an Algorithm Technical Interview? Reading "Cracking the Coding Interview"](https://easonchang.com/posts/cracking-the-coding-interview.md): When software engineers interview at big FANNG companies, the algorithm interview is unavoidable. What does it actually test? How should you prepare? Join me in reading the interview bible "Cracking the Coding Interview"
- [Stop Copy-Pasting from Old Files! Quickly Create New Blog Post Markdown Files with Hygen](https://easonchang.com/posts/hygen-generate-new-post.md): I added the Hygen code generator to my personal blog, so I can quickly create new post draft .mdx files with the hygen post new command, cutting out the tedious steps.
- [Product Hunt Today - An Automatic Twitter Bot for Generating Short Video Introductions to Popular Product Hunt Projects](https://easonchang.com/posts/product-hunt-today.md): A fully automated Twitter bot. Crawls popular projects daily through the Product Hunt API, generates short videos with React.js Remotion, and publishes tweets via the Twitter API.
- [Day12 Style the Blog Homepage with TailwindCSS, Showing the WordPress Post List](https://easonchang.com/posts/2021-ironman-day12-tailwind-layout.md): Do some simple styling with Tailwind CSS to beautify the post list!
- [Day11 TailwindCSS Introduction, Installing TailwindCSS in a Next.js Project](https://easonchang.com/posts/2021-ironman-day11-tailwind-install.md): Install the Tailwind CSS framework in Next.js, getting ready to do some simple styling and beautify the post list
- [Day10 Install apollo-graphql in Next.js to Connect the WordPress GraphQL API (Part 2)](https://easonchang.com/posts/2021-ironman-day10-apollo-graphql-post-list.md): Use ApolloClient in Next.js to connect the WordPress GraphQL API, fetch the post list data, and show it on the blog homepage
- [Day9 Install apollo-graphql in Next.js to Connect the WordPress GraphQL API (Part 1)](https://easonchang.com/posts/2021-ironman-day9-apollo-graphql-install.md): Install the apollo-graphql package in Next.js, which we will use to connect the WordPress GraphQL API
- [Day8 GraphQL Introduction, Installing the WPGraphQL plugin on WordPress](https://easonchang.com/posts/2021-ironman-day8-wpgraphql.md): Install the WPGraphQL plugin on WordPress to create a GraphQL API, so the Next.js frontend can fetch post data
- [Day7 Publish Our Next.js Site with Vercel, and Set Up Automatic Deployment with Github](https://easonchang.com/posts/2021-ironman-day7-vercel-publish.md): Publish the Next.js project to Vercel, see your work live online, and set up automatic deployment with Github.
- [Day6 Creating a Next.js Project - Using create-next-app](https://easonchang.com/posts/2021-ironman-day6-create-next-app.md): Creating a Next.js project with create-next-app. The goal is to successfully open the Next.js page on your own computer.
- [Day5 Next.js Introduction - A Production-ready React.js Framework](https://easonchang.com/posts/2021-ironman-day5-nextjs-intro.md): Next.js is a supercharged React.js full-stack framework that supports Server Side Rendering and other rendering strategies, greatly improving DX developer experience and UX visitor experience. It is a technology well worth learning.
- [Day4 WordPress Introduction, Basic Settings and Publishing Posts](https://easonchang.com/posts/2021-ironman-day4-wordpress-post.md): Going through the basic WordPress settings for our personal blog and publishing posts
- [Day3 WordPress Setup - Finding the Best WordPress Hosting Platform for Us, BlueHost](https://easonchang.com/posts/2021-ironman-day3-wordpress-hosting.md): Finding a WordPress CMS hosting platform for our personal blog. We pick BlueHost for its great value and walk through the setup step by step
- [Day2 Planning a Personal Blog - Next.js Frontend + Headless WordPress](https://easonchang.com/posts/2021-ironman-day2-personal-blog-requirement.md): In this series we will build a personal blog, using a Next.js frontend with Headless WordPress as CMS backend. Improving DX developer experience, editor experience, UX reader experience, and SEO search engine optimization
- [Day1 Splitting the Wordpress Frontend with Next.js - Series Introduction](https://easonchang.com/posts/2021-ironman-day1-nextjs-wordpress-intro.md): In this series I will document my whole process of splitting the WordPress frontend out with Next.js. Roughly 30% will be about WordPress adjustments, and 70% about creating the new Next.js project, building the UI, and implementing features. The theme is building a personal blog, from the initial WordPress setup to Next.js optimization
- [Redirecting Old Post URLs on My Gatsby Blog with the gatsby-redirect-from Plugin](https://easonchang.com/posts/gatsby-redirect-from.md): My new Gatsby blog has its own routing setup, different from the old Hexo one. So I used the gatsby-redirect-from plugin to redirect the old post URLs.
- [Migrating My Blog from Hexo to Gatsby.js](https://easonchang.com/posts/migrate-to-gatsby.md): With too much free time over Lunar New Year after finishing military service, I wanted to try some new tech — so I decided to rebuild my blog with Gatsby.js!
- [【Project】Sci-Fi Style Trophy](https://easonchang.com/posts/scifi-trophy.md): A sci-fi style trophy I was commissioned to make in November 2017 by the officials of the Hsinchu Hackathon, intended to showcase a sense of technology and the creativity of makers.
- [[Project] Winster: The Smart Wine Brewing Master](https://easonchang.com/posts/winster.md): The "Winster Smart Wine Brewing Master" is a platform designed to assist in wine brewing and condition monitoring, offering variety and origin analysis for professional brewers and small-scale wineries, as well as error detection during the brewing process.
- [[Project] Smart Gloves](https://easonchang.com/posts/smart-gloves.md): Smart Gloves are designed to replace keyboards and mice, becoming the next generation of human-computer interface devices. They allow users to control all aspects of life, such as smart home appliances, as game controllers, playing virtual instruments, etc.
- [【Project】SigmaGO Smart Guide Dog](https://easonchang.com/posts/sigmago.md): The project aims to develop a low-cost smart guide dog to replace the traditional guide dogs that require extensive training, benefiting the lives of the visually impaired.
- [Trying Out Botkit, Let's Write a Slack Chatbot!](https://easonchang.com/posts/slack-bot-with-botkit.md)
- [Build a Bluetooth Piano App! Using AppInventor with Arduino, HC05, and a Buzzer](https://easonchang.com/posts/bluetooth-keyboard.md)
- [《Why Do Smart People Use Grid Notebooks?》, Level Up Through Note-Taking](https://easonchang.com/posts/grid-note.md)
- [[Book Notes] 《The Charisma Myth》, Your First Book for Building Charisma](https://easonchang.com/posts/myth-of-charisma.md)
- [Using SSH with a Putty Key on MacOS](https://easonchang.com/posts/using-ssh-with-putty-key-on-macos.md)
- [Start Your Rails Project in Production Mode](https://easonchang.com/posts/start-your-rails-project-with-production-mode.md)
- [【DailyUI #003】Landing Page](https://easonchang.com/posts/dailyui-003-landing-page.md)
- [【DailyUI #002】Credit Card Checkout](https://easonchang.com/posts/dailyui-002-credit-card-checkout.md)
- [【DailyUI #001】Sign Up](https://easonchang.com/posts/dailyui-001-sign-up.md)
- [【DailyUI #000】Let's Become an Awesome Front-End Designer](https://easonchang.com/posts/dailyui-000-become-awesome-front-end-designer.md)
- [[Book Notes] Learning the Key Abilities of Iron Man Elon Musk from 《He's Playing for Real!》](https://easonchang.com/posts/10-keys-of-elon-musk.md)
- [【100sites #011】LifeGame, a simulation of life's infinite possibilities](https://easonchang.com/posts/100sites-011-lifegame.md)
- [【100sites #010】Piano, a virtual piano implemented with P5js's sound library](https://easonchang.com/posts/100sites-010-piano.md)
- [【100sites #009】Flame, cool little animations with P5js](https://easonchang.com/posts/100sites-009-flame.md)
- [【100sites #008】Showcase, a single-page website design to showcase my portfolio](https://easonchang.com/posts/100sites-008-showcase.md)
- [【100sites #007】Pong, a retro game built with P5.js](https://easonchang.com/posts/100sites-007-pong.md)
- [How to Install a Verilog Environment on Mac OS X](https://easonchang.com/posts/verilog-on-macosx.md)
- [[Reading Notes] Essentialism — Live Essentially and Take Back Control of Your Life](https://easonchang.com/posts/less-but-better.md)
- [【100sites #006】Snack](https://easonchang.com/posts/100sites-006-snack.md)
- [【100sites #005】Drawer](https://easonchang.com/posts/100sites-005-drawer.md)
- [【100sites #004】Firework](https://easonchang.com/posts/100sites-004-firework.md)
- [【100sites #003】TodoList](https://easonchang.com/posts/100sites-003-todolist.md)
- [【100sites #002】Pomodoro](https://easonchang.com/posts/100sites-002-pomodoro.md): A simple Pomodoro Technique timer.
- [【100sites #001】Timer](https://easonchang.com/posts/100sites-001-timer.md): A very simple countdown timer.
- [【100sites #000】My Journey to Becoming a Full Stack Developer](https://easonchang.com/posts/100sites.md): To become a full stack developer, I've decided to start a large number of side-projects to learn by doing and efficiently improve the skills I need.
- [[Reading Notes] Leverage Reading by Honda Naoyuki](https://easonchang.com/posts/lever-reading.md): Boost the "reading ROI" of business books by approaching reading as an "investment".
## Posts (繁體中文)
- [打造「天天開薪」：柯基陪你上班、薪水一秒一秒進帳的療癒小 App](https://easonchang.com/zh-TW/posts/dailywage.md): 天天開薪（DailyWage）是我們在 Aburi Studio 打造的免費 iOS App：每 100 毫秒更新你今天賺到的薪水，一隻像素柯基陪你上班，還能輕觸把收入分配進存錢目標。沒有後端，資料完全不離開你的手機。
- [FireFree：告別理財焦慮的 FIRE 財務規劃工具](https://easonchang.com/zh-TW/posts/firefree.md): FireFree 是我們在 Aburi Studio 打造的 FIRE 財務規劃工具：不用記帳、不用串接銀行，就能追蹤淨資產、預測你達成財務自由的那一天。已開放免費註冊，也可以直接玩 Demo 模式。
- [打造 CoreHour：圍繞 80/20 法則設計的時間塊 App](https://easonchang.com/zh-TW/posts/corehour.md): CoreHour 是我們在 Aburi Studio 打造的極簡時間塊（Time Boxing）App，幫助你專注在驅動 80% 成果的那 20% 任務上。介紹它能做什麼、為什麼做它，以及接下來的計畫。
- [Equation Pyramid - 靈感來自《魔鬼的計謀》的數學解謎遊戲](https://easonchang.com/zh-TW/posts/equation-pyramid.md): Equation Pyramid 是一款受 Netflix《魔鬼的計謀》啟發的開源 3D 數學解謎遊戲：用加減乘除排列出正確的等式。使用 Next.js 與 React Three Fiber 打造，直接在瀏覽器就能玩。
- [FocusZone - 結合 AI 干擾偵測的 visionOS 專注 App](https://easonchang.com/zh-TW/posts/focuszone.md): FocusZone 是為 Apple Vision Pro 打造的專注生產力 App：番茄鐘搭配 AI 干擾偵測（手機出現、噪音、頭部轉動），在沉浸式空間裡幫你守住專注力。
- [Timez - Time Zone Converter 時區轉換工具](https://easonchang.com/zh-TW/posts/timezone-converter.md): 輕鬆在不同時區之間轉換時間並比較重疊時間段
- [讓網頁標題文字更均衡、好讀，使用 react-wrap-balancer](https://easonchang.com/zh-TW/posts/react-wrap-balancer.md): 使用 react-wrap-balancer 在 React.js 網頁實作 Balance Text，平衡每一行文字寬度，讓視覺更舒服。輕量化簡單易用，支援 React 18 及 Next.js SSR
- [總結與回顧：一個炫砲技術部落格的誕生 - Modern Next.js Blog 系列 #30](https://easonchang.com/zh-TW/posts/modern-nextjs-blog-summary.md): 總結這系列 30 天內從零開始、用現代前端技術打造的炫砲個人部落格，回顧學到的內容、實作出的功能、及用到的技術
- [在 Next.js Contentlayer blog 實作舊路徑轉址 - Modern Next.js Blog 系列 #29](https://easonchang.com/zh-TW/posts/contentlayer-redirection.md): 在 Next.js 的 getStaticProps 裡，實作每篇 MDX 文章的舊路徑轉址
- [使用 next-i18next 實作中英文多語系 - Modern Next.js Blog 系列 #28](https://easonchang.com/zh-TW/posts/next-i18next-multilingual.md): 在 Next.js Contentlayer 部落格中，使用 next-i18next 實作中英文多語系，包含語系切換按鈕及 Command Palette
- [在 kbar Command Palette 實作文章搜尋 - Modern Next.js Blog 系列 #27](https://easonchang.com/zh-TW/posts/kbar-post-search.md): 讓 Command Palette 指令面板能搜尋所有文章，並跳轉到特定文章內頁
- [使用 kbar 加入 Command Palette 指令面板 - Modern Next.js Blog 系列 #26](https://easonchang.com/zh-TW/posts/kbar-command-palette.md): 安裝 kbar 套件來實作 Command Palette 指令面板，並使用 Tailwind CSS 美化樣式
- [使用 giscus 在 Next.js 加入留言系統 - Modern Next.js Blog 系列 #25](https://easonchang.com/zh-TW/posts/giscus-comment-system.md): 使用 @giscus/react 來在 Next.js 部落格內加入留言系統，綁定 Github Discussions 來當作留言板
- [在 MDX 文章側邊加入目錄 - Modern Next.js Blog 系列 #24](https://easonchang.com/zh-TW/posts/post-side-toc.md): 在 Contentlayer 部落格加入文章側邊目錄，讓讀者一目瞭然文章結構，使用 github-slugger 及 IntersectionObserver
- [使用 nprogress 加入換頁進度條 - Modern Next.js Blog 系列 #23](https://easonchang.com/zh-TW/posts/nprogress.md): 使用 nprogress 套件加入頁面切換進度條，改善讀者體感效能
- [圖片效能最佳化，使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22](https://easonchang.com/zh-TW/posts/post-custom-image.md): 使用客製化 MDX 元件 CustomImage，搭配 Next.js 及 plaiceholder 套件，最佳化內文圖片效能
- [強化內文連結換頁速度、加入外部連結 icon - Modern Next.js Blog 系列 #21](https://easonchang.com/zh-TW/posts/post-custom-link.md): 修改內文 CustomLink，針對內部連結使用 Next.js 提供的 加速頁面切換；針對外部連結則加入外聯 icon 提示
- [為內文小標題加入 anchor 錨點連結 - Modern Next.js Blog 系列 #20](https://easonchang.com/zh-TW/posts/post-heading-anchor.md): 使用 rehype-slug 套件在內文小標題補上 id 屬性，並使用客製 MDX 元件 CustomHeading 加入 anchor 連結
- [使用 feed 生成 RSS Feed - Modern Next.js Blog 系列 #19](https://easonchang.com/zh-TW/posts/rss-feed.md): 在部落格加入 RSS Feed 功能，讓讀者能以 RSS 形式訂閱最新文章
- [使用 next-sitemap 生成 Sitemap - Modern Next.js Blog 系列 #18](https://easonchang.com/zh-TW/posts/next-sitemap.md): 用 next-sitemap 生成 Sitemap 網站地圖，讓爬蟲了解網站結構，強化 SEO
- [加入 Open Graph、LD-JSON 等 SEO meta data - Modern Next.js Blog 系列 #17](https://easonchang.com/zh-TW/posts/next-seo-meta-data.md): 使用 next-seo 為全站設定標題、描述文字、縮圖、Open Graph、LD-JSON，讓搜尋引擎理解每個頁面意義，強化 SEO
- [加入程式碼區塊「複製按鈕」，使用客製化 MDX 元件 - Modern Next.js Blog 系列 #16](https://easonchang.com/zh-TW/posts/code-copy-button.md): 使用客製化 MDX 元件 CustomPre，在程式碼區塊加入「複製按鈕」
- [加入程式碼區塊標題，使用 rehype-code-titles - Modern Next.js Blog 系列 #15](https://easonchang.com/zh-TW/posts/rehype-code-titles.md): 使用 rehype-code-titles，為每個程式碼區塊加入標題
- [加入程式碼 Syntax Highlighting，使用 rehype-prism-plus - Modern Next.js Blog 系列 #14](https://easonchang.com/zh-TW/posts/rehype-prism-plus-syntax-highlighting.md): 使用 rehype-prism-plus 套件，讓程式碼區塊有 Syntax Highlighting 效果
- [文章內頁樣式切版 - Modern Next.js Blog 系列 #13](https://easonchang.com/zh-TW/posts/blog-post-page-style.md): 使用 Tailwind CSS 切版 Blog 內文樣式
- [首頁樣式切版 - Modern Next.js Blog 系列 #12](https://easonchang.com/zh-TW/posts/blog-homepage-style.md): 繼續使用 Tailwind CSS 切版 Blog 首頁樣式
- [全站樣式切版 - Modern Next.js Blog 系列 #11](https://easonchang.com/zh-TW/posts/blog-site-style.md): 使用 Tailwind CSS 開始 Modern Blog 全站樣式切版，包含 Header、Footer 等
- [Dark Mode 深色模式支援，使用 Tailwind CSS、next-themes - Modern Next.js Blog 系列 #10](https://easonchang.com/zh-TW/posts/darkmode-tailwindcss.md): 在 Tailwind CSS 支援深色模式，並使用 next-themes 套件來偵測讀者偏好模式，並實作切換按鈕
- [安裝 Tailwind CSS 和相關 ESLint、Prettier 設定 - Modern Next.js Blog 系列 #09](https://easonchang.com/zh-TW/posts/tailwindcss-setup.md): 安裝 Tailwind CSS 這套 CSS 工具，設定好對應的 ESLint, Prettier 規則
- [讓 Contentlayer 文章支援 MDX - Modern Next.js Blog 系列 #08](https://easonchang.com/zh-TW/posts/contentlayer-mdx.md): 在 Contentlayer 支援 MDX 格式，能在 Markdown 內插入任何 React 元件，提升文章內容靈活度
- [文章內頁功能實作，渲染 Markdown 文章內容 - Modern Next.js Blog 系列 #07](https://easonchang.com/zh-TW/posts/contentlayer-post-content.md): 實作 Contentlayer 文章內頁，呈現完整文章 Markdown 內容
- [首頁功能實作，加入 Contentlayer 文章列表 - Modern Next.js Blog 系列 #06](https://easonchang.com/zh-TW/posts/contentlayer-post-list.md): 使用 Contentlayer 實作首頁文章列表功能，呈現所有 Markdown 文章
- [Markdown 簡介 & 安裝 ContentLayer - Modern Next.js Blog 系列 #05](https://easonchang.com/zh-TW/posts/markdown-contentlayer.md): 使用 Markdown 語法撰寫文章，以及安裝 Contentlayer 將 Markdown 檔案轉換成文章
- [ESLint、Prettier、TypeScript 等 Next.js 專案基礎設定 - Modern Next.js Blog 系列 #04](https://easonchang.com/zh-TW/posts/nextjs-dev-env.md): Next.js 專案基本設定，讓後續開發體驗更流暢、專案結構更易讀。包含用 .nvmrc 鎖定 Node.js 版本、導入 ESLint 和 Prettier、使用 /src 資料夾、設定 Absolute Import
- [將 Next.js 專案部署上 Vercel 平台 - Modern Next.js Blog 系列 #03](https://easonchang.com/zh-TW/posts/nextjs-to-vercel.md): Vercel 架站平台介紹、將上一篇的 Next.js 空專案部署上 Vercel，並串接 Github CI/CD
- [簡介前端開發生態＆建立 Next.js 專案 - Modern Next.js Blog 系列 #02](https://easonchang.com/zh-TW/posts/frontend-intro-create-nextjs.md): 開幹部落格之前，先來了解前端開發生態、安裝 JS 套件管理器 npm 及 pnpm，並建立基礎 Next.js 前端專案
- [「從零開始打造炫砲個人部落格」系列簡介 - Modern Next.js Blog 系列 #01](https://easonchang.com/zh-TW/posts/modern-nextjs-blog-intro.md): 這系列我們會在 30 天內從零開始，用最現代的前端技術，做出你的炫砲個人部落格！簡介本系列的目標讀者、成果 Demo、內容規劃、及用到的技術
- [解決 CORS 跨域請求問題，使用 Create React App 內建 Proxy 繞過它](https://easonchang.com/zh-TW/posts/create-react-app-proxy.md): 如何設定 Create React App 內建的 Proxy server，來在開發階段繞過呼叫 API 遇到的 Cross-Origin Resource Sharing (CORS) 問題
- [何謂演算法技術面試？讀《Cracking the Coding Interview（提升程式設計師的面試力）》](https://easonchang.com/zh-TW/posts/cracking-the-coding-interview.md): 軟體工程師面試 FANNG 大公司時，必不可少的演算法面試，到底在考些什麼？該如何準備？一起來讀面試聖經《Cracking the Coding Interview（提升程式設計師的面試力）》
- [不要再從舊檔案複製貼上了！使用 Hygen 快速建立 Blog 新文章 Markdown 檔案](https://easonchang.com/zh-TW/posts/hygen-generate-new-post.md): 我在個人部落格導入了 Hygen 程式碼產生器，讓我能使用 hygen post new 指令，快速建立新文章草稿 .mdx 檔案，簡化繁瑣步驟。
- [Product Hunt Today 專案 - 自動產生短影片介紹熱門 Product Hunt 專案的推特機器人](https://easonchang.com/zh-TW/posts/product-hunt-today.md): 全自動的推特機器人。每日透過 Product Hunt API 爬取熱門專案、React.js Remotion 產生短影片，Twitter API 發佈到貼文到推特上。
- [Day12 用 TailwindCSS 切版部落格首頁，顯示 WordPress 文章列表](https://easonchang.com/zh-TW/posts/2021-ironman-day12-tailwind-layout.md): 使用 Tailwind CSS 做點簡單切版，美化文章列表的樣式！
- [Day11 TailwindCSS 介紹，在 Next.js 專案安裝 TailwindCSS](https://easonchang.com/zh-TW/posts/2021-ironman-day11-tailwind-install.md): 安裝 Tailwind CSS 這套 CSS 框架在 Next.js，準備做點簡單切版，美化文章列表的樣式
- [Day10 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（下）](https://easonchang.com/zh-TW/posts/2021-ironman-day10-apollo-graphql-post-list.md): 在 Next.js 使用 ApolloClient 串接 WordPress GraphQL API，抓取文章列表資料，顯示在部落格首頁
- [Day9 在 Next.js 安裝 apollo-graphql，串接 WordPress GraphQL API（上）](https://easonchang.com/zh-TW/posts/2021-ironman-day9-apollo-graphql-install.md): 在 Next.js 安裝 apollo-graphql package，將用來串接 WordPress 的 GraphQL API
- [Day8 GraphQL 介紹、在WordPress 上安裝 WPGraphQL plugin](https://easonchang.com/zh-TW/posts/2021-ironman-day8-wpgraphql.md): 在 WordPress 上安裝 WPGraphQL plugin，建立 GraphQL API，提供 Next.js 前端抓取文章資料
- [Day7 使用 Vercel 發布我們的 Next.js 網站，搭配 Github 實現自動部署](https://easonchang.com/zh-TW/posts/2021-ironman-day7-vercel-publish.md): 將 Next.js 專案發布到 Vercel，在線上看到你的成果，並且使用 Github 自動部署。
- [Day6 建立 Next.js 專案 - 使用 create-next-app](https://easonchang.com/zh-TW/posts/2021-ironman-day6-create-next-app.md): 使用 create-next-app 建立 Next.js 專案，目標是能在自己電腦上成功開啟 Next.js 網頁。
- [Day5 Next.js 介紹 - Production-ready 的 React.js 框架](https://easonchang.com/zh-TW/posts/2021-ironman-day5-nextjs-intro.md): Next.js 是高級版的 React.js 全端開發框架，支援 Server Side Rendering 等各種渲染策略，大幅提升 DX 開發者體驗及 UX 網站訪客體驗，是非常值得學習的技術。
- [Day4 WordPress 介紹，基礎設定與發文](https://easonchang.com/zh-TW/posts/2021-ironman-day4-wordpress-post.md): 設定個人部落格 WordPress 的基礎設定，完成文章發布
- [Day3 WordPress 架設 - 尋找最適合我們的 WordPress 架站平台 BlueHost](https://easonchang.com/zh-TW/posts/2021-ironman-day3-wordpress-hosting.md): 為我們的個人部落格尋找 WordPress CMS 託管平台，選擇 CP 值最高的 BlueHost 實作，手把手完成架設
- [Day2 個人部落格需求規劃 - Next.js Frontend + Headless WordPress](https://easonchang.com/zh-TW/posts/2021-ironman-day2-personal-blog-requirement.md): 這系列文章我們會實作個人部落格，使用 Next.js 前端搭配 Headless WordPress as CMS 後端。改善 DX 開發者體驗、編輯者體驗、UX 讀者體驗、SEO 搜尋引擎優化
- [Day1 用 Next.js 拆分 Wordpress 前端 - 系列簡介](https://easonchang.com/zh-TW/posts/2021-ironman-day1-nextjs-wordpress-intro.md): 這系列文章我會詳實紀錄我用 Next.js 拆分 WordPress 前端的過程，比重大概 30% 會在 WordPress 調整，70% 會在 Next.js 新專案建立、畫面切版、功能實現。會以建立個人部落格為主題，從最初 WordPress 架設，到 Next.js 優化
- [設定 Gatsby 部落格文章的舊路徑重導向，使用 gatsby-redirect-from 插件](https://easonchang.com/zh-TW/posts/gatsby-redirect-from.md): 新的 Gatsby 部落格有自己一套路由設定，與原先 Hexo 不同。於是我使用 gatsby-redirect-from plugin 將文章舊路徑重導向。
- [部落格搬遷紀錄，用 Gatsby.js 取代 Hexo](https://easonchang.com/zh-TW/posts/migrate-to-gatsby.md): 當完兵過年期間閒的蛋疼，想要嘗試新技術，於是決定用 Gatsby.js 來重架部落格啦！
- [【專案】科幻風造型獎盃](https://easonchang.com/zh-TW/posts/scifi-trophy.md): 科幻風造型獎盃，是我在2017年11月時，受新竹黑客松官方委託打造的，希望能呈現出科技感、及體現創客們的創造力。
- [【專案】智慧釀藏酒大師 Winster](https://easonchang.com/zh-TW/posts/winster.md): 「智慧釀藏酒大師 Winster」，是一套幫助您釀酒和控管酒況的釀藏酒平台。主要能夠提供專業釀酒玩家、小型釀酒企業，酒的品種以及產地的分析和釀酒過程的錯誤偵測。
- [【專案】智慧手套 Smart Gloves](https://easonchang.com/zh-TW/posts/smart-gloves.md): 智慧手套旨在取代鍵盤及滑鼠，成為下個世代的人機介面裝置，希望使用者能透過智慧手套，操控生活中的所有事物，例如：控制智慧家電、作為遊戲控制器、演奏虛擬樂器等。
- [【專案】SigmaGO 智慧導盲犬](https://easonchang.com/zh-TW/posts/sigmago.md): 專案目的是開發低成本的智慧導盲犬，取代需要龐大成本訓練的傳統導盲犬，造福盲人朋友的生活。
- [Botkit初體驗，寫一隻Slack聊天機器人吧！](https://easonchang.com/zh-TW/posts/slack-bot-with-botkit.md)
- [開發藍芽鋼琴APP！使用AppInventor結合Arduino、HC05、與蜂鳴器](https://easonchang.com/zh-TW/posts/bluetooth-keyboard.md)
- [《為什麼聰明人都用方格筆記本》，用筆記術變身強者吧](https://easonchang.com/zh-TW/posts/grid-note.md)
- [【閱讀筆記】《魅力學》，培養魅力的第一本書](https://easonchang.com/zh-TW/posts/myth-of-charisma.md)
- [在MacOS使用putty key進行ssh連線](https://easonchang.com/zh-TW/posts/using-ssh-with-putty-key-on-macos.md)
- [使用production mode啟動你的rails專案](https://easonchang.com/zh-TW/posts/start-your-rails-project-with-production-mode.md)
- [【DailyUI #003】Landing Page](https://easonchang.com/zh-TW/posts/dailyui-003-landing-page.md)
- [【DailyUI #002】Credit Card Checkout](https://easonchang.com/zh-TW/posts/dailyui-002-credit-card-checkout.md)
- [【DailyUI #001】Sign Up](https://easonchang.com/zh-TW/posts/dailyui-001-sign-up.md)
- [【DailyUI #000】成為最強前端設計師吧](https://easonchang.com/zh-TW/posts/dailyui-000-become-awesome-front-end-designer.md)
- [【閱讀筆記】從《他是玩真的！》汲取鋼鐵人Elon Musk創造未來的關鍵能力](https://easonchang.com/zh-TW/posts/10-keys-of-elon-musk.md)
- [【100sites #011】LifeGame，生命遊戲模擬無限的可能性](https://easonchang.com/zh-TW/posts/100sites-011-lifegame.md)
- [【100sites #010】Piano，用P5js的sound函式庫實作虛擬鋼琴](https://easonchang.com/zh-TW/posts/100sites-010-piano.md)
- [【100sites #009】Flame，P5js酷炫小動畫](https://easonchang.com/zh-TW/posts/100sites-009-flame.md)
- [【100sites #008】Showcase，單頁式網站設計展示我的作品集](https://easonchang.com/zh-TW/posts/100sites-008-showcase.md)
- [【100sites #007】Pong，使用P5.js建構的復古遊戲](https://easonchang.com/zh-TW/posts/100sites-007-pong.md)
- [如何在Mac OS X上安裝Verilog環境](https://easonchang.com/zh-TW/posts/verilog-on-macosx.md)
- [【閱讀筆記】少，但是更好——精準生活，拿回人生主控權](https://easonchang.com/zh-TW/posts/less-but-better.md)
- [【100sites #006】Snack](https://easonchang.com/zh-TW/posts/100sites-006-snack.md)
- [【100sites #005】Drawer](https://easonchang.com/zh-TW/posts/100sites-005-drawer.md)
- [【100sites #004】Firework](https://easonchang.com/zh-TW/posts/100sites-004-firework.md)
- [【100sites #003】TodoList](https://easonchang.com/zh-TW/posts/100sites-003-todolist.md)
- [【100sites #002】Pomodoro](https://easonchang.com/zh-TW/posts/100sites-002-pomodoro.md): 一個簡單的番茄鐘工作法計時器。
- [【100sites #001】Timer](https://easonchang.com/zh-TW/posts/100sites-001-timer.md): 一個很簡單的倒數計時器。
- [【100sites #000】我的全端工程師之路](https://easonchang.com/zh-TW/posts/100sites.md): 為了成為全端工程師，我決定開始做大量的side-project，從做中學，高效地提升我所需要的能力。
- [「閱讀筆記」槓桿閱讀術——本田直之](https://easonchang.com/zh-TW/posts/lever-reading.md): 提升商業書「閱讀效益」，以「投資」的角度進行閱讀。
## Pages
- [About](https://easonchang.com/about): About Eason Chang
- [Projects](https://easonchang.com/projects): Side projects and works
## Optional
- [Full content dump](https://easonchang.com/llms-full.txt): every post in one markdown file
- [RSS feed](https://easonchang.com/feed.xml)