上周前端发生哪些新鲜事儿？ #380这是一个每周更新的国外论坛前端热门文章摘要。内容涵盖网页开发、Web组件、CSS、J

Web Development

1. Two Ways to Create Custom Translated Messaging for HTML Forms 文章讨论了两种方法来为HTML表单创建自定义翻译消息，一种是基于原生HTML5表单验证API，另一种是通过JavaScript手动触发验证。这让开发者能够根据用户的语言环境进行本地化，从而提高用户体验。

2. Building the Same App Using Various Web Frameworks 作者在该文章中展示了如何使用多个不同的Web框架（如React、Vue、Angular等）构建相同的应用程序，并比较了它们在开发速度、可维护性和性能上的差异。这种方法帮助开发者了解不同框架的优缺点。

3. JWT authentication: Best practices and when to use it 文章介绍JWT（JSON Web Token）在身份验证中的最佳实践，如如何安全地存储JWT、处理过期令牌、减少跨站点脚本攻击的风险，并讨论了JWT适合和不适合使用的场景。

4. Why ChatGPT Shifted From Next.js To Remix: Some Theories 文章分析了ChatGPT从Next.js切换到Remix的潜在原因，可能包括Remix在路由、数据加载和服务器端渲染方面的灵活性及性能优化。

5. Why is reaching WCAG level AAA not recommended? 作者解释了为什么达到WCAG AAA级别的网页可访问性标准不被推荐，主要是由于AAA要求过于严格，影响了实际的用户体验和开发的可行性。

Tools

1. Build Web Apps Absurdly Fast with Vite Vite是一个现代的前端构建工具，能够显著加快开发过程，通过快速的模块热重载和优化的构建流程，尤其适合构建现代Web应用。

2. Announcing Rsbuild 1.0 Rsbuild是一款轻量级的构建工具，该版本引入了更加快速的打包和模块依赖管理功能，适用于多种Web开发场景。

3. Introducing @bramus/caniuse-cli, a CLI tool for “Can I Use …” 这是一款命令行工具，能够帮助开发者快速查询某些CSS或JavaScript特性在不同浏览器中的兼容性，从而加速开发流程。

Performance

1. Chrome ends support for First Input Delay 文章宣布Chrome浏览器不再支持First Input Delay（FID）指标，转而采用其他更能反映真实用户交互的指标，如Event Timing API。

2. Rust vs JavaScript: Achieving 66% Faster Performance with WebAssembly 该文章探讨通过使用WebAssembly将Rust代码与JavaScript结合使用，从而大幅提升Web应用程序的性能，尤其是在复杂计算场景下。

Effects

1. Split Effects with no Content Duplication 该文章展示了如何在不复制内容的情况下使用CSS实现分离的动画效果，避免了重复DOM节点的问题。

2. Marquee! No text duplication, no JS 文章介绍了如何通过纯CSS实现无JavaScript的Marquee效果，避免了传统实现中的内容重复问题。

CSS

1. The Undeniable Utility Of CSS :has 文章详细介绍了:has伪类的应用场景，该伪类允许开发者根据子元素的存在或状态来样式化父元素，极大提高了CSS的表达能力。

2. Logical Properties in Size Queries 作者讨论了如何在媒体查询中使用CSS逻辑属性来适应不同的书写方向和语言环境，从而提升响应式设计的灵活性。

3. Captured Custom Properties 该文章介绍了如何捕获并使用CSS自定义属性进行动态样式管理，实现更具表现力和灵活性的CSS设计。

4. Two CSS Properties for Trimming Text Box Whitespace 两种CSS属性（overflow-wrap 和 white-space）来控制文本框中的空白区域，提升布局的整洁性。

5. Controlling your video animations with scroll-timeline and animation-timeline 文章讨论了如何使用scroll-timeline和animation-timeline控制基于滚动事件的视频动画效果，使得用户可以更好地与页面内容进行互动。

6. 11 Crazy Inspiring CSS Artists You Need to Know 文章展示了11位使用CSS创造惊人艺术作品的艺术家，他们的作品展示了CSS的无限可能性，启发开发者进行创造性的页面设计。

7. Replacing React code with CSS :has selector 该文章讨论了如何使用CSS的:has选择器来替代React中的某些交互逻辑，从而减少对JavaScript的依赖，提高性能。

JavaScript

1. Javascript Promises in depth with V8 engine internals 文章深入探讨JavaScript Promise的机制，结合V8引擎的内部原理，解释了Promise的执行顺序、状态管理以及性能优化策略。

2. What Does Hydration Mean? 作者解释了Hydration在SSR（服务器端渲染）中的作用，即如何将静态的HTML内容与客户端的JavaScript绑定，进而实现动态交互。

3. Write a domain-specific language in javascript in a weekend 文章介绍了如何用JavaScript快速构建一个领域特定语言（DSL），适用于为特定业务需求定制交互和功能。

React

1. Create a Toggle Switch in React as a Reusable Component 文章展示了如何在React中创建一个可复用的Toggle开关组件，包括组件的状态管理和样式化策略。

2. JSX Evolved: The React Server Components 该文章介绍了React Server Components的进化，解释了如何利用服务器端渲染减少客户端的渲染负担，提升性能。

3. React and FormData 文章探讨了如何在React中处理FormData对象，确保在表单提交时有效处理文件和其他数据类型。

4. React﹤Kitten﹥ — React desktop environment for the web. React-ish and highly customizable. 这是一个基于React构建的桌面环境项目，具有高度可定制性，旨在为开发者提供桌面应用的Web实现。

Vue

1. How Event Handling Works in Vue 3: A Guide for Developers 文章详细解释了Vue 3中的事件处理机制，包括如何通过事件绑定、修饰符和自定义事件来实现复杂交互。

2. Nuxt 4 features you can use now 作者介绍了Nuxt 4中的一些新特性，如文件路由、零配置和内置缓存，帮助开发者提升开发效率。

Angular

1. How to Transform an Angular Application with Signals 文章介绍了如何使用信号（Signals）来改进Angular应用的状态管理，增强组件间的通信。

2. Learn how to animate transitions in Angular apps 该文章展示了在Angular应用中实现动画过渡的最佳实践，提升用户体验的流畅度。

Libs & Plugins

1. The fastest JS color library 文章介绍了目前最快的JavaScript颜色库，能够快速处理和转换颜色格式，非常适合需要高性能的应用场景。

2. Auth.js adoption guide: Overview, examples, and alternatives 该指南介绍了Auth.js的使用方法，包括集成示例和一些替代方案，帮助开发者快速上手身份验证流程。

3. Shoelace: Web Components Library That Works With Any Framework Shoelace是一个跨框架的Web组件库，能够在React、Vue、Angular等环境中无缝工作，提升开发效率。