锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  1. 锤子前端

    #文章 Navigation API即将全面支持所有浏览器：这项令人振奋的新 Web 平台 API 很快将在所有浏览器中上线，它将重新定义我们构建客户端/单页应用导航的方式

    #文章 Navigation API即将全面支持所有浏览器：这项令人振奋的新 Web 平台 API 很快将在所有浏览器中上线，它将重新定义我们构建客户端/单页应用导航的方式。不再需要使用原本并非为单页应用设计的笨拙 History API，也不再需要一个 <Link> 组件来拦截点击事件以调用 event.preventDefault() 和 history.pushState() ，取而代之的是，将有一个统一的中心位置来处理和拦截导航事件。React 团队正在开发一项过渡指示器功能，该功能将利用这一 API 提供原生的加载状态反馈。

    文章

  5. 锤子前端

    #CSS 后兼容时代：2025 年起 Grid3、Subgrid、Container Queries、@layer 已成新 baseline，可直接用

    #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
    2Ality
    [Web dev for beginners] CSS layout: flexbox, grid, media queries and container queries
    CSS provides a variety of services for web content: In the previous chapter, we used it to format content: to change colors, typefaces, etc. In this chapter, we will use it to lay out content: to place HTML elements on a page.

    CSS

  6. 锤子前端

    #文章 #CSS 文章示范了用容器查询、:has()、clamp()等现代 CSS，让“头部+卡片网格”这一简单布局随卡片数量与宽度自动切换形态

    #文章 #CSS 文章示范了用容器查询、:has()、clamp()等现代 CSS，让“头部+卡片网格”这一简单布局随卡片数量与宽度自动切换形态。

    https://ishadeed.com/article/modern-css-section-layout/
    Ishadeed
    Solved By Modern CSS: Section Layout
    Solved By Modern CSS: Section Layout
    Building a typical section design with modern CSS.

    文章CSS

  7. 锤子前端

    #文章 作者在使用 Next.js App Router 和 React Server Components（RSC）一年后的不满和失望，并解释了他们为什么选择迁移到 TanStack Start

    #文章 作者在使用 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
    paperclover.net
    One Year with Next.js App Router — Why We're Moving On
    One Year with Next.js App Router — Why We're Moving On
    A critique of React Server Components and Next.js 15.

    文章

  8. 锤子前端

    #CSS CSS 新增 linear() 时间函数，用“连点成线”方式原生实现弹簧、弹跳动画，免 JS，但需工具生成数据且要注意中断与回退

    #CSS CSS 新增 linear() 时间函数，用“连点成线”方式原生实现弹簧、弹跳动画，免 JS，但需工具生成数据且要注意中断与回退。

    https://www.joshwcomeau.com/animation/linear-timing-function/
    Joshwcomeau
    Springs and Bounces in Native CSS • Josh W. Comeau
    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…

    CSS

  9. 锤子前端

    #文章 #JS JavaScript 中的异步循环，作者对比总结了部分实践

    #文章 #JS JavaScript 中的异步循环，作者对比总结了部分实践

    https://allthingssmitty.com/2025/10/20/rethinking-async-loops-in-javascript/
    Allthingssmitty
    Rethinking async loops in JavaScript - Matt Smith
    Struggling with 'await' in loops? Explore common mistakes and modern solutions to optimize async code for performance.

    文章JS

  10. 锤子前端

    #UX #文章 模态框和非模态框，这两者的区别以及如何使用？

    #UX #文章 模态框和非模态框，这两者的区别以及如何使用？

    https://www.a11y-collective.com/blog/modal-vs-dialog/
    The A11Y Collective
    When to Use Modal vs Dialog Components
    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文章

  11. 锤子前端

    #UX #文章 主要介绍了ARIA属性在无障碍网络应用中的关键作用，特别是aria-selected、aria-pressed、aria-current和aria-checked这四个容易混淆的属性

    #UX #文章 主要介绍了ARIA属性在无障碍网络应用中的关键作用，特别是aria-selected、aria-pressed、aria-current和aria-checked这四个容易混淆的属性。文章详细解释了每个属性的用途、适用场景、常见值以及最佳实践，同时指出了开发者在使用这些属性时常见的错误，并强调了正确使用ARIA属性对于确保辅助技术准确传达界面状态的重要性。

    https://www.tpgi.com/what-state-aria-in/
    TPGi — a Vispero company
    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.

    UX文章

  12. 锤子前端

    #文章 Next.js App Router 结合 React Server Components 带来 零 JS 前端渲染、流式 SSR 与自动代码分割 等亮点，却同时陷入 乐观更新缺失、每次导航重复取数、布局受限、双倍内容下载与调试痛苦 的深度缺陷；作者用一年实战证明，这套架构对动态应用既浪费带宽又折磨开发者，最终迁往 TanStack Start 才重获性能与可维护性

    #文章 Next.js App Router 结合 React Server Components 带来 零 JS 前端渲染、流式 SSR 与自动代码分割 等亮点，却同时陷入 乐观更新缺失、每次导航重复取数、布局受限、双倍内容下载与调试痛苦 的深度缺陷；作者用一年实战证明，这套架构对动态应用既浪费带宽又折磨开发者，最终迁往 TanStack Start 才重获性能与可维护性。

    https://paperclover.net/blog/webdev/one-year-next-app-router
    paperclover.net
    One Year with Next.js App Router — Why We're Moving On
    One Year with Next.js App Router — Why We're Moving On
    A critique of React Server Components and Next.js 15.

    文章

  13. 锤子前端

    #文章 React Server Components 本身并不“神奇”，真正的性能提升来自“服务器端数据获取 + Streaming + Suspense”的正确组合

    #文章 React Server Components 本身并不“神奇”，真正的性能提升来自“服务器端数据获取 + Streaming + Suspense”的正确组合。 如果只用 RSC 而不重构数据流，性能甚至可能倒退。

    https://www.developerway.com/posts/react-server-components-performance
    Developer Way
    React Server Components: Do They Really Improve Performance?
    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).

    文章

  15. 锤子前端

    #文章 2025 年的 Node.js 已内置全套现代 Web 标准与开发工具，升 20.x 即可零依赖写 ESM、fetch、测试、watch、权限、单文件部署，彻底告别“装包装到哭”的旧时代

    #文章 2025 年的 Node.js 已内置全套现代 Web 标准与开发工具，升 20.x 即可零依赖写 ESM、fetch、测试、watch、权限、单文件部署，彻底告别“装包装到哭”的旧时代。

    https://kashw1n.com/blog/nodejs-2025/

    文章

  16. 锤子前端

    #AI #文章 原型≠产品：作者指出，氛围编码工具适合创意验证，但无法替代专业开发

    #AI #文章 原型≠产品：作者指出，氛围编码工具适合创意验证，但无法替代专业开发。

    https://thenewstack.io/as-vibe-coding-fades-woz-offers-production-ready-alternative/
    The New Stack
    As Vibe Coding Fades, Woz Offers Production-Ready Alternative
    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%.

    AI文章

  17. 锤子前端

    #React 介绍了在React Router中如何通过actions和loaders将UI表单数据转换为数据库对象，以及将数据库数据转换为UI友好的格式，强调了分离关注点的重要性，以提高应用的可维护性和可测试性

    #React 介绍了在React Router中如何通过actions和loaders将UI表单数据转换为数据库对象，以及将数据库数据转换为UI友好的格式，强调了分离关注点的重要性，以提高应用的可维护性和可测试性。

    扩展重点：
    - 三层数据架构
    - 关注点分离

    https://sergiodxa.com/tutorials/transform-formdata-between-ui-and-database-in-react-router
    Sergio Xalambrí
    How to Transform FormData Between UI and Database in React Router by sergiodxa
    The blog of sergiodxa

    React

  18. 锤子前端

    #AI 作者利用人工智能工具开发macOS无感自动更新功能的全过程，包括规划、原型设计、代码清理、解决难题、后端开发、模拟测试和最终集成，强调了AI作为助手在提高开发效率方面的作用，以及人工介入在解决关键问题上的重要性

    #AI 作者利用人工智能工具开发macOS无感自动更新功能的全过程，包括规划、原型设计、代码清理、解决难题、后端开发、模拟测试和最终集成，强调了AI作为助手在提高开发效率方面的作用，以及人工介入在解决关键问题上的重要性。

    https://mitchellh.com/writing/non-trivial-vibing

    AI

  19. 锤子前端

    #AI 继提示词工程之后，vibe coding 带来的上下文腐烂问题，我们应该如何解决：

    #AI 继提示词工程之后，vibe coding 带来的上下文腐烂问题，我们应该如何解决：

    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
    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…

    AI

  20. 锤子前端

    #React #文章 文章介绍了如何使用React的`useDeferredValue()`和`useSuspenseQuery()`构建响应式的异步组合框组件，通过将数据获取逻辑提取到单独组件中并利用Suspense和错误边界，简化了加载和错误状态管理，同时通过`useDeferredValue()`优化渲染，实现平滑的用户体验和过时数据更新体验

    #React #文章 文章介绍了如何使用React的`useDeferredValue()`和`useSuspenseQuery()`构建响应式的异步组合框组件，通过将数据获取逻辑提取到单独组件中并利用Suspense和错误边界，简化了加载和错误状态管理，同时通过`useDeferredValue()`优化渲染，实现平滑的用户体验和过时数据更新体验。

    https://certificates.dev/blog/building-an-async-combobox-with-usesuspensequery-and-usedeferredvalue
    certificates.dev
    Building an Async Combobox with useSuspenseQuery() and useDeferredValue()
    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…

    React文章