2023-第三十九周

该周报主要为各个地方内容的汇总整理

• 技术
  • Engineer’s Codex
  • NestJS + tRPC 与 CSR 侧的 React Query 集成指南
  • 使用 json schema
  • Why HTTP/3 is eating the world
  • Your Cache Headers Could Probably be More Aggressive
• 工具
  • critical
• 设计
  • the design system ecosystem

技术

Engineer’s Codex

这篇文章总结了一些优秀工程师在编写代码时的一些习惯和原则。他们将代码看作是解决问题的手段，注重以用户为中心，注重代码的可读性和可理解性。他们遵循一致的编码规范和风格，编写简洁、有逻辑的代码。他们重视测试，并与团队成员进行合作和沟通，以达到更好的结果。此外，他们还具有深入的领域知识和自我推销的能力。

• 优秀的工程师将代码视为解决问题的手段，注重以用户为中心，创造性地解决问题。
• 优秀的工程师编写的代码不仅要让计算机能理解，还要让人能理解，注重代码的可读性、可维护性和规范性。
• 优秀的工程师注重团队合作和沟通，善于接受反馈和进行设计评审，通过遵循标准、测试和持续改进来提高代码质量。

NestJS + tRPC 与 CSR 侧的 React Query 集成指南

本文介绍了如何在 NestJS 项目中集成 tRPC，并实现类型安全的通信。首先，通过在 NestJS 应用中注入 tRPC 插件来接入 tRPC。然后，将 tRPC 路由器定义在各个业务模块中，并使用装饰器收集依赖。最后，实现类型安全的通信，并处理嵌套路由的情况。

• tRPC 是一种利用 TypeScript 的类型系统实现的高效、类型安全的远程过程调用框架，常在全栈框架中使用。
• 在 NestJS 中接入 tRPC 非常简单，只需在 fastify 实例中注入 tRPC 插件即可。
• 可以使用 NestJS 的 DiscoveryModule 和自定义装饰器实现自动收集依赖，将 tRPC 路由定义拆分到各个业务模块中，实现模块化和类型安全。

使用 json schema

本文介绍了 jsonschema 的应用场景、选择它的优势以及基本使用语法。它可以用于定义 json 数据的结构和进行数据校验。jsonschema 的优势包括跨语言、丰富的工具支持以及运行时存在。文章还介绍了如何校验数据和生成类型定义。此外，还介绍了 jsonrpc 的使用场景和基本定义。最后，作者提供了一些现有的工具和实现方式。

• jsonschema 是一种用于描述 json 数据的语言，它可以帮助我们定义 json 数据的结构和进行数据校验。
• json schema 的应用场景广泛，包括定义配置文件的格式、服务端接口定义以及数据校验等。
• 与其他类似工具相比，json schema 具有跨语言支持、丰富的工具支持以及运行时存在等优势。

Why HTTP/3 is eating the world

HTTP/3是一种新的网络协议，用于加载网页、流式传输视频和获取应用程序数据。它取代了传统的TCP协议，采用了QUIC协议作为底层传输协议。HTTP/3具有更好的性能和安全性，能够提供更快的连接速度和更好的数据加密。它的采用已经迅速增长，对于当前的互联网流量已经有了很大的影响。

• HTTP/3是一种新的网络协议，通过使用QUIC协议解决了TCP协议的一些不足之处。
• QUIC 协议与 TLS 协议紧密结合，提供更多的加密和安全性，以应对网络攻击和隐私问题。
• HTTP/3相较于HTTP/2在性能上有所提升，特别是在加载网页和流媒体视频方面，因此得到了广泛的应用和支持。

Your Cache Headers Could Probably be More Aggressive

这篇文章讲述了如何更有效地缓存静态资产以提高网站性能。作者介绍了默认缓存策略以及如何通过使用更智能的缓存头来优化缓存。同时，作者还介绍了如何通过指纹技术来更新和刷新资产，并提供了在不同主机平台上实施这些策略的方法。最后，作者鼓励读者深入研究网络工具以优化网站性能。

• 现代的网站托管平台提供了缓存功能，可以通过设置 Cache-Control 头来控制静态资源的缓存策略，提高网页性能。
• 通过设置 public, max-age=31560000, immutable 的缓存策略，可以让浏览器直接从缓存加载静态资源，减少不必要的 HTTP 请求。
• 如果需要更新静态资源，可以通过更改资源的 URL 或使用指纹技术，强制浏览器和缓存重新获取新的资源。

工具

critical

在 HTML 页面中提取和内联关键路径 CSS

设计

the design system ecosystem

一个成熟的、端到端的设计系统在大型复杂组织中是什么样的？所有的组成部分是什么，它们如何作为一个经过深思熟虑的架构相互关联？需要什么，可选什么？设计系统对数字产品的影响是什么？这篇文章将深入探讨设计系统生态系统的细节，以及如何在企业的数字产品组合中实现用户界面的部署和规模化。设计系统生态系统由核心设计系统层、可选的技术特定层、可选的组件库层、可选的智能组件层和产品层组成。核心设计系统包含了通用的组件、模式、原则和约定，帮助组织讲述如何设计和构建用户界面的官方故事，并提供构建所需的材料。核心设计系统包括设计标记、图标、UI 组件和参考网站。设计标记是低级别的设计定义，如颜色、字体、边框半径、间距等，它们是设计语言的组成部分。设计标记最终应用于 UI 组件，以实现特定的外观和感觉。图标是设计系统中的一个重要组成部分，可以作为独立的产品或与设计标记一起使用。UI 组件是设计系统的关键，它们是可以在其他产品

• 设计系统生态系统是一个复杂而庞大的结构，由核心设计系统层、技术特定层、配方层、智能组件层和产品层组成。
• 核心设计系统包括设计令牌、图标、UI 组件和参考网站，用于提供组织范围内的通用 UI 构建块和解决问题的解决方案。
• 设计令牌是低级设计定义，包括颜色、字体、边框半径等，通过应用于 UI 组件来实现特定的外观和感觉。图标则是独立存在的产品，可以与设计令牌一起打包和使用。