Now vibe coding, so learning hammer FE ?
#文章 这是一条关于 tanstack start 中间件的文章。
https://frontendmasters.com/blog/introducing-tanstack-start-middleware/
https://frontendmasters.com/blog/introducing-tanstack-start-middleware/
#文章 利用 ES2022 的
- 错误链非枚举，不污染日志；可逐层访问 `err.cause` 获取完整堆栈与类型。
- 自定义错误类只需
- 使用场景
- 多层架构（服务→服务、包装函数、微调用）中，顶层抛出的同时需要追踪根因。
- 数据库/网络异常被重新包装为业务错误（如
- 单元测试断言：`expect(err.cause).toBeInstanceOf(原始错误类)`。
- 最佳实践
- 只在关键上下文加链，避免过度包装导致调试噪音。
- 手动记录：`console.error(err)
- 保持错误类型清晰，自定义类命名语义化，方便日志与监控筛选。
https://allthingssmitty.com/2025/11/10/error-chaining-in-javascript-cleaner-debugging-with-error-cause/
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/
#文章 Navigation API即将全面支持所有浏览器：这项令人振奋的新 Web 平台 API 很快将在所有浏览器中上线，它将重新定义我们构建客户端/单页应用导航的方式。不再需要使用原本并非为单页应用设计的笨拙 History API，也不再需要一个 <Link> 组件来拦截点击事件以调用 event.preventDefault() 和 history.pushState() ，取而代之的是，将有一个统一的中心位置来处理和拦截导航事件。React 团队正在开发一项过渡指示器功能，该功能将利用这一 API 提供原生的加载状态反馈。
#文章 #CSS 文章示范了用容器查询、
https://ishadeed.com/article/modern-css-section-layout/
:has()、clamp()等现代 CSS，让“头部+卡片网格”这一简单布局随卡片数量与宽度自动切换形态。https://ishadeed.com/article/modern-css-section-layout/
Ishadeed
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
#文章 作者在使用 Next.js App Router 和 React Server Components（RSC）一年后的不满和失望，并解释了他们为什么选择迁移到 TanStack Start。作者详细分析了 Next.js App Router 和 RSC 的设计缺陷，包括：乐观更新不可、每次导航都是另一次获取、布局人为受限、内容双重下载、Turbopack 表现不佳。
https://paperclover.net/blog/webdev/one-year-next-app-router
https://paperclover.net/blog/webdev/one-year-next-app-router
paperclover.net
One Year with Next.js App Router — Why We're Moving On
A critique of React Server Components and Next.js 15.
#文章 #JS JavaScript 中的异步循环，作者对比总结了部分实践
https://allthingssmitty.com/2025/10/20/rethinking-async-loops-in-javascript/
https://allthingssmitty.com/2025/10/20/rethinking-async-loops-in-javascript/
#UX #文章 模态框和非模态框，这两者的区别以及如何使用？
https://www.a11y-collective.com/blog/modal-vs-dialog/
https://www.a11y-collective.com/blog/modal-vs-dialog/
The A11Y Collective
When to Use Modal vs Dialog Components
Confused about modal vs dialog components? Discover implementation patterns, accessibility guidelines, and best practices for creating user-friendly interfaces.
#UX #文章 主要介绍了ARIA属性在无障碍网络应用中的关键作用，特别是aria-selected、aria-pressed、aria-current和aria-checked这四个容易混淆的属性。文章详细解释了每个属性的用途、适用场景、常见值以及最佳实践，同时指出了开发者在使用这些属性时常见的错误，并强调了正确使用ARIA属性对于确保辅助技术准确传达界面状态的重要性。
https://www.tpgi.com/what-state-aria-in/
https://www.tpgi.com/what-state-aria-in/
TPGi — a Vispero company
What State ARIA In? - TPGi — a Vispero company
This article explains how to use ARIA to indicate the difference between selected, pressed, current, and checked states of elements.
#文章 Next.js App Router 结合 React Server Components 带来 零 JS 前端渲染、流式 SSR 与自动代码分割 等亮点，却同时陷入 乐观更新缺失、每次导航重复取数、布局受限、双倍内容下载与调试痛苦 的深度缺陷；作者用一年实战证明，这套架构对动态应用既浪费带宽又折磨开发者，最终迁往 TanStack Start 才重获性能与可维护性。
https://paperclover.net/blog/webdev/one-year-next-app-router
https://paperclover.net/blog/webdev/one-year-next-app-router
paperclover.net
One Year with Next.js App Router — Why We're Moving On
A critique of React Server Components and Next.js 15.
#文章 React Server Components 本身并不“神奇”，真正的性能提升来自“服务器端数据获取 + Streaming + Suspense”的正确组合。 如果只用 RSC 而不重构数据流，性能甚至可能倒退。
https://www.developerway.com/posts/react-server-components-performance
https://www.developerway.com/posts/react-server-components-performance
Developerway
React Server Components: Do They Really Improve Performance?
A data-driven comparison of CSR, SSR, and RSC under the same app and test setup, focusing on initial-load performance and the impact of client- vs server-side data fetching (including Streaming + Suspense).
#文章 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的`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/
#文章 核心网页指标的历史——这是一份全面记录核心网页指标多年来发展历程的编年史，回顾了这一倡议的演变过程及其对网页性能产生的更广泛影响。值得一提的是，得益于核心网页指标的共同作用，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 #文章 介绍了如何在使用 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.
#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 编码助理。
