上周前端发生哪些新鲜事儿？ #388

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

1_yUkOQN9xnQv2e3Jen66_tg.webp

Web开发

• 不太常见的HTML元素及如何在代码中使用它们：介绍一些不太常见的HTML元素及其实际应用，帮助开发者提高网页语义性。
• 前端调试第一部分：不仅仅是Console Log：讲解前端调试技巧，展示如何超越简单的console.log，有效排查问题。
• 为什么优化Lighthouse得分不足以保证网站快速：探讨为什么Lighthouse得分并不完全反映网站的真实性能，提供优化建议。
• 掌握与下次绘制（INP）的交互：介绍“与下次绘制交互”（INP）技术，重点优化用户与页面的互动体验。
• Vercel对Next.js进行调整，以简化自托管：Vercel对Next.js框架做出的改变，旨在简化开发者的自托管过程。
• 如何使用无限滚动创建有机文本失真效果：提供一个创建文本失真效果的教程，结合无限滚动技术实现动态文本效果。

CSS

• 命名滚动与视图时间轴：介绍CSS中的命名滚动与视图时间轴（Named Scroll and View Timelines），用以优化页面滚动动画。
• CSS @property性能基准测试：对CSS @property的性能进行基准测试，帮助开发者了解其在不同浏览器和环境中的表现。
• 友好介绍：容器查询：介绍CSS容器查询的基本概念，如何用它根据容器尺寸来动态调整样式。
• stretch关键字：比width: 100%更好的CSS替代方案？：探讨CSS stretch关键字如何成为替代width: 100%的更好选择，提升布局的灵活性。
• 切换内容的不同（且现代）方法：讨论现代CSS中各种切换内容的技术和最佳实践，提供多种实现方式。
• 2024年可实际使用的新CSS：介绍2024年可以实际应用的CSS特性和技术，帮助开发者提升前端开发效率。
• 使用CSS锚点定位和视图驱动的动画弹出评论：展示如何结合CSS锚点定位和视图驱动的动画，创建动态弹出的评论框。
• 让其他元素也能流动：介绍如何将“流动”布局概念应用到除文本外的其他页面元素，提升响应式设计的表现。
• BRiCSS — 一个简单且可自定义的低级CSS库生成器：介绍BRiCSS，这是一个可以生成自定义低级CSS库的工具，适合需要快速搭建样式库的开发者。
• 使用CSS遮罩制作折叠矩形形状：讲解如何用CSS遮罩技术实现折叠矩形的视觉效果。
• WebKit字体平滑有何作用？：分析WebKit字体平滑技术的应用，讨论其在提升字体渲染效果中的作用。

JavaScript

• JavaScript的??=运算符：简化默认值的赋值：介绍JavaScript中的??=运算符，简化为null或undefined时赋予默认值的操作。
• 介绍新的JavaScript包管理器：Deno：Deno作为JavaScript的新包管理器，讨论它的功能和优势，及其如何简化依赖管理。
• 为什么Alpine是新的jQuery，以及这为何是个好事：探讨Alpine.js如何成为jQuery的替代品，并分析它在现代Web开发中的优势。
• 每个开发者应该知道的10个JavaScript SEO技巧：分享提升JavaScript网站SEO表现的10个实用技巧，帮助开发者改善网站在搜索引擎中的排名。
• ResizeObserver API：带有示例的教程：介绍如何使用ResizeObserver API监听元素的尺寸变化，并提供相应的代码示例。
• es-toolkit，一个Lodash的替代库：介绍es-toolkit，一个轻量级的Lodash替代库，旨在提供常用的JavaScript实用工具函数。
• 2024年，提升代码质量的20个TypeScript技巧：提供20个TypeScript技巧，帮助开发者写出更加简洁、高效的代码。

React

• 使用React构建微前端应用：讲解如何用React构建微前端应用，拆分和模块化大规模Web应用。
• 如何在React中（不）重置表单后触发服务器操作：讨论在React中如何处理表单重置的问题，避免不必要的重新渲染。
• 如何使用React和AI代理创建AI驱动的新闻聚合器：介绍如何结合React和AI技术构建一个新闻聚合器，提升内容推荐的智能化。

Vue

• 使用Laravel Reverb和Vue构建实时聊天应用：讲解如何利用Laravel Reverb和Vue.js构建实时聊天应用，处理即时消息传输。
• Vue 3中的defineExpose和样式变量：组件交互和主题化：探讨Vue 3中的defineExpose和style-vars特性，帮助开发者进行组件交互和主题化管理。

Angular

• 破解Angular的依赖注入：Injectors的隐藏层：深入分析Angular的依赖注入机制，了解Injectors的内部工作原理。