锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  2. 锤子前端

    #开源 #React 响应式库react-responsive，在react中更加地道的编写响应式组件

    #开源 #React 响应式库react-responsive，在react中更加地道的编写响应式组件。

    https://github.com/yocontra/react-responsive
    GitHub
    GitHub - yocontra/react-responsive: CSS media queries in react - for responsive design, and more.
    GitHub - yocontra/react-responsive: CSS media queries in react - for responsive design, and more.
    CSS media queries in react - for responsive design, and more. - yocontra/react-responsive

    开源React

  3. 锤子前端

    #文章 高绩效工程师团队 = 动力 + 热情 + 自主权

    #文章 高绩效工程师团队 = 动力 + 热情 + 自主权。通过激发工程师的热情、动力和自主性，而非依赖僵化的培训和指令，可以打造高绩效的工程团队，实现技术卓越和创新。

    https://www.trevorlasn.com/blog/generating-enthusiasm-and-motivation
    High Performing Engineer Teams = motivation + enthusiasm + autonomy
    Create the conditions where engineers want to excel and they'll surpass your expectations

    文章

  4. 锤子前端

    #React #开源 现代技术栈 electron-app 模板

    #React #开源 现代技术栈 electron-app 模板

    https://github.com/daltonmenezes/electron-app
    GitHub
    GitHub - daltonmenezes/electron-app: 💅 An Electron app boilerplate with React 19, TypeScript 5, Tailwind 4, shadcn/ui, Electron…
    GitHub - daltonmenezes/electron-app: 💅 An Electron app boilerplate with React 19, TypeScript 5, Tailwind 4, shadcn/ui, Electron…
    💅 An Electron app boilerplate with React 19, TypeScript 5, Tailwind 4, shadcn/ui, Electron Vite, Biome, GitHub Action releases and more. - daltonmenezes/electron-app

    React开源

  5. 锤子前端

    #开源 react-hook-form处理多层级嵌套表单的解决方案

    #开源 react-hook-form处理多层级嵌套表单的解决方案。

    https://github.com/react-hook-form/lenses
    GitHub
    GitHub - react-hook-form/lenses: 📋 The library's composable lens operations make it simple to work with deeply nested structures…
    GitHub - react-hook-form/lenses: 📋 The library's composable lens operations make it simple to work with deeply nested structures…
    📋 The library's composable lens operations make it simple to work with deeply nested structures while maintaining type safety, leading to more maintainable and reusable form components. - r...

    开源

  7. 锤子前端

    #React #文章 将 React 组件树视为状态机模型可以帮助阐明异步更新和 React 并发特性的影响

    #React #文章 将 React 组件树视为状态机模型可以帮助阐明异步更新和 React 并发特性的影响。

    https://jordaneldredge.com/blog/transitions-f-of-state/
    Jordaneldredge
    {transitions} = f(state) / Jordan Eldredge
    {transitions} = f(state) / Jordan Eldredge
    Thinking about the React component tree as modeling a state machine can help clarify the implications of asynchronous updates and React’s concurrent features.

    React文章

  9. 锤子前端

    #文章 #TS 关于如何使用 Node.js 和 TypeScript 构建简单交互式命令行界面（CLI）应用程序的教程

    #文章 #TS 关于如何使用 Node.js 和 TypeScript 构建简单交互式命令行界面（CLI）应用程序的教程。

    https://www.robinwieruch.de/node-js-cli/
    www.robinwieruch.de
    Simple Interactive CLI App with Node.js
    Simple Interactive CLI App with Node.js
    Learn how to build a simple interactive CLI app with Node.js and TypeScript. Create a chat interface that reads user input and responds interactively ...

    文章TS

  11. 锤子前端

    #文章 shadcn 注册表：更好的组件分发方式

    #文章 shadcn 注册表：更好的组件分发方式

    https://ouassim.tech/notes/shadcn-registry-a-better-way-to-manage-your-ui-components/
    ouassim.tech
    Shadcn Registry: A Better Way to Manage Your UI Components - Ouassim G.
    Shadcn Registry: A Better Way to Manage Your UI Components - Ouassim G.
    The shadcn registry lets you manage and share UI components across projects with full control over customization. This post covers lesser-known CLI options and insights from my experience setting it up.

    文章

  12. 锤子前端

    #React #文章 讨论了如何在 React Router v7 中优化用户输入触发的请求，避免因快速连续输入导致的多次请求问题

    #React #文章 讨论了如何在 React Router v7 中优化用户输入触发的请求，避免因快速连续输入导致的多次请求问题。

    https://programmingarehard.com/2025/02/24/debouncing-in-react-router-v7.html/
    Programmingarehard
    Debouncing in React Router v7 — ProgrammingAreHard —

    React文章

  13. 锤子前端

    React、useLayoutEffect、服务器端渲染（SSR）、同构（Isomorphic）、use-isomorphic-layout-effect、UI 不一致、客户端/服务器端、警告（Warning）、React ProseMirror、useEffect、代码实现（Implementation）、React 生态系统（React Ecosystem）、React Redux、解决方案（Solution）、开发者实践（Developer Practice）、警告的误解（Misunderstanding of Warning）

    React、useLayoutEffect、服务器端渲染（SSR）、同构（Isomorphic）、use-isomorphic-layout-effect、UI 不一致、客户端/服务器端、警告（Warning）、React ProseMirror、useEffect、代码实现（Implementation）、React 生态系统（React Ecosystem）、React Redux、解决方案（Solution）、开发者实践（Developer Practice）、警告的误解（Misunderstanding of Warning）。

    https://smoores.dev/post/no_such_thing_isomorphic_layout_effect/
    smoores.dev
    There’s no such thing as an isomorphic layout effect
    There’s something off about the most popular approach to quieting React’s warnings about using layout effects during server-side rendering. Let’s break down why the warning exists, and when it really makes sense to disable it without actually addressing it.

  16. 锤子前端

    #AI #开发工具 自然语言交互、数据提取、断言验证、Chrome 插件、YAML 脚本、Puppeteer 集成、Playwright 集成、自定义模型、开源模型、通用模型、可视化报告、调试 Playground、数据安全、开源免费、JavaScript 集成

    #AI #开发工具 自然语言交互、数据提取、断言验证、Chrome 插件、YAML 脚本、Puppeteer 集成、Playwright 集成、自定义模型、开源模型、通用模型、可视化报告、调试 Playground、数据安全、开源免费、JavaScript 集成

    https://midscenejs.com/zh/index.html
    Midscenejs
    Midscene - Vision-Driven UI Automation
    AI-powered, vision-driven UI automation for every platform.

    AI开发工具

  17. 锤子前端

    https://mp.weixin.qq.com/s/m4-RgmN96KgeuzqD65dFqA

    ### CSS 新特性
    - Anchor Positioning（锚点定位）
    - CSS 动态定位
    - CSS 候补位置

    ### 核心属性
    - anchor-name
    - position-anchor
    - anchor()
    - anchor-size()
    - position-try-fallbacks
    - @position-try

    ### 功能实现
    - Popover 功能
    - 智能边界处理
    - 动态位置调整
    - 锚点定位

    ### 工具与库
    - Chrome 125
    - Popper.js
    - Tippy.js
    - floating-ui

    ### 其他
    - 视口边界检测
    - 滚动事件处理
    - 动态布局优化
    - CSS 回退策略
    Weixin Official Accounts Platform
    浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
    锚点连接+位置策略=自适应布局！再复杂的关联定位也能轻松表达。让定位逻辑回归样式层！