Things I built, and what changed because of them

1. 01 Engineering Case study 9 min read

   Understanding ecommerce growth data from an engineering perspective

   Problem: I recently moved to a new team working on ecommerce growth at TikTok Shop. I had not worked as a growth engineer before, so I used the team's existing projects and GPT to learn the area. The biggest thing I learned is…

   Team

   TikTok Shop, ecommerce growth

   • Decomposed GMV into an engineering funnel (UV x PDP arrival x add-to-cart x checkout x payment success x orders per buyer x AOV) so a drop can be traced to the step that caused it.
   • Designed the app landing experiment around one primary metric, 7-day Web-assisted App paid GMV per eligible MWeb UV, so the result is attributable to a Web touchpoint, really transacts in the app, and is measured per unit of traffic.
   • Specified a stable web_attribution_id carried from MWeb through landing, deeplink, app landing, and app order, without which an app order increase cannot be proven to come from the Web change.
   • A/B testing
   • deeplink
   • btm_chain
   • funnel analysis
   • cohort retention analysis
   • multi-touch attribution

   Read the note 2026.07.02

2. 02 Engineering Case study 16 min read

   Designing an Operations Heartbeat System

   Problem: A system design write-up on turning UI activity events into reliable agent state across compute windows, HCM state commits, downstream propagation, multi-region cutover, and service split boundaries.

   Role

   HCM and Heartbeat full-stack owner

   Period

   2024 Q3 – 2025 Q2

   • The HCM and Heartbeat path serves 47,149 agents, 7,000 skill groups, about 4,000 QPS, and 141 upstream services.
   • Splitting TT from the main business line later let the old HCM path shed about 3,000 agents and about 2,000 QPS while TT heartbeat, status writes, and routing stayed closed inside TT.
   • After a US-region incident where the binlog-to-HCM-MQ path held about 300k queued messages and an ES-dependent handler blocked shared consumption, the fix added handler-level latency metrics and a more direct binlog-to-RMQ work status path.
   • Redis
   • MQ
   • DBus
   • binlog
   • Elasticsearch
   • WebSocket

   Read the note 2026.06.19

3. 03 Engineering Case study 8 min read

   Workspace v2 tab system performance: first load, hot switch, and background pressure

   Problem: A performance write-up about separating first load, hot tab switch, background pressure, and the gates that kept false wins out.

   Role

   Owner

   Period

   2026 Q2

   Team

   TikTok Shop, ecommerce frontend

   • Cold tab switch p95 duration fell from 1829.8ms to 812.3ms (-55.6%), and p95 post-visible blocking fell from 1193.7ms to 8.7ms (-99.3%) after moving prewarm before the click.
   • Scheduling route FMP improved from 14773ms to 11926ms (-2847ms / -19.3%) by discovering route chunks early instead of at 6785ms-15464ms.
   • Official Forecast route FMP improved from 14271ms to 11612ms (-2659ms / -18.6%) by starting route-critical CSS at ~1.9s instead of ~13.8s.
   • CDP Chrome
   • React
   • iframe sandbox
   • requestIdleCallback
   • WebSocket
   • Frontend

   Read the note 2026.05.18

4. 04 Engineering Case study 9 min read

   Workspace v2 tab system: browser tabs inside a workspace

   Problem: How we made workspace tabs keep state, survive refresh, share real URLs, and stop hidden runtimes from leaking side effects.

   Role

   Owner

   Period

   2026 Q2

   Team

   TikTok Shop, ecommerce frontend

   • Tabs survive refresh and stay identical across windows: BFF stores the opened tab list, React Query makes the local window instant, BroadcastChannel makes other windows refetch.
   • The address bar keeps real business URLs like /workspace/workstream/:id/..., so refresh, bookmarks, and shared links recover the business page instead of an orphan /tabs/:id route.
   • Only the focused tab may write the URL, show overlays, receive foreground events, and use foreground CPU; a hidden runtime's history write is dropped and recorded as a scope-drop.
   • React
   • TypeScript
   • React Query
   • BroadcastChannel
   • History API
   • iframe

   Read the note 2026.05.18

5. 05 AI & Agents Case study 6 min read

   Automated AI performance optimization with a harness and goal-driven loop

   Problem: What changed when I made an AI agent optimize performance against a harness instead of against its own guesses.

   • Workstream FMP improved from 5089ms to 2519ms (-2570ms / -50.5%) after removing the startup payload, warming the list API, and moving notification/DnD/editor/actions after the final FMP.
   • Report Center FMP improved from 10021ms to 6762ms (-3259ms / -32.5%) by moving notification work after FMP and fixing the prefetch body/cache-key alignment.
   • Scheduling FMP improved from 10367ms to 7630ms (-2737ms / -26.4%) and Audit Workbench from 12610ms to 10188ms (-2422ms / -19.2%).
   • TypeScript
   • Service Worker
   • GraphQL
   • REST
   • requestIdleCallback
   • AI

   Read the note 2026.05.16

6. 06 AI & Agents Build write-up 5 min read

   Agent Skills: The Functional Blueprint for AI Agents

   Problem: A practical model for treating agent skills as reusable functions with clear triggers, inputs, outputs, and composition rules.

   • AI
   • Software Engineering
   • Claude Code
   • Agent
   • Skills

   Read the note 2026.03.23

7. 07 Engineering Build write-up 2 min read

   Build a Toy Browser with NodeJS

   Problem: That's right, I dig another hole to myself. I saw this interesting book called Web Browser Engineering, which teach to build a browser with python. Since I'm learning SICPJS now, and I will build a compiler at the end…

   • Browser

   Read the note 2022.04.27

8. 08 Engineering Build write-up 8 min read

   Build a Redux from Scratch(Redux Source Code Review)

   Problem: A state is nothing more than a getter/setter.

   • Software Engineering
   • Frontend
   • React

   Read the note 2023.11.28

This page only lists work with a write-up in this repository. I do not invent demos or repositories that do not exist.