呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
#资源推荐 #前端 #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相对颜色将在全局主题应用中发挥重要作用，为前端开发带来更多可能性。文章内容详实，对颜色处理的方法有很好的解释和示例演示。
#优质博文 #后端 #typescript #Nest #工程化
结合innei佬的这篇文章食用更佳：超级组合！NestJS + tRPC 与CSR绝佳搭档React Query，开启全新开发时代！
AI摘要：这篇技术博文详细介绍了如何在NestJS项目中集成tRPC，实现端到端的类型安全。文章首先解释了tRPC的概念及其在Next.js中的应用，随后详细阐述了在NestJS中接入tRPC的步骤，包括安装必要库、创建模块、定义路由以及应用中间件。作者还探讨了如何分业务模块定义tRPC Router，利用NestJS的DiscoveryModule自动收集依赖，并提供了类型安全的解决方案。最后，文章还涉及了如何将tRPC接入客户端，使得NestJS与React Query的结合更加紧密，开启了全新的开发模式。整体而言，文章提供了一种新的全栈开发模式，使得开发更加高效、类型更加安全。
结合innei佬的这篇文章食用更佳：超级组合！NestJS + tRPC 与CSR绝佳搭档React Query，开启全新开发时代！
AI摘要：这篇技术博文详细介绍了如何在NestJS项目中集成tRPC，实现端到端的类型安全。文章首先解释了tRPC的概念及其在Next.js中的应用，随后详细阐述了在NestJS中接入tRPC的步骤，包括安装必要库、创建模块、定义路由以及应用中间件。作者还探讨了如何分业务模块定义tRPC Router，利用NestJS的DiscoveryModule自动收集依赖，并提供了类型安全的解决方案。最后，文章还涉及了如何将tRPC接入客户端，使得NestJS与React Query的结合更加紧密，开启了全新的开发模式。整体而言，文章提供了一种新的全栈开发模式，使得开发更加高效、类型更加安全。
innei.in
超级组合！NestJS + tRPC 与CSR绝佳搭档React Query，开启全新开发时代！
最近在重写一个 NestJS 的项目，想着这么集成下 tRPC 供管理面板前端使用。原本在管理面板都是裸写的 API 接口，也没有任何响应类型。如果使用 tRPC 的话，不仅不用手写 API 还能做到 End-to-End Type-safe. tRPC 是什么 RPC 是指远程过程调用 (Re
#优质博文 #typescript #TRPC #全栈 #nextjs
Typescript 全栈最值得学习的技术栈 TRPC
AI摘要：本文介绍了Typescript全栈工程师值得学习的技术栈TRPC。TRPC是基于TypeScript的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。文章详细讲解了TRPC的特点，如自动类型安全、敏捷高效的开发者体验、不依赖特定框架、出色的自动补全功能和轻量级打包大小。同时，文章还探讨了TRPC的应用场景，指出它可以作为REST/GraphQL的替代品，尤其适用于前后端共享代码的TypeScript全栈项目。最后，文章通过实例演示了如何在Next.js项目中使用TRPC进行接口调用，包括定义服务端和客户端、使用useQuery和useMutation实现CRUD操作等。
Typescript 全栈最值得学习的技术栈 TRPC
AI摘要：本文介绍了Typescript全栈工程师值得学习的技术栈TRPC。TRPC是基于TypeScript的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。文章详细讲解了TRPC的特点，如自动类型安全、敏捷高效的开发者体验、不依赖特定框架、出色的自动补全功能和轻量级打包大小。同时，文章还探讨了TRPC的应用场景，指出它可以作为REST/GraphQL的替代品，尤其适用于前后端共享代码的TypeScript全栈项目。最后，文章通过实例演示了如何在Next.js项目中使用TRPC进行接口调用，包括定义服务端和客户端、使用useQuery和useMutation实现CRUD操作等。
#阮一峰的科技周刊 #前端
科技爱好者周刊（第 276 期）：内容行业的衰落
#优质博文
1. 我如何在网上保持匿名（英文） 📓 作者介绍自己在网上防止被追踪而采取的各种措施。
2. Remix、Next.js 和 Gatsby 的比较（英文） 📓 标题里面的三个框架都基于 React，自带后端，本文比较了它们的特点。
3. Instagram 的早期架构（英文） 📓 Instagram 在2010年10月发布，一年之内就拥有了1400万用户。它那时只有3个工程师，他们怎么设计后端架构，支持这么多用户。 #后端
4. 64位整数够放货币吗？（英文） 📓 这篇文章讨论一个有趣的问题：货币该用什么类型的数据来储存。
#资源推荐 #tools
1. 雷池（SafeLine） 🧰 开源国产免费 Web 安全网关，它可以灵活地设定各种规则，过滤网络请求，防止黑客攻击你的网站，相当于一层自定义的软件防火墙。
2. Fantastic-admin 🧰 一款开箱即用的 Vue3 中后台管理系统框架。 #vue
3. ScratchCard 🧰 一个刮刮卡的 React 组件。 #react #canvas
4. tldraw 🧰 一个 Web 白板工具，支持多人实时协作。【感觉还不错】
5. tailspin 🧰 一个命令行工具，实时高亮显示日志文件。
6. YouTube Dubbing 🧰 一个 Chrome 插件，可以将 YouTube 视频的英文语音，转成中文语音。
7. pyvideotrans 🧰 一个 Windows 应用，跟上一个软件作用相似，可以将本地视频文件的语音，翻译成另一种语言，比如英文旁白改成机器语音合成的中文。
科技爱好者周刊（第 276 期）：内容行业的衰落
#优质博文
1. 我如何在网上保持匿名（英文） 📓 作者介绍自己在网上防止被追踪而采取的各种措施。
2. Remix、Next.js 和 Gatsby 的比较（英文） 📓 标题里面的三个框架都基于 React，自带后端，本文比较了它们的特点。
3. Instagram 的早期架构（英文） 📓 Instagram 在2010年10月发布，一年之内就拥有了1400万用户。它那时只有3个工程师，他们怎么设计后端架构，支持这么多用户。 #后端
4. 64位整数够放货币吗？（英文） 📓 这篇文章讨论一个有趣的问题：货币该用什么类型的数据来储存。
#资源推荐 #tools
1. 雷池（SafeLine） 🧰 开源国产免费 Web 安全网关，它可以灵活地设定各种规则，过滤网络请求，防止黑客攻击你的网站，相当于一层自定义的软件防火墙。
2. Fantastic-admin 🧰 一款开箱即用的 Vue3 中后台管理系统框架。 #vue
3. ScratchCard 🧰 一个刮刮卡的 React 组件。 #react #canvas
4. tldraw 🧰 一个 Web 白板工具，支持多人实时协作。【感觉还不错】
5. tailspin 🧰 一个命令行工具，实时高亮显示日志文件。
6. YouTube Dubbing 🧰 一个 Chrome 插件，可以将 YouTube 视频的英文语音，转成中文语音。
7. pyvideotrans 🧰 一个 Windows 应用，跟上一个软件作用相似，可以将本地视频文件的语音，翻译成另一种语言，比如英文旁白改成机器语音合成的中文。
#优质博文 #编码
2023 年每个软件开发者都必须知道的关于 Unicode 的最基本的知识（仍然不准找借口！）
让我们总结一下：
1. Unicode 已经赢了。
2. UTF-8 是传输和储存数据时使用最广泛的编码。
3. UTF-16 仍然有时被用作内存表示。
字符串的两个最重要的视图是字节（分配内存/复制/编码/解码）和扩展字位簇（所有语义操作）。
4. 以码位为单位来迭代字符串是错误的。它们不是书写的基本单位。一个字位可能由多个码位组成。
5. 要检测字位的边界，你需要表格。
6.对于所有 Unicode 相关的东西，甚至是像 strlen、indexOf 和 substring 这样的无聊的东西，都要使用 Unicode 库。
7. Unicode 每年更新一次，规则有时会改变。
8. Unicode 字符串在比较之前需要进行归一化。
9. Unicode 在某些操作和渲染中依赖于区域设置。
10. 即使是纯英文文本，这些都很重要。
总的来说，是的，Unicode 不完美，但
1. 有一个能覆盖所有可能语言的编码、
2. 全世界都同意使用它、
3. 我们可以完全忘记编码和转换之类的东西
2023 年每个软件开发者都必须知道的关于 Unicode 的最基本的知识（仍然不准找借口！）
让我们总结一下：
1. Unicode 已经赢了。
2. UTF-8 是传输和储存数据时使用最广泛的编码。
3. UTF-16 仍然有时被用作内存表示。
字符串的两个最重要的视图是字节（分配内存/复制/编码/解码）和扩展字位簇（所有语义操作）。
4. 以码位为单位来迭代字符串是错误的。它们不是书写的基本单位。一个字位可能由多个码位组成。
5. 要检测字位的边界，你需要表格。
6.对于所有 Unicode 相关的东西，甚至是像 strlen、indexOf 和 substring 这样的无聊的东西，都要使用 Unicode 库。
7. Unicode 每年更新一次，规则有时会改变。
8. Unicode 字符串在比较之前需要进行归一化。
9. Unicode 在某些操作和渲染中依赖于区域设置。
10. 即使是纯英文文本，这些都很重要。
总的来说，是的，Unicode 不完美，但
1. 有一个能覆盖所有可能语言的编码、
2. 全世界都同意使用它、
3. 我们可以完全忘记编码和转换之类的东西
blog.xinshijiededa.men
（译）2023 年每个软件开发者都必须知道的关于 Unicode 的基本知识
仍然不准找借口！
#书摘
《CSS 新世界》符合CSS世界“流”概念的逻辑属性margin-inline-end
在CSS2.1时代，CSS属性的定位都是基于方向的，而不是“流”。这样的设计其实是有问题的，基于方向进行定位虽然符合现实世界认知，但和CSS世界基于“流”的底层设计理念不符，margin-right就是一个基于方向的CSS属性，因为right表示右侧，和现实世界的右侧匹配。
通常情况下，我们这么使用是不会有任何问题的。但是，如果开发者使用direction属性改变了文档的水平流向，希望按钮从右往左排列，就会有预期之外的表现，此时margin-right产生的间隙就不是我们想要的，margin-left 才是我们想要的。
但是，如果我们一开始设置的不是符合现实世界认知的margin-right属性，而是符合CSS世界“流”概念的逻辑属性margin-inline-end，代码如下：
也就是说，当文档流的方向是从左往右的时候，margin-inline- end属性的渲染表现就等同于margin-right属性；当文档流的方向是从右往左的时候，margin-inline-end属性的渲染表现就等同于margin-left属性。
存在非常适合使用这类CSS逻辑属性的场景，那就是对称布局，例如，模拟微信对话的效果就是典型的对称布局。只需要使用CSS逻辑属性实现一侧的布局效果，然后另外一侧的布局效果我们只需要使用一句direction:rtl就完成了。
https://memo.cosine.ren/m/419
《CSS 新世界》符合CSS世界“流”概念的逻辑属性margin-inline-end
在CSS2.1时代，CSS属性的定位都是基于方向的，而不是“流”。这样的设计其实是有问题的，基于方向进行定位虽然符合现实世界认知，但和CSS世界基于“流”的底层设计理念不符，margin-right就是一个基于方向的CSS属性，因为right表示右侧，和现实世界的右侧匹配。
通常情况下，我们这么使用是不会有任何问题的。但是，如果开发者使用direction属性改变了文档的水平流向，希望按钮从右往左排列，就会有预期之外的表现，此时margin-right产生的间隙就不是我们想要的，margin-left 才是我们想要的。
但是，如果我们一开始设置的不是符合现实世界认知的margin-right属性，而是符合CSS世界“流”概念的逻辑属性margin-inline-end，代码如下：
button {
margin-inline-end: 10px;
}
margin-inline-end 是一个“流淌”在文档流中的CSS逻辑属性，表示内联元素文档流结束的方向。也就是说，当文档流的方向是从左往右的时候，margin-inline- end属性的渲染表现就等同于margin-right属性；当文档流的方向是从右往左的时候，margin-inline-end属性的渲染表现就等同于margin-left属性。
存在非常适合使用这类CSS逻辑属性的场景，那就是对称布局，例如，模拟微信对话的效果就是典型的对称布局。只需要使用CSS逻辑属性实现一侧的布局效果，然后另外一侧的布局效果我们只需要使用一句direction:rtl就完成了。
https://memo.cosine.ren/m/419
#书摘
《CSS 新世界》3.1.3 深入了解min-content关键字
1. 元素的 padding-box、border-box和margin-box的尺寸表现规则不会因为元素的不同而有所不同，但是content-box不一样，它随着内容的不同，首选最小宽度也会不同。
- 替换元素（按钮、视频和图片等元素）的首选最小宽度是当前元素内容自身的宽度。
- CJK文字，指的是中文、日文、韩文这几种文字。这里以中文为代表加以说明。如果是一段没有标点的中文文字，则首选最小宽度是单个汉字的宽度。如果包含避头标点或避尾标点，同时line-break的属性值不是anywhere，则最终的首选最小宽度需要包含标点字符的宽度
（连续的中文破折号都会被认为是一个字符单元。）
- 非CJK文字（除中文、日文、韩文之外的文字，如英文、数字和标点等字符）的首选最小宽度是由字符单元的宽度决定的，所有连续的英文字母、数字和标点都被认为是一个字符单元，直到遇到中断字符。
首先无论是哪个浏览器，Space空格（U+0020）都能中断字符单元，并且忽略Space空格前后字符的类型。而其他字符的中断规则在每个浏览器中都是不一样的。
2. 一个元素最终的首选最小宽度是所有内部子元素中最大的那个首选最小宽度值
https://memo.cosine.ren/m/418
《CSS 新世界》3.1.3 深入了解min-content关键字
min-content 关键字实际上就是CSS2.1规范中提到的“preferred minimum width”或者“minimum content width”，即“首选最小宽度”或者“最小内容宽度”。1. 元素的 padding-box、border-box和margin-box的尺寸表现规则不会因为元素的不同而有所不同，但是content-box不一样，它随着内容的不同，首选最小宽度也会不同。
- 替换元素（按钮、视频和图片等元素）的首选最小宽度是当前元素内容自身的宽度。
- CJK文字，指的是中文、日文、韩文这几种文字。这里以中文为代表加以说明。如果是一段没有标点的中文文字，则首选最小宽度是单个汉字的宽度。如果包含避头标点或避尾标点，同时line-break的属性值不是anywhere，则最终的首选最小宽度需要包含标点字符的宽度
（连续的中文破折号都会被认为是一个字符单元。）
- 非CJK文字（除中文、日文、韩文之外的文字，如英文、数字和标点等字符）的首选最小宽度是由字符单元的宽度决定的，所有连续的英文字母、数字和标点都被认为是一个字符单元，直到遇到中断字符。
首先无论是哪个浏览器，Space空格（U+0020）都能中断字符单元，并且忽略Space空格前后字符的类型。而其他字符的中断规则在每个浏览器中都是不一样的。
2. 一个元素最终的首选最小宽度是所有内部子元素中最大的那个首选最小宽度值
https://memo.cosine.ren/m/418
