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

Web-development

• Frontend development practices that will help you avoid failure：这篇文章讨论了前端开发中避免常见错误的关键实践，包括代码模块化、版本控制、测试以及性能优化。关键词：前端最佳实践、代码模块化、性能优化、测试。

• Micro Frontend Architecture：本文介绍了微前端的概念，通过让不同团队独立开发前端部分，提高可扩展性、代码所有权并降低部署风险。关键词：微前端、可扩展性、独立模块、部署风险。

• SVG Coding Examples: Useful Recipes For Writing Vectors By Hand：这篇文章深入探讨了手动编写 SVG 图形的技巧，提供了多种实用示例，帮助开发者高效创建矢量图。关键词：SVG、手写代码、矢量图形、编码技巧。

• Web Components for Password Input Enhancements：文章介绍了如何使用 Web 组件增强密码输入功能，讨论了组件的安全性和用户体验优化。关键词：Web 组件、密码输入、安全性、用户体验。

• Introduction to Vercel, Frontend as a Service for Developers：介绍了 Vercel 作为前端即服务（FaaS）平台的功能，帮助开发者快速部署、托管和优化前端项目。关键词：Vercel、前端即服务、部署、托管。

• 3 API Vulnerabilities Developers Accidentally Create：讨论了开发者在创建 API 时常见的三种漏洞，强调如何通过验证、授权和错误处理等手段避免安全问题。关键词：API 漏洞、安全、验证、授权。

• Tools • WebKit Features in Safari 18.0：列举了 Safari 18.0 中新增的 WebKit 特性，涵盖图像格式支持、性能提升和新 API。关键词：Safari、WebKit、特性、性能优化。

  • Compile and run C in JavaScript：介绍了如何使用 Bun.js 将 C 代码编译并在 JavaScript 环境中运行，展示了与 WebAssembly 集成的潜力。关键词：C 语言、JavaScript、WebAssembly、Bun.js。

  • Deno 2 Arrives With Long-Term Support, npm Compatibility：本文介绍了 Deno 2 的新功能及其对 npm 兼容性的增强，同时带来了长期支持（LTS）。关键词：Deno 2、npm 兼容、长期支持、Node.js。

• Performance • Monitor your local and real-user Core Web Vitals performance in DevTools：本文介绍了如何使用 Chrome DevTools 实时监控本地和真实用户的 Core Web Vitals 性能指标，帮助开发者更好地优化站点性能。关键词：Core Web Vitals、DevTools、性能监控、优化。

  • Optimising for High Latency Environments：探讨了如何在高延迟环境下优化网页性能，分享了多种减少延迟和提高用户体验的策略。关键词：高延迟、性能优化、用户体验、加载时间。

• Effects • Creating Custom Lottie Animations With SVGator：介绍了如何使用 SVGator 创建自定义 Lottie 动画，增强网页的互动性和视觉效果。关键词：Lottie 动画、SVGator、交互设计、视觉效果。

  • Exploration of On-Scroll Layout Formations：探讨了滚动触发的布局变化效果，提供了多种实现滚动动画和布局转换的技术示例。关键词：滚动动画、布局变化、交互设计、前端效果。

CSS

• Animate to height: auto; (and other intrinsic sizing keywords) in CSS：介绍了如何在 CSS 中为高度自动（height: auto）和其他内在尺寸关键字添加动画效果，提升布局的动态性。关键词：CSS、动画、高度自动、内在尺寸。

• Feedback needed: How should we define CSS masonry?：本文讨论了 CSS masonry 布局的定义，邀请开发者参与反馈，共同完善此新布局规范。关键词：CSS、masonry 布局、网格布局、前端开发。

• Improving rendering performance with CSS content-visibility：探讨了 CSS 中 content-visibility 属性如何提高页面的渲染性能，减少不必要的布局计算。关键词：CSS、content-visibility、渲染性能、优化。

• Rethinking CSS in JS：本文重新审视了在 JavaScript 中使用 CSS 的方式，提出了更高效的解决方案，以提升性能和可维护性。关键词：CSS in JS、性能、可维护性、前端架构。

• Gradient Text with a Drop Shadow：介绍了如何使用 CSS 创建渐变文本并添加阴影效果，增强文字的视觉层次感。关键词：CSS、渐变文本、阴影效果、视觉设计。

• New Values and Functions in CSS：本文列举了 CSS 中的一些新属性值和函数，帮助开发者掌握最新的 CSS 技术。关键词：CSS、新值、新函数、前端技术。

• Selecting Previous Siblings：本文介绍了如何使用 CSS 选择前一个同级元素，并提供了适用的场景和示例。关键词：CSS、同级元素选择、兄弟选择器、前端技巧。

• Multiple Anchors：讨论了在一个页面中使用多个锚点的方式，并解释了如何确保页面导航的流畅性。关键词：CSS、多个锚点、页面导航、用户体验。

• Making Orbit Animations with CSS Custom Properties：本文展示了如何使用 CSS 自定义属性实现轨道动画，提升网页的动态效果。关键词：CSS、轨道动画、自定义属性、网页动画。

• How to Use CSS to Improve Web Accessibility：探讨了如何通过 CSS 改善网页的无障碍设计，使网站对更多用户群体友好。关键词：CSS、无障碍设计、用户体验、可访问性。

JavaScript

• Oracle, it’s time to free JavaScript.：文章探讨了 JavaScript 的开源现状，并呼吁社区推动其进一步开放和自由使用。关键词：JavaScript、开源、自由使用、前端社区。

• Math4Devs — List of mathematical symbols with their JavaScript equivalent.：提供了一个数学符号与 JavaScript 等价代码的对照表，帮助开发者在实现数学计算时更加高效。关键词：数学符号、JavaScript、数学计算、开发工具。

• Leaflet adoption guide: Overview, examples, and alternatives：介绍了 Leaflet 库的使用指南，包括示例和替代方案，帮助开发者轻松实现地图功能。关键词：Leaflet、地图库、示例、替代方案。

• React • Migrating to React 19 using react-codemod：介绍了如何使用 react-codemod 工具迁移至 React 19，详细解释了过程中的步骤和注意事项。关键词：React 19、react-codemod、迁移、前端工具。

  • [Frontend Schism: Will React Server Components Destroy

React?](thenewstack.io/frontend-sc… React Server Components 是否会破坏 React 生态系统的争议，分析了该技术的利弊。关键词：React Server Components、React、前端生态、争议。

• React Mindset: How New React Developers Should Think：本文介绍了新手 React 开发者应具备的思维方式，帮助他们更快上手并掌握核心概念。关键词：React、新手开发者、思维方式、前端入门。

• Vue • How to build scalable micro-frontends with Vike and Vite：本文介绍了如何使用 Vike 和 Vite 构建可扩展的微前端架构，涵盖了开发、部署等关键步骤。关键词：Vue、微前端、Vike、Vite、可扩展性。

  • [Better Vue Components with TypeScript 12 examples]：本文通过 12 个示例，展示了如何结合 TypeScript 优化 Vue 组件开发，提升组件的可靠性和可维护性。关键词：Vue、TypeScript、组件优化、前端开发。