呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端 #typescript
在 TypeScript 中使用元组进行计算
AI 摘要：这篇文章介绍了 TypeScript 元组（Tuple）的概念及其应用。主要内容包括：
1. 元组基础：元组是一种固定长度、元素类型已知的数组。例如，
2. 可选元素：可以使用 ? 标记某些元素为可选，例如
3. 变长元组：通过 ... 语法支持变长参数，例如 [string, ...number[]] 允许第一个元素是
4. 元组的实际应用：包括函数返回多个值、定义结构化数据等。
5. 类型推导与模式匹配：TypeScript 能根据元组推断类型，结合解构赋值使用更灵活。
总体而言，文章深入探讨了 TypeScript 元组的语法与应用，适合希望优化数据结构和类型安全性的开发者。
via 2ality
在 TypeScript 中使用元组进行计算
AI 摘要：这篇文章介绍了 TypeScript 元组（Tuple）的概念及其应用。主要内容包括：
1. 元组基础：元组是一种固定长度、元素类型已知的数组。例如，
[number, string] 代表一个两元素元组，要求第一个元素是 number，第二个是 string。2. 可选元素：可以使用 ? 标记某些元素为可选，例如
[number, string?]，表示第二个元素可以省略。3. 变长元组：通过 ... 语法支持变长参数，例如 [string, ...number[]] 允许第一个元素是
string，后续元素是 number。4. 元组的实际应用：包括函数返回多个值、定义结构化数据等。
5. 类型推导与模式匹配：TypeScript 能根据元组推断类型，结合解构赋值使用更灵活。
总体而言，文章深入探讨了 TypeScript 元组的语法与应用，适合希望优化数据结构和类型安全性的开发者。
via 2ality
#前端 #工程化 #优质博文
https://fixupx.com/himself_65/status/1885219450900939133
如何评价 node_modules 的设计？
写的真的挺好的
https://fixupx.com/himself_65/status/1885219450900939133
如何评价 node_modules 的设计？
并且很多时候，你压根找不到“刚好能完成所需功能”的某个 Package，而为了这点功能重复造轮子又没有意义，这时你就只能为了所需的那一点功能去引入一个巨大的依赖，从而造成最终 node_modules 膨胀的问题了。况且很多开发者也不一定有这个减小依赖的意识——lodash-es 出了这么多年，不还是有很多项目在用 lodash？即使其中一些项目本身已经利用了 ES6 之后的语言特性。
我觉得某种意义上，这大概是一种“幸福的烦恼”——npm 良好的生态使开发者们互相引用依赖几乎没有负担，但也造成了潜在的 node_modules 膨胀问题。看看 C++ 那边的情况，一个库为了做得容易引入几乎不能引入任何外部依赖（如果有，也一般是直接放在代码里），需要自己造大量的轮子，真有人觉得这就是好事吗？我反正不觉得……
写的真的挺好的
#前端 #组件库 #tools #react #tailwind #headless
star ⭐ react-international-phone
☎︎ react-international-phone：电话号码输入组件 —— 您不仅可以选择一个国家，而且还可以在可能的情况下从数字中猜测该国。 react-phone-number-input 是该领域的另一个选择。
via React Status #415
star ⭐ react-international-phone
☎︎ react-international-phone：电话号码输入组件 —— 您不仅可以选择一个国家，而且还可以在可能的情况下从数字中猜测该国。 react-phone-number-input 是该领域的另一个选择。
via React Status #415
GitHub
GitHub - ybrusentsov/react-international-phone: ☎️ International phone input component for React
☎️ International phone input component for React. Contribute to ybrusentsov/react-international-phone development by creating an account on GitHub.
Ciallo～(∠・ω< )⌒★ 下面是余弦 の 除夕小贴士：
🥰 祝大家新的一年：
• 年终奖比
• 快乐不加
• 生活永远不报
渲染完毕 ★ 除夕快乐！（Version: SpringFestival_v2.0.25）
渲染完毕 ★ 除夕快乐！（Version: SpringFestival_v2.0.25）
• 年终奖比
node_modules 还膨胀！• 快乐不加
!important 也能最高优先级 • 生活永远不报
Uncaught TypeErrorconsole.table({
好运: "∞%",
可爱: "↑↑↑",
摸鱼力: "React Forget自动优化",
暴富: localStorage.getItem('压岁钱') ?? '🈵🈵🈵'
}) 渲染完毕 ★ 除夕快乐！（Version: SpringFestival_v2.0.25）
渲染完毕 ★ 除夕快乐！（Version: SpringFestival_v2.0.25）
#优质博文 #前端 #css #容器查询
Container Queries Unleashed
AI 摘要：文章探讨了CSS容器查询在响应式设计中的应用，允许开发者根据容器大小而非视口大小调整布局，提供了比传统媒体查询更灵活的设计方式。作者通过实例展示了如何利用容器查询实现动态布局切换，避免使用脆弱的“魔法数字”断点，并介绍了其渐进增强特性，确保旧浏览器兼容性。容器查询为UI设计带来了更多可能性，鼓励开发者积极探索这一技术以提升用户体验和开发效率。
via Josh W Comeau
Container Queries Unleashed
AI 摘要：文章探讨了CSS容器查询在响应式设计中的应用，允许开发者根据容器大小而非视口大小调整布局，提供了比传统媒体查询更灵活的设计方式。作者通过实例展示了如何利用容器查询实现动态布局切换，避免使用脆弱的“魔法数字”断点，并介绍了其渐进增强特性，确保旧浏览器兼容性。容器查询为UI设计带来了更多可能性，鼓励开发者积极探索这一技术以提升用户体验和开发效率。
via Josh W Comeau
Joshwcomeau
Container Queries Unleashed • Josh W. Comeau
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this potential! In this post, I’ll share the “killer pattern”…
更新：这个系列是之前就有的，简单来说就是大模型视觉生成/读取端到端，现在这个比之前的效果好了很多（见评论区图），不过还是比不上专注图片生成领域的 Top（SD等），大概只是为了以后多模态的更大的模型探路
分辨率只有 384x384（输入输出都是），技术文档还没出，我瞎猜一下，可能是把 RectifiedFlow，SigLIP，SDXL-VAE 的架构整合进了 transformer decoder/encoder，然后一起训练来对齐语义向量
这个活没那么大，并没有 V3 和 R1 那么震撼，ds 一般小活，不过可以期待一下日后的表现
分辨率只有 384x384（输入输出都是），技术文档还没出，我瞎猜一下，可能是把 RectifiedFlow，SigLIP，SDXL-VAE 的架构整合进了 transformer decoder/encoder，然后一起训练来对齐语义向量
这个活没那么大，并没有 V3 和 R1 那么震撼，ds 一般小活，不过可以期待一下日后的表现
#优质博文 #跨端 #tailwind #rn #css #color #follow
React Native 实践：Colors
AI 摘要：这篇文章讲述了 Follow Mobile 的颜色体系。Follow Mobile 使用 React Native 和 Expo 开发，并通过 NativeWind 工具来实现类似 TailwindCSS 的样式系统。文中详细介绍了准备工作，包括安装 NativeWindCSS、配置 Babel 和 Metro、创建 PostCSS 样式入口等。接着介绍了选择颜色体系，搬用了苹果的颜色规范，并提供了相应的颜色值参考。然后讲解了如何使用 NativeWind 的变量注入功能，将颜色定义从顶层传入且在 TailwindCSS 中配置使用。这些方法被用于组件中设置颜色和颜色过渡动画。最后文章提到，这个方案已被抽取为通用库，供大家使用。
via innei
React Native 实践：Colors
AI 摘要：这篇文章讲述了 Follow Mobile 的颜色体系。Follow Mobile 使用 React Native 和 Expo 开发，并通过 NativeWind 工具来实现类似 TailwindCSS 的样式系统。文中详细介绍了准备工作，包括安装 NativeWindCSS、配置 Babel 和 Metro、创建 PostCSS 样式入口等。接着介绍了选择颜色体系，搬用了苹果的颜色规范，并提供了相应的颜色值参考。然后讲解了如何使用 NativeWind 的变量注入功能，将颜色定义从顶层传入且在 TailwindCSS 中配置使用。这些方法被用于组件中设置颜色和颜色过渡动画。最后文章提到，这个方案已被抽取为通用库，供大家使用。
via innei
静かな森
致虚极，守静笃。
