Now vibe coding, so learning hammer FE ?
#CSS 后兼容时代：2025 年起 Grid3、Subgrid、Container Queries、@layer 已成新 baseline，可直接用。
- 五大布局模型：Flow、Flexbox、Grid、Container Query、Intrinsic，各司其职。
- Subgrid 正式可用：子网格继承父网格轨道，一次性解决卡片对齐地狱。
- Container Queries 全面落地：组件按自身宽度响应，无需再绑死视口。
- @layer 正式版：显式层叠顺序，告别选择器权重内卷。
- Flexbox 默认支持 gap：row-gap / column-gap 无需 display:grid 也能优雅间距。
- 新关键字 safe/unsafe：align/justify-content 增加溢出保护。
- 四套现成无媒体查询模板：Holy Grail、自适应仪表板、多列文章、一行居中。
- DevTools 升级：Chrome 可视化 Subgrid，Firefox 仿真容器查询。
- 2026+ 在途功能：masonry、@when 条件规则、相对颜色语法。
https://2ality.com/2025/10/css-layout.html
- 五大布局模型：Flow、Flexbox、Grid、Container Query、Intrinsic，各司其职。
- Subgrid 正式可用：子网格继承父网格轨道，一次性解决卡片对齐地狱。
- Container Queries 全面落地：组件按自身宽度响应，无需再绑死视口。
- @layer 正式版：显式层叠顺序，告别选择器权重内卷。
- Flexbox 默认支持 gap：row-gap / column-gap 无需 display:grid 也能优雅间距。
- 新关键字 safe/unsafe：align/justify-content 增加溢出保护。
- 四套现成无媒体查询模板：Holy Grail、自适应仪表板、多列文章、一行居中。
- DevTools 升级：Chrome 可视化 Subgrid，Firefox 仿真容器查询。
- 2026+ 在途功能：masonry、@when 条件规则、相对颜色语法。
https://2ality.com/2025/10/css-layout.html
#文章 #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.
#CSS CSS 新增
https://www.joshwcomeau.com/animation/linear-timing-function/
linear() 时间函数，用“连点成线”方式原生实现弹簧、弹跳动画，免 JS，但需工具生成数据且要注意中断与回退。https://www.joshwcomeau.com/animation/linear-timing-function/
Joshwcomeau
Springs and Bounces in Native CSS • Josh W. Comeau
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll…
#文章 #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 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/
