呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端 #后端 #auth #身份验证
How to roll your own auth in JavaScript & TypeScript
比较适合想要独立掌控认证流程的开发者的一篇文章
AI 摘要：本文介绍了如何在JavaScript/TypeScript中构建自定义基于会话的身份验证系统。教程从数据库架构设计开始，涵盖会话和密码管理，包括使用加密库生成会话令牌、验证用户会话和设置安全的Cookie。还详细描述了如何在用户登录、注册、退出时管理会话和密码的加密验证。此方法适用于任何后端框架，具有高度灵活性和控制权，有助于深刻理解认证系统并避免依赖外部服务。
via JavaScript Weekly #711 author Robin Wieruch
How to roll your own auth in JavaScript & TypeScript
比较适合想要独立掌控认证流程的开发者的一篇文章
AI 摘要：本文介绍了如何在JavaScript/TypeScript中构建自定义基于会话的身份验证系统。教程从数据库架构设计开始，涵盖会话和密码管理，包括使用加密库生成会话令牌、验证用户会话和设置安全的Cookie。还详细描述了如何在用户登录、注册、退出时管理会话和密码的加密验证。此方法适用于任何后端框架，具有高度灵活性和控制权，有助于深刻理解认证系统并避免依赖外部服务。
via JavaScript Weekly #711 author Robin Wieruch
www.robinwieruch.de
Authentication in JavaScript & TypeScript
Learn how to roll your own authentication in JavaScript & TypeScript ...
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 291 期）：AI 没有护城河
1. AI 没有护城河（全英） 📓 去年上半年，一份谷歌内部报告泄漏，据说是某个研究员写给谷歌高管的，看上去可信度很高。当时，谷歌内部正在讨论，如何应对 OpenAI 公司的 ChatGPT。这个研究员提出自己的看法。 #AI
2. 透明笔记本 📓 联想在世界移动通信大会（MCW）上，展示了一款透明笔记本。
3. structuredClone() 详解（英文） 📓 JS 新增的全局方法structuredClone()可以实现对象的深拷贝。本文详细介绍该方法相比其他方法的优点，以及局限。 #javascript
4. B 树原理解释（英文） 📓 数据库使用 B 树作为数据结构，能够加快查询速度，本文介绍它的原理。 #后端
5. AI 图像音乐生成器 🧰 这个 Web 服务可以将上传的图像，转换为一段音乐，适合为图文视频配背景音乐。 #AI
6. WeWe RSS 🧰 全文订阅微信公众号的一个本地服务，可以生成公众号的 RSS，基于微信读书。 #rss
7. Marker 🧰 一个命令行工具，将 PDF、EPUB、MOBI 文档转成 Markdown 文件，必要时会进行 OCR（文字识别）。
8. TSDiagram 🧰 一个在线工具，让你用 TypeScript 写类型关系，自动生成图表。 #typescript
9. How I get there 🧰 这个页面可以显示，你的 IP 地址到该网站所经过的路由。
10. 3Blue1Brown 🧰 著名数字科普作者 3Blue1Brown 写的微积分系列教程。
11. TS Docs 🧰 这个网站可以查看 npm 模块的 TS 类型声明。
科技爱好者周刊（第 291 期）：AI 没有护城河
1. AI 没有护城河（全英） 📓 去年上半年，一份谷歌内部报告泄漏，据说是某个研究员写给谷歌高管的，看上去可信度很高。当时，谷歌内部正在讨论，如何应对 OpenAI 公司的 ChatGPT。这个研究员提出自己的看法。 #AI
2. 透明笔记本 📓 联想在世界移动通信大会（MCW）上，展示了一款透明笔记本。
3. structuredClone() 详解（英文） 📓 JS 新增的全局方法structuredClone()可以实现对象的深拷贝。本文详细介绍该方法相比其他方法的优点，以及局限。 #javascript
4. B 树原理解释（英文） 📓 数据库使用 B 树作为数据结构，能够加快查询速度，本文介绍它的原理。 #后端
5. AI 图像音乐生成器 🧰 这个 Web 服务可以将上传的图像，转换为一段音乐，适合为图文视频配背景音乐。 #AI
6. WeWe RSS 🧰 全文订阅微信公众号的一个本地服务，可以生成公众号的 RSS，基于微信读书。 #rss
7. Marker 🧰 一个命令行工具，将 PDF、EPUB、MOBI 文档转成 Markdown 文件，必要时会进行 OCR（文字识别）。
8. TSDiagram 🧰 一个在线工具，让你用 TypeScript 写类型关系，自动生成图表。 #typescript
9. How I get there 🧰 这个页面可以显示，你的 IP 地址到该网站所经过的路由。
10. 3Blue1Brown 🧰 著名数字科普作者 3Blue1Brown 写的微积分系列教程。
11. TS Docs 🧰 这个网站可以查看 npm 模块的 TS 类型声明。
SemiAnalysis
Google “We Have No Moat, And Neither Does OpenAI”
Leaked Internal Google Document Claims Open Source AI Will Outcompete Google and OpenAI The text below is a very recent leaked document, which was shared by an anonymous individual on a public Disc…
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 290 期）：苹果头盔的最大问题
1. Web 终极拦截技巧（中文） 📓 本文介绍 Web 平台常见的拦截 HTTP 通信的方法，以及如何注入拦截代码。
2. 剖析 SSL 证书（英文） 📓 本文通俗地介绍，如何查看 HTTPS 证书的内容，以及证书各部分的简单含义。
3. 响应式视频播放器的 Web 组件（英文） 📓 一篇详细的教程，通过一个响应式视频播放器，教你怎么写 Web 组件（Web Components）。
4. 如何构建一个窃取一切的 Chrome 插件（英文） 📓 作者提醒大家注意，浏览器插件可以读取用户的所有信息，发到远程服务器，因此不要随便安装。她还提供了一个演示。如何无需用户察觉即可捕获包括浏览历史、屏幕截图、Cookies、键盘记录和地理位置在内的各种数据，
「Did you really scrutinize their permissions?」
5. Base32 编码解释（英文） 📓 本文详细解释 Base64、Base32、Base8 等等是如何编码实现的。 【挺有意思的】
6. 开发者需要知道 GPU 知识（英文） 📓 AI 大量使用 GPU 运算，本文介绍开发者需要知道的 GPU 知识。前半部分是概念，后半部分是 GPU 编程，可以只看前半部分。
7. TCPView 🧰 微软的官方工具，用来查看 Windows 系统所有 TCP 和 UDP 连接的详细信息。
8. FontMagic 🧰 字体工具软件，可以将字体文件的某个字形导出为 SVG 格式，还可以转化字体格式，支持 macOS 和 Windows。（@leibnizli 投稿）
9. uv 🧰 Rust 语言写的 Python 包管理器，速度非常快，可以替代 pip 和pip-tools。 #python #后端 #rust
10. Keep Screen On 🧰 打开这个网页，就可以让电脑屏幕保持常亮，对 PC、Mac、Android、iOS 均有效。 #趣站
11. background-erase.xyz 🧰 去除图片背景的免费网站，使用最新的删除图片背景的 AI 模型 RMBG-v1.4，所有计算都在本地完成，不用上传图片。（@janily 投稿）
12. browserscan.net 🧰 该网站检测浏览器指纹、IP 地址、WebRTC 泄露，DNS 泄露等信息。（@BrowserScan 投稿） 【有意思】
13. Localtunnel 🧰 一个 npm 软件包，为你的本地服务分配一个公网的 URL，使得公网可以访问这个本地服务。
14. SirTunnel 🧰 一个开源软件，只需要50行代码，就能建立一条隧道，将你的内网电脑可以被公网访问，这里有一篇教程。
「从本质上讲，它编写了 Caddy 的 API 脚本来动态添加和删除隧道。当您通过 SSH 连接到服务器时，您会调用该脚本，并且在 SSH 连接期间，服务器域的子域会通过 SSH 链接转发流量。」
【有无群友测评一下】
科技爱好者周刊（第 290 期）：苹果头盔的最大问题
1. Web 终极拦截技巧（中文） 📓 本文介绍 Web 平台常见的拦截 HTTP 通信的方法，以及如何注入拦截代码。
2. 剖析 SSL 证书（英文） 📓 本文通俗地介绍，如何查看 HTTPS 证书的内容，以及证书各部分的简单含义。
3. 响应式视频播放器的 Web 组件（英文） 📓 一篇详细的教程，通过一个响应式视频播放器，教你怎么写 Web 组件（Web Components）。
4. 如何构建一个窃取一切的 Chrome 插件（英文） 📓 作者提醒大家注意，浏览器插件可以读取用户的所有信息，发到远程服务器，因此不要随便安装。她还提供了一个演示。如何无需用户察觉即可捕获包括浏览历史、屏幕截图、Cookies、键盘记录和地理位置在内的各种数据，
「Did you really scrutinize their permissions?」
5. Base32 编码解释（英文） 📓 本文详细解释 Base64、Base32、Base8 等等是如何编码实现的。 【挺有意思的】
6. 开发者需要知道 GPU 知识（英文） 📓 AI 大量使用 GPU 运算，本文介绍开发者需要知道的 GPU 知识。前半部分是概念，后半部分是 GPU 编程，可以只看前半部分。
7. TCPView 🧰 微软的官方工具，用来查看 Windows 系统所有 TCP 和 UDP 连接的详细信息。
8. FontMagic 🧰 字体工具软件，可以将字体文件的某个字形导出为 SVG 格式，还可以转化字体格式，支持 macOS 和 Windows。（@leibnizli 投稿）
9. uv 🧰 Rust 语言写的 Python 包管理器，速度非常快，可以替代 pip 和pip-tools。 #python #后端 #rust
10. Keep Screen On 🧰 打开这个网页，就可以让电脑屏幕保持常亮，对 PC、Mac、Android、iOS 均有效。 #趣站
11. background-erase.xyz 🧰 去除图片背景的免费网站，使用最新的删除图片背景的 AI 模型 RMBG-v1.4，所有计算都在本地完成，不用上传图片。（@janily 投稿）
12. browserscan.net 🧰 该网站检测浏览器指纹、IP 地址、WebRTC 泄露，DNS 泄露等信息。（@BrowserScan 投稿） 【有意思】
13. Localtunnel 🧰 一个 npm 软件包，为你的本地服务分配一个公网的 URL，使得公网可以访问这个本地服务。
14. SirTunnel 🧰 一个开源软件，只需要50行代码，就能建立一条隧道，将你的内网电脑可以被公网访问，这里有一篇教程。
「从本质上讲，它编写了 Caddy 的 API 脚本来动态添加和删除隧道。当您通过 SSH 连接到服务器时，您会调用该脚本，并且在 SSH 连接期间，服务器域的子域会通过 SSH 链接转发流量。」
【有无群友测评一下】
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 289 期）：宽容从何而来
1. SQLite 可以替代 MySQL 和 PostgreSQL 吗（英文） 📓 SQLite 一般用于单机的嵌入式数据库，但是最近发展得越来越好，作者讨论是否可以把它用作服务器的主数据库。 #后端
里面有一句话还挺有意思「Most developers tend to over-estimate how many resources a project needs to run, and underestimate the performance and benefits of simple "less shiny" solutions like SQLite. 大多数开发人员往往会高估项目运行所需的资源，而低估像 SQLite 这样“不那么优雅”的简单解决方案的性能和优势。」
2. Noi 🧰 跨平台的桌面应用，在一个界面里面集成了多个 AI 网站，支持复用提示，以及同时向多款 AI 提问。 #AI
3. AITDK 🧰 一款浏览器插件，提供当前网站的流量/Whois/SEO 等信息。 【试了试，这个挺赞的】
4. code-inspector 🧰 一个 JS 打包器的插件，点击网页 DOM，就会自动打开 IDE，并定位到相应的源码位置，目前支持 webpack/vite/rspack 打包器。（@zh-lx 投稿）
5. Process Explorer 🧰 微软官方工具，可以查看 Windows 所有进程的详细信息，免费下载。
6. winlator 🧰 一个安卓 App，让安卓手机可以运行 Windows 应用程序。
7. iOS 应用开发教程 📓 斯坦福大学2023年学年的一个英文课程，现在已经全部上网，包含讲课视频和课件。
科技爱好者周刊（第 289 期）：宽容从何而来
1. SQLite 可以替代 MySQL 和 PostgreSQL 吗（英文） 📓 SQLite 一般用于单机的嵌入式数据库，但是最近发展得越来越好，作者讨论是否可以把它用作服务器的主数据库。 #后端
里面有一句话还挺有意思「Most developers tend to over-estimate how many resources a project needs to run, and underestimate the performance and benefits of simple "less shiny" solutions like SQLite. 大多数开发人员往往会高估项目运行所需的资源，而低估像 SQLite 这样“不那么优雅”的简单解决方案的性能和优势。」
2. Noi 🧰 跨平台的桌面应用，在一个界面里面集成了多个 AI 网站，支持复用提示，以及同时向多款 AI 提问。 #AI
3. AITDK 🧰 一款浏览器插件，提供当前网站的流量/Whois/SEO 等信息。 【试了试，这个挺赞的】
4. code-inspector 🧰 一个 JS 打包器的插件，点击网页 DOM，就会自动打开 IDE，并定位到相应的源码位置，目前支持 webpack/vite/rspack 打包器。（@zh-lx 投稿）
5. Process Explorer 🧰 微软官方工具，可以查看 Windows 所有进程的详细信息，免费下载。
6. winlator 🧰 一个安卓 App，让安卓手机可以运行 Windows 应用程序。
7. iOS 应用开发教程 📓 斯坦福大学2023年学年的一个英文课程，现在已经全部上网，包含讲课视频和课件。
#优质博文 #前端 #后端 #react
模块化的请求数据统一管理的构想
AI摘要： 文章讨论了如何在复杂的前端应用中优化数据管理，特别是在使用 React Query 管理多个相互关联的模块数据时遇到的挑战。作者提出了一种解决方案，通过后端和前端协作，减少数据冗余，提高数据更新的效率和准确性。具体方法包括重构数据结构，把引用数据分离出来，并在前端使用如 zustand 或 jotai 这样的库进行集中式的数据管理，使数据更新更加高效，避免在多个模块中重复更新数据。
via innei
模块化的请求数据统一管理的构想
AI摘要： 文章讨论了如何在复杂的前端应用中优化数据管理，特别是在使用 React Query 管理多个相互关联的模块数据时遇到的挑战。作者提出了一种解决方案，通过后端和前端协作，减少数据冗余，提高数据更新的效率和准确性。具体方法包括重构数据结构，把引用数据分离出来，并在前端使用如 zustand 或 jotai 这样的库进行集中式的数据管理，使数据更新更加高效，避免在多个模块中重复更新数据。
via innei
innei.in
模块化的请求数据统一管理的构想
在一个复杂的业务场景下，一个页面中被拆分多个组件，或者是多个组件共同组成一个独立的模块而不受到其他模块的影响。如下图所示。 ref:file/24q36xw389k03evdxw.excalidraw 上图展现的典型页面中，有三个模块，侧栏的 asset list，中间的 asset detai
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我又忘掉了什么
科技爱好者周刊（第 288 期）：技术写作的首要诀窍
1. 2023年前端技术盘点与展望（中文） 📓 腾讯云开发者公众号与腾讯 MoonWebTeam 前端团队联合推出的长篇技术报告。
2. JS 空数组的 every() 方法（英文）📓 every() 方法对于空数组总是返回 true，这是为什么。 #javascript
3. Echo UI 🧰 一款专为 Web Audio API 设计的 UI 库，适合用来搭建基于 Web 的音频应用，基于 React 和 TailwindCSS 开发。 #组件库 #tailwind
4. Message Nest 🧰 开源的消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。
5. Tiny RDM 🧰 Redis 桌面管理客户端，支持 Mac、Windows、Linux。 #后端 #redis
6. Animotion 🧰 一个网页 CSS 动画生成器，可视化设定动画，自动生成代码。 #css
7. Ada 🧰 一个 URL 解析器，符合最新规范，使用 C++ 编写，可以快速处理 URL。
8. Inpaint-web 🧰 开源的图片修复和超分辨率工具, 纯浏览器端实现。
9. AI 字体模型市场 🧰 该网站列出 AI 生成的字体，可以在线使用它们进行文字渲染。
它还支持网页手写八个字，生成自己的 AI 字体。 #AI 【真会玩】
我说我又忘掉了什么
科技爱好者周刊（第 288 期）：技术写作的首要诀窍
1. 2023年前端技术盘点与展望（中文） 📓 腾讯云开发者公众号与腾讯 MoonWebTeam 前端团队联合推出的长篇技术报告。
2. JS 空数组的 every() 方法（英文）📓 every() 方法对于空数组总是返回 true，这是为什么。 #javascript
3. Echo UI 🧰 一款专为 Web Audio API 设计的 UI 库，适合用来搭建基于 Web 的音频应用，基于 React 和 TailwindCSS 开发。 #组件库 #tailwind
4. Message Nest 🧰 开源的消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。
5. Tiny RDM 🧰 Redis 桌面管理客户端，支持 Mac、Windows、Linux。 #后端 #redis
6. Animotion 🧰 一个网页 CSS 动画生成器，可视化设定动画，自动生成代码。 #css
7. Ada 🧰 一个 URL 解析器，符合最新规范，使用 C++ 编写，可以快速处理 URL。
8. Inpaint-web 🧰 开源的图片修复和超分辨率工具, 纯浏览器端实现。
9. AI 字体模型市场 🧰 该网站列出 AI 生成的字体，可以在线使用它们进行文字渲染。
它还支持网页手写八个字，生成自己的 AI 字体。 #AI 【真会玩】
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 287 期）：禄丰恐龙谷记行
1. WebCodecs 介绍（中文） 📓 WebCodecs 是一个新的浏览器 API，提供音视频的编解码能力的标准接口。本文介绍这个 API，并提供 demo。
2. JavaScript 的双重否运算（英文）📓 本文介绍 JS 的否运算（~），特别是连续执行两次（~~）的用途。 #javascript
3. Amazing AI 🧰 著名程序员 Sindre Sorhus 推出的一款 mac 和 iPhone App，能够在本地运行 Stable Diffusion 模型，完成文生图。 #AI
4. memory spy 🧰 用户在这个网站上提交 C 程序，可以按行查看变量在内存的表示方式，比如整数、浮点数占用多少内存，详见介绍文章。 #后端
5. Penrose 🧰 一个开源工具，可以根据文本指令，生成可视化图形，类似于 Mermaid 和 PlantUML，但是图形能力更强大。
6. Gitblog 🧰 这个工具可以将 GitHub Issues 转成一个静态的博客网站，单个博客使用免费。
7. Kamera 🧰 一个开源的照片展示网站，点击可以查看 EXIF 信息，支持 Docker 一键部署。
8. weapp-tailwindcss 🧰 小程序使用 tailwindcss 的全面解决方案。 #css #tailwind
9. ICONCE 🧰 SVG 图标编辑生成工具。
10. Gemini ChatUp 🧰 基于 Gemini Pro 和 Gemini Pro Vision API 的开源聊天应用。支持一键部署至 Vercel，需要 Gemini API Key。 #AI
11. Imgae matting 🧰 基于开源模型的在线抠图，支持人像和物体抠图，可以 docker 运行 ，无需 GPU。
12. 优雅简历 🧰 免费的在线简历生成工具，集成 ChatGPT，可以让 AI 修改、定制简历。 #简历制作
13. CSS 网格互动指南（An Interactive Guide to CSS Grid）📓 一份 CSS 网格（grid）的教程，包含大量的互动示例。 #css
科技爱好者周刊（第 287 期）：禄丰恐龙谷记行
1. WebCodecs 介绍（中文） 📓 WebCodecs 是一个新的浏览器 API，提供音视频的编解码能力的标准接口。本文介绍这个 API，并提供 demo。
2. JavaScript 的双重否运算（英文）📓 本文介绍 JS 的否运算（~），特别是连续执行两次（~~）的用途。 #javascript
3. Amazing AI 🧰 著名程序员 Sindre Sorhus 推出的一款 mac 和 iPhone App，能够在本地运行 Stable Diffusion 模型，完成文生图。 #AI
4. memory spy 🧰 用户在这个网站上提交 C 程序，可以按行查看变量在内存的表示方式，比如整数、浮点数占用多少内存，详见介绍文章。 #后端
5. Penrose 🧰 一个开源工具，可以根据文本指令，生成可视化图形，类似于 Mermaid 和 PlantUML，但是图形能力更强大。
6. Gitblog 🧰 这个工具可以将 GitHub Issues 转成一个静态的博客网站，单个博客使用免费。
7. Kamera 🧰 一个开源的照片展示网站，点击可以查看 EXIF 信息，支持 Docker 一键部署。
8. weapp-tailwindcss 🧰 小程序使用 tailwindcss 的全面解决方案。 #css #tailwind
9. ICONCE 🧰 SVG 图标编辑生成工具。
10. Gemini ChatUp 🧰 基于 Gemini Pro 和 Gemini Pro Vision API 的开源聊天应用。支持一键部署至 Vercel，需要 Gemini API Key。 #AI
11. Imgae matting 🧰 基于开源模型的在线抠图，支持人像和物体抠图，可以 docker 运行 ，无需 GPU。
12. 优雅简历 🧰 免费的在线简历生成工具，集成 ChatGPT，可以让 AI 修改、定制简历。 #简历制作
13. CSS 网格互动指南（An Interactive Guide to CSS Grid）📓 一份 CSS 网格（grid）的教程，包含大量的互动示例。 #css
#后端 #优质博文 #权限管理 #系统设计 #CAS
如何设计一个权限管理系统
摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了CAS（Central Authentication Service）身份认证系统的工作原理，包括票据类型（如TGT、ST）和主要服务（如KDC、AS、TGS）。接着，文章探讨了基于角色的权限管理模型（RBAC），介绍了RBAC的几种模型，如基本模型、引入用户组的模型和角色分级模型。文章还提供了数据库表的设计建议，并讨论了如何使用Shiro框架实施身份认证和权限管理，包括权限体策略和权限校验的过程。
via 知乎专栏
如何设计一个权限管理系统
摘要: 这篇文章深入探讨了权限管理系统的设计。文章首先强调了身份认证和权限管理在系统安全中的重要性。详细讲述了CAS（Central Authentication Service）身份认证系统的工作原理，包括票据类型（如TGT、ST）和主要服务（如KDC、AS、TGS）。接着，文章探讨了基于角色的权限管理模型（RBAC），介绍了RBAC的几种模型，如基本模型、引入用户组的模型和角色分级模型。文章还提供了数据库表的设计建议，并讨论了如何使用Shiro框架实施身份认证和权限管理，包括权限体策略和权限校验的过程。
via 知乎专栏
#优质博文 #后端 #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
#阮一峰的科技周刊 #前端
科技爱好者周刊（第 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 应用，跟上一个软件作用相似，可以将本地视频文件的语音，翻译成另一种语言，比如英文旁白改成机器语音合成的中文。
