Published on

2023-第四十五周

Authors

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

技术

React Router v6: A Beginner’s Guide

本文介绍了 React Router v6 的基本概念和用法。React Router 是用于管理 React 应用程序中多个视图的路由库。它可以帮助我们在应用程序的 UI 和 URL 之间保持同步，并实现页面的切换和导航。文章中介绍了 React Router 的基本设置和使用方法，包括路由组件和链接组件的使用，以及路由的配置和渲染。

  • React Router 是 React 的标准路由库，用于管理应用程序的 URL 和视图之间的同步。
  • React Router 提供了 BrowserRouter 和 HashRouter 两种常用的路由器组件，分别用于创建基于 HTML5 History API 和哈希方式的 URL。
  • React Router 的核心组件是<Route>和<Link>，前者用于根据路径渲染对应的视图，后者用于在页面之间进行导航。

稳定性，难的不是技术，而是

这段文字讲述了做好系统稳定性的难点并提出了一些关于代码、设计和变更方面的指导思想。作者认为技术上并不是最困难的，而是需要投入大量的时间和资源来实现稳定性。稳定性的投入应该与业务功能实现一样重要，并且需要持续的投入和认可。尽管存在一些指导思想和解决方案，但实际上落地实施仍然具有一定的挑战。最后，作者提到稳定性对于一些关键行业和竞争激烈的业务来说是至关重要的，并建议将稳定性视为业务功能的一部分来进行投入和评判。

  • 做好稳定性最困难的不是技术，而是持续投入和认可的挑战。
  • 代码、设计和变更都需要有稳定性的指导思想和原则，但要将其落地实施却是复杂而困难的。
  • 稳定性的投入需要在代码、设计和变更三个层面上进行平衡，其中设计层面的投入可能是最重要的决策。

How to Use Timeouts in Node.js

这篇文章介绍了在 Node.js 中设置超时的重要性以及如何在不同场景中设置超时。文章首先讲解了 Node.js 中的两种超时类型：接收请求超时和发送请求超时。然后详细介绍了如何在原生 Node.js 和 Express 中设置接收请求超时的方法，以及如何在 Fetch API、Axios 和 Sequelize 等常用库中设置发送请求超时。最后，总结了 Node.js 超时的重要性和设置方法。

  • Node.js 中的超时设置是为了确保应用程序的响应性，分为传入请求超时和传出请求超时两种类型。
  • 传入请求超时包括请求超时、响应超时和套接字超时，用于防止连接保持开放或无限期等待。
  • 传出请求超时适用于与其他后端、第三方服务或数据库的通信，用于设置最大响应时间，避免长时间等待影响应用程序性能。

HTML Web Components

这篇文章讨论了 Web 组件和 React 组件之间的区别。作者指出，Web 组件与 React 组件的设计和功能优先级不同。Web 组件更注重增强现有内容，而不是完全替换。文章还提到，Web 组件具有在 JavaScript 之前渲染的能力，这鼓励了组件化设计的方式。作者认为，在 Web 上，增强现有技术比完全替换更有优势和长久性。最后，作者提到 React 趋向于更像 HTML，强调组件的组合性和 HTML 的榜样。

  • "Web components"和"React components"虽然名字相似，但它们的设计和功能重点不同。
  • Web 组件更注重增强而不是替代现有的内容。
  • 在 Web 上，增强的方法更加持久，因为它符合 Web 平台的性质并能够逐步改变 Web 的规模。

67 Weird Debugging Tricks Your Browser Doesn't Want You to Know

本文介绍了一些使用浏览器调试器的实用技巧，包括高级条件断点、日志断点、观察面板、追踪调用栈、改变程序行为、快速性能分析、基于 CSS 的断点、自动实例 ID、程序化切换断点等。这些技巧可以帮助开发者更有效地使用浏览器调试器来调试和优化代码。

  • 使用条件性断点来增强浏览器调试器的功能，例如使用 console.log 在断点中输出日志信息。
  • 利用 watch pane 可以在调试器中使用 console.log 来监视特定变量的值，例如在应用程序暂停时输出 localStorage 的快照。
  • 使用条件断点来改变程序行为，例如在 getPerson 函数中设置条件断点，可以改变函数的参数值。

A faster web in 2024

这篇文章主要讨论了网页性能的重要性以及如何持续改进。文章提到，通过提高网页性能可以影响用户满意度、转化率、收入等多个方面的业务结果。目前，通过核心网页要素评估，有越来越多的网站通过了性能测试。然而，2024 年将引入新的评估指标，可能会导致通过率下降。为了应对这个挑战，我们需要学习新的技巧，并关注解决页面交互响应性问题。文章还介绍了一些工具和 API，可以帮助开发人员优化网页性能。总之，持续改进网页性能对提升用户体验和业务成果非常重要。

  • 网页性能的重要性：优化网页性能可以提高用户满意度、增加转化率、提升品牌形象等，对网站所有者和业务来说都有积极影响。
  • 网页性能的改善：根据核心网页指标的评估，越来越多的网站通过了性能测试，但在 2024 年，我们将面临新的挑战，需要学习一些新的技巧来继续改善网页性能。
  • 新的响应度指标：在 2024 年，交互到下一个绘制（INP）将取代第一次输入延迟（FID）成为核心网页指标的新响应度指标。虽然通过率可能会下降，但 INP 能更准确地衡量用户的交互体验。

讲透同源策略

这段文字主要讲述了同源策略（Same-origin policy）对前端开发的限制和解决方案。同源策略是一种安全机制，限制了跨域访问资源的能力。文章介绍了同源策略的限制，如不能从跨域的 canvas 中取出图像、无法访问 iframe 内部信息、Ajax 请求失败等，并提供了一些绕过同源策略的方法，如使用链接、重定向、表单提交等。文章还介绍了 CORS 协议作为解决跨域访问的主要方式，以及其他方法如 postMessage、websocket 和 JSONP。最后，文章总结了同源策略的本质是保证非同源信息只读，并提供了一些参考资料。

  • 同源策略是前端新手面临的障碍。
  • 同源策略限制了跨域资源的访问和操作。
  • CORS 协议是解决跨域问题的主要方法。

Steve Ruiz

这篇文章介绍了如何在 Next.js 博客中使用 MDX 内容并实现内容变化时的实时刷新。通过使用 WebSocket 服务器和监听文件变化，可以在内容发生改变时自动刷新页面，提高内容编辑的效率。

  • 在 Next.js 的博客中使用 MDX 内容时，可以通过 websocket 实现实时刷新，无需手动重启服务器或刷新页面。
  • 通过监听内容文件夹的变化，websocket 服务器会发送刷新消息给连接的客户端，从而触发 Next.js App Router 的刷新。
  • 可以根据需要在 watcher.ts 文件中进行预处理，并在接收到刷新消息后执行相关操作，如将文件内容存入数据库等。

工具

chrome-extension-tools

chrome-extension-tools 是一个 Chrome 扩展程序开发工具包，它提供了一些实用的 API 来简化扩展程序的开发

cRonstrue

将 Cron 表达式转换为可读的人类描述的 JavaScript 库

express-openapi-validator

🦋 使用 ExpressJS 和 OpenAPI 3.x 规范自动验证 API 请求、响应和安全性。

HumanizeDuration.js

语义化时间间隔与异化

更新

Vite 5.0 is out!​

Vite 5.0 已发布，它采用了 Rollup 4 作为构建工具，并引入了一些新功能和改进。Vite 团队感谢 850 多名贡献者和维护者的支持，并鼓励更多人参与其中。Vite 5 要求使用 Node.js 18+，并提供了性能优化指南和服务器预热功能。此外，文章还提到了其他一些变化和迁移指南。感谢 Vite 的赞助商和贡献者，包括 StackBlitz、Nuxt Labs、Astro 和 Remix。

  • Vite 5.0 发布，引入了 Rollup 4，提升了构建性能，并增加了改善开发服务器性能的选项。
  • Vite 5 专注于清理 API，修复了一些长期存在的问题，并未来化了 Vite（现在需要 Node.js 18+），废弃了 CJS Node API。
  • Vite 团队感谢 850 多位贡献者、插件开发者和维护者以及 Vite 的赞助者，他们的努力和支持使 Vite 能够取得这样的成果。

prisma-5.6.0

Prisma 发布了 5.6.0 版本，引入了一些新功能和改进。其中包括驱动适配器的改进、PlanetScale 的服务器驱动适配器的改进、新的 prisma debug 命令、read replicas 扩展的改进、Webpack bundling 修复以及 Prisma Accelerate 的正式发布。此外，还修复了一些问题和做出了一些改进。Prisma Accelerate 是一个全球数据库缓存，提供可扩展的连接池，适用于无服务器和边缘应用程序。

  • Prisma 发布了 5.6.0 版本，引入了许多改进和修复，包括驱动适配器的改进、PlanetScale 服务器驱动适配器的改进和新的 prisma debug 命令。
  • Prisma 还发布了@prisma/extension-read-replicas 0.3.0 版本，改进了读写分离功能，并引入了新的$replica() 方法来显式指定使用副本数据库。
  • Prisma 加入了 npm 的 provenance 功能，以提高软件包供应链的安全性和透明度，同时呼吁开发者在发布 Prisma Client 扩展和生成器时启用 provenance 功能。

AI

gpt-crawler

从 URL 中爬取网站以生成知识文件，用于创建自己定与异化制的 GPT

screenshot-to-code

将屏幕截图插入并转换为干净的 HTML/Tailwind/JS 代码

其他

讲故事能力
当代世界是一个资本过剩的世界，只要有足够的人相信你，你就能拿到投资和高估值。
作为创始人，你的讲故事能力，直接影响你的项目能否成功。

我对 ChatGPT 的理解就是，它类似于“整个人类知识的最大似然估计”。
我发现，周围的人对它有两种截然不同的看法：（1）嗯，这只是一个愚蠢的统计模型；（2）该死，人类完蛋了！

-- 《如何认识 ChatGPT》

Discuss on Twitter • View on GitHub