John H の個人サイト

Notes

記事

仕事やサイドプロジェクトでハマったポイントや取り組んだ最適化、そして日常で役立つちょっとした技術ガイドをまとめています。

Demo video frame: Claude Code on the left, the Chrome shopping site it is driving through agent360 on the right
ハウツー10 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

記事を読む
Extension popup with Taiwan selected automatically and cn-sdjn-fx-01-01 as the default node
技術記事11 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
ハウツー12 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
技術記事4 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 画面
ハウツー7 min

Bilibili CDN 速度テスト — 参加ガイド

画像付きガイド：CDNSpeedTest.exe をダウンロードし、ネットワークチェック後に QR コードでログイン、テスト結果を送信して各国で最速の Bilibili サーバーを探します。

繁體中文 / 简体中文 / 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)
技術記事16 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 欄位
ハウツー3 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
技術記事5 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