锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  1. 锤子前端

    #React #文章 文章的核心观点是：React 之所以在今天占据主导地位，并非因为其技术优势，而是因为它被视为“默认选择”

    #React #文章 文章的核心观点是：React 之所以在今天占据主导地位，并非因为其技术优势，而是因为它被视为“默认选择”。这种“默认选择”的文化正在阻碍前端生态系统的创新。

    https://www.lorenstew.art/blog/react-won-by-default/
    Loren Stewart
    React Won by Default – And It's Killing Frontend Innovation | Loren Stewart
    Exploring how React's dominance by default stifles frontend innovation, and why deliberate framework choices lead to better tools for performance, developer experience, and ecosystem diversity.

    React文章

  4. 锤子前端

    #React #文章 Reshaped 把 Figma 与 React 的组件、Token、状态一次性对齐，内置主题引擎（含深色模式）、无障碍与响应式规范，并提供原子级扩展接口，让团队在“零翻译”设计稿的同时，一句话切换全局主题、保持交互一致，还保留 20 % 的灵活拼装空间，直接省掉 80 % 的 UI 基建成本

    #React #文章 Reshaped 把 Figma 与 React 的组件、Token、状态一次性对齐，内置主题引擎（含深色模式）、无障碍与响应式规范，并提供原子级扩展接口，让团队在“零翻译”设计稿的同时，一句话切换全局主题、保持交互一致，还保留 20 % 的灵活拼装空间，直接省掉 80 % 的 UI 基建成本。
    两年前，Reshaped 迈出了第一步，将 React 包免费开放。这一举措不仅使得独立开发者可以免费使用，也让已经购买源代码许可证的团队可以直接从 npm 安装。如今，Reshaped 宣布全面开源，React 库的源代码已经托管在 GitHub 上，Figma 库也在 Figma 社区中提供。这一转变让创始人感到兴奋，因为他希望这能促进设计与工程社区之间的交流，共同学习如何构建可扩展且保持简洁的设计系统。

    https://reshaped.so/blog/reshaped-oss
    Reshaped
    Reshaped is now open-source - Reshaped
    Reshaped is now open-source - Reshaped
    After five years of closed-source, Reshaped is finally open for all – both in React and Figma.

    React文章

  5. 锤子前端

    #React AI Elements 是一个基于 shadcn/ui 构建的组件库和自定义注册中心，旨在帮助您更快地构建 AI 原生应用程序

    #React AI Elements 是一个基于 shadcn/ui 构建的组件库和自定义注册中心，旨在帮助您更快地构建 AI 原生应用程序。

    https://github.com/vercel/ai-elements
    GitHub
    GitHub - vercel/ai-elements: AI Elements is a component library and custom registry built on top of shadcn/ui to help you build…
    GitHub - vercel/ai-elements: AI Elements is a component library and custom registry built on top of shadcn/ui to help you build…
    AI Elements is a component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. - vercel/ai-elements

    React

  7. 锤子前端

    #文章 MDX 中的可选部分：在 MDX 中，您可以在 React 组件子元素中使用 Markdown 语法，而不是在 props 中，但有一些技巧可以绕过这个限制

    #文章 MDX 中的可选部分：在 MDX 中，您可以在 React 组件子元素中使用 Markdown 语法，而不是在 props 中，但有一些技巧可以绕过这个限制

    https://remcohaszing.nl/blog/optional-sections-in-mdx
    remcohaszing.nl
    Optional sections in MDX

    文章

  8. 锤子前端

    #React React Fast Refresh 通过“编译期注入签名 + 运行时家族表 + 内核 reconciler 协同”实现组件级、状态保持的热重载，是 Web 与 RN 通用的官方下一代热更新方案

    #React React Fast Refresh 通过“编译期注入签名 + 运行时家族表 + 内核 reconciler 协同”实现组件级、状态保持的热重载，是 Web 与 RN 通用的官方下一代热更新方案。

    https://leapcell.io/blog/react-fast-refresh
    Leapcell
    React Fast Refresh: Next-Gen Hot Reloading Explained | Leapcell
    React Fast Refresh: Next-Gen Hot Reloading Explained | Leapcell
    A technical breakdown of Fast Refresh, React’s modern approach to hot reloading and component updates.

    React

  13. 锤子前端

    #文章 如何用 4 美元的 VPS 处理 5 亿次点击

    #文章 如何用 4 美元的 VPS 处理 5 亿次点击

    https://www.youtube.com/watch?v=nk3Ti0tCGvA
    YouTube
    Handling 500M clicks with a $4 VPS
    I accidentally made a silly little website that went viral, and grossly underestimated the amount of people who would use it.

    At first my cheap VPS couldn't handle the thousand-odd requests per second, but after some mild code refactoring it's been chugging…

    文章

  14. 锤子前端

    #CSS #文章 Josh W. Comeau 在《Color Shifting in CSS》中揭示了 CSS 颜色过渡变灰的本质：浏览器用 RGB 插值，即使写的是 HSL；他用 filter: hue-rotate() 绕过限制，实现鲜艳无缝的色调旋转，并叠加闪烁动画，让粒子效果生动又轻盈

    #CSS #文章 Josh W. Comeau 在《Color Shifting in CSS》中揭示了 CSS 颜色过渡变灰的本质：浏览器用 RGB 插值，即使写的是 HSL；他用 filter: hue-rotate() 绕过限制，实现鲜艳无缝的色调旋转，并叠加闪烁动画，让粒子效果生动又轻盈。

    https://www.joshwcomeau.com/animation/color-shifting/
    Joshwcomeau
    Color Shifting in CSS • Josh W. Comeau
    Color Shifting in CSS • Josh W. Comeau
    A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into…

    CSS文章

  16. 锤子前端

    #文章 浏览器限制setTimeout是为了防止滥用，避免网站过度消耗用户电量或阻塞交互，例如将延迟时间限制为至少4毫秒

    #文章 浏览器限制setTimeout是为了防止滥用，避免网站过度消耗用户电量或阻塞交互，例如将延迟时间限制为至少4毫秒。尽管如此，浏览器仍引入了新的定时器技术，如setImmediate、Promises和scheduler.postTask。

    https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javascript-timers/
    Read the Tea Leaves
    Why do browsers throttle JavaScript timers?
    Even if you’ve been doing JavaScript for a while, you might be surprised to learn that setTimeout(0) is not really setTimeout(0). Instead, it could run 4 milliseconds later: Nearly a decade a…

    文章

  17. 锤子前端

    #文章 ViteLand 最新动态 - 2025 年 8 月回顾：除了其他事项外，RSC 支持已正式落地（Waku 现在使用它），Vite React 插件 v5 发布，集成了 Rolldown 和 Oxc，包括 Styled-Components 转换支持

    #文章 ViteLand 最新动态 - 2025 年 8 月回顾：除了其他事项外，RSC 支持已正式落地（Waku 现在使用它），Vite React 插件 v5 发布，集成了 Rolldown 和 Oxc，包括 Styled-Components 转换支持。

    https://voidzero.dev/posts/whats-new-aug-2025
    void(0)
    What’s New in ViteLand: August 2025 Recap
    What’s New in ViteLand: August 2025 Recap
    August 2025 brings new updates in the Vite ecosystem, including type-aware linting in Oxlint, native plugins for rolldown-vite, better tree-shaking and more.

    文章

  18. 锤子前端

    #React 无需框架的 React 服务器组件支持：这引入了 Forket，一个让你以框架/打包器无关的方式使用 RSCs 的工具

    #React 无需框架的 React 服务器组件支持：这引入了 Forket，一个让你以框架/打包器无关的方式使用 RSCs 的工具。在构建时，它会将你的应用程序拆分为客户端/服务器部分，然后在运行时将所有内容缝合在一起。

    https://krasimirtsonev.com/blog/article/vanilla-react-server-components-with-no-framework
    krasimirtsonev.com
    React Server Components support without a framework
    React Server Components support without a framework / I was at ReactSummit this June and spoke with some folks from Vercel about Next.js and RSC support outside of the framework. I really wanted to try all the cool stuff but couldn’t afford to migrate my…

    React

  20. 锤子前端

    #文章 z.codec() 提供了一种类型安全、可组合且易维护的方式来处理双向数据转换，特别适用于在序列化格式（如 JSON）和富 JavaScript 类型（如 Date、BigInt）之间进行映射

    #文章 z.codec() 提供了一种类型安全、可组合且易维护的方式来处理双向数据转换，特别适用于在序列化格式（如 JSON）和富 JavaScript 类型（如 Date、BigInt）之间进行映射。

    https://colinhacks.com/essays/introducing-zod-codecs
    Colin McDonnell @colinhacks
    Introducing Zod Codecs
    Introducing Zod Codecs

    文章