Now vibe coding, so learning hammer FE ?
#React React 19.2 新增 <Activity> 组件,可在保留状态的前提下以最低优先级渲染隐藏内容,显著降低主线程压力并加速交互响应。
配套推出的 Performance Tracks 把 React 内部任务、组件渲染与 SSR 耗时一次性可视化,让开发者快速定位并消除拖慢 INP 的瓶颈。

https://calendar.perfplanet.com/2025/react-19-2-further-advances-inp-optimization/ React 19.2. Further Advances INP Optimization
文章《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
文章通过实战项目的方式,详细讲解了如何结合 React Three Fiber 和 GLSL 着色器实现一个视觉效果丰富、可扩展的无限滚动轮播组件。作者鼓励读者在此基础上继续探索,创造更多有趣的交互效果。

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/
#CSS 本文深入解析了 CSS position: sticky 的常见“坑”:粘性元素不能大于滚动容器,也不能被尺寸过小的祖先块限制,尤其在 Flex/Grid 布局中默认的 stretch 对齐会让粘性失效;解决办法是给相关元素设置 align-self: flex-start 或限制高度并内部滚动,确保粘性元素在规范允许的包含块内自由“粘贴”。 https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/ The Weird Parts of position: sticky;
Back to Top