Published on

2023-第三十五周

Authors

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

技术

The underlying mechanisms of React’s concurrent mode

这篇文章介绍了 React 中的并发模式以及使用 useTransition 的过程。文章首先介绍了一个问题，即当渲染时间较长时，没有使用 startTransition 函数会导致浏览器冻结。然后通过理解渲染和提交到 DOM 的区别，以及 JavaScript 执行模型的特点，解释了为什么没有使用 startTransition 函数会导致浏览器冻结。最后，提出了使用 startTransition 函数的假设，即将昂贵的任务分成小块，并定期让浏览器主线程执行其他任务，以保持页面响应性。

  • React 的并发模式通过使用过渡效果和 startTransition 函数来解决渲染过程中页面卡顿的问题。
  • 使用 startTransition 函数可以将耗时的渲染任务分解成更小的任务，并定期让浏览器主线程执行其他任务，以保持页面的响应性。
  • startTransition 函数的工作原理是将渲染任务分块处理，并周期性地让浏览器主线程执行其他任务，以实现页面的流畅交互。

useMemo overdose

最近，我被问到何时使用 useMemo 钩子，这个问题让我思考并反思了一下。我慢慢意识到我已经养成了在几乎所有情况下都使用 useMemo 钩子的习惯，而且我无法解释为什么我这样做。尤其让我担心的是，和另一位前端工程师聊过之后，我意识到我并不是唯一一个这样做的人。这意味着开发者倾向于过度使用 useMemo 钩子，甚至不能充分解释为什么要这样做。在这篇文章中，我们将学习何时使用 useMemo 钩子，何时不使用。

  • useMemo hook 是用来缓存函数的结果并在依赖项不变的情况下返回缓存值的，适用于耗时或资源密集的计算。
  • 当使用 useMemo hook 时，需要确保提供正确的依赖项，以确保在需要更新时它会更新。
  • 过度使用 useMemo hook 可能会导致不必要的复杂性，隐藏组件的实际逻辑，增加维护和调试的困难。

Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS

这篇文章介绍了 CSS 中的新颜色空间 Oklch 以及为什么我们需要它。文章解释了色域和颜色空间的概念，并指出 sRGB 色域在新的显示技术中存在限制。同时，文章还提到了传统颜色格式在色域间转换时可能出现的问题，以及 Oklch 如何解决这些问题。

  • CSS Color Module Level 4 规范引入了新的颜色空间 Oklch，扩大了我们在 CSS 中可以使用的颜色范围。
  • 颜色空间和色域是不同的概念，色域是一种颜色范围，而颜色空间定义了在色域中绘制点的格式。
  • 新的色域和颜色空间的引入是为了适应新技术、解决灰色区域问题和提供更一致的颜色体验。
THE oklch() VALUES #  oklch() 值 #
Here they are: 他们来了：

l: This controls the lightness of the color, and it’s measured in a range of 0% to 100% just like HSL.
l ：控制颜色的亮度，与 HSL 一样，其测量范围为 0% 到 100% 。
c: This is the chroma value, measured in decimals between 0 and 0.37.
c ：这是色度值，以 0 和 0.37 之间的小数测量。
h: This is the same ol’ hue we have in HSL, measured in the same range of 0deg to 360deg.
h ：这与我们在 HSL 中使用的色调相同，在 0deg 到 360deg 的相同范围内测量。

“色度是指颜色的纯度。高彩度色调不添加黑色、白色或灰色。相反，添加白色、黑色或灰色会降低其彩度。它与饱和度类似，但又不完全相同。色度可以被认为是颜色与白色相比的亮度。”

Bézier Curves

本文介绍了 Bézier 曲线的基本概念和应用。Bézier 曲线是 CSS 动画中的一种缓动函数，用于控制属性在时间上的变化速率。它可以通过控制点的位置来实现不同的动画效果。同时，Bézier 曲线也可以用于绘制复杂的形状和图标。文章还介绍了 SVG 路径和 HTML 画布中使用 Bézier 曲线的方法，以及如何通过 De Casteljau 算法计算 Bézier 曲线上的点坐标。作者希望读者通过了解 Bézier 曲线的原理，能够在网页设计中创造出更多有趣的效果。

  • 贝塞尔曲线是用于前端工程师的重要技术，可以在动画和 SVG 路径中使用。
  • CSS 动画中的 easing 函数可以控制属性随时间的变化速率，包括线性、步进和贝塞尔曲线。
  • SVG 路径和 HTML 画布可以用来绘制平滑的曲线，其中贝塞尔曲线是最常用的。

The importance of verifying webhook signatures

Webhooks 是一种回调集成技术，用于实时发送和接收信息。它可以通过 HTTP 将数据传输到另一个应用程序或第三方 API。为了安全起见，最好包括一个可验证的签名，以确保请求来自预期的 webhook 来源。这篇文章介绍了如何在 Node.js 中验证 webhook 签名，并提供了一个示例来演示如何使用 GitHub webhook 检测用户向存储库推送代码。它还介绍了如何使用 Postman 模拟恶意请求，并使用 ngrok 配置和 Github 配置 webhook 的步骤。最后，强调了 webhook 签名的重要性和安全最佳实践。

  • Webhooks 是一种回调集成技术，用于实时发送和接收信息，如事件通知。它可以通过 HTTP 将数据传输到另一个应用程序或第三方 API。
  • 供应链攻击是 2022 年所有系统入侵事件的 62％，因此维护供应链安全至关重要。Webhook 签名可以验证请求的来源，以确保只有合法的源调用了 Webhook。
  • 通过在 Node.js 中验证 Webhook 签名，可以提高安全性并防止恶意请求。您可以使用 Node.js 的 crypto 模块来处理加密数据，并通过比较签名来验证请求的合法性。

The complexity of writing an efficient NodeJS Docker image

Docker 是一个管理容器的工具，可以优化 Docker 构建过程来节省时间和减小镜像大小。Docker 使用分层的方法来构建镜像，每个修改都创建一个新的层。在 NodeJS 的构建过程中，可以优化复制源代码和安装开发依赖的步骤。使用.dockerignore 文件可以忽略不必要的文件和文件夹。使用 Slim 或 Alpine 镜像可以减小镜像大小，但需要注意兼容性和稳定性问题。使用多阶段构建可以进一步减小镜像大小。通过这些优化技巧，可以显著减少 Docker 构建时间和镜像大小。

  • Docker 采用分层的方法来管理容器，每个文件系统的修改都会创建一个新的层，但是过多的层会增加镜像的大小和构建时间。
  • 优化 Docker 构建过程的关键是去除不必要的层，例如在编译完成后不再需要源代码和 devDependencies。
  • 通过使用.dockerignore 文件、选择 Slim 或 Alpine 镜像以及多阶段构建等技术，可以显著减少 Docker 镜像的大小和构建时间。

工具

default-composer

一个微小的（约 500 字节）JavaScript 库，允许您为嵌套对象设置默认值。

更新

Craft your Chrome Devtools Protocol (CDP) commands efficiently with the new command editor

Chrome DevTools Protocol (CDP) 是一个远程调试协议，允许开发者与运行中的 Chrome 浏览器进行通信。CDP 可以帮助开发者检查浏览器状态、控制其行为和收集调试信息。新的 CDP 编辑器简化了命令的输入和修改，包括自动完成、参数填充、参数类型检查等功能。编辑器还提供了命令和参数的描述信息和文档链接。通过编辑器，开发者可以更方便地发送和修改 CDP 命令。

  • Chrome DevTools Protocol（CDP）是一个远程调试协议，允许开发者与正在运行的 Chrome 浏览器进行通信。
  • DevTools 引入了一个新的 CDP 编辑器，通过自动补全命令、自动填充参数值等功能，简化了 CDP 命令的输入和修改过程。
  • 新的 CDP 编辑器还提供了实时错误提示、命令和参数的描述性工具提示等功能，提高了调试效率和准确性。

Astro View Transitions

这篇文章介绍了 Chrome 和 Astro 在 View Transitions API 方面的旅程。它解释了 View Transitions API 的作用和好处，以及 Astro 团队如何早期采用和推广这一 API。文章还提到了 Astro 在实现页面过渡动画方面的挑战，并介绍了 Astro 如何利用 View Transitions 来解决这些挑战。最后，文章展望了 View Transitions 在 Web 上的未来，并鼓励开发者尝试在 Astro 中使用 View Transitions。

  • Chrome 和 Astro 的旅程：介绍了 Chrome 和 Astro 在 View Transitions API 方面的发展历程，以及 Astro 社区对该 API 的早期实验和探索。
  • Astro 为什么选择 View Transitions：讲述了 Astro 团队为什么选择 View Transitions，并解释了它对 Astro 框架的重要性和优势。
  • Astro 3.0 的新功能和未来展望：介绍了 Astro 3.0 的新功能和对 View Transitions 的未来展望，以及 Chrome 团队对此的期待和鼓励。

loader

这段文字主要讲述了在 React Router 中如何使用加载程序 (loader) 来提供数据给路由元素，在用户导航时加载器会并行调用并将数据通过 useLoaderData 传递给组件。加载程序可以根据路由参数或请求信息来获取数据，并且可以返回自定义的响应对象。如果需要中断加载程序的执行，可以抛出错误。

  • 路由加载器（loader）是在渲染路由元素之前提供数据的功能。
  • 路由参数（params）是从动态路径中解析出来的，并传递给加载器，用于确定要加载的资源。
  • 加载器可以返回任何内容，包括 Web 响应，以便在组件中使用加载的数据。

CSS-State 2023

设计

Vol.1 从“组件容器”聊到 B 端设计师的价值自证瓶颈

这篇文章讨论了 B 端设计和 EasyV 这样的 B 端工具类产品设计的差异，以及如何客观评价自己的设计结果。视觉和交互设计能力是设计师的基本功，同时需要有心理素质好一些，保持平常心。对于设计结果不理想的情况，需要分析原因，而不是直接得出“设计失败”的结论。另外，B 端和 C 端设计的能力和思维是共通的，建议自己都尝试一下再做判断。

AI

Fine-tuning GPT with OpenAI, Next.js and Vercel AI SDK

OpenAI 最近宣布了对 GPT-3.5 Turbo 的微调功能，使开发人员能够根据自己的用例来定制 gpt-3.5-turbo。微调是一种将基础模型进行定制的方法，可以改进 prompt 工程的限制，并在各种任务上获得更好的结果。微调过程包括准备数据集、对模型进行微调和使用微调后的模型。

  • 提示工程是指通过精心设计的指令来引导 GPT-3.5 Turbo 执行特定任务，以提高结果的准确性和连贯性。
  • 提示工程的局限性包括令牌限制、价格、延迟和结果质量等方面，需谨慎考虑。
  • 细调是一种定制 GPT-3.5 Turbo 基础模型的方法，通过在模型上进行预先训练，可以在各种任务上获得更好的结果。

其他

实时数据分析很诱人，满足了我们对最新数据的渴望。但是实际上，很少需要根据实时数据做出产品决策。数据分析已经够困难了，真的没有必要尝试实时完成。

-- 《实时数据分析是不必要的》

点击维基百科条目的第一个链接，不断重复该过程，最终几乎一定会点击到“哲学”条目。

据统计，2016 年 2 月，维基百科 97% 的文章都是如此。

-- 维基百科。对任何问题进行解释，不断深入，最终一定会变成哲学问题。

每个人每天都只有 24 小时，希望我的选择真的是我的选择

本文探讨了现代社会中个体面临的挑战，包括传统规范与自由新世界的冲突，以及在浪潮汹涌的现代中向内探索，寻找自己内心真实想法的过程。通过冥想训练和探索悉达多哲学，可以帮助我们从当前状态抽离，静观自己内心，建立自信心和勇气，走出属于自己的人生道路。

Discuss on Twitter • View on GitHub