锤子前端

Now vibe coding, so learning hammer FE ?

锤子前端

  1. 锤子前端

    #CSS 一篇关于 CSS 容器查询的友好指南：

    #CSS 一篇关于 CSS 容器查询的友好指南：
    - 容器查询的工作原理
    - 如何定义容器？
    - 如何使用container-type属性？
    - 实际应用？

    https://www.joshwcomeau.com/css/container-queries-introduction/
    Joshwcomeau
    A Friendly Introduction to Container Queries • Josh W. Comeau
    A Friendly Introduction to Container Queries • Josh W. Comeau
    It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not as straightforward as media queries. In this tutorial, we’ll break it all down…

    CSS

  2. 锤子前端

    #文章 #React 原生表单中的 FormData 相关的方法，要点：

    #文章 #React 原生表单中的 FormData 相关的方法，要点：
    - 如何将FormData转换为JavaScript对象：`Object.fromEntries`
    - 如何处理具有相同键的多个值：`formData.getAll`

    https://www.robinwieruch.de/react-form-data/
    www.robinwieruch.de
    React and FormData
    React and FormData
    Learn how to handle FormData in React when submitting it with a (Server) Action to the server ...

    文章React

  3. 锤子前端

    #服务端 #网页工具 在购买域名之前，可以通过 web.archive 查询该域名否是有“前科”

    #服务端 #网页工具 在购买域名之前，可以通过 web.archive 查询该域名否是有“前科”。

    文章：https://www.bryanbraun.com/2024/10/25/before-you-buy-a-domain-name-first-check-to-see-if-its-haunted/

    网址：https://web.archive.org/
    Bryan Braun - Frontend Developer
    Before you buy a domain name, first check to see if it's haunted
    In mid-2022 I bought a new domain name.

    服务端网页工具

  8. 锤子前端

    #AI #文章 如何将大型语言模型（LLMs）集成到前端应用中，创建产品描述生成器

    #AI #文章 如何将大型语言模型（LLMs）集成到前端应用中，创建产品描述生成器。介绍了Vercel的AI SDK和V0工具，它们简化了LLMs与UI的集成，提供了AI驱动的内容生成、多语言支持、所见即所得（WYSIWYG）编辑器集成等功能。文章还讨论了如何使用OpenAI的GPT-4模型进行内容生成，以及如何通过MDX标记将内容流式传输到UI中。

    https://www.manuelsanchezdev.com/blog/integrating-llm-frontend
    Manuelsanchezdev
    Integrating Large Language Models into Frontends
    Integrating Large Language Models into Frontends
    Leveraging AI for Dynamic Content Generation in Web Applications

    AI文章

  9. 锤子前端

    #React #MF #文章 作者在微前端架构中逐步将 React 升级到更高版本，而不影响现有应用

    #React #MF #文章 作者在微前端架构中逐步将 React 升级到更高版本，而不影响现有应用。通过添加“桥接”组件，开发者可以让每个微前端在独立的 React 实例中运行，从而使某些微前端组件可以升级到 React 18 而不需同步更新整个应用。这种方法使跨团队的逐步升级更为灵活。

    https://alexocallaghan.com/upgrading-react-with-microfrontends
    Alexocallaghan
    Upgrading React with micro-frontends
    How to upgrade React incrementally across multiple micro-frontends

    ReactMF文章

  10. 锤子前端

    #React #Next #文章 比较了 React 19 带来的服务器优先架构（Next.js 的 App Router）和客户端优先的 TanStack Start

    #React #Next #文章 比较了 React 19 带来的服务器优先架构（Next.js 的 App Router）和客户端优先的 TanStack Start。React 19 的架构强化了服务器渲染，通过“use client”标记在客户端加载特定组件，以减轻客户端的负担。而 TanStack Start 仍注重客户端渲染，逐步引入服务端功能，提供更灵活的全栈架构。
    Next.js 和 TanStack Start 用于集成现代 React 功能的不同愿景的有趣想法。 TanStack Start 更加以客户为中心，且破坏性较小。

    https://bobaekang.com/blog/two-ways-to-the-two-reacts/
    Bobaekang
    Two ways to the two Reacts | bobae kang
    Two ways to the two Reacts | bobae kang
    Next.js App Router and TanStack Start represent two distinct ways to the full-stack React

    ReactNext文章

  11. 锤子前端

    #Next #React #文章 在Next.js App Router中实现高级搜索参数过滤的方法

    #Next #React #文章 在Next.js App Router中实现高级搜索参数过滤的方法。介绍了如何使用React 19特性，如useOptimistic()，以及如何通过React Context和nuqs库来协调搜索和过滤状态，以提供即时用户反馈并避免多个过滤器相互覆盖的问题。

    https://aurorascharff.no/posts/managing-advanced-search-param-filtering-next-app-router/
    aurorascharff.no
    Managing Advanced Search Param Filtering in the Next.js App Router | Aurora Scharff
    Managing Advanced Search Param Filtering in the Next.js App Router | Aurora Scharff
    Learn how to implement advanced search param filtering in the Next.js App Router, utilizing React 19 features like useOptimistic and the library nuqs.

    NextReact文章

  12. 锤子前端

    #UX #文章 7个简单的按钮设计技巧，以提升UI/UX设计项目中按钮的点击率和用户体验

    #UX #文章 7个简单的按钮设计技巧，以提升UI/UX设计项目中按钮的点击率和用户体验。这些技巧包括：
    1. 避免按钮文本换行；
    2. 不使用禁用按钮（分情况）；
    3. 使用动作动词作为按钮标签；
    4. 保持按钮对齐；
    5. 使用标准且一致的按钮布局；
    6. 突出主要操作按钮；
    7. 避免在同一按钮中使用两个图标。

    https://medium.com/design-bootcamp/7-simple-button-design-tips-that-make-a-big-impact-3cefcdc2d9a2
    Medium
    7 Simple Button Design Tips That Make a Big Impact
    7 Simple Button Design Tips That Make a Big Impact
    While you are working on a UI/UX design project, I have developed a set of practical tips for designing a clickable button that helps me…

    UX文章

  14. 锤子前端

    #文章 #服务端 常规 VPS 对比，对比了 Digital Ocean、Linode 和 Vultr 的性能

    #文章 #服务端 常规 VPS 对比，对比了 Digital Ocean、Linode 和 Vultr 的性能

    https://joshtronic.com/2024/11/03/vps-showdown-november-2024-digitalocean-vs-linode-vs-vultr/
    Josh Sherman
    VPS Showdown – November 2024 – DigitalOcean vs. Linode vs. Vultr
    VPS Showdown – November 2024 – DigitalOcean vs. Linode vs. Vultr
    Discover the top VPS hosting providers: DigitalOcean, Linode, and Vultr. Explore their $5-ish plans and choose the right one for your project.

    文章服务端

  16. 锤子前端

    #文章 HeadlessUI 流行趋势和选型理由：

    #文章 HeadlessUI 流行趋势和选型理由：
    1. 定义：无头组件是无样式的UI开发构建块，功能逻辑的复用。
    2. 优势：无头组件库默认不包含样式，开发者可以轻松定制样式，避免了与预设样式的竞争。
    3. 流行原因： 传统的组件库难以定制样式，而无头库如Radix简化了样式定制过程，使得开发者可以更专注于构建功能而非与组件库作斗争。
    4. shadcn：Shadcn提供了基于Radix和Tailwind CSS的可复制组件库，进一步简化了自定义设计系统的搭建过程。
    5. 过去流行的组件库如 Material UI 和 AntD 将样式和功能捆绑在一起，虽然开发速度快，但难以定制样式。目前Material 正在开发自己的 headless 版本。

    https://www.subframe.com/blog/how-headless-components-became-the-future-for-building-ui-libraries
    Subframe
    How headless components became the future for building UI libraries
    How headless components became the future for building UI libraries
    A brief history of one of React's most influential innovations in recent years.

    文章