Co-authored by Claude Sonnet 4.6

Videos, audio, and images in a client app are usually hosted on a CDN (OSS / S3). For auth and hot-link protection, the backend hands out signed, time-limited URLs — a plain GET after expiry returns 403. The tricky part is that the client has no control over when a URL is consumed: a user might tap a thumbnail right away, or scroll back to an old message a week later and only then start playback.

To handle this we introduced a resourceUrlExchange endpoint that swaps an “original URL” for “a signed URL that’s valid right now” before downloading or playing. But if every playback or render calls the endpoint, a list view easily fires dozens of concurrent requests, blocking first paint and burning bandwidth. This post walks through the five layers we built around that problem, and how they compose into a nearly transparent caching pipeline.

The snippets below happen to use a Flutter idiom, but the design itself is platform-agnostic — the same layering maps cleanly onto iOS, Android, Web, or RN clients; only the package names change.

Co-authored by Claude Opus 4.7

LLM 时代有个很诱人的玩法：让模型直接说出 UI 应该长什么样，端上拿到一份描述就把界面拼出来。比起预先把每个页面写死，这种「server 推一份意图，client 渲一份界面」的形态对 AI 类业务太顺手了 —— 模型每讲一句话，界面跟着变一次，不用再发版。

Flutter 官方有一份 genui 在做这件事，但它的运行时跟它假设的服务端协议捏在一起卖。一旦你的服务端不是它那个形状 —— 不走 JSON-RPC、消息体判别 key 不一样、事件回传走另一条通道 —— 那份运行时就用不上了。

所以我把它的”形状”抽出来，写成了一个纯端侧的 SDR（Server-Driven Rendering）运行时：只对四类消息负责，剩下的怎么传、怎么发，全甩给宿主。这篇按「核心思路 → 调用路径（三个场景）→ 数据规约 → 取舍」走一遍。

Most “Figma to code” tools are vertical: pick a stack (usually React or Flutter), hard-code the mapping, ship a plugin. They work — until your codebase isn’t React or Flutter, or until your team’s component library, naming conventions, and design tokens don’t match the canned ones.

Over the past few months I built a different shape of the same tool: a stack-agnostic agent that treats the target framework as an injection point, paired with a desktop client that uses the agent itself as its backend. This post walks through both halves — the agent skill design and how it adapts to arbitrary stacks (Section 1), and the desktop UI that streams lifecycle events back from the agent and never opens a single REST endpoint of its own (Section 2).

Continue the discussion on gesture system in Flutter framework. Talking about Pointer/Gesture and HitTest.

Recently I developed a pure flutter application which related to AI virtual figure interaction. During the development process, I was impressed by the performance and flexibility of the Flutter framework. The plugins are mature and easy to use, and process is smooth (the overall core features are implemented within 2 months). This experience motivated me to explore the Flutter framework more deeply, especially the code under flutter/lib/src.

In the previous project when I was working for HoYoverse, there are some requirements for drag-and-drop sorting of elements, and I used Sortable.JS to implement it. In 2024.December In my personal kanban, I left a pending action item for myself to analyze the source code of Sortable.JS, which I finally got around to doing in 2025.May 😂 …

This post is a brief analysis of the source code of Sortable.JS, which is a very popular library for drag-and-drop sorting.

平实开发过程中比较少接触的一个话题: 如何使用 iOS 底层的 UITextInput 协议与 UIKeyInput 协议实现自定义输入框; 其中由于 UITextInput 本身集成了 UIKeyInput，因此本文中对 UITextInput 的讨论实际上也会包含对 UIKeyInput 相关协议的讨论 (e.g. insertText(:String))

最近因为项目的关系使用了 UnrealEngine 的输入组件，由于组件本身并非原生 UITextField, 而是基于上述协议自己实现并通过引擎渲染的输入框；为了排查输入框使用英文输入时 自动补全失效的问题手写了一个简单的输入框组件尝试对该协议背后的运作方式进行理解.

最近参与了好几个前端项目，其中两个是公司内部的后台办公应用，第三个是公司内部的技术博客，都是基于 Vite/Vue/TS 的技术选型. 因此抽空整理一篇关于 Vite 打包工具的文章.