Now vibe coding, so learning hammer FE ?
《W键在前端：技术与产品的协同进化》
标签：#前端工程化 #Electron #Vite #代码重构 #Monorepo #TailwindCSS #ShadcnUI #ReactRouter #性能优化 #Medal
总结：
文章要点：
1. **从"巨兽组件"说起**：作者用一张拥有30+ props的TextInput截图开场，生动展示了"反模式"组件的恐怖——职责混乱、默认值泛滥、DOM和自定义props杂糅，改一行代码要检查十个角落，开发体验堪比噩梦
2. **宏观手术刀**：不硬啃旧组件，而是先换"土壤"——迁移Monorepo+PNPM解决版本混乱，引入Vite+HMR让Electron本地开发告别"停启地狱"，CEO亲自下场当普罗米修斯点火
3. **Marie Kondo式删代码**：统一导入路径（包名+清晰路径+文件后缀），减少barrel文件，让AI能精准识别"死代码"。结果疯狂删代码：单PR删除上万行，团队享受"五杀"快感，还提炼出跨平台通用包（utils/hooks/types）
4. **生产环境统一Vite**：干掉Rollup，用Glob Imports做代码分割，配合路由级动态加载，i18n文件懒加载，最终渲染包从巨大体积瘦身到2.7MB，构建速度快到QA都惊呼"嗖嗖嗖"
5. **组件层"换血"**：用Tailwind+Shadcn/Radix UI（后迁Base UI）替代Grommet和Styled Components，给旧组件挂ESLint"红牌"禁止令，同时写迁移指南。React Router v5→v7的大升级也顺势完成，现在搭个新页面只需一天
URL：https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product
标签：#前端工程化 #Electron #Vite #代码重构 #Monorepo #TailwindCSS #ShadcnUI #ReactRouter #性能优化 #Medal
总结：
文章要点：
1. **从"巨兽组件"说起**：作者用一张拥有30+ props的TextInput截图开场，生动展示了"反模式"组件的恐怖——职责混乱、默认值泛滥、DOM和自定义props杂糅，改一行代码要检查十个角落，开发体验堪比噩梦
2. **宏观手术刀**：不硬啃旧组件，而是先换"土壤"——迁移Monorepo+PNPM解决版本混乱，引入Vite+HMR让Electron本地开发告别"停启地狱"，CEO亲自下场当普罗米修斯点火
3. **Marie Kondo式删代码**：统一导入路径（包名+清晰路径+文件后缀），减少barrel文件，让AI能精准识别"死代码"。结果疯狂删代码：单PR删除上万行，团队享受"五杀"快感，还提炼出跨平台通用包（utils/hooks/types）
4. **生产环境统一Vite**：干掉Rollup，用Glob Imports做代码分割，配合路由级动态加载，i18n文件懒加载，最终渲染包从巨大体积瘦身到2.7MB，构建速度快到QA都惊呼"嗖嗖嗖"
5. **组件层"换血"**：用Tailwind+Shadcn/Radix UI（后迁Base UI）替代Grommet和Styled Components，给旧组件挂ESLint"红牌"禁止令，同时写迁移指南。React Router v5→v7的大升级也顺势完成，现在搭个新页面只需一天
URL：https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product
medal.tv
W-Key in Frontend: Synergizing Technology and Product | Medal
Front End Engineer Rick Zhang shares how Medal's frontend team broke the deadlock between legacy code and new features by rebuilding their developer experience from the ground up. Through a monorepo migration, a full move to Vite and Rolldown, aggressive…
《用 React、GSAP 和 AI 打造 Maxima Therapy 网站》
标签：#前端 #React #GSAP #TailwindCSS #ReactRouter #AI辅助开发 #创意编程 #Lottie #MatterJS #ScrollTrigger
总结：
本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。
文章要点：
- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查
- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的
- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错
- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用
- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移
- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上
- ScrollTrigger 让滚动交互管理很轻松：配合
文章URL：
https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/
标签：#前端 #React #GSAP #TailwindCSS #ReactRouter #AI辅助开发 #创意编程 #Lottie #MatterJS #ScrollTrigger
总结：
本文是 Codrops 上的一篇案例复盘，记录了团队为神经多样性支持机构 Maxima Therapy 打造高互动、高插画风格网站的全过程。文章详细介绍了技术栈选型（Sanity + React Router + GSAP + TailwindCSS）、多个核心交互模块的实现思路（可拖拽轮播、SVG 水波纹、物理绳索、形状变形、贴纸动效），以及 AI（Claude Code）在实际开发中的辅助作用与局限。对于想在前端项目中融合创意动画与 AI 提效的开发者来说，这是一份非常接地气的实战参考。
文章要点：
- 技术栈选型很务实：团队选了 React Router（而非 Next.js）做静态生成，搭配 Sanity 做 CMS、Cloudflare Pages 托管，理由是配置更轻量；GSAP + Lenis 负责动画和滚动平滑，TailwindCSS 负责样式，TypeScript 做类型检查
- 首页轮播的交互设计很巧妙：把四个节目板块拆成四个旋转的
<div>，只有当前可见的板块才响应交互；切换时触发路由变化，但轮播组件通过布局隔离避免了不必要的重渲染- SVG 水波纹效果用 AI 辅助生成：Claude Code 帮忙把原始 SVG 路径转换成带 50 个控制点的系统，再结合 GSAP 实现鼠标触发的涟漪动画——AI 在创意编码这类"繁琐但规则明确"的任务上表现不错
- Lottie 动画与 Canvas 背景混合：通过离屏 Canvas 绘制固定图案，再用 Lottie 的 Canvas 渲染模式做遮罩，最后用
globalCompositeOperation 合成，实现了滚动联动的背景效果- 物理引擎让页面更有生命力：招聘页用 Matter.js 模拟"supports"单词被两根绳索悬挂的物理效果，绳索由复合体堆叠而成，SVG 文字根据物理模拟结果实时位移
- AI 是"得力助手"但不是"万能替身"：Claude Code 在 SVG 优化、Sanity 数据模型扩展、TypeScript 类型生成上帮了大忙，但也会出现结果不一致、擅自改动数据获取模式、甚至"幻觉"出不存在 SVG 路径的情况；团队建议把 AI 用在范围明确的小任务上
- ScrollTrigger 让滚动交互管理很轻松：配合
useGSAP hook 自动清理，避免了手动写 Intersection Observer 的繁琐，实现了文字显现、图片揭示、SVG 播放等丰富的滚动动效文章URL：
https://tympanus.net/codrops/2026/04/06/building-the-maxima-therapy-website-react-gsap-and-dabbling-with-ai/
