Ziyi Li's Blog https://www.ziyili.dev/ RSS feed for Ziyi Li's Blog Creating a Custom Vite Plugin with TypeScript Support to Automatically ZIP Build Artifacts at Build Time https://www.ziyili.dev//blog/custom-vite-plugin This blog walks through an example of creating a custom Vite plugin that automatically zips build artifacts at build time. It also includes TypeScript support for full type safety. Fri, 01 Aug 2025 00:00:00 GMT Syncing LLM Streaming Text Across Clients Using Event-Driven Architecture and Redis Pub/Sub https://www.ziyili.dev//blog/syncing-llm-text-stream This blog walks through an example of how to stream real-time LLM responses and display them on multiple clients simultaneously, using Redis Pub/Sub for event publishing and subscription, and React Query for fetching the real-time stream. Sun, 27 Jul 2025 00:00:00 GMT Type Casting and Compiling a C++ Algorithm into a WebAssembly Module for Execution in a Web Worker within a React Application https://www.ziyili.dev//blog/cpp-algo-wasm This blog walks through an example of how to properly compile a `C++` based algorithm into `WebAssembly` format, establish communication between a `React` application and the compiled `WebAssembly` module, and execute the `WebAssembly` code in a `Web Worker` without blocking the main thread. Wed, 02 Jul 2025 00:00:00 GMT Handling Hover Interaction Styling on Touch Devices Using CSS Media Queries and Tailwind CSS Custom Variants https://www.ziyili.dev//blog/hover-touch-device A guide to handling the :hover pseudo-class on touch devices using CSS media queries and Tailwind CSS custom variants, with automatic detection of light and dark mode. Tue, 10 Jun 2025 00:00:00 GMT Fixing Unexpected Caching Behavior Caused by Next.js's Full Route Cache During Soft Navigation via Link Components https://www.ziyili.dev//blog/fix-nextjs-caching-bug This blog covers a caching bug in Next.js App Router that causes stale content to appear during navigation. It compares two fixes: a client-side approach using router.refresh() and a more performant server-side solution using revalidatePath. Sat, 24 May 2025 00:00:00 GMT Improving Canvas Animation and UI Interactivity with OffscreenCanvas and Web Workers https://www.ziyili.dev//blog/offscreen-canvas A walkthrough on improving canvas animation and UI interactivity using OffscreenCanvas and Web Workers in a React app. Fri, 11 Apr 2025 00:00:00 GMT Implementing Canvas Hit Region Detection and Drag-to-Select Functionality with React https://www.ziyili.dev//blog/canvas-click-drag-to-select A concise implementation of Canvas hit region detection and drag-to-select functionality using React. Sun, 09 Mar 2025 00:00:00 GMT Building and Optimizing an SVG Widget with Dragging and Clicking Support Using D3.js and React https://www.ziyili.dev//blog/optimized-d3-drag-click A concise implementation of drag-and-drop and click functionality with D3.js and SVG in React, featuring performance profiling and optimization. Mon, 17 Feb 2025 00:00:00 GMT