HackerNews中文版

我正在独自构建一个多租户的SaaS应用（使用Next.js 15、Convex、Clerk和Vercel）。上周四我提交了72个代码更改。值得关注的不是数量，而是这些提交的内容。第一个阶段是为营销网站构建一个Lottie动画系统。我搭建了基础层、英雄背景粒子、六个部分动画和一个定价闪光效果。然后发现Lottie React包的`speed`属性并不是一个真正的JSX属性。你需要获取动画引用并以命令式方式调用`setSpeed()`。修复这个问题后，我注意到占位符动画文件上有水印，于是我写了一个1250行的Node脚本来生成自定义的多层组合。接着我查看了“工作原理”部分的新动画，发现它们并没有增加任何价值，于是将它们删除了。然后又从另一个部分去掉了带水印的动画。这一动画阶段大约有15个提交是添加的，5个提交是删除的。最后一个阶段是性能优化。移动端的LCP（最大内容绘制）时间为7.1秒。我尝试了五种修复方法：将英雄H1的透明度设置为0.01（只是在处理症状）、仅使用滑动动画、懒加载粒子、限制提供者的作用域。没有一种方法显著改善性能。根本原因是Bricolage Grotesque字体（73KB WOFF2）使用了`font-display: swap`。在慢速4G网络下，字体加载在450KB的JS代码之后，而6-7秒时的字体交换事件被测量为一个新的LCP元素。通过将`font-display`改为`optional`并将ClerkProvider的作用域限制在非营销路由（以减少JS竞争），LCP时间降到了2.5秒以下。我是在凌晨2点左右找到真正的问题的。在这两个阶段之间，我还添加并删除了一个深色模式切换按钮，重建了移动导航为底部弹出框，为PWA标签添加了滑动导航，并构建了一个可滑动的定价轮播。深色模式切换按钮大约持续了三个小时，我就决定它不合适。独自开发意味着很多提交只是为了撤销其他提交。在你花费8小时之前，没有人会告诉你“这超出了范围”。 https://jamcrew.io

查看原文

I'm building a multi-tenant SaaS solo (Next.js 15, Convex, Clerk, Vercel). Last Thursday I pushed 72 commits. The interesting part is the shape of those commits, not the number.The first arc was a Lottie animation system for the marketing site. Built a foundation layer, hero ambient particles, six section animations, a pricing sparkle. Then the Lottie React package's `speed` prop turned out not to be a real JSX prop. You need to grab the animation ref and call `setSpeed()` imperatively. After fixing that, I noticed the placeholder animation files had watermarks, so I wrote a 1,250-line Node script to generate custom multi-layer compositions. Then I looked at the How It Works section with its new animations and decided they added nothing. Removed them. Then stripped the watermarked ones from another section. The animation arc was roughly 15 commits of adding and 5 commits of removing.The last arc was performance. Mobile LCP was at 7.1 seconds. I tried five fixes: opacity 0.01 on the hero H1 (treating the symptom), slide-only animation, lazy-loading particles, scoping providers. None moved it significantly. The root cause was `font-display: swap` on Bricolage Grotesque (73KB WOFF2). On Slow 4G, the font loaded behind 450KB of JS, and the swap event at 6-7 seconds was being measured as a new LCP element. `font-display: optional` and scoping ClerkProvider out of marketing routes (to reduce JS contention) got it under 2.5s. Found the real issue around 2am.Between those two arcs, I also added and then removed a dark mode toggle, rebuilt the mobile nav as a bottom sheet, added swipe navigation for the PWA tabs, and built a swipeable pricing carousel. The dark mode toggle lasted about three hours before I decided it didn't fit.Solo building means a lot of commits that exist only to undo other commits. There's nobody to say "that's out of scope" before you spend 8 hours on it.https://jamcrew.io

一天内进行了72次提交，其中三分之一是撤销其他提交。