https://heyw.me heyw 的个人网站 — 产品工程师，从想法到上线。 zh-cn https://heyw.me/shares#2074169272717152716 https://heyw.me/shares#2074169272717152716 Sat, 11 Jul 2026 00:00:00 GMT Some of my favorite UI libraries: NumberFlow for animating numbers. input-otp for one-time passwords. Liveline for real-time charts. Leva for customizable GUIs. cmdk for command menus. Virtuoso for vi https://heyw.me/shares#BV1mvM76DEqQ https://heyw.me/shares#BV1mvM76DEqQ Thu, 09 Jul 2026 00:00:00 GMT 如何避免青少年被手机软件操控？如何提防社交软件对生活的入侵？从法律层面禁止青少年使用社交软件的做法，真的有用吗？ 电影可以分级，但手机似乎难以分级，如何处理好这些问题，看来还有很长的路要走。 https://heyw.me/notes/microservices-to-ai https://heyw.me/notes/microservices-to-ai Mon, 29 Jun 2026 00:00:00 GMT 十二年前微服务是圣杯，布道的人挤满会场，其中大多数说不清微服务到底是什么。后来的剧情：一半人悄悄回到 modular monolith，承认当初根本不需要那些网络调用；另一半做出了分布式单体，然后发明 monorepo 来收拾画歪了的服务边界。 今天主角换成了 AI agent 循环，剧本一个字没改：一群人狂奔着追逐自己定义不清的东西。圣杯未必是假的，但宿醉一定会来——我只是好奇，这次用来解酒的又 https://heyw.me/notes/codex-taste https://heyw.me/notes/codex-taste Tue, 16 Jun 2026 00:00:00 GMT 和 GPT 系模型（Codex）高强度协作了一阵子，不满可以归结成一句：它写代码没有品味。 防御式编程成瘾，一行干活的代码裹几层检查——caller 查一遍、callee 查一遍、return 完再查一遍，有效逻辑稀释得像蚂蚁上树里的肉丝；爱耍小聪明，写 ugly but work 的补丁，顺手就破坏你现有的设计；修 bug 满嘴「根因」，动起手来全是治标；再加上成堆无意义的 helper 和 w https://heyw.me/notes/fun-devalued https://heyw.me/notes/fun-devalued Sat, 30 May 2026 00:00:00 GMT AI 时代最不适应的一种失落：好玩的东西被大规模重新定价。手写一段精巧的代码、抠一个像素级的细节，这些曾经让人上瘾的事，忽然被宣布「不值得人做」，「喜欢做」和「值得做」的交集肉眼可见地在缩小。 但你的价值和雇主眼里的价值，本来就不是同一个东西，浪潮只是把这层错位摊开给你看而已。好玩的事还是要做，赚不赚钱另说。 https://heyw.me/posts/perf-2026-q1 https://heyw.me/posts/perf-2026-q1 Mon, 19 Jan 2026 00:00:00 GMT > 这篇是一月中旬写的阶段记录，写的时候优化只推进完前半部分，后面几个方向刚列了标题还没动手。之后一直没顾上补，索性按当时的样子放出来，做了多少写多少。 这一轮性能优化的重点不是运行时（变更检测、渲染效率这些），而是构建产物：控制 bundle 体积、调整 chunk 拆分，减少首屏要加载的资源，把非关键代码拆到异步 chunk 里。 ## 用 stats.json 定位体积问题 优化的第一步永远 https://heyw.me/posts/ink-plum https://heyw.me/posts/ink-plum Sun, 24 Aug 2025 00:00:00 GMT import { InkPlumDemo } from '#/components/demos/InkPlumDemo' antfu 的个人网站背景有一棵会慢慢生长的梅，我盯着看了很久，之后照着这个思路自己种了一版，加了些自己的笔墨。算法本体小得惊人——一个会分叉的随机游走——但每个参数都在影响这棵树的「性格」，调参的时间比写代码长得多。 先长一棵： <InkPlumDemo /> ## 核心：会 https://heyw.me/posts/three-scroll https://heyw.me/posts/three-scroll Sat, 12 Apr 2025 00:00:00 GMT import { ScrollGlyphs } from '#/components/demos/ScrollGlyphs' 这两年很多产品官网把滚轮变成了运镜：页面往下滚，相机在一个三维场景里推拉摇移，内容跟着章节浮现。这篇把这套做法完整拆一遍——不过先别读文字，直接滚。下面这段路，是兰亭集序的字散在三维空间里搭成的走廊： <ScrollGlyphs /> 回来了？拆解开始。 ## 结构：定住画 https://heyw.me/posts/side-rail https://heyw.me/posts/side-rail Sat, 16 Nov 2024 00:00:00 GMT import { RailDemo } from '#/components/demos/RailDemo' 给自己攒了一个「思考流」页面：几十条零散的短想法，按时间倒序排成一条流水。做完内容才发现真正难的是导航——这一页没有标题，条目短则一句话长则一段，传统的那套页面导航全部失效。这篇记录我最后落下的方案：右缘的一列刻度。 先玩再读： <RailDemo /> ## 为什么现成的方案都不行 ** https://heyw.me/posts/three-ink https://heyw.me/posts/three-ink Sun, 19 May 2024 00:00:00 GMT import { ThreeInk } from '#/components/demos/ThreeInk' 想做一个三维版的墨滴：几颗墨在空间里游走，挨近了就黏成一团，分开时拉出藕断丝连的细颈。这种「软融合」靠普通的球体 Mesh 做不出来——两个球再怎么摆也只是穿插，不会融。它需要另一套建模思路：元球（metaball）。 先玩再说，指针伸进去搅： <ThreeInk /> ## 元球：先有场 https://heyw.me/notes/strk-airdrop https://heyw.me/notes/strk-airdrop Thu, 22 Feb 2024 00:00:00 GMT Starknet 搞了个叫 Provisions 的空投计划，把一部分 STRK 代币发给开源贡献者。GitHub 这边的资格线是：2023 年 11 月 15 日之前，给全球按 star 数排名前 5000 的仓库提过至少三次 commit，其中至少一次发生在 2018 年或之后。 拿自己的账号一查，符合。这些年给 Vue、Nuxt、Vite、S2 提的那些 PR，在这个筛子里凑够了数。111. https://heyw.me/posts/scrollbar-tricks https://heyw.me/posts/scrollbar-tricks Sun, 28 Jan 2024 00:00:00 GMT import { ScrollbarGutterDemo, ChildScrollbarDemo, } from '#/components/demos/Scrollbar' 滚动条大概是网页里最容易被忽视的控件：默认情况下它归操作系统管，样式不归你，宽度不归你，什么时候出现也不归你。但在追求体验一致性的项目里，这三件事都得管起来。这里记录两个我在实际需求中沉淀下来的细节。 ## 防止滚动条出现导 https://heyw.me/notes/review-2023 https://heyw.me/notes/review-2023 Sun, 31 Dec 2023 00:00:00 GMT <img src="https://pub-5168650f1ee44ea7b817ebbd13677006.r2.dev/review-2023/cover.png" width={1080} height={608} alt="" loading="lazy" decoding="async" /> 你好哇 👋，2023 年最后一次回忆，来一场荒腔走板的年终总结。 要问我这一年我做了什么，也 https://heyw.me/posts/svg-ink https://heyw.me/posts/svg-ink Sun, 26 Nov 2023 00:00:00 GMT import { WordmarkDraw } from '#/components/demos/WordmarkDraw' 最近做了两个小动效，都落在 SVG 上：一个手写签名的描画，一个主题切换用的泼墨。做法都不复杂，但每一处都有一个值得记下来的技巧。 ## 签名是怎么「写」出来的 描画效果的原理是老一套：`stroke-dasharray` 把描边切成虚线，`stroke-dashoffse https://heyw.me/notes/antv-star https://heyw.me/notes/antv-star Fri, 24 Nov 2023 00:00:00 GMT 收到一封来自蚂蚁开源技术委员会的证书：2023 年度 AntV 可视化社区「开源之星」，S2 方向。 给 [S2](https://github.com/antvis/S2) 提 PR 是 2022 年开始的事。起因很实际：工作里重度用到透视表，遇到问题就顺手修，修着修着就熟了，前后提了二十来个。没想过会有证书这种东西。 证书里写「您的代码和热情如一颗璀璨的星，照亮了开源的夜空」。夜空不敢当，不过 https://heyw.me/posts/d3-force https://heyw.me/posts/d3-force Sun, 13 Aug 2023 00:00:00 GMT import { InkCharacter } from '#/components/demos/InkCharacter' 在 S2 里写了两年 canvas 表格，组件库把底层封装得太好，一直没机会碰可视化的地基。最近把 d3 过了一遍，发现最有意思的不是画图表，是 d3-force——一个通用的粒子物理模拟器。官方例子全是节点连线的关系图，但它能干的事远不止这个。 先看结果。下面这个「墨」字 https://heyw.me/posts/s2-pivot-table https://heyw.me/posts/s2-pivot-table Tue, 06 Jun 2023 00:00:00 GMT S2 是一个面向可视分析领域的数据驱动的表可视化引擎。"S" 取自于 "SpreadSheet" 的两个 "S"，"2" 代表了透视表中的行列两个维度，旨在提供美观、易用、高性能、易扩展的多维表格。 <img src="https://pub-5168650f1ee44ea7b817ebbd13677006.r2.dev/s2-pivot-table/s2-preview.webp" width= https://heyw.me/posts/time-slicing https://heyw.me/posts/time-slicing Wed, 12 Oct 2022 00:00:00 GMT import { TimeSlicing } from '#/components/demos/TimeSlicing' 用 canvas 表格处理几万行数据时，有一段绕不开的同步计算：排版。行高、列宽都要在渲染之前算出来，而 canvas 里没有 CSS，文本折行、省略全靠 `measureText` 一次次去量。数据量一大，这段计算就变成火焰图上一根几百毫秒的红色长条，期间页面对滚动、点击没有 https://heyw.me/posts/cumulative-layout-shift https://heyw.me/posts/cumulative-layout-shift Sat, 20 Aug 2022 00:00:00 GMT 你是否经历过在网上阅读一篇文章，页面上的内容突然动了一下？文本毫无预警地移位，你找不到刚才读到哪了；或者更糟——你正要点一个链接，手指落下的瞬间，诶？链接跑了，你点到了别的东西。大多数时候这只是令人恼火，但在支付按钮旁边，它可能带来真正的破坏。 <video controls src="https://pub-5168650f1ee44ea7b817ebbd13677006.r2.dev/cls/ https://heyw.me/posts/webpack-build-speed https://heyw.me/posts/webpack-build-speed Tue, 16 Aug 2022 00:00:00 GMT 手上这个项目是个有些年头的单页应用：webpack 3 时代的配置，Angular 加上一部分 CoffeeScript 的历史包袱，样式走 Sass。全量构建一次要两分四十多秒，改一行代码等半天。这篇是给它提速的探索记录，每条路后面都写了当时的结论——有效、无效，还是待验证。 ## 瓶颈分析 工欲善其事必先利其器，优化之前先得知道时间花在哪。[speed-measure-webpack-plug https://heyw.me/posts/reflow-repaint https://heyw.me/posts/reflow-repaint Mon, 15 Aug 2022 00:00:00 GMT <img src="https://pub-5168650f1ee44ea7b817ebbd13677006.r2.dev/reflow-repaint/web-rendering-pipeline.png" width={1636} height={610} alt="" loading="lazy" decoding="async" /> ↑ 网页渲染流程。从顺序上可以看出，重排和重绘都会影响 https://heyw.me/notes/huaji-xiaoshi https://heyw.me/notes/huaji-xiaoshi Sun, 24 Jul 2022 00:00:00 GMT import { Bilibili } from '#/components/Bilibili' <Bilibili bvid="BV1AN4y1u7gZ" title="怎么这么值 ep44 - 宝勒巷华记小食" /> 以上视频就是去探店的根源。店铺坐落在**上海市黄浦区瞿溪路 691-4 号**，比较好找。我是和朋友「卤蛋」一块去的，天气还算不错，多云，没有往日的炎炎烈日，给天气赞一个。 <i https://heyw.me/posts/vue-rendering-mechanism https://heyw.me/posts/vue-rendering-mechanism Wed, 16 Mar 2022 00:00:00 GMT Vue's render pipeline has three phases: **compile** (templates are compiled into render functions), **mount** (the render function runs, and the returned virtual DOM tree is turned into actual DOM nod https://heyw.me/posts/react-diffing https://heyw.me/posts/react-diffing Tue, 15 Mar 2022 00:00:00 GMT Diffing two arbitrary trees has a complexity of O(n³). React gets away with O(n) by using a heuristic algorithm built on two assumptions: 1. Two elements of different types will produce different tree https://heyw.me/posts/cdn https://heyw.me/posts/cdn Mon, 10 Jan 2022 00:00:00 GMT import { Bilibili } from '#/components/Bilibili' 看完一个讲 CDN 的视频之后的整理。视频本身讲得很好，值得一看： <Bilibili bvid="BV1jS4y197zi" title="CDN 讲解视频" /> > CDN，Content Delivery Network，内容分发网络。 ## 距离是硬伤 网络请求的耗时里有一个绕不开的物理事实 https://heyw.me/notes/review-2021 https://heyw.me/notes/review-2021 Fri, 31 Dec 2021 00:00:00 GMT 不知道该从何说起，就写下一些我还能记起的事情吧，动荡的一年。 ## 实习之前 也是一段操心的日子，包括申请出去实习也是非常的曲折，……此处省略一万字。 ## 实习 应该是我今年最大的事了，在携程的实习。同事领导都很好，环境也很好，非常感谢大家的照顾。 <img src="https://pub-5168650f1ee44ea7b817ebbd13677006.r2.dev/review-2021/