Published on

2023-第三十六周

Authors

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

技术

Choosing the best Node.js Docker image

在选择 Node.js Docker 镜像时，应考虑镜像大小和潜在漏洞对 CI/CD 流程和安全性的影响。文章介绍了几种可选的 Node.js Docker 镜像，包括官方维护的镜像、基于 Google 的 distroless 项目构建的镜像以及 Docker 团队提供的基础镜像。作者建议使用较轻量级的镜像，并强调选择适合自己需求的 LTS 或 Current 版本，并提到 Alpine 镜像可能是一个小巧且安全性较高的选择。

  • 选择合适的 Node.js Docker 镜像对于 CI/CD 流水线和安全性至关重要。
  • 默认的 node 镜像可能存在安全漏洞和巨大的文件大小，建议使用其他更适合的镜像。
  • 可以选择官方维护的 Node.js 镜像、特定版本的镜像、Google 的 distroless 项目或 Docker 团队提供的基础镜像等多种选项。

How to implement SSL/TLS pinning in Node.js

这篇文章介绍了在 Node.js 应用程序中使用 SSL/TLS 证书固定的概念和用途。SSL/TLS 证书固定可以通过比较服务器的公钥或证书与预先验证的证书来增加连接的真实性和完整性的安全性。它可以防止中间人攻击和其他与证书相关的攻击。在 Node.js 应用程序中，证书固定可以通过比较传输过程中的证书与预先设置的证书来验证连接的安全性。证书固定可以在金融应用程序等敏感信息传输中起到重要作用。在实施证书固定时，需要注意错误处理和安全测试。

  • SSL/TLS pinning 是一种在 Node.js 应用程序中使用的安全机制，通过验证预先验证的数字证书来保护免受中间人攻击和其他与证书相关的攻击。
  • 在金融应用程序和移动设备上使用证书固定可以防止中间人攻击和减少用户敏感信息泄露的风险。
  • 在实施 SSL/TLS 固定时，必须注意错误处理和日志记录，并通过测试和监控来确保其有效性和持续维护。

How to use headless Chrome in serverless functions with a 50MB limit

这篇文章介绍了在 Vercel 上使用 Headless Chrome 进行服务器端截图的过程。作者遇到了 Node 版本升级和函数包大小限制的问题，但通过使用@sparticuz/chromium 和 GitHub CDN 来自托管 Chromium 文件，成功解决了问题。这种设置使得 Tiny Helpers 网站能够继续正常运行。

  • 在升级到 Node 16 和 18 后，原先的使用 puppeteer 和 chrome-aws-lambda 的设置无法运行，因此需要寻找新的方案。
  • 通过使用@sparticuz/chromium 替代 chrome-aws-lambda，可以解决函数包过大的问题。
  • 为了保持函数大小的合理，可以自行提供 Chromium 并将其存储在 GitHub CDN 上，从而避免额外的费用。

Why Does Email Development Have to Suck?

这篇文章主要讲述了邮件开发的困难和挑战。邮件开发和网页开发类似，但由于不同的邮件客户端对 HTML 和 CSS 的支持不同，所以开发邮件需要遵循一些特定的规则和限制。文章提到了一些常见的问题和限制，如使用表格元素、内联样式、颜色反转、全宽内容、自定义字体和响应式图片等。最后，文章建议我们降低对邮件开发的期望，并介绍了一些工具和项目，如 MJML 和 React Email，可以简化邮件开发的过程。总的来说，邮件开发是一项困难且具有挑战性的工作。

  • 邮件开发是一项具有挑战性的工作，因为电子邮件客户端的渲染功能有限，需要使用基本的 HTML 和 CSS 来确保邮件在各个客户端中正常显示。
  • 邮件开发需要使用大量的表格元素和内联样式来确保邮件在不同客户端之间的一致性，因为某些客户端只支持表格渲染和内联样式。
  • 邮件开发面临诸多限制，如无法控制邮件在暗黑模式下的颜色反转、无法实现全宽度内容和自定义字体等，因此需要降低对邮件设计的期望，使用专门的工具来简化开发流程。

Adapting Illustrations to Dark Mode

这篇文章介绍了一种在网站上制作适配浅色和深色模式的插图的快速方法。通过使用 CSS 的滤镜效果中的 invert(1) 和 hue-rotate(180deg) 函数，可以实现对插图进行颜色反转和色调旋转，以使其在不同模式下都能正常显示。文章还提到了使用 HSL 颜色空间进行反转的方法，并指出这种技术的效果取决于设计的初始颜色调色板。

  • 使用 CSS 的 invert() 函数和 hue-rotate() 函数可以轻松在网站上的插图中实现明暗模式。
  • invert(1) 函数可以反转颜色，但也会反转色彩，而 hue-rotate(180deg) 函数可以恢复色彩。
  • 这种方法并不完美，效果取决于设计的初始颜色调色板，而且通常需要排除标志和照片。

Information Architecture vs. Sitemaps: What’s the Difference?

这段文字主要讲述了信息架构（IA）和站点地图（Sitemap）的区别和关系。站点地图是一个网站内容组织的可视化表示，用于规划和参考网站的结构和内容流动。而信息架构是决定如何组织和维护网站内容的实践，包括内容之间的关系和在网站导航中的可见展示。信息架构是一个持续的网站管理过程，而站点地图只是信息架构的一部分。信息架构的重点是网站的结构和内容组织，而站点地图只是用来可视化展示内容组织的流程图。站点地图和信息架构都是重要的，但信息架构比站点地图更加综合和复杂。

  • 什么是站点地图？站点地图是网站内容组织的可视化表示，它展示了网页之间的关系，并用节点表示页面或内容。
  • 什么是信息架构？信息架构是决定如何组织和维护网站内容的实践，以及网站的结构、组织和导航元素的命名方式。
  • IA 和站点地图的区别在于，IA 是整个内容结构的概念化组织，而站点地图是 IA 的可视化图表。

Making Sense of React Server Components

这篇文章介绍了 React Server Components 以及与传统的客户端渲染和服务器端渲染的区别。它解释了服务器端渲染的原理和优势，并讨论了在 React 中进行数据获取的不同方式。文章还提出了 React Server Components 的概念，并对其在应用程序中的作用进行了探讨。

  • React Server Components 是 React 的最新范式转变，首次使得组件可以完全在服务器上运行。
  • 传统的客户端渲染和服务器端渲染在数据获取和页面渲染方面存在差异，而 React Server Components 可以更高效地进行数据获取和页面渲染。
  • 通过在服务器上进行初始化渲染和数据库查询，React Server Components 可以提供更快的加载体验，同时减少客户端和服务器之间来回通信的次数。

工具

gltfjsx

将 GLTF 转换为 JSX 组件

更新

Astro 3.0

Astro 3.0 是第一个支持 View Transitions API 的主要网络框架。它提供了图像优化、更快的渲染性能、服务器端增强和 JSX 的 HMR 增强等功能。Astro 3.0 在 npm 上已经发布，用户可以通过 npm create astro@latest 命令开始新项目。Astro 3.0 的升级指南也提供了详细的升级说明。

  • Astro 3.0 是第一个支持 View Transitions API 的主要 Web 框架，为所有人提供了 JavaScript 单页应用中的页面过渡效果。
  • Astro 3.0 提供了更快的渲染性能和图像优化，组件渲染速度提高了 30-75%。
  • Astro 3.0 还改进了服务器端渲染和热模块重载等功能，为用户提供更好的开发体验。

React-Redux 9.0 alpha

React-Redux 9.0 的 alpha 版本发布了，这个版本有很多构建和发布包内容的改变，并且有一些破坏性变化。此版本需要 React 18 和 Redux 5。主要改变包括对 ESM/CJS 包兼容性的更新，使用新的构建工具和添加 sourcemaps。同时，不再发布 UMD 构建。此外，还更新了 TypeScript 类型。对于 React Server Component 的兼容性，仍在进行中。

  • React-Redux 9.0 是一个 alpha 版本，包含了许多对构建设置和发布包内容的更改，有一些破坏性变化。
  • React-Redux 9.0 要求使用 React 18 和 Redux 5。
  • React-Redux 的主要构建文件现在是一个 ESM 文件，以支持 ESM 和 CJS 的兼容性。

Node v20.6.0 (Current)

Node.js v20.6.0 版本引入了一些重要的变化。其中包括内置的.env 文件支持，import.meta.resolve 不再是实验性的，新增了 node: module API register 用于模块自定义钩子，模块自定义加载钩子现在还支持 CommonJS，Node.js C++ 插件现在支持 cppgc 垃圾回收库。此外，还有其他一些值得注意的变化。

  • Node.js 现在支持使用.env 文件配置环境变量。
  • ES 模块现在可以使用 import.meta.resolve 方法获取模块的绝对 URL 地址。
  • 新的 node:module API 注册了模块定制钩子，可以支持 CommonJS。

nextjs 13 - Forms and Mutations

Server Actions 是 Next.js 中处理表单提交和数据变更的强大工具。它可以在 Server Components 中定义异步服务器函数，并可以从组件中直接调用。Server Actions 与 Next.js 的缓存和重新验证架构紧密集成，可以更新缓存数据并重新验证缓存键。此外，Server Actions 还可以实现重定向、表单验证、显示加载状态、错误处理、乐观更新等功能。

  • Next.js 通过 Server Actions 提供了处理表单提交和数据变更的强大功能。
  • 通过定义异步的服务器函数，可以直接从组件中调用 Server Actions，而无需手动创建 API 端点。
  • Server Actions 与 Next.js 的缓存和重新验证架构深度集成，可以更新缓存数据并重新验证任何应该更改的缓存键。

设计

8 MICRO TIPS FOR REMARKABLY BETTER TYPOGRAPHY

这篇文章主要讲述了如何在不到 8 分钟的时间内通过 8 个微小的技巧来改善网站的排版，包括调整字重、减小标题的行高、使用开放字体特性、合理使用大写字母、使用老式数字、使用小型大写字母、使用连字和对齐图标等。同时，文章也强调排版是一门科学和艺术的结合，需要综合考虑多个因素才能实现完美的排版效果。

  • 使用变体字体和减轻字体的重量可以在深色背景上提高排版的美感和可读性。
  • 大幅度减小标题的行高可以显著改善其外观。
  • 使用开放类型功能可以使字体看起来更原创。

其他

我们一直没有发布 1.0 版，因为有一些高级功能没有完成。但是现在，我们决定发布了，部分原因是那些没有完成的功能，在现实世界中似乎并不重要（不过以后我仍然想完成它们。）

更重要的原因是，只有发布了 1.0 版，我们才能开始开发 2.0 版。

-- 《Cap'n Proto 1.0 发布说明》

Discuss on Twitter • View on GitHub