2024-第十九周

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

技术

How to Securely Send a Request When Closing Tabs

这段文字介绍了在用户完成页面后发送分析数据的方法。讨论了 beforeunload、unload 和 visibilitychange 等事件，以及 Navigator.sendBeacon() 方法的使用。同时提到了不同数据类型的发送方式和事件的兼容性。

• 网页在用户完成页面后发送分析数据时，可以使用 Navigator.sendBeacon() 方法异步发送数据，确保数据可靠传输而不影响页面加载速度。
• 使用 beforeunload 和 unload 事件发送异步请求存在不可靠性和性能问题，最佳事件是 visibilitychange 事件，其次是 pagehide 事件，以标识用户会话结束。
• 使用不同类型的数据（如 URLSearchParams、FormData、Blob）可以自定义请求头和请求内容，满足不同的数据传输需求。

Animating Radix Primitives with Framer Motion

这段文字介绍了如何在使用 Radix Primitives 构建 UI 组件时，结合使用 CSS 动画和 Framer Motion 实现简单和退出动画。其中详细说明了如何使用 Framer Motion 包裹 Radix 组件以及控制状态，实现动画效果。文章还提到了如何处理渲染元素的条件性显示，以支持退出动画。最后，作者鼓励读者运用所学知识，为 Radix 组件添加生动的动画效果。

• Radix Primitives 允许开发者专注于 UI 组件的样式，通过添加 CSS 动画实现简单的入场和状态变化动画。
• 使用 Framer Motion 包裹 Radix 组件，并在需要时控制组件状态，可以实现组件的入场、状态变化和退出动画。
• 通过控制 Radix 组件的状态变化和使用 Framer Motion 的 AnimatePresence，可以实现 Radix 组件的退出动画，例如 Tooltip 组件的渐隐效果。

Headless UI v2.0 for React

这段文字介绍了 Headless UI v2.0 for React 的新功能和改进，包括内置的锚定定位、新的复选框组件、HTML 表单组件、改进的悬停、焦点和活动状态检测、组合框列表虚拟化、以及新的网站和改进的文档。

• Headless UI v2.0 for React 增加了内置的锚点定位和复选框组件，以及 HTML 表单组件，提高了开发者的体验和效率。
• 通过集成 TanStack Virtual，Headless UI 实现了组合框列表的虚拟化，支持处理大量选项，提高性能。
• 除了功能更新，Headless UI 还更新了官方网站和文档，为这一重大版本发布提供了全新的视觉体验和详实的指导。

Misconceptions about CSS Specificity

这段文字主要讨论了关于 CSS 中“特异性”（Specificity）的一些误解，包括特异性不是十进制分数、使用 style 属性不会增加特异性、使用 !important 也不会增加特异性等。作者建议大家不要采用特异性的十进制表示方法，并指出了这些误解的来源。最后，还推荐了一场关于特异性和级联的讲座以及相关幻灯片。

• 特异性不是一个十进制分数，而是一个由三个组成部分（A、B、C）构成的三元组，用于比较 CSS 选择器的优先级。
• 使用 style 属性并不会增加特异性，因为它是层叠的早期步骤，与特异性无关。
• 使用!important 并不会增加特异性，而是将声明移动到不同的来源，而特异性排在更后面的步骤中。

Build an Image Magnifier Component in ReactJs

这篇文章是一个关于在 React 中创建图像放大器组件的教程。它包括了组件结构的设置、鼠标事件的管理以及放大器的渲染。文章提供了完整的代码示例和演示，并鼓励读者根据自己的需求对组件进行定制和增强。

• 创建 React 图像放大器组件：学习如何在 ReactJs 中创建可自定义的图像放大器组件，以提升用户体验并允许他们放大图像进行细节观察。
• 管理鼠标事件：控制鼠标事件以在图像悬停时显示放大器，并根据鼠标位置和图像尺寸进行样式设置。
• 完整代码和演示：提供完整的代码示例，并展示如何使用创建的图像放大器组件，以实现图像放大功能。

工具

VTable

VTable 不仅是一个高效的多维数据分析工具，更像是一位能够在行与列之间创作艺术品的“网格艺术家”。

pragmatic-drag-and-drop

在任何技术栈上，快速实现拖放功能

input-otp

一次性密码输入。易于访问且未经样式化。

onborda

一种由 Framer Motion 提供支持的 Next.js 入门向导流程

react-awesome-reveal

这些 React 组件利用 Intersection Observer API 和 CSS 动画来实现元素的逐渐显现效果。

react-archer

🏹 在 React 元素之间画箭头 🖋

importx

在运行时导入 TypeScript 模块的统一工具。

更新

Astro 4.8

Astro 4.8 发布了，包括对 Astro actions 和 request rewriting 的实验性支持，性能改进，以及多路由 entrypoint 的定义能力。此外，还修复了一些 bug 并作了一些小的改进。

• Astro 4.8 发布了实验性支持 Astro 动作和请求重写的功能，以及性能改进等多项更新。
• 新版本引入了实验性的 Astro 动作功能，可轻松定义和调用后端函数，并实现全类型安全。
• 除了性能改进外，还修复了多项 bug 并增加了能够定义多个路由的功能，为未来的整合提供更多可能性。

设计

How to develop an eye for Design

设计师在刚开始时可能会犯一些错误，但通过研究应用程序的设计细节，可以提高设计感和审美，并更好地理解产品设计中的层次、内容、意图和受众。

• 通过研究常用应用程序来培养设计感，关注设计中的层次结构、内容和意图，以及目标受众的需求和设计服务。
• 设计要注重视觉层次和信息的重要性，包括颜色和文本处理，以及内容的呈现和间距运用。
• 了解产品的意图和解决的问题，以及设计如何更好地满足用户的需求，考虑不同用户群体的使用情况。

AI

openui

OpenUI 允许您凭借想象描述界面，随后即可实时查看其呈现效果。

llm-ui

大语言模型的 React 库