Writing
Thoughts on frontend architecture, AI integration, and building scalable systems.
Von 60 auf 100: Wie ich mein Astro-Portfolio auf perfekte Lighthouse-Werte optimiert habe
Eine praxisnahe Fallstudie zur Optimierung einer Astro + React Islands Portfolio-Website. Erfahren Sie, wie Self-Hosting von Schriftarten, statisches Hero-Rendering, Islands Code-Splitting und kritisches CSS-Inlining den FCP von 2,9s auf 0,4s verbesserten und einen perfekten Desktop-Lighthouse-Score erzielten.
從 60 分到 100 分：我如何將 Astro 作品集網站優化到 Lighthouse 滿分
一個真實案例，記錄如何優化 Astro + React Islands 作品集網站。透過自託管字型、Hero 靜態渲染、Islands 程式碼分割和關鍵 CSS 內聯，將 FCP 從 2.9 秒降至 0.4 秒，Desktop Lighthouse 達到滿分 100。
From 60 to 100: How I Optimized My Astro Portfolio to Perfect Lighthouse Scores
A real-world case study on optimizing an Astro + React Islands portfolio site. Learn how self-hosted fonts, static Hero rendering, Islands code splitting, and critical CSS inlining improved FCP from 2.9s to 0.4s and achieved a perfect Desktop Lighthouse score.
行動版 PageSpeed Insights 優化：完整指南
詳細記錄所有針對行動版網頁效能分數（PageSpeed Insights）所做的優化調整，包括移除 render-blocking 資源、修復強制重排、快取策略和 SEO 改善。
Mobile PageSpeed Insights Optimization: A Comprehensive Guide
A detailed breakdown of all optimizations implemented to improve mobile PageSpeed Insights scores, including render-blocking resource removal, forced reflow fixes, caching strategies, and SEO improvements.
Practical Notes: Migration Challenges and Solutions from SPA to Astro Islands Architecture
An in-depth exploration of the most common architectural issues when integrating Astro with React: Context loss, file strategy choices, and TypeScript type definitions.
實戰筆記：從 SPA 到 Astro Islands 架構的遷移挑戰與解決方案
深入探討 Astro 與 React 整合時最容易遇到的架構問題：Context 丟失、檔案策略選擇以及 TypeScript 型別定義。
本地聊天系統
一個用於考試的本地聊天模擬器，使用 TypeScript 和 React 構建。功能包括用戶登入、即時訊息傳遞，以及跨瀏覽器標籤頁的持久化用戶名。按照設置指南來克隆、配置和部署應用程式。
Local Chat System
A local chat simulator for exams, built with TypeScript and React. Features include user login, real-time messaging, and persistent usernames across browser tabs. Follow the setup guide to clone, configure, and deploy the application.