Published on

2023-第二十二周

Authors

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

技术

Making animated tooltip with React and Framer Motion

本文讨论了如何使用 Floating UI 和 Framer Motion 库在 React 中创建可自定义的工具提示。它提供了一个逐步构建基本工具提示的指南，然后添加动画和过渡效果使其独特。本教程涵盖了必要的边缘情况，如定位和调整大小，并确保工具提示是可访问的。作者建议使用特定版本的库以避免潜在问题。生成的工具提示可以进一步自定义以适应开发人员的需求。

Sharing WebSocket Connections between Browser Tabs and Windows

本文讨论了在浏览器标签页和窗口之间共享 WebSocket 连接的概念，以优化资源使用并增强 Web 应用程序的性能。通过创建一个专门管理 WebSocket 连接并促进其在不同浏览器上下文中共享的共享 worker，我们可以使 Web 应用程序更加高效和流畅。然而，由于引用随时间的累积，可能导致内存泄漏，因此内存管理可能是一个挑战。为了缓解这个问题，我们可以利用 WeakRefs 或在 onbeforeunload 事件处理程序的主体中发送一个特殊的控制消息。

Watch Out for Layout Shifts with ‘ch’ Units

该文章讨论了使用 ch 单位和优化 Web 字体加载的组合如何导致网站出现布局位移，从而导致累计布局位移得分较低。作者通过调试确定了问题，并通过将 ch 单位替换为 rem 单位来解决问题。本文作为一个警示故事，提醒使用 ch 单位时要注意，强调考虑字体变化对布局的影响的重要性。

How the Raycast API and extensions work

该文章讨论了 Raycast API 的开发，该 API 是 macOS 应用程序，以及它在幕后是如何工作的。API 的目标是允许开发人员为 Raycast 创建扩展，这些扩展可以轻松地被用户安装。文章涵盖了开发过程中所做的各种技术选择和权衡，包括使用 JavaScript 作为主要运行时语言和 TypeScript 作为主要扩展语言的决定。文章还讨论了渲染用户界面的挑战和使用 XPC 进行进程间通信的方法。总体目标是创建一个无缝的用户体验，使扩展在应用程序中感觉像一等公民。

工具

privateGPT

本地部署一个 GPT 可以和文档做问答交互

tailwind-merge

合并 Tailwind CSS 类，避免样式冲突

更新

rtk-v2.0.0-beta.0

包括更新 TypeScript 类型、改进实体适配器以及新增功能（例如能够将自定义的 createSelector 方法传递给 entityAdapter.getSelectors()）。该版本还包括一些重大变更，例如移除 createReducer 和 createSlice.extraReducers 的对象参数。其他变更包括更新 Redux 核心依赖和支持 ESM/CJS 兼容性。此外，该文章还讨论了早期 alpha 版本中所做的更改。

TailwindCSS 支持 text-banlace

https://github.com/tailwindlabs/tailwindcss/pull/11320

在 nextjs 项目中添加 python 后端

TypeScript 5.1 发布

TypeScript 5.1 现已发布！现在具有以下功能：

  • 更智能的 undefined 返回函数检查

  • getter/setter 类型之间没有限制

  • 更好的 JSX 标签检查

  • JSX 的联动编辑

  • @param 片段

  • 更快的速度

设计

Error-Message Guidelines

该文章讨论了数字产品设计中有效错误信息的重要性，并提供了 12 个创建它们的准则。这些准则分为三类：可见性、沟通和效率。可见性准则着重于使错误信息对用户可见和可识别，而沟通准则强调使用易于理解的语言和提供建设性的建议的重要性。效率准则建议错误信息应该防止可能出现的错误并保护用户的努力和时间。总的来说，创建有效的错误信息对于提高数字产品的可用性和质量非常重要。

Discuss on Twitter • View on GitHub