锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  1. 锤子前端

    tailwind css 官方出的排序插件由于 prettier 更新导致报错的问题被修复了

    tailwind css 官方出的排序插件由于 prettier 更新导致报错的问题被修复了

    https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases/tag/v0.7.2
    GitHub
    Release v0.7.2 · tailwindlabs/prettier-plugin-tailwindcss
    Release v0.7.2 · tailwindlabs/prettier-plugin-tailwindcss
    Fixed

    Load compatible plugins sequentially to work around race conditions in Node.js (#412)
    Fix compatibility with prettier-plugin-svelte when using Prettier v3.7+ (#418)

  2. 锤子前端

    https://baoyu.io/translations/claude-skills-deep-dive
    baoyu.io
    从第一性原理深度拆解 Claude Agent Skill
    Claude 的 Agent `Skills`（技能）系统代表了一种精妙的、基于提示词（Prompt）的“元工具”架构。它通过注入专门的指令，极大地扩展了大语言模型（LLM）的能力。与传统的函数调用或代码执行不同，`Skills` 不编写可执行代码，而是通过 **提示词扩展（Prompt Expansion）** 和 **上下文修改（Context Modification）** 来改变 Claude 处理后续请求的方式。

  3. 锤子前端

    文章《Automated Accessibility Testing for React》提出：自动化无法取代人工，但能提前拦截常见无障碍缺陷

    文章《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
    Howtotestfrontend
    Automated Accessibility Testing for React - Tools and Best Practices you can use | How To Test Frontend
    As well as testing the core functionality of your code with regular tests, you can use automated tools to test that your app or website has good accessibility. In this post, I will explain how and what tools you can use, and why manual testing is still essential...

  4. 锤子前端

    文章通过实战项目的方式，详细讲解了如何结合 React Three Fiber 和 GLSL 着色器实现一个视觉效果丰富、可扩展的无限滚动轮播组件

    文章通过实战项目的方式，详细讲解了如何结合 React Three Fiber 和 GLSL 着色器实现一个视觉效果丰富、可扩展的无限滚动轮播组件。作者鼓励读者在此基础上继续探索，创造更多有趣的交互效果。

    https://tympanus.net/codrops/2025/11/26/creating-wavy-infinite-carousels-in-react-three-fiber-with-glsl-shaders/
    Codrops
    Creating Wavy Infinite Carousels in React Three Fiber with GLSL Shaders | Codrops
    Creating Wavy Infinite Carousels in React Three Fiber with GLSL Shaders | Codrops
    Experimenting with infinitely scrolling, wavy 3D carousels in React Three Fiber with smooth scroll-driven distortion effects.

  5. 锤子前端

    ToyFight® 为 INK Games 打造全新网站，采用 Next.js + React Three Fiber 单画布架构，通过 GSAP 与视口裁剪技术在同页流畅渲染多段 3D 内容，并借助遮罩、裁剪平面与光标联动旋转，实现门户卡片等复杂 3D 交互，兼顾性能与视觉冲击

    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/
    Codrops
    One Canvas to Rule Them All: How INK Games’ New Site Handles Complex 3D | Codrops
    A look at how ToyFight® crafted a bold new site for INK Games, a global leader in mobile gaming, through layered 3D, scroll-driven animation, and a single shared WebGL canvas.

  12. 锤子前端

    #React 为修正路由匹配的正确性，TanStack Router 改用段前缀树结构，意外带来最高 2 万倍的性能飞跃

    #React 为修正路由匹配的正确性，TanStack Router 改用段前缀树结构，意外带来最高 2 万倍的性能飞跃。
    https://tanstack.com/blog/tanstack-router-route-matching-tree-rewrite
    Tanstack
    How we accidentally made route matching more performant by aiming for correctness | TanStack Blog
    How we accidentally made route matching more performant by aiming for correctness | TanStack Blog
    A rewrite aimed at fixing edge cases in route matching accidentally delivered a 20,000x performance improvement. Route matching is no longer bottlenecked by the number of routes in your application.

    React

  14. 锤子前端

    #CSS 本文深入解析了 CSS position: sticky 的常见“坑”：粘性元素不能大于滚动容器，也不能被尺寸过小的祖先块限制，尤其在 Flex/Grid 布局中默认的 stretch 对齐会让粘性失效；解决办法是给相关元素设置 align-self: flex-start 或限制高度并内部滚动，确保粘性元素在规范允许的包含块内自由“粘贴”

    #CSS 本文深入解析了 CSS position: sticky 的常见“坑”：粘性元素不能大于滚动容器，也不能被尺寸过小的祖先块限制，尤其在 Flex/Grid 布局中默认的 stretch 对齐会让粘性失效；解决办法是给相关元素设置 align-self: flex-start 或限制高度并内部滚动，确保粘性元素在规范允许的包含块内自由“粘贴”。 https://frontendmasters.com/blog/the-weird-parts-of-position-sticky/
    Frontend Masters
    The Weird Parts of position: sticky;
    The Weird Parts of position: sticky;
    Using position: sticky; is one of those CSS features that’s incredibly useful, seemingly simple, and also, frequently frustrating.

    CSS

  15. 锤子前端

    #CSS CSS 性能榜：只动 transform/opacity+transition/animation 或 WAAPI 最丝滑，别碰会触发 Layout 的几何属性与 setInterval 改样式

    #CSS CSS 性能榜：只动 transform/opacity+transition/animation 或 WAAPI 最丝滑，别碰会触发 Layout 的几何属性与 setInterval 改样式。

    https://motion.dev/blog/web-animation-performance-tier-list
    Motion
    The Web Animation Performance Tier List | Motion Magazine
    The Web Animation Performance Tier List | Motion Magazine
    Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.

    CSS

  16. 锤子前端

    #React React 19 错误边界在捕获首个错误后立即停止渲染同级组件，避免资源浪费

    #React React 19 错误边界在捕获首个错误后立即停止渲染同级组件，避免资源浪费。

    同时消除重复错误日志，简化开发者对异常的处理逻辑。

    https://andrei-calazans.com/posts/react-19-error-boundary-changed/
    Andrei Calazans
    React 19 Error Boundary Behaves Differently
    React 19 Error Boundary Behaves Differently
    An exploration of changes in error boundary behavior in React 19.

    React

  17. 锤子前端

    vscode 内联建议开源（Inline suggestions are open source）：继开源 GitHub Copilot Chat 之后，VS Code 现在也开源了内联建议，将其合并到了 vscode-copilot-chat 仓库中

    vscode 内联建议开源（Inline suggestions are open source）：继开源 GitHub Copilot Chat 之后，VS Code 现在也开源了内联建议，将其合并到了 vscode-copilot-chat 仓库中。同时，GitHub Copilot 扩展和 GitHub Copilot Chat 扩展将整合为一个单一的扩展体验，聊天扩展现在提供所有内联建议，同时保留了聊天和代理功能。

  19. 锤子前端

    #TS typescript-plugin-directives: 一个 TypeScript 语言服务插件，为诸如 "use server" 、 "use client" 、 "use cache" 等 "use …" 指令提供 IDE 级别的感知功能

    #TS typescript-plugin-directives: 一个 TypeScript 语言服务插件，为诸如 "use server" 、 "use client" 、 "use cache" 等 "use …" 指令提供 IDE 级别的感知功能。

    https://github.com/lazarv/typescript-plugin-directives
    GitHub
    GitHub - lazarv/typescript-plugin-directives: TypeScript LS plugin adding inline hints and hover info for \"use …\" directives
    TypeScript LS plugin adding inline hints and hover info for \"use …\" directives - lazarv/typescript-plugin-directives

    TS

  20. 锤子前端

    #文章 利用 ES2022 的 Error.cause 在构造函数中保留原始错误：`new Error(msg, { cause: err })`

    #文章 利用 ES2022 的 Error.cause 在构造函数中保留原始错误：`new Error(msg, { cause: err })`。
    - 错误链非枚举，不污染日志；可逐层访问 `err.cause` 获取完整堆栈与类型。
    - 自定义错误类只需 super(message, { cause }) 即可自动继承该能力；TypeScript 需 `target/lib ≥ es2022`。

    - 使用场景
    - 多层架构（服务→服务、包装函数、微调用）中，顶层抛出的同时需要追踪根因。
    - 数据库/网络异常被重新包装为业务错误（如 ConnectionTimeoutError → DatabaseError → `ServiceUnavailableError`）。
    - 单元测试断言：`expect(err.cause).toBeInstanceOf(原始错误类)`。

    - 最佳实践
    - 只在关键上下文加链，避免过度包装导致调试噪音。
    - 手动记录：`console.error(err) 后紧跟 `console.error('Caused by:', err.cause)`；使用递归辅助函数 `logErrorChain/logFullErrorChain 打印完整链。
    - 保持错误类型清晰，自定义类命名语义化，方便日志与监控筛选。

    https://allthingssmitty.com/2025/11/10/error-chaining-in-javascript-cleaner-debugging-with-error-cause/
    Allthingssmitty
    Error chaining in JavaScript: cleaner debugging with Error.cause - Matt Smith
    Use JavaScript's 'cause' property to chain errors, preserve context, and simplify debugging. Cleaner stack traces, better test assertions.

    文章