锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  1. 锤子前端

    #文章 如何给 Astro 静态站点添加极速的前端搜索

    #文章 如何给 Astro 静态站点添加极速的前端搜索

    https://evilmartians.com/chronicles/how-to-add-fast-client-side-search-to-astro-static-sites
    evilmartians.com
    How to add fast, client-side search to Astro static sites—Martian Chronicles, Evil Martians’ team blog
    How to add fast, client-side search to Astro static sites—Martian Chronicles, Evil Martians’ team blog
    Join me on a breathtaking journey as we add a client-side search to an SSG docs-first site, built with Astro!

    文章

  2. 锤子前端

    #文章 解密 Object.groupBy 和 Map.groupBy 的用法

    #文章 解密 Object.groupBy 和 Map.groupBy 的用法。不过caniuse 显示浏览器需要 117+ 。就当看个乐子，探索精神是好的，实际用的时候还是有限 lodash ，因为兼容。

    https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/
    Allthingssmitty
    How to group arrays in JavaScript without reduce() - Matt Smith
    Ditch the reduce() boilerplate! Learn how to use Object.groupBy() and Map.groupBy() in JavaScript to group data with cleaner, more expressive code.

    文章

  4. 锤子前端

    这篇文章介绍了如何通过 JavaScript 检测 Safari 浏览器及其 iOS 版本，推荐使用特性检测和引擎映射的方法，而不是依赖容易伪造的 User-Agent 字符串

    这篇文章介绍了如何通过 JavaScript 检测 Safari 浏览器及其 iOS 版本，推荐使用特性检测和引擎映射的方法，而不是依赖容易伪造的 User-Agent 字符串。

    https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease
    evilmartians.com
    How to detect Safari and iOS versions with ease in 2026—Martian Chronicles, Evil Martians’ team blog
    How to detect Safari and iOS versions with ease in 2026—Martian Chronicles, Evil Martians’ team blog
    Read how to accurately detect Safari and iOS versions using WebKit feature checks, behavioral tests, and selective UA hints to gate features safely and avoid breaking UX.

  5. 锤子前端

    这篇文章是关于现代CSS颜色的实用指南第一部分，主要介绍了CSS颜色的新特性，包括新的颜色函数（如rgb()、hsl()的语法更新）、颜色空间（如srgb、display-p3、rec2020）以及如何使用这些新特性来实现更广色域和更一致的颜色表现，同时提供了实际示例和最佳实践建议

    这篇文章是关于现代CSS颜色的实用指南第一部分，主要介绍了CSS颜色的新特性，包括新的颜色函数（如rgb()、hsl()的语法更新）、颜色空间（如srgb、display-p3、rec2020）以及如何使用这些新特性来实现更广色域和更一致的颜色表现，同时提供了实际示例和最佳实践建议。

    https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/
    Piccalilli
    A pragmatic guide to modern CSS colours - part one
    A pragmatic guide to modern CSS colours - part one
    Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.

  6. 锤子前端

    #文章 核心网页指标的历史——这是一份全面记录核心网页指标多年来发展历程的编年史，回顾了这一倡议的演变过程及其对网页性能产生的更广泛影响

    #文章 核心网页指标的历史——这是一份全面记录核心网页指标多年来发展历程的编年史，回顾了这一倡议的演变过程及其对网页性能产生的更广泛影响。值得一提的是，得益于核心网页指标的共同作用，Chrome 用户总共节省了相当于三万年的等待时间！

    https://addyosmani.com/blog/core-web-vitals/
    AddyOsmani.com
    The History of Core Web Vitals | AddyOsmani.com
    The History of Core Web Vitals | AddyOsmani.com
    This write-up is a history of how Core Web Vitals came to be based on my recollections from our work on it at Google from 2014 onwards

    文章

  9. 锤子前端

    #React 19.2 useEffectEvent允许开发者使用一个始终能看到最新状态和属性的函数，而不会导致包含该函数的Effect重新运行

    #React 19.2 useEffectEvent允许开发者使用一个始终能看到最新状态和属性的函数，而不会导致包含该函数的Effect重新运行。作者期待看到这个钩子在未来如何被使用。

    https://www.nico.fyi/blog/quick-look-use-effect-event
    Nico's Blog
    Quick look into the useEffectEvent
    Quick look into the useEffectEvent
    Learn how to use the new useEffectEvent hook in React 19.2

    React

  10. 锤子前端

    #React #文章 介绍了如何在使用 React 的 <Suspense> 进行服务器端渲染（SSR）时，通过 useSyncExternalStore 避免水合不匹配问题，但指出其会触发非并发渲染导致用户体验问题

    #React #文章 介绍了如何在使用 React 的 <Suspense> 进行服务器端渲染（SSR）时，通过 useSyncExternalStore 避免水合不匹配问题，但指出其会触发非并发渲染导致用户体验问题。作者提出通过 useDeferredValue 实现并发的 `useSyncExternalStore`，优化用户体验和性能，并提供了实践示例。

    https://kurtextrem.de/posts/react-uses-hydration
    kurtextrem.de
    Concurrent Hydration with useSyncExternalStore
    Concurrent Hydration with useSyncExternalStore
    Pair useSyncExternalStore with useDeferredValue and memoization to keep hydration concurrent and INP friendly.

    React文章

  11. 锤子前端

    #React 隆重推出 React 基金会

    #React 隆重推出 React 基金会

    多年来，关于谁“拥有/控制”React，以及如果这种情况发生变化可能会带来什么影响等问题一直备受关注。在 2025 年的 React 大会上宣布，React 和 React Native 的控制权将从 Meta 转移至一个独立的基金会，该基金会最初将得到包括亚马逊、Expo、Meta 和微软在内的多家企业成员的支持。


    https://react.dev/blog/2025/10/07/introducing-the-react-foundation
    网易财经
    Meta宣布成立React基金会 React和React Native项目迎来新家
    Meta宣布成立React基金会 React和React Native项目迎来新家,基金会,meta,react,native

    React

  12. 锤子前端

    #AI #文章 AI不是来替代工程师的，而是来“被管理”的

    #AI #文章 AI不是来替代工程师的，而是来“被管理”的。
    只有把AI当作“极快但无知的初级开发者”，用工程化手段管理它，才能真正放大人类团队的交付能力，而不是陷入“AI写代码，人类擦屁股”的陷阱。

    https://chrisloy.dev/post/2025/09/28/the-ai-coding-trap
    chrisloy.dev
    The AI coding trap | Chris Loy
    If you ever watch someone “coding”, you might see them spending far more time staring
    into space than typing on their keyboard.

    AI文章

  13. 锤子前端

    #AI #文章 直到现在，代理们都是“蒙着眼睛写代码”

    #AI #文章 直到现在，代理们都是“蒙着眼睛写代码”。他们虽然能快速生成代码，却看不到那个按钮是否真的可以点击，也无法了解你的 Lighthouse 评分到底是什么样的，更搞不清楚为什么你的 API 调用会失败。
    这个新工具通过将 Chrome 开发者工具与基于 Puppeteer 的 MCP 服务器连接起来，解决了这一问题，任何人工智能都可以调用该服务器。这样一来，你的代理就有了“眼睛”，能够深入到沙盒化的 Chrome 配置文件中进行探索，并完成一些有趣的事情，例如：

    1. 像开发者一样进行调试—通过 MCP 直接检查 DOM、查看控制台日志并审查网络请求，让您的代理能够真正排查运行时错误，而无需盲目猜测。

    2. 自动化用户流程—通过模拟真实用户行为，点击按钮、填写表单、上传文件，并重现漏洞。

    3. 运行性能审计—触发 Chrome 性能跟踪，并提取可操作的指标，例如 LCP 和 TBT。现在，你可以再次把糟糕的 Lighthouse 分数归咎于 React，而不是 AI 了。

    https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-cn
    Chrome for Developers
    适用于 AI 代理的 Chrome 开发者工具 (MCP)  |  Blog  |  Chrome for Developers
    适用于 AI 代理的 Chrome 开发者工具 (MCP)  |  Blog  |  Chrome for Developers
    新 Chrome 开发者工具 MCP 服务器的公开预览版，可将 Chrome 开发者工具的强大功能引入 AI 编码助理。

    AI文章

  14. 锤子前端

    #AI #文章 直到现在，代理们都是“蒙着眼睛写代码”

    #AI #文章 直到现在，代理们都是“蒙着眼睛写代码”。他们虽然能快速生成代码，却看不到那个按钮是否真的可以点击，也无法了解你的 Lighthouse 评分到底是什么样的，更搞不清楚为什么你的 API 调用会失败。
    这个新工具通过将 Chrome 开发者工具与基于 Puppeteer 的 MCP 服务器连接起来，解决了这一问题，任何人工智能都可以调用该服务器。这样一来，你的代理就有了“眼睛”，能够深入到沙盒化的 Chrome 配置文件中进行探索，并完成一些有趣的事情，例如：
    1. 像开发者一样进行调试—通过 MCP 直接检查 DOM、查看控制台日志并审查网络请求，让您的代理能够真正排查运行时错误，而无需盲目猜测。
    2. 自动化用户流程—通过模拟真实用户行为，点击按钮、填写表单、上传文件，并重现漏洞。
    3. 运行性能审计—触发 Chrome 性能跟踪，并提取可操作的指标，例如 LCP 和 TBT。现在，你可以再次把糟糕的 Lighthouse 分数归咎于 React，而不是 AI 了。

    https://developer.chrome.com/blog/chrome-devtools-mcp?hl=zh-cn
    Chrome for Developers
    适用于 AI 代理的 Chrome 开发者工具 (MCP)  |  Blog  |  Chrome for Developers
    适用于 AI 代理的 Chrome 开发者工具 (MCP)  |  Blog  |  Chrome for Developers
    新 Chrome 开发者工具 MCP 服务器的公开预览版，可将 Chrome 开发者工具的强大功能引入 AI 编码助理。

    AI文章

  15. 锤子前端

    #文章 Chrome 129 刚支持的“CSS 类型算术”允许不同单位值直接四则运算：单位÷单位得纯数、单位×或÷纯数仍得单位，结果自动带类型校验，从此可原生把 calc(70px / 10px) 当成 7 来用，无需预处理器

    #文章 Chrome 129 刚支持的“CSS 类型算术”允许不同单位值直接四则运算：单位÷单位得纯数、单位×或÷纯数仍得单位，结果自动带类型校验，从此可原生把 calc(70px / 10px) 当成 7 来用，无需预处理器。

    https://css-tricks.com/css-typed-arithmetic/
    CSS-Tricks
    CSS Typed Arithmetic | CSS-Tricks
    CSS Typed Arithmetic | CSS-Tricks
    Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.

    文章

  16. 锤子前端

    #文章 探讨了本地优先应用未能广泛流行的原因，主要是因为同步数据难度大

    #文章 探讨了本地优先应用未能广泛流行的原因，主要是因为同步数据难度大。作者介绍了分布式系统中事件排序和冲突解决的两大挑战，并提出了混合逻辑时钟（HLCs）和无冲突复制数据类型（CRDTs）作为解决方案。同时，强调了SQLite在本地优先应用中的优势，并提出了相关开发建议。

    https://marcobambini.substack.com/p/why-local-first-apps-havent-become
    Substack
    Why Local-First Apps Haven’t Become Popular?
    Why Local-First Apps Haven’t Become Popular?
    Offline-first apps promise instant loading and privacy, but in practice, very few apps get offline support because getting sync right is surprisingly hard.

    文章

  17. 锤子前端

    #React 这篇文章《约束的纪律：Elm 教会我关于 React useReducer 的经验》探讨了作者从 Elm 语言的设计哲学中获得的启发，以及如何将这些启发应用到 React 的 useReducer 中，以写出更严谨、可维护的代码

    #React 这篇文章《约束的纪律：Elm 教会我关于 React useReducer 的经验》探讨了作者从 Elm 语言的设计哲学中获得的启发，以及如何将这些启发应用到 React 的 useReducer 中，以写出更严谨、可维护的代码。

    https://cekrem.github.io/posts/the-discipline-of-constraints-elm-usereducer-lessons/
    cekrem.github.io
    The Discipline of Constraints: What Elm Taught Me About React's useReducer
    The Discipline of Constraints: What Elm Taught Me About React's useReducer
    How enforced discipline in one language can teach you better patterns in another - lessons from crossing the Elm/React boundary

    React

  18. 锤子前端

    #React #文章 这篇文章的核心观点是：当你看到一段代码，用 useEffect 去监听外部数据、然后用 useState 去更新组件状态时，你真正想要的很可能是 useSyncExternalStore

    #React #文章 这篇文章的核心观点是：当你看到一段代码，用 useEffect 去监听外部数据、然后用 useState 去更新组件状态时，你真正想要的很可能是 useSyncExternalStore 。

    https://swizec.com/blog/you-may-be-looking-for-a-useSyncExternalStore/
    Swizec Teller
    You may be looking for a useSyncExternalStore
    You may be looking for a useSyncExternalStore
    When you see a `useEffect` that updates a `useState` and returns a value, you might be looking for a `useSyncExternalStore`. This is my current vendetta.

    React文章

  19. 锤子前端

    #React 这个vercel的组件补齐了现代AI响应最后一块拼图！Mermaid 图表自定义配置：支持自定义 Mermaid 图表的配置选项

    #React 这个vercel的组件补齐了现代AI响应最后一块拼图！Mermaid 图表自定义配置：支持自定义 Mermaid 图表的配置选项。

    https://github.com/vercel/streamdown/releases/tag/streamdown%401.3.0
    GitHub
    Release streamdown@1.3.0 · vercel/streamdown
    Release streamdown@1.3.0 · vercel/streamdown
    Minor Changes

    73b17a4: Add controls prop to control copy/download button visibility.
    64b5afa: feat: memoize components to prevent child re-renders
    d2edc90: feat: add custom Mermaid configuration s...

    React

  20. 锤子前端

    #CSS Styled-Components 维护模式：一个 40%更快的分支：Styled-Components 目前处于维护模式，Sanity 团队分支了它，并利用 React 18 的 useInsertionEffect 钩子（以及其他因素）使其速度大幅提升

    #CSS Styled-Components 维护模式：一个 40%更快的分支：Styled-Components 目前处于维护模式，Sanity 团队分支了它，并利用 React 18 的 useInsertionEffect 钩子（以及其他因素）使其速度大幅提升。Sanity 和 Linear 都在使用这个分支作为临时解决方案，直到他们完全迁移到更好的方案。

    https://www.sanity.io/blog/cut-styled-components-into-pieces-this-is-our-last-resort
    Sanity.io
    styled-components maintenance mode: A 40% faster fork | Sanity
    styled-components maintenance mode: A 40% faster fork | Sanity
    After styled-components entered maintenance mode, we forked it with React 18's useInsertionEffect. Result: 40% faster renders for Linear. Open source solution.

    CSS