John H's Website

Notes

Notes

Pitfalls and optimizations from work and side projects, plus a few practical how-to guides.

Demo video frame: Claude Code on the left, the Chrome shopping site it is driving through agent360 on the right
How-to guide10 min

agent360 - A New but Seriously Good MCP for Letting AI Drive Your Real Browser

agent360 lets Claude Code drive the Chrome you are already logged into: a live demo, a four-step install, and how it compares with Claude in Chrome, Playwright MCP and Browser MCP on dropped connections, sandbox logins and sessions fighting each other.

繁體中文 / English

Read note
Extension popup with Taiwan selected automatically and cn-sdjn-fx-01-01 as the default node
Tech share11 min

How to Actually Fix Bilibili Buffering for Good

Why popular Bilibili videos play fine overseas while unpopular ones stall: CDN caching and trips back to origin, why the narrowest link sets your speed, why DNS and VPN tricks are hit or miss, and how my extension picks a default node from real tests across 14 Taiwanese ISPs.

繁體中文 / English

The F1 Singapore cheat sheet Muse sent without being asked
How-to guide12 min

What Is Meta Muse Actually Good For? (Plus a Sign-Up Guide)

What makes Muse different from a regular chatbot, the F1 cheat sheet it sent me without being asked, how I use it to watch flights and job postings, and how to sign up from outside the US with a VPN and a fresh email. Includes an invite code worth 1 billion tokens for both of us.

繁體中文 / English

LINE Shopping live hall feed with the 20%–50% play zone and each card’s trigger line at 30% marked; only one card is playing
Tech share4 min

Auto-Play on Scroll — Live Stream List

TikTok-style auto-play for a live stream list: exactly one video plays while scrolling, no flicker on fast swipes, and resources are released as soon as a card leaves the viewport.

繁體中文 / English

CDNSpeedTest while the speed test is running
How-to guide6 min

How to Join the Bilibili CDN Speed Test

Step-by-step guide: download CDNSpeedTest.exe, pass the network check, log in with a QR code, and send the report so the extension can find the fastest Bilibili servers in your country.

繁體中文 / 简体中文 / English / 日本語 / 한국어

SiyaMap architecture drawn as a concert venue seat map: a seat-view photo sits at the stage, inner sections are Route 53, CloudFront and S3, outer sections are Neon, apps/web (Lambda · Next.js + Hono) and image-processor (Lambda · sharp)
Tech share16 min

SiyaMap System Architecture

Full-stack architecture of a concert seat-view sharing platform: AWS serverless infrastructure, the watermark and resize image pipeline, PostgreSQL modeling, and a layered Hono backend.

繁體中文 / English

小米路由器的上網設置頁與 DNS 欄位
How-to guide3 min

如何把 DNS 更換為 Google

圖文教學：把路由器與 Android 手機的 DNS 換成 Google（8.8.8.8 / dns.google），改善網域解析速度與連線品質。

Dark monitoring panels comparing memory over time: before, usage climbs to the limit and the job dies with OOM and exit 1; after, batches are loaded and released below the limit and finish before the time limit
Tech share5 min

Large-Scale Billing Statement Duplicate-Check Monitor Optimization

Turning a duplicate-rule check over 100K+ billing records from timeouts and OOMs into a daily monitor that reliably finishes within its time and memory limits.

繁體中文 / English