Now vibe coding, so learning hammer FE ?
#React React 19.2 新增
配套推出的 Performance Tracks 把 React 内部任务、组件渲染与 SSR 耗时一次性可视化,让开发者快速定位并消除拖慢 INP 的瓶颈。
https://calendar.perfplanet.com/2025/react-19-2-further-advances-inp-optimization/
<Activity> 组件,可在保留状态的前提下以最低优先级渲染隐藏内容,显著降低主线程压力并加速交互响应。 配套推出的 Performance Tracks 把 React 内部任务、组件渲染与 SSR 耗时一次性可视化,让开发者快速定位并消除拖慢 INP 的瓶颈。
https://calendar.perfplanet.com/2025/react-19-2-further-advances-inp-optimization/
浏览器处理 Base64 数据有多快? —— 在大多数现代硬件下,速度都能轻松上 GB/s,就是 Firefox 和 Servo 慢点。
https://lemire.me/blog/2025/11/29/how-fast-can-browsers-process-base64-data/
https://lemire.me/blog/2025/11/29/how-fast-can-browsers-process-base64-data/
构建一个 toast 组件:热门 React 库 Sonner 的作者分享了多种设计工程方面的经验教训。
https://emilkowal.ski/ui/building-a-toast-component
https://emilkowal.ski/ui/building-a-toast-component
tailwind css 官方出的排序插件由于 prettier 更新导致报错的问题被修复了
https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.7.2
https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.7.2
文章《Automated Accessibility Testing for React》提出:自动化无法取代人工,但能提前拦截常见无障碍缺陷。最低成本方案是给所有 React 项目加装 eslint-plugin-jsx-a11y;若已用 React Testing Library,坚持语义查询即可同步做单元层检测。E2E 层推荐在 Cypress/Playwright 中插入 axe-core(cypress-axe 或 @axe-core/playwright),Storybook 用户可一键启用 addon-a11y。部署后可用 Lighthouse CI 或 pa11y 扫描整站。作者强调仍须键盘-only 走查与真机屏幕阅读器测试作最终兜底。
https://howtotestfrontend.com/resources/accessibility-testing-your-react-app
https://howtotestfrontend.com/resources/accessibility-testing-your-react-app
文章通过实战项目的方式,详细讲解了如何结合 React Three Fiber 和 GLSL 着色器实现一个视觉效果丰富、可扩展的无限滚动轮播组件。作者鼓励读者在此基础上继续探索,创造更多有趣的交互效果。
https://tympanus.net/codrops/2025/11/26/creating-wavy-infinite-carousels-in-react-three-fiber-with-glsl-shaders/
https://tympanus.net/codrops/2025/11/26/creating-wavy-infinite-carousels-in-react-three-fiber-with-glsl-shaders/
ToyFight® 为 INK Games 打造全新网站,采用 Next.js + React Three Fiber 单画布架构,通过 GSAP 与视口裁剪技术在同页流畅渲染多段 3D 内容,并借助遮罩、裁剪平面与光标联动旋转,实现门户卡片等复杂 3D 交互,兼顾性能与视觉冲击。
https://tympanus.net/codrops/2025/11/21/one-canvas-to-rule-them-all-how-ink-games-new-site-handles-complex-3d/
https://tympanus.net/codrops/2025/11/21/one-canvas-to-rule-them-all-how-ink-games-new-site-handles-complex-3d/
https://tympanus.net/codrops/2025/11/19/how-to-build-cinematic-3d-scroll-experiences-with-gsap/
如何用 GSAP 和 Three.js 做很卷的 3D 滚动动画
如何用 GSAP 和 Three.js 做很卷的 3D 滚动动画
#React 为修正路由匹配的正确性,TanStack Router 改用段前缀树结构,意外带来最高 2 万倍的性能飞跃。
https://tanstack.com/blog/tanstack-router-route-matching-tree-rewrite
https://tanstack.com/blog/tanstack-router-route-matching-tree-rewrite
#CSS 本文深入解析了 CSS
position: sticky 的常见“坑”:粘性元素不能大于滚动容器,也不能被尺寸过小的祖先块限制,尤其在 Flex/Grid 布局中默认的 stretch 对齐会让粘性失效;解决办法是给相关元素设置 align-self: flex-start 或限制高度并内部滚动,确保粘性元素在规范允许的包含块内自由“粘贴”。 https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/