呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #前端 #react
为什么我更推荐命令式 Modal
AI摘要：Modal 模态对话框在中台业务中非常常见。声明式 Modal 是一种常见的定义方式，可以通过组件库内置的组件来实现。在声明式 Modal 中，需要手动控制 Modal 的打开状态，并将状态和 UI 绑定在一起。随着业务的增加，页面上可能会出现多个 Modal 和 Button，导致代码变得冗长且难以维护。为了解决这个问题，可以将 Modal 抽离到外部组件中，但这样会导致父组件的状态堆积。另一种解决方案是将 Modal 和 Button 直接耦合在一起，但这样无法单独复用 Modal。为了解耦 Modal，需要编写大量代码并且状态变得混乱。后续可能还会遇到无法在父组件中直接控制 Modal 的问题，可以通过将状态下沉到外部 Store 或者 Context 中来解决。
via 静かな森 - innei.in
为什么我更推荐命令式 Modal
AI摘要：Modal 模态对话框在中台业务中非常常见。声明式 Modal 是一种常见的定义方式，可以通过组件库内置的组件来实现。在声明式 Modal 中，需要手动控制 Modal 的打开状态，并将状态和 UI 绑定在一起。随着业务的增加，页面上可能会出现多个 Modal 和 Button，导致代码变得冗长且难以维护。为了解决这个问题，可以将 Modal 抽离到外部组件中，但这样会导致父组件的状态堆积。另一种解决方案是将 Modal 和 Button 直接耦合在一起，但这样无法单独复用 Modal。为了解耦 Modal，需要编写大量代码并且状态变得混乱。后续可能还会遇到无法在父组件中直接控制 Modal 的问题，可以通过将状态下沉到外部 Store 或者 Context 中来解决。
via 静かな森 - innei.in
innei.in
为什么我更推荐命令式 Modal
Modal 模态对话框。 在中台业务中非常常见。 什么是声明式 Modal 组件库中一般都会内置这类组件，最为参见的声明式 Modal 定义。 例如 Antd 5 中的声明式 Modal 是这样定义的。 const App: React.FC = () => { const [isMo
https://twitter.com/nicks_twt/status/1723994531341779053
daily inspiration — app search 🔎✨
via Twitter @nicks_twt
#阮一峰的科技周刊 #前端 #优质博文
科技爱好者周刊（第 277 期）：工作台副屏的最佳选择
#资源推荐 #tools
1. KDesign 🧰 金蝶的企业级产品设计系统，包括设计规范、设计资源、前端组件库。 #组件库
2. ChatGPT Next Web 🧰 一个开源的 ChatGPT 中文网页版，做得非常精致，可以自己部署。这里是 Demo。【这个老早就在用了】#AI #chatgpt
3. Caravaggio 🧰 一个图像处理服务器，可以根据 URL 参数将原图转换成不同大小、格式等，适合用作图像 CDN 的源服务器。
4. TIL（今天我学到的） 📓 一个开源笔记库。大家可以学习他做笔记的方式，内容按主题分类，放在 GitHub 上面。
科技爱好者周刊（第 277 期）：工作台副屏的最佳选择
#资源推荐 #tools
1. KDesign 🧰 金蝶的企业级产品设计系统，包括设计规范、设计资源、前端组件库。 #组件库
2. ChatGPT Next Web 🧰 一个开源的 ChatGPT 中文网页版，做得非常精致，可以自己部署。这里是 Demo。【这个老早就在用了】#AI #chatgpt
3. Caravaggio 🧰 一个图像处理服务器，可以根据 URL 参数将原图转换成不同大小、格式等，适合用作图像 CDN 的源服务器。
4. TIL（今天我学到的） 📓 一个开源笔记库。大家可以学习他做笔记的方式，内容按主题分类，放在 GitHub 上面。
bot 初始化完成
后端 "pub_index"（session: "alice"）总消息数: 404
总计 1 个对话被加入了索引：
- cosine - 前端人の日常频道 (1338193436) 共 404 条消息
后端 "pub_index"（session: "alice"）总消息数: 404
总计 1 个对话被加入了索引：
- cosine - 前端人の日常频道 (1338193436) 共 404 条消息
#优质博文 #前端 #tailwind #css
原文：Speeding up the JavaScript ecosystem - Tailwind CSS
作者：Marvin Hagemeister
译者：Deepl
校对：云谦
译：加速 JavaScript 生态系统 - Tailwind CSS
原文：Speeding up the JavaScript ecosystem - Tailwind CSS
作者：Marvin Hagemeister
译者：Deepl
校对：云谦
译：加速 JavaScript 生态系统 - Tailwind CSS
#资源推荐 #前端 #css #tailwind #组件库
CVA（Class Variance Authority） 在shadcn组件库的时候看到的 Css-in-TS 库，是构建类型安全的 UI 组件的绝佳选择。
之前提到的 tailwind-variants 是 Joe Bell开发的cva工具的扩展，专注于为Tailwind CSS的单个元素生成变体。（先有cva）
AI摘要：CVA（Class Variance Authority）是一个CSS-in-TS库，旨在简化传统CSS方法中的变体创建过程。它允许用户专注于UI开发的更有趣部分，而不必担心类名和样式表的组合。CVA提供了一种类型安全的UI组件构建方式，适用于那些需要完全控制样式表输出、使用Tailwind CSS框架或偏好编写自己CSS的用户。
CVA（Class Variance Authority） 在shadcn组件库的时候看到的 Css-in-TS 库，是构建类型安全的 UI 组件的绝佳选择。
之前提到的 tailwind-variants 是 Joe Bell开发的cva工具的扩展，专注于为Tailwind CSS的单个元素生成变体。（先有cva）
AI摘要：CVA（Class Variance Authority）是一个CSS-in-TS库，旨在简化传统CSS方法中的变体创建过程。它允许用户专注于UI开发的更有趣部分，而不必担心类名和样式表的组合。CVA提供了一种类型安全的UI组件构建方式，适用于那些需要完全控制样式表输出、使用Tailwind CSS框架或偏好编写自己CSS的用户。
cva.style
Class Variance Authority
#优质博文 #前端 #css #新标准
快速了解 CSS 相对颜色
AI摘要：这篇技术博文介绍了CSS相对颜色的新特性，着重探讨了其核心技术和方法。该特性允许将颜色以某种格式分解并重新组合，实现颜色的动态调整。文章创新点在于介绍了如何使用CSS相对颜色来实现颜色的加深、减淡、饱和度变化、色相变化以及反色等需求，以及如何使用CSS变量和calc函数进行灵活计算。这一特性为前端开发者提供了更灵活的颜色处理方法，减少了对JavaScript的依赖，具有实际应用价值。CSS相对颜色将在全局主题应用中发挥重要作用，为前端开发带来更多可能性。文章内容详实，对颜色处理的方法有很好的解释和示例演示。
快速了解 CSS 相对颜色
AI摘要：这篇技术博文介绍了CSS相对颜色的新特性，着重探讨了其核心技术和方法。该特性允许将颜色以某种格式分解并重新组合，实现颜色的动态调整。文章创新点在于介绍了如何使用CSS相对颜色来实现颜色的加深、减淡、饱和度变化、色相变化以及反色等需求，以及如何使用CSS变量和calc函数进行灵活计算。这一特性为前端开发者提供了更灵活的颜色处理方法，减少了对JavaScript的依赖，具有实际应用价值。CSS相对颜色将在全局主题应用中发挥重要作用，为前端开发带来更多可能性。文章内容详实，对颜色处理的方法有很好的解释和示例演示。
