一天内完成了 72 次提交，其中三分之一撤销了之前的提交。
1 分•作者: madebyjam•6 个月前
我正在独自构建一个多租户 SaaS 应用（Next.js 15, Convex, Clerk, Vercel）。上周四我提交了 72 次代码。有趣的是这些提交的构成，而不是数量。<p>第一个阶段是为营销网站构建一个 Lottie 动画系统。我搭建了基础层，英雄页面的环境粒子动画，六个部分动画，以及一个定价页面的闪光动画。然后，Lottie React 包的 `speed` 属性竟然不是一个真正的 JSX 属性。你需要获取动画的引用，然后用命令式的方式调用 `setSpeed()`。修复这个问题后，我注意到占位动画文件有水印，于是我写了一个 1250 行的 Node 脚本来生成自定义的多层合成动画。然后，我看了看“运作方式”部分，里面有新的动画，但我觉得它们毫无作用。于是我删除了它们。然后又从另一个部分删除了带水印的动画。动画阶段大约有 15 次提交是添加，5 次提交是删除。<p>最后一个阶段是性能优化。移动端 LCP 达到 7.1 秒。我尝试了五种修复方法：在英雄页面的 H1 标签上设置 opacity: 0.01（治标不治本），仅滑动动画，懒加载粒子，以及作用域提供程序。但没有一个能显著改善。根本原因是 Bricolage Grotesque 字体（73KB WOFF2）使用了 `font-display: swap`。在模拟 4G 网络下，该字体在 450KB 的 JS 之后加载，并且在 6-7 秒时发生的 swap 事件被测量为一个新的 LCP 元素。使用 `font-display: optional` 并将 ClerkProvider 移出营销路由（以减少 JS 冲突）后，LCP 降至 2.5 秒以下。凌晨 2 点左右找到了真正的问题。<p>在这两个阶段之间，我还添加并删除了一个深色模式切换，将移动端导航重建为底部抽屉，为 PWA 标签添加了滑动导航，并构建了一个可滑动的定价轮播。深色模式切换只存在了大约三个小时，我就决定它不合适。<p>独自构建意味着很多提交都只是为了撤销其他提交。没有人会在你花费 8 个小时之前说“这超出了范围”。<p>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.<p>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.<p>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.<p>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.<p>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.<p>https://jamcrew.io