All Posts

Easily convert time between different timezones and compare overlapping time periods

Implement Balance Text with react-wrap-balancer, balancing the width of each line of text for improved visual comfort. Lightweight and easy to use

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 redirection for each MDX article's old path within Next.js's getStaticProps

Implementing multilingual support for English and Chinese in a Next.js Contentlayer blog, including a language switch button and Command Palette

Enabling article search in the Command Palette, allowing navigation directly to specific article pages

Using @giscus/react to add a comment system within a Next.js blog, binding to Github Discussions as the commenting platform

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

Improving perceived performance for readers by adding a page transition progress bar with the nprogress package

Optimizing in-text image performance using a customized MDX component CustomImage, in conjunction with Next.js <Image/> and the plaiceholder package

Modifying the in-text CustomLink, using Next.js's <Link/> for internal links to accelerate page transitions; adding an external link icon for external links

Add RSS Feed functionality to the blog, allowing readers to subscribe to new articles via RSS

Generate a Sitemap for the website using next-sitemap, allowing crawlers to understand the site structure and enhance SEO

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

Add a 'Copy Button' to code blocks using the custom MDX component CustomPre

Using rehype-code-titles to add titles to each code block

Using the rehype-prism-plus package to add Syntax Highlighting effects to code blocks

Using Tailwind CSS to style the blog post detail page

Continuing style the blog homepage using Tailwind CSS

Start styling the Modern Blog site using Tailwind CSS, including Header, Footer, and more.

Supporting dark mode with Tailwind CSS and using the next-themes package to detect reader's preferred mode and implement a toggle button

Supporting dark mode with Tailwind CSS and using the next-themes package to detect reader's preferred mode and implement a toggle button

Supporting MDX format in Contentlayer allows for the insertion of any React component within Markdown, enhancing the flexibility of article content

Implementing Contentlayer post pages, displaying complete article Markdown content

Implementing homepage post list functionality using Contentlayer, displaying all Markdown articles

Writing articles using Markdown syntax and installing Contentlayer to convert Markdown files into articles

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

An introduction to the Vercel hosting platform, deploying the Next.js empty project from the previous article on Vercel, and integrating GitHub CI/CD

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

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

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.

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.

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.

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.

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.

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.