Now vibe coding, so learning hammer FE ?
#文章 2025 年的 Node.js 已内置全套现代 Web 标准与开发工具，升 20.x 即可零依赖写 ESM、fetch、测试、watch、权限、单文件部署，彻底告别“装包装到哭”的旧时代。
https://kashw1n.com/blog/nodejs-2025/
https://kashw1n.com/blog/nodejs-2025/
#AI #文章 原型≠产品：作者指出，氛围编码工具适合创意验证，但无法替代专业开发。
https://thenewstack.io/as-vibe-coding-fades-woz-offers-production-ready-alternative/
https://thenewstack.io/as-vibe-coding-fades-woz-offers-production-ready-alternative/
The New Stack
As Vibe Coding Fades, Woz Offers Production-Ready Alternative
Woz launches to build production-ready apps using prebuilt components and human oversight, as traffic to leading vibe coding tools drops by as much as 64%.
#React 介绍了在React Router中如何通过actions和loaders将UI表单数据转换为数据库对象，以及将数据库数据转换为UI友好的格式，强调了分离关注点的重要性，以提高应用的可维护性和可测试性。
扩展重点：
- 三层数据架构
- 关注点分离
https://sergiodxa.com/tutorials/transform-formdata-between-ui-and-database-in-react-router
扩展重点：
- 三层数据架构
- 关注点分离
https://sergiodxa.com/tutorials/transform-formdata-between-ui-and-database-in-react-router
#AI 作者利用人工智能工具开发macOS无感自动更新功能的全过程，包括规划、原型设计、代码清理、解决难题、后端开发、模拟测试和最终集成，强调了AI作为助手在提高开发效率方面的作用，以及人工介入在解决关键问题上的重要性。
https://mitchellh.com/writing/non-trivial-vibing
https://mitchellh.com/writing/non-trivial-vibing
#AI 继提示词工程之后，vibe coding 带来的上下文腐烂问题，我们应该如何解决：
https://baoyu.io/blog/the-art-of-conversing-with-ai-master-context-engineering-for-ai-agents
https://baoyu.io/blog/the-art-of-conversing-with-ai-master-context-engineering-for-ai-agents
baoyu.io
The Art of Conversing with AI: Beyond Prompting, Mastering the Mysteries of Agentic Context Engineering
We stand on the precipice of a revolution driven by AI Agents. We envision them as reliable assistants, autonomously navigating long and complex tasks. Yet, a profound paradox is quietly unfolding: the more we rely on them, the more susceptible they become…
#React #文章 文章介绍了如何使用React的`useDeferredValue()`和`useSuspenseQuery()`构建响应式的异步组合框组件，通过将数据获取逻辑提取到单独组件中并利用Suspense和错误边界，简化了加载和错误状态管理，同时通过`useDeferredValue()`优化渲染，实现平滑的用户体验和过时数据更新体验。
https://certificates.dev/blog/building-an-async-combobox-with-usesuspensequery-and-usedeferredvalue
https://certificates.dev/blog/building-an-async-combobox-with-usesuspensequery-and-usedeferredvalue
certificates.dev
Building an Async Combobox with useSuspenseQuery() and useDeferredValue()
Learn how to build a responsive async combobox component using React's useDeferredValue() and useSuspenseQuery(). Discover how these concurrent features work together to create smooth user experiences with declarative loading states, optimistic updates, and…
#文章 如何给 Astro 静态站点添加极速的前端搜索
https://evilmartians.com/chronicles/how-to-add-fast-client-side-search-to-astro-static-sites
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
Join me on a breathtaking journey as we add a client-side search to an SSG docs-first site, built with Astro!
#文章 解密 Object.groupBy 和 Map.groupBy 的用法。不过caniuse 显示浏览器需要 117+ 。就当看个乐子，探索精神是好的，实际用的时候还是有限 lodash ，因为兼容。
https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/
https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/
这篇文章介绍了如何通过 JavaScript 检测 Safari 浏览器及其 iOS 版本，推荐使用特性检测和引擎映射的方法，而不是依赖容易伪造的 User-Agent 字符串。
https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease
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 2025—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.
这篇文章是关于现代CSS颜色的实用指南第一部分，主要介绍了CSS颜色的新特性，包括新的颜色函数（如
https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/
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
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.
#文章 核心网页指标的历史——这是一份全面记录核心网页指标多年来发展历程的编年史，回顾了这一倡议的演变过程及其对网页性能产生的更广泛影响。值得一提的是，得益于核心网页指标的共同作用，Chrome 用户总共节省了相当于三万年的等待时间！
https://addyosmani.com/blog/core-web-vitals/
https://addyosmani.com/blog/core-web-vitals/
Addyosmani
The History of Core Web Vitals
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
#React 19.2 useEffectEvent允许开发者使用一个始终能看到最新状态和属性的函数，而不会导致包含该函数的Effect重新运行。作者期待看到这个钩子在未来如何被使用。
https://www.nico.fyi/blog/quick-look-use-effect-event
https://www.nico.fyi/blog/quick-look-use-effect-event
Nico's Blog
Quick look into the useEffectEvent
Learn how to use the new useEffectEvent hook in React 19.2
#React #文章 介绍了如何在使用 React 的
https://kurtextrem.de/posts/react-uses-hydration
<Suspense> 进行服务器端渲染（SSR）时，通过 useSyncExternalStore 避免水合不匹配问题，但指出其会触发非并发渲染导致用户体验问题。作者提出通过 useDeferredValue 实现并发的 `useSyncExternalStore`，优化用户体验和性能，并提供了实践示例。https://kurtextrem.de/posts/react-uses-hydration
kurtextrem.de
Concurrent Hydration with useSyncExternalStore
Pair useSyncExternalStore with useDeferredValue and memoization to keep hydration concurrent and INP friendly.
#React 隆重推出 React 基金会
多年来，关于谁“拥有/控制”React，以及如果这种情况发生变化可能会带来什么影响等问题一直备受关注。在 2025 年的 React 大会上宣布，React 和 React Native 的控制权将从 Meta 转移至一个独立的基金会，该基金会最初将得到包括亚马逊、Expo、Meta 和微软在内的多家企业成员的支持。
https://react.dev/blog/2025/10/07/introducing-the-react-foundation
多年来，关于谁“拥有/控制”React，以及如果这种情况发生变化可能会带来什么影响等问题一直备受关注。在 2025 年的 React 大会上宣布，React 和 React Native 的控制权将从 Meta 转移至一个独立的基金会，该基金会最初将得到包括亚马逊、Expo、Meta 和微软在内的多家企业成员的支持。
https://react.dev/blog/2025/10/07/introducing-the-react-foundation
#AI #文章 AI不是来替代工程师的，而是来“被管理”的。
只有把AI当作“极快但无知的初级开发者”，用工程化手段管理它，才能真正放大人类团队的交付能力，而不是陷入“AI写代码，人类擦屁股”的陷阱。
https://chrisloy.dev/post/2025/09/28/the-ai-coding-trap
只有把AI当作“极快但无知的初级开发者”，用工程化手段管理它，才能真正放大人类团队的交付能力，而不是陷入“AI写代码，人类擦屁股”的陷阱。
https://chrisloy.dev/post/2025/09/28/the-ai-coding-trap
#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 开发者工具与基于 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
新 Chrome 开发者工具 MCP 服务器的公开预览版，可将 Chrome 开发者工具的强大功能引入 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 开发者工具与基于 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
新 Chrome 开发者工具 MCP 服务器的公开预览版，可将 Chrome 开发者工具的强大功能引入 AI 编码助理。
