锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  4. 锤子前端

    #React #文章 「React 项目中的文件结构」和「基于特性的 React 架构」以支持大规模应用程序的构建和维护

    #React #文章 「React 项目中的文件结构」和「基于特性的 React 架构」以支持大规模应用程序的构建和维护。
    Robin Wieruch
    React Folder Structure Best Practices [2026] - Robin Wieruch
    React Folder Structure Best Practices [2026] - Robin Wieruch
    From a single file to feature folders and a production monorepo: how to structure React projects with files, technical folders, and clean boundaries.

    React文章

  6. 锤子前端

    #文章 #React 「在React中充分利用i18next」i18next库在React应用国际化过程中的高级特性和功能

    #文章 #React 「在React中充分利用i18next」i18next库在React应用国际化过程中的高级特性和功能。
    - 复数处理
    - 命名空间
    - 默认值
    - Trans 组件
    Lingual
    Getting more out of i18next in React
    A collection of tips and tricks to get more out of i18next and react-i18next when using it with your application or website. This post covers a wide range of topics, including pluralization, React components, hooks, validation, TypeScript and much more.

    文章React

  7. 锤子前端

    #文章 #React 在 「React 项目中提升 INP」如何在使用React时改进交互到下一次绘制（INP），这是衡量用户体验和Google搜索排名的核心网络生命指标之一

    #文章 #React 在 「React 项目中提升 INP」如何在使用React时改进交互到下一次绘制（INP），这是衡量用户体验和Google搜索排名的核心网络生命指标之一。
    - 升级到React 18
    - 并发渲染
    - 选择性水合、渐进水合（Suspense）
    - 事件处理和重新渲染（startTransition）
    - 替换同步useEffects（useAfterPaintEffect）
    - 中止冗余工作（AbortController）
    kurtextrem.de
    How To Improve INP: React⚛️
    How To Improve INP: React⚛️
    All-in-one guide for improving Interaction-to-Next-Paint (INP) React applications. Introduces the useAfterPaintEffect hook.

    文章React

  13. 锤子前端

    #文章 「为什么使用 react-query?」 除了介绍 react-query 之外，还值得关注的点在于，文中简述总结了 react 的状态管理 和 异步数据传统方式带来的痛点

    #文章 「为什么使用 react-query?」 除了介绍 react-query 之外，还值得关注的点在于，文中简述总结了 react 的状态管理 和 异步数据传统方式带来的痛点。

    如果不希望技术选型完全寄希望于某一个开源的思维范式，还有一个关于 SWR 心智模型值得学习，当然这个库也是非常简洁和好用的。

    对比学习总是能够收获更多，并且不仅仅是技术本身。
    swr.vercel.app
    理解 SWR – SWR
    理解 SWR – SWR
    SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

    文章

  14. 锤子前端

    #文章 #CSS 详细介绍了如何使用 CSS 的 backdrop-filter: blur() 属性来创建磨砂玻璃效果，并提供了一些优化技巧，使效果更加真实和美观

    #文章 #CSS 详细介绍了如何使用 CSS 的 backdrop-filter: blur() 属性来创建磨砂玻璃效果，并提供了一些优化技巧，使效果更加真实和美观。

    https://www.joshwcomeau.com/css/backdrop-filter/
    Joshwcomeau
    Next-level frosted glass with backdrop-filter • Josh W. Comeau
    Next-level frosted glass with backdrop-filter • Josh W. Comeau
    Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most realistic lush frosted glass anywhere on the internet.

    文章CSS

  18. 锤子前端

    #文章 #HTML 关于<search>元素，旨在作为搜索界面的专用容器，提供更好的可访问性，并明确搜索相关内容的目的

    #文章 #HTML 关于<search>元素，旨在作为搜索界面的专用容器，提供更好的可访问性，并明确搜索相关内容的目的。

    https://www.trevorlasn.com/blog/html-search-element
    The HTML Native Search Element
    The search HTML element is a container that represents the parts of the web page with search functionality

    文章HTML