Timez - Time Zone Converter: Convert time between different timezones

Balancing and Improving Readability of Web Titles with react-wrap-balancer

Summary and Review: The Birth of a Dazzling Tech Blog - Modern Next.js Blog Series #30

Implementing Old Path Redirection in Next.js Contentlayer Blog - Modern Next.js Blog Series #29

Implementing Multilingual Support with next-i18next in a Next.js Contentlayer Blog - Modern Next.js Blog Series #28

Implementing Article Search in kbar Command Palette - Modern Next.js Blog Series #27

Adding a Comment System to Next.js with giscus - Modern Next.js Blog Series #25

Adding a Table of Contents to MDX Articles - Modern Next.js Blog Series #24

Adding a Page Progress Bar with nprogress - Modern Next.js Blog Series #23

Optimizing Image Performance Using Next.js Image, plaiceholder, and Custom MDX Components - Modern Next.js Blog Series #22

Enhancing In-text Link Page Speed and Adding External Link Icons - Modern Next.js Blog Series #21

Generating RSS Feed with feed - Modern Next.js Blog Series #19

Generating Sitemap with next-sitemap - Modern Next.js Blog Series #18

Adding Open Graph, LD-JSON, and Other SEO Meta Data - Modern Next.js Blog Series #17

Adding 'Copy Button' to Code Blocks Using Custom MDX Components - Modern Next.js Blog Series #16

Adding Titles to Code Blocks Using rehype-code-titles - Modern Next.js Blog Series #15

Adding Syntax Highlighting to Code Blocks Using rehype-prism-plus - Modern Next.js Blog Series #14

Styling the Article Detail Page - Modern Next.js Blog Series #13

Styling the Blog Homepage - Modern Next.js Blog Series #12

Full Site Styling - Modern Next.js Blog Series #11

Dark Mode Support with Tailwind CSS and next-themes - Modern Next.js Blog Series #10

Enabling MDX Support in Contentlayer Articles - Modern Next.js Blog Series #08

Implementing Post Page Features, Rendering Markdown Post Content - Modern Next.js Blog Series #07

Implementing Homepage Functionality, Adding Contentlayer Post List - Modern Next.js Blog Series #06

Introduction to Markdown & Installing ContentLayer - Modern Next.js Blog Series #05

Basic Setup for Next.js Projects with ESLint, Prettier, TypeScript, etc. - Modern Next.js Blog Series #04

Deploying a Next.js Project on Vercel Platform - Modern Next.js Blog Series #03

Introduction to Front-End Development Ecosystem & Setting Up a Next.js Project - Modern Next.js Blog Series #02

Building a Stunning Personal Blog from Scratch Series Introduction - Modern Next.js Blog Series #01

Product Hunt Today - An Automatic Twitter Bot for Generating Short Video Introductions to Popular Product Hunt Projects

【Project】Sci-Fi Style Trophy

[Project] Winster: The Smart Wine Brewing Master

[Project] Smart Gloves

【Project】SigmaGO Smart Guide Dog

【100sites #000】My Journey to Becoming a Full Stack Developer

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 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.

all-posts