2023-第二十五周

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

技术
工具
更新
设计
- 2023 Logo Trend Report
- Frosted Glass: Depth-based blur in CSS
AI
其他

技术

如何理解 CSS step 函数中的 jump-* 关键词？

本文讨论了 CSS 动画中的 steps 函数及其参数，包括 jump-start、jump-end、jump-both 和 jump-none。文章演示了如何使用这些参数创建平滑的动画并避免跳帧。它还提供了解决先前动画示例中的小故障的解决方案。文章总结了 jump-*参数之间的差异，并介绍了它们与各种浏览器的兼容性。

CSS 中的"steps"函数有两个参数，包括"start"和"end"，可用于跳过动画的第一个或最后一个帧。
"steps"函数中的"jump-"关键字，如"jump-both"和"jump-none"，可用于控制动画中跳过的帧，并确保显示所有帧。
使用"jump-none"关键字可以解决动画中缺少帧的问题，如 Ant Design 标志动画示例所示。

Teleportation in React: Positioning, Stacking Context, and Portals

本文讨论了 CSS 定位、堆叠上下文以及如何通过 CSS 避免内容裁剪。它还解释了为什么在 React 中需要使用 Portal 以及 Portal 的工作原理。文章强调绝对定位不适用于应该相对于屏幕定位的 UI 元素。文章还讨论了堆叠上下文的问题以及为什么 z-index CSS 属性不总是起作用。最后，文章解释了 React Portal 如何解决这些问题以及其工作原理。

CSS 绝对定位可以脱离正常的文档流，但由于其相对性质和堆叠上下文规则，它并不总是最佳选择。
堆叠上下文确定元素在屏幕上呈现时的叠放顺序，可以通过 z-index CSS 属性进行操作。
在某些情况下，需要使用 React Portal，例如逃离 overflow:hidden 或在当前 DOM 层次结构之外渲染元素。

Are you measuring what matters? A fresh look at Time To First Byte

该文章认为，Time to First Byte (TTFB) 不是评估网页加载速度的准确指标。虽然 TTFB 可以很好地指示连接建立时间、服务器响应时间和网络延迟，但它无法捕捉到网页加载过程以及第一个字节接收后的操作。相反，作者建议使用更有意义的指标，如核心网页指标，以更准确地衡量服务器或内容分发网络对终端用户的性能表现。然而，在某些情况下，比如测量从 CDN 或服务器下载单个文件的时间，TTFB 仍然是一个有用的指标。

Time to First Byte (TTFB) 不是评估网页加载速度的好指标，因为它仅衡量接收到响应的第一个字节所需的时间，而不是网页实际可用的时间。
TTFB 仍然是一个有用的指标，用于衡量连接建立时间、服务器响应时间和网络延迟，但还有更好的指标，比如核心网页指标（Core Web Vitals），可以更准确地反映服务器或内容分发网络对终端用户的性能表现。
在浏览器中加载网页是一个复杂的过程，涉及加载字体、样式表、JavaScript、图像和其他资源，解析 HTML、CSS 和 JavaScript，并构建表示网页内容及其样式的数据结构，这些都是在 TTFB 报告之后发生的。

Figma plugin for Storybook

Storybook Connect for Figma 是一个新的插件，将 Storybook 的故事与 Figma 设计相连接，使得设计师更容易与生产环境保持同步。该插件通过比较实现和设计规范，加快了交接和 UI 审查的速度。它将故事与对应的变体相连接，识别可重用的组件，并简化了设计交接过程。用户还可以使用 Storybook 插件与设计师一起审查 UI 实现，并检查渲染的 UI 是否与设计一致。该插件由 Jono Kolnik、Michael Arestad、Gert Hengeveld、Zoltan Olah 和 Dominic Nguyen 开发。

Storybook Connect for Figma 是一个插件，将 Storybook 的故事与 Figma 设计相连接，帮助团队比较实现与设计规范，加快交接和 UI 审查的速度。
该插件允许设计师在使用组件之前检查其功能，在设计交接过程中标识已经实现的设计组件，并通过 Storybook 插件帮助设计师检查渲染的 UI 是否与设计一致。
该插件旨在通过在设计和开发组件之间建立持久链接，将 Storybook 和 Figma 等基于组件的工具融合为一个无缝工作流程。

Vue KeepAlive 为什么不能缓存 iframe

介绍了 Vue 组件中 KeepAlive 的使用，以及 KeepAlive 不能缓存 iframe 的原因

工具

ai-jsx

Javascript 的 AI 应用框架

hyper-fetch

BetterTyped/hyper-fetch 是一个获取框架，通过缓存、重复数据删除、身份验证、进度跟踪、重试等功能增强抓取能力，同时支持实时数据交换。它具有类型安全设计和用户友好的界面，可在浏览器或服务器上无缝集成

unlighthouse

使用 Google Lighthouse 在 2 分钟内扫描整个网站（平均）。开源，完全可配置，只需最少的设置。

sniffnet

用于轻松监控您的互联网流量的应用程序 🕵️‍♂️

veaury

在 Vue3 中使用 React，在 React 中使用 Vue3，并且尽可能完美！

auto-animate

一个零配置的嵌入式动画实用程序，可为您的网络应用程序添加平滑的过渡。您可以将它与 React、Vue 或任何其他 JavaScript 应用程序一起使用。

selecto

Selecto.js 是一个允许您使用鼠标或触摸选择拖动区域中的元素的组件。

更新

svelte4

Svelte 4 已经发布，带来了改进的性能、开发者体验和网站。该版本将 Svelte 的包大小减小了近 75％，减少了依赖项的数量，并改善了 Svelte 的作者体验。官方的 svelte.dev 网站已经进行了全面改进，而 Svelte 5 正在进行中，它将是 Svelte 编译器和运行时的重写。大多数与 Svelte 3 兼容的应用程序和库应该与 Svelte 4 兼容，并提供了迁移指南。这一发布得益于许多 Svelte 的维护者和贡献者，以及社区的捐赠。

Svelte 4 已经发布，带来了更新，减小了包大小，提高了性能，并增强了开发者体验。
Svelte 5 正在进行中，将是编译器和运行时的重大重写，带来更多新功能和性能改进。
Svelte 生态系统拥有一支强大的维护者和贡献者社区，他们为这些更新和改进做出了贡献。

Nuxt 3.6

Nuxt.js 3.6 已经发布，带来了几个新功能和改进。更新包括 SPA 加载指示器、性能增强、完全静态的服务器组件、更好的样式内联、动画控制、自动“static”预设检测、增加的类型安全性以及内置的 Nitro 2.5。建议使用该框架的用户进行升级。

Nuxt 3.6 引入了内置的 SPA 加载指示器、性能改进和完全静态的服务器组件。
更新包括更好的样式内联、动画控制和静态提供者预设的自动“static”预设检测。
Nuxt 3.6 还具有增加的类型安全性和升级到 Nitro 2.5 的功能。

TypeScript 5.2's New Keyword: 'using'

TypeScript 5.2 将引入一个名为"using"的新关键字，允许开发人员在离开作用域时处理具有 Symbol.dispose 函数的任何资源。"using"关键字基于 TC39 提案，该提案最近达到了 Stage 3 阶段，表明它即将加入 JavaScript。它对于管理文件句柄和数据库连接等资源非常有用。文章提供了使用"using"处理文件句柄和数据库连接的代码示例，以及展示了它如何简化代码。

TypeScript 5.2 将引入一个新的关键字"using"，用于在离开作用域时处理具有 Symbol.dispose 函数的任何资源。
这对于管理文件句柄、数据库连接等资源非常有用。
"using"关键字还可以与 Symbol.asyncDispose 一起使用，处理需要异步处理的资源，比如数据库连接。

vite@4.4.0-beta.1

✋ vite@4.4.0-beta.1 已发布！ Beta 文档位于 https://main.vitejs.dev

⚡️ 对 Lightning CSS 的实验性支持
🔼 esbuild 0.18
💜 以及更多功能和修复

设计

2023 Logo Trend Report

本文讨论了基于对超过 30,000 个提交的标志进行分析的最新 2023 年标志设计趋势。这些趋势包括圆形形状、文字标志、迷幻和复古字体以及绿色和蓝色的使用。文章还强调了理解上下文和谨慎使用 AI 和充气等工具的重要性。作者指出，尽管趋势可以提供方向，但与时尚不同，设计师应追求原创性，而不是随波逐流。文章以推广 LogoLounge 作为设计师获取灵感和探索趋势报告的资源。

通过分析标志设计的趋势，LogoLounge 为品牌提供新兴方向的见解。
AI 和 3D 工具在标志设计中的应用越来越普遍，但应该在思考和上下文中谨慎使用。
2023 年标志趋势报告突出了圆形形状、文字标志以及各种字体样式、颜色和符号。

Frosted Glass: Depth-based blur in CSS

AI

Creating a (mostly) Autonomous HR Assistant with ChatGPT and LangChain’s Agents and Tools

该文章讨论了在企业应用程序中使用大型语言模型（LLM），特别是在人力资源领域的应用。文章重点介绍了两篇最近的论文，提出了训练 LLM 使用思维链过程来得出答案的方法，而不仅仅是输出最终结果。引入了 LangChain 框架作为利用这种能力的方式，其中的代理和工具模块使 LLM 驱动的人力资源聊天机器人能够分解任务并利用多种工具得出答案。文章提供了聊天机器人的示例演示，展示了 LLM 从不完美的输入中推断用户意图并使用思维链过程解决复杂任务的能力。

大型语言模型（LLM）可以通过在决策过程中利用思维链的方式来提高其解决问题的能力，并减少幻觉的出现。
LangChain 的代理和工具模块可以用于利用 LLM 的这种新兴能力，并构建企业应用程序，如人力资源聊天机器人。
提示作为 LLM 的“防护栏”，使其保持专注，LangChain 的人力资源聊天机器人展示了 LLM 驱动的应用程序生成中间步骤以得出最终答案的能力。

What it was like to spend a month using GitHub Copilot and why I plan to not use it (next month

该文章讨论了作者使用 GitHub Copilot 的经历，GitHub Copilot 是由 Microsoft 开发的一个提供实时代码建议的工具。作者最初对它印象深刻，并感觉更具生产力，但后来注意到一些不那么理想的地方，比如工具生成的混乱和非标准的代码。作者还对编写自己并不完全理解的代码并在生产环境中发现错误提出了担忧。他们质疑这是否可能是编程的未来，以及他们是否愿意以这种方式进行编程。

GitHub Copilot 可以实时生成代码建议，但用户需要谨慎使用，因为生成的代码可能不始终遵循标准的设计模式，或者用户可能不完全理解生成的代码。
这个工具可以提高生产效率，但用户可能需要创建更多的自动化测试来确保生成的代码是正确的。
作者在生产环境中遇到了一个由于不完全理解生成的代码而导致的错误，强调了在实施之前仔细审查和理解所有建议的重要性。

Seeing the World through Your Eyes

该文章讨论了一种从图像中重建人眼外观的方法，通过计算角膜的像素大小和使用近似的眼球几何形状。通过眼反射来训练辐射场，并使用二维纹理映射来移除虹膜。还进行了眼球姿态优化以改善结果。

通过计算图像中角膜的像素大小，眼球几何形状在健康成年人中保持一致，可以进行精确的眼球跟踪。
在重建过程中使用纹理分解来移除虹膜，同时训练一个二维纹理映射来学习虹膜纹理。
眼球姿态优化是为了处理噪音并改善重建过程中的性能。