# 前端每周文摘 - 每周更新：国外论坛的前端热门文章，推荐大家阅读/翻译，紧跟时事，了解/掌握前端行业新闻，也给想写作或尝试突破新技术领域的同学们提供思路~

Web-development

• 设置和持久化CSS中的配色方案偏好以及JavaScript的“触摸”：本文介绍了如何使用CSS和一点JavaScript来设置和保存用户的配色方案偏好，使网站能够记住并应用用户的深色或亮色模式选择。

• 关于disabled和aria-disabled属性的讨论：文章探讨了如何在Web开发中正确使用disabled和aria-disabled属性，以及这些属性对辅助技术的影响。

• 如何使用OpenAI和JavaScript创建一个“AI名言生成器”：教程指导如何结合OpenAI和JavaScript创建一个自动生成名言的应用程序，展示了如何获取OpenAI的数据并将其应用到Web应用中。

• 如何将EditorJS中的Carousel优化为原大小的2倍：开发者分享了自己如何优化EditorJS carousel插件的体积，使其大小减少至原来的一半，提高了性能和加载速度。

工具

• 告别JS调试器，使用Performance面板分析CPU性能：文章介绍了如何使用Chrome开发者工具中的Performance面板来分析和优化JavaScript在Node.js中的CPU性能表现。

• Bun与部分预渲染的威力：讨论了部分预渲染技术的概念与优势，即在构建时渲染静态组件，而将动态组件的渲染推迟到运行时，从而在性能和灵活性之间找到平衡。

性能

• 完整指南：Web性能预算：本指南深入探讨了性能预算的概念，帮助开发者制定并坚守性能标准，避免性能退化，同时还包含了追踪和管理性能指标的技巧。

• Web臃肿如何影响低速设备用户：分析了网页体积膨胀对于网络连接慢的用户的影响，即使在美国，许多用户的网络速度未达到宽带水准，导致大部分网页的访问体验不佳。

CSS

• CSS中依赖配色方案的颜色与light-dark()函数：介绍如何使用CSS的新函数light-dark()根据当前配色方案（明亮或暗色模式）动态改变颜色，提高了样式的可适应性和灵活性。

• 现代CSS中的新特性：2024年春季版：提供了最近CSS新增特性的列表，旨在帮助开发者了解和利用这些强大的新工具。

• 如何消除CSS中的级联：探讨了如何使用CSS的@scope规则来隔离组件样式，防止样式泄露到其他页面部分。

• CSS中:has()伪类的强大能力：介绍了:has()伪类的功能，它可以根据传递的参数选择匹配至少一个元素的选择器，增强了CSS选择器的能力。

• 使用CSS中的text-emphasis属性让文本更具吸引力：讨论了如何使用text-emphasis属性在设计中为文本添加强调效果，支持大多数现代浏览器。

• 学习这些与视口相关的CSS单位(100vh, 100dvh, 100lvh, 100svh)：本教程涵盖了使用100vh单位创建全屏部分时遇到的挑战，并讨论了一些替代方案。

• 快速提示：使用CSS子网格对齐列行：本文介绍了如何使用CSS网格布局的子网格特性来对齐并排放置的盒子内容。

JavaScript

• JavaScript引擎与JavaScript运行时的区别：文章解释了“JavaScript引擎”和“JavaScript运行时”两个术语的区别，它们常被交替使用，但实际上指的是运行JavaScript代码的不同概念。

• 自主注销Service Workers：介绍了一种可让Service Workers在不再需要时自动注销的策略，提高了应用的性能和可维护性。

• 直观展示的JavaScript：Promise执行：通过直观的方式展示了JavaScript中Promise的执行流程，帮助开发者理解Promise的工作原理。

• 采用Nx的指南：概览、示例及替代方案：深入探讨了Nx的功能、用例、替代方案等，帮助评估它是否适合您的开发需求。

• 使用Preact Signals进行更好的状态管理指南：介绍了一个高性能的状态管理库——Signals，它提供了一套用于管理应用状态的响应式原语。

• 2023年的所有JavaScript会议演讲(+300)按观看次数排序：为方便起见，整理了2023年所有JS会议的演讲，并按观看次数进行排序。

• 我们在三周内将React应用重写为Svelte：分享了开发者如何将一个已有的React应用迅速重写为使用Svelte框架的应用的经验。

React

• React 19的新特性 —— 代码示例更新：介绍了React 19版本的新特性，并通过代码示例展示了这些更新能带来的性能提升。

• React中的布局是什么？：讨论了在React中布局的概念及其在不同页面共享时的效率提升策略。

• Angular与React之间的理解。第1部分：愚蠢与智能组件：系列文章的第一部分，探讨了Angular与React之间在使用愚蠢组件和智能组件方面的异同。

• Angular与React之间的理解。第2部分：生命周期钩子：系列文章的第二部分，深入比较了Angular和React在生命周期管理方面的不同。

• 最大化React状态效率：深入研究Recoil Selectors与useMemo的最佳性能：深入探讨了如何使用Recoil Selectors与useMemo来提高React状态管理的效率和性能。

• React服务器组件现已在RedwoodJS中上线：介绍了RedwoodJS对React Server Components支持的预览版，分享了新特性和如何将现有组件转换为服务器组件的教程。

• 即使在2024年，我仍然喜欢React的原因：尽管React被认为已经过时，但文章作者分享了自己仍然喜欢使用React的原因，包括其不变的数据和强制使用看起来与HTML无关的函数调用和表达式。

Vue

• Vue中的解构Props：响应性挑战：探讨了在Vue.js中解构props时可能遇到的响应性挑战以及如何解决这些问题，确保组件的响应性行为不受影响。

• Nuxt：展望未来：分享了Nuxt在过去一年的进展，并介绍了即将推出的新特性和对未来的展望。

Angular

• Angular v17意外解决了一个以前无法解决的问题：分析了一个简单的Unicode字符如何导致一个看似无法解决的问题，以及如何意外地找到解决方案。

说到这里，我们不难发现：成长与发展职场的主旋律 ~

最后，自荐我和机械工业出版社联合出版的 《程序员成长手记》 一书：全书分为3大模块、8个章节：从入门程序员到程序员自驱成长，回归纸质阅读，相信能给你一个更全局的程序员视野，提供成长帮助。京东搜“程序员成长手记”

OK，以上便是本次分享，希望各位喜欢~ 欢迎点赞、收藏、评论 🤟 我是安东尼 🤠 人气技术博主 💥 坚持千日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月