前端&AI技术双周刊-2024.05.30

NodeJS

• Node v22.2.0
  虽然从功能角度来看，这次发布没有 22.0 或 22.1 那么重要，但修复了许多小错误，对核心开发体验进行了微调，使 Node 的内置 ESLint 规则准备好适用于 ESLint v9，以及添加了 –inspect-wait 标志，使调试器在代码执行的最开始阶段等待连接，以便进行调试。

JavaScript

• Angular v18
  Angular v18发布，内容包括实验性地支持 zoneless 方案以提升开发体验和性能、文档站点更新为Angular.dev、支持Material 3 组件库、可延迟视图、服务器端渲染改进等。

CSS

• The Modern Guide For Making CSS Shapes
  文章介绍了使用CSS创建图案的方法，强调如何使用干净、可重用的代码。同时探索实现了多种常见CSS形状图案，并提供了不同的CSS技巧和技术方案。

• The Times You Need A Custom @property Instead Of A CSS Variable
  文章介绍了CSS中自定义属性和CSS变量的区别，并通过实例展示了自定义属性在复杂动画设计中的优势，同时介绍了包括定义语法、初始值和继承等特性。

AI 资讯

• ChatTTS
  ChatTTS是专门为对话场景设计的文本转语音模型，例如LLM助手对话任务。它支持英文和中文两种语言。最大的模型使用了10万小时以上的中英文数据进行训练。在HuggingFace中开源的版本为4万小时训练且未SFT的版本.

• Chrome 126 将内置集成大型语言模型
  Chrome 126 开始将内置集成 Gemini Nano，用户使用 Gemini Nano 可以实现翻译、转录等功能，同时 Chrome DevTools 中 Gemini 可以辅助进行chrome调试。

拓展阅读

• How to document your JavaScript package
  在大型代码仓库迭代过程中，代码文档的维护往往是最令头疼的事情。这里介绍了如何使用JSDoc来编写与代码耦合的文档，并且保持与代码变更同步更新，同时生成的文档可以被转化为多种格式，如HTML、PDF等，以满足不同用户的需求

• Chrome DevTools JS性能分析指南
  这是一个使用Chrome DevTools挖掘性能问题的一次实操指南

• City in a Bottle: Raycasting in 256 Bytes
  Frank以用最少量的JavaScript制作出令人惊叹的视觉演示而闻名，这次也不例外。这次他在体积仅 256 Bytes的文件中实现了射线投射引擎和城市生成器，并分享了其原理和实现过程。

• Speed Up Your Playwright Scripts with Request Interception
  本文介绍了如何使用Playwright的请求拦截功能来加速e2e测试的执行速度。通过拦截不必要的网络请求，可以减少测试运行时间，提高测试效率。