2024-第四十七周

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

技术

⭐️2024 年可用的新 CSS 技术

近两到四年来，CSS 的创新数量惊人。多项创新已发布，并在所有现代浏览器中得到支持，其中一些创新从根本上改变了网站制作方式。本文是 2024 年我打算开始使用的新 CSS 技术的速查表。其中包括逻辑属性、容器查询、:has 选择器、:is 和:where 选择器、嵌套、CSS 比较函数、级联层、子网格等新特性。这些新技术将为网页设计者提供更多的灵活性和可能性。

• CSS 新特性：介绍了几项在过去两到四年间出现的新 CSS 特性，包括逻辑属性、容器查询、:has 选择器、:is 和 :where 选择器、嵌套、CSS 比较函数、层叠层级和子网格。
• 支持情况：提到了这些新特性在现代浏览器中的支持情况，并指出可能需要使用 polyfills 来支持旧版浏览器。
• 潜在影响：指出了这些新特性对网站制作的潜在影响，以及对专业人士更新知识和保持相关性所需的挑战。

把业务逻辑放在应用程序里，而不是放在数据库中

这篇文章讨论了在软件开发中如何减少对数据库资源的依赖，以便更容易进行扩展。它强调了将应用程序业务逻辑尽可能地放在应用层中，而不是数据库层，以便更轻松地扩展应用服务器资源。文章还提到了一些方法，如将复杂的过滤操作和计算移动到应用层，以减少对数据库资源的需求，并增加应用层资源的可用性。

• 将尽可能多的应用业务逻辑放在应用层，而不是数据库层，可以更容易地实现应用服务器资源的扩展，从而降低对数据库资源的依赖。
• 通过在应用层执行数据过滤和业务逻辑，可以减少将大量数据传输到应用层的需求，从而避免对数据库资源造成不必要的压力。
• 避免在数据库中执行计算和复杂的连接操作，而是将这些逻辑移到应用层，在应用资源更为充足的情况下进行处理，从而减少数据库资源的需求。

React Query API 设计 - 我们的经验与教训

这篇文章是一个软件工程师在 React Advanced 会议上的演讲内容概要。演讲者介绍了自己以及他在维护 React Query 开源库时的经历和教训。他讨论了 API 设计、版本控制、用户反馈和开源维护的挑战，并分享了他在处理这些挑战时学到的经验和教训。文章涵盖了许多有关 React Query 和相关主题的内容，深入探讨了 API 设计和与用户互动的重要性。

• 在设计开源库的 API 时，需要权衡功能的增加与 API 复杂度的增加之间的关系，以确保 API 既强大灵活又易用。
• TypeScript 在 API 设计中的重要性，从一开始就考虑类型可以帮助减少代码复杂度和维护负担。
• 在发布开源库的新版本之前，尽可能试用测试版并提供反馈，以帮助维护者尽早发现并解决问题。

关键帧组合小技巧

这段文字讲述了如何实现一个在页面加载时具有缓慢放大动画，并且能够无缝地与滚动驱动动画相结合的解决方案。该解决方案涉及将两种动画分配给同一个元素，并通过指定动画顺序和关键帧设置来实现它们的无缝衔接。

• 页面加载动画和滚动驱动动画可以无缝结合，通过设置较低的复合顺序和动画时间轴来实现。
• 通过将时间基础动画 (TBA) 和滚动驱动动画 (SDA) 分别设置动画起始点和终点，可以使它们在页面加载和滚动过程中协调运行。
• 通过将 TBA 和 SDA 的关键帧动画分别指定起点和终点，可以实现页面加载缓慢放大动画和滚动驱动动画的流畅结合。

ChatGPT 问世两年，我在 AI 的辅助下成为了一名 iOS 业余开发者

这段文字描述了作者在学习使用 iPhone 5c 到开发 iOS 应用的成长经历。通过与生成式 AI Claude 的合作，作者成功开发了一款名为《震感》的 iOS 应用，并分享了与 AI 合作开发的经验和技巧。文章指出，AI 虽然能够帮助解决具体的问题，但完全不懂开发的人依然需要有一定的领域知识和技能才能借助 AI 完成项目。

• 作者通过人工智能（AI）辅助开发 iOS 应用的经历，探讨了 AI 在帮助非专业人士实现技术目标方面的潜力和局限。
• 作者通过实际经历展示了 AI 在协助解决具体技术问题和项目管理方面的作用，以及 AI 在项目迭代和优化中的应用。
• 作者强调了除了 AI 技术的应用外，个人经验、基础编程知识和对技术领域的熟悉度等因素对于利用 AI 进行应用开发的重要性。

您必备的基本 tsconfig.json 配置选项

tsconfig.json 文件是 TypeScript 项目的关键部分，通过设置该文件，可以控制编译器如何将 TypeScript 代码转换为 JavaScript，包括编译优化、严格性设置、输出管理、兼容性控制、调试测试、代码质量、模块和 JSON 兼容性等方面。理解这些配置选项有助于加速构建、提高代码质量、改善调试体验，使 TypeScript 项目更高效、易于维护和安全。

• tsconfig.json 中的设置可以提高编译速度、加强代码安全性和管理构建文件，如启用增量编译和严格类型检查等。
• 配置选项能帮助组织构建输出、调试代码和确保代码在不同系统中的兼容性，例如指定源文件和输出目录、生成源映射以及管理模块系统和 JSON 文件的兼容性。
• 通过配置选项还可以强化代码质量、预防常见错误和提升跨平台稳定性，如标记未使用的变量、禁止不可达代码和强制 switch 语句的 case 不允许穿透。

迷人的聚焦轮廓

这段文字介绍了焦点轮廓在网页设计中的重要性，特别是对键盘用户和运动能力受限的用户。文章提到了焦点轮廓的设计原则、可访达性要求，以及如何通过自定义样式和动画来改善焦点轮廓的外观和可访达性。文章还列举了一些实际网站的焦点轮廓设计示例，强调了焦点轮廓在网页无障碍设计中的核心作用。

• 焦点轮廓对于网页的可访问性至关重要，特别是对键盘用户和运动受限者。
• 自定义焦点轮廓可以提高可见性，并且需要满足一定的对比度要求，同时还可以通过动画、偏移和颜色管理来优化外观。
• 设计焦点轮廓时需要考虑元素的形状、背景颜色以及与网站视觉语言的整合，确保焦点轮廓在不同情境下都能清晰可见。

2024 年如何为生产环境配置 Next.js 15

这篇文章总结了作者在开发大规模 Next.js 项目时所学到的经验，并提供了详细的设置步骤和最佳实践。涵盖了项目初始化、类型检查、代码格式化、ESLint 配置、Commitlint 规范、数据库配置、国际化、端到端测试等方面，帮助开发人员构建可扩展、维护良好的应用。

• 初始化项目和设置开发环境：通过创建新的 Next.js 项目和配置开发服务器，确保项目可以顺利启动。
• 配置静态分析检查和自动化工具：使用 TypeScript、ESLint、Prettier 等工具来统一代码风格，并添加自动化代码格式化和静态分析检查。
• 数据库集成和端到端测试：结合 Prisma ORM 进行数据库集成，使用 Playwright 运行端到端测试以确保应用程序的完整功能。

React 和 FormData

这段文字主要讨论了在 React 中使用 FormData 提交表单时，如何处理 FormData 并将其转换为 JavaScript 对象以及对数据进行类型验证和处理多个具有相同键的值的情况。作者提到了使用 Object.fromEntries 来转换 FormData，使用 Zod 库对数据进行类型验证，并介绍了处理具有相同键的多个值的方法。最后还提到了可以使用 zod-form-data 这样的库来简化处理这种情况。

• 在 React 中使用 FormData 提交表单时，可以通过 Object.fromEntries 将 FormData 转换为 JavaScript 对象，以便更简洁地处理数据。
• 使用 Zod 库可以对转换后的数据进行类型定义和验证，确保数据的准确性和完整性。
• 当表单中存在多个具有相同键名的数值时，可以通过 formData.getAll 来正确处理这种情况，或者使用类似 zod-form-data 的库来简化处理过程。

工具

nginx 的访问日志分析

Component party

查阅不同框架组件写法的手册网站

atomic-css-devtoolsatomic-css-devtools

一个开发工具面板，可以像处理普通 CSS 规则一样调试原子 CSS 规则。该工具可以在 Chrome 和 Firefox 浏览器上使用。

tschema

一个 TypeScript 类型检查库，用于从 JSON 数据中提取类型信息，并生成 TypeScript 类型。

更新

Framer Motion 现已成为独立项目，并推出了新产品 Motion

这篇文章宣布了作者将离开 Framer，但同时他也宣布了 Framer Motion 独立出来成为一个独立的开源项目，全面支持 React 以外的应用，并拥有全新的网站和 API。作者表示，Framer 对 Motion 的支持和赞助，将使其在未来能够持续发展。作者表示未来将专注于 Motion 的发展，并希望通过赞助和其他途径实现其可持续发展。

• Framer Motion 将独立出去成为独立的开源项目，提供全新的品牌和更广泛的 API，以服务更广泛的用户群体。
• Framer 决定将 Motion 分拆出去，以确保其作为核心动画驱动程序的未来，不仅仅是在 Framer 站点或 React 站点，而是在所有站点上。
• 作者希望使 Motion 成为可持续发展的项目，鼓励个人或公司考虑赞助，并计划通过赞助来提高核心库的开发时间。

Storybook 8.4

这段文字介绍了 Storybook 8.4 版本的更新内容，包括一键组件测试、减小了包大小、支持 Svelte 5 和 Svelte CSF、React Native Storybook 8 发布、标记和过滤故事功能、以及数百项改进。文字还提到了未来版本 8.5 的改进计划和对贡献者的感谢。

• 增加了一键组件测试功能，使得在浏览器中测试和调试前端测试变得更加简单和高效。
• 大幅减小了安装包大小，通过移除和优化功能，提高了开发者的响应速度和效率。
• 增加了对 Svelte 5 的支持，改进了 TypeScript 和 JSDoc 功能，使得在 Svelte 中编写组件和测试变得更加便捷和高质量。

Expo SDK 52

Expo SDK 52 发布，包含了 React Native 0.76。新架构默认启用，并支持很多改进和新特性，如多个库的稳定发布和 Beta 版本。开发者可以在项目中选择启用新架构，但未来的发布版本可能将默认启用。还有一些已知问题和不兼容项需要注意。

• Expo SDK 52 发布，包含 React Native 0.76 和全新架构，将于 SDK 53 默认启用，新架构需要升级第三方库以支持。
• 新版本带来了多项改进，包括对视频、音频、摄像头等模块的重大更新，以及对 iOS 15.1 和 Android 12 的支持。
• 还有一些已知问题和改进，同时废弃了部分功能和引入了一些明显的不兼容性变更，需要开发者注意。

JavaScript Import Attributes (ES2025)

这段文字介绍了 JavaScript 引入了新的特性——导入属性，使模块导入更加明确和安全。通过导入属性，可以声明模块的类型，从而确保获取的是期望的数据而不是可执行代码，解决了在 Web 中文件扩展名不可靠地指示内容的安全问题。这一功能为 JavaScript 中安全处理不同模块类型奠定了基础，并将在 2025 年实现标准化，为模块导入增加了类型安全性。

• JavaScript 的新特性 Import Attributes 为模块导入提供了更加明确和安全的元数据传递方式，解决了 web 上文件扩展名不能可靠指示内容的核心问题。
• Import-Attributes 创建了代码和运行时之间的合约，显式声明了期望导入的模块类型，可以安全地处理不同类型的模块，如 JSON 和 JavaScript。
• 这项特性为 JavaScript 中安全处理不同模块类型打下了基础，提供了一种标准的方式来声明对模块的期望，并且类似于给模块导入加上了类型安全性。

AI

腾讯 AI 学习助手：Ima

腾讯推出的 Mac 学习助手，支持微信公众号内容检索，文档解析、智能写作。

轮到抖音追快手了

本文描述了在人工智能和大型模型技术快速发展的情况下，广告投放成为这些技术公司竞争市场的重要手段。文章讨论了大型模型厂商在快手平台上增加广告投放力度的趋势，并分析了这一趋势对整个社交媒体广告生态产生的影响。

• 大模型厂商在快手平台上加大广告投放力度，以争夺市场份额和吸引新用户，同时影响了整个社交媒体广告生态。
• 抖音限制非字节系产品的广告投放，使快手成为大模型厂商们的新广告投放平台，而快手的投放成本相对较低。
• 大模型厂商的广告投放策略着重于短视频素材和素人博主合作，以向用户展示 AI 工具的使用场景，但用户对 AI 工具的长期使用和留存仍存在挑战。

其他

大多数哲学的目的，都是强化你的身心，让你学会，对于那些自己无法控制的事情要漠不关心、

-- 《禁欲主义》