呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：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
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相对颜色将在全局主题应用中发挥重要作用，为前端开发带来更多可能性。文章内容详实，对颜色处理的方法有很好的解释和示例演示。
#优质博文 #后端 #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 应用，跟上一个软件作用相似，可以将本地视频文件的语音，翻译成另一种语言，比如英文旁白改成机器语音合成的中文。
