前端&AI技术双周刊-2024.05.17

前端技术

• Deep Dive into Rspack & Webpack Tree Shaking
  文章详细解释了三种主要的 Tree Shaking 优化方式：usedExports 优化、sideEffects 优化和 DCE 优化。这些优化方式可以相互影响，进一步减少最终代码的体积并改变变量使用关系。

• Seamless drag and drop between applications
  演示了如何使用浏览器 API 创建更优雅的拖放体验，甚至可以跨不同的浏览器窗口或 IFRAME 工作，并对实现思路进行了阐述。主要使用了 pragmatic-drag-and-drop 来完成。

• TypeScript 5.5 Beta
  TypeScript 5.5 Beta 发布，新增功能包括推断类型谓词、恒定索引访问的控制流缩小等。同时，禁用了一些在5.0中已弃用的功能。同时更尊重文件扩展名和 package.json 中的其他模块模式，对装饰器的解析更将加严格。

CSS

• Time-based CSS Animations
  本文讨论了使用时间作为动画 timing function的可行性，此前 CSS 缺乏复杂的数学计算能力，但是 CSS 现在已具备足够的数学函数支持。因此作者建议重新考虑使用 time-based CSS 动画。文章还介绍了如何使用 CSS Houdini API 来定义一个跟踪时间属性，并如何使用 ::after 来实现动画。此外，文章还讨论了如何控制帧率以及如何保持动画的更新频率为60 FPS。

• Sliding 3D Image Frames In CSS
  介绍了如何使用CSS技术为图片添加3D效果和滑动过渡，而无需修改HTML标记。同时作者通过一些巧妙的CSS技巧，演示了如何在单个img标签上实现这一效果。

• Managing User Focus with :focus-visible
  这篇文章主要介绍了如何使用:focus-visible来在元素获得焦点时为用户提供视觉指示。此外，文章还提供了如何移除元素焦点以及确保为特殊用户提供备用样式的方法。通过这些技巧，开发者可以创建更加用户友好的表单界面。

Node.js

• Poor Express Authentication Patterns in Node.js and How to Avoid Them
  本文指出在Node.js和Express应用程序中常见的糟糕的身份验证模式，并给出了如何避免这些问题的建议。文章通过具体代码片段举例说明问题所在，并给出了解决方案。

• Node v22.1.0
  距离Node 22.0不到两周的时间，Node 22.1 推出了可选的磁盘上代码缓存功能，可以依靠V8 的缓存来加速编译。这将会是是一项很具有潜力的性能优化措施。

AI 资讯

• openAI 发布新旗舰模型 GPT-4o
  openAI 发布全新旗舰模型 GPT-4o，它可以在音频、视觉和文本中进行实时推理，接受文本、音频和图像的任何组合作为输入，并生成文本、音频和图像的任何组合进行输出。与现有模型相比，它在视觉和音频理解方面尤其出色。目前，GPT-4o 的文本和图像功能已经开始在 ChatGPT 中逐步推出，用户可以在 ChatGPT 平台上免费体验到 GPT-4o 的相关功能，但免费版有使用次数限制，Plus 用户可以享受到 5 倍的调用额度。

工具推荐

• 工具推荐: Better SSE
  Better-SSE：一个 SSE 库——服务器发送事件（SSE）是一种浏览器支持的API，它允许服务器端进程在不使用 WebSockets 的情况下实时向前端发送事件。Better-SSE 能够帮助开发者在 Node.js 中使用 SSE 变得更加顺畅。

拓展阅读

• Deno: Digging Tunnels out of a JS Sandbox
  介绍了Deno的安全模型和沙箱机制，并探讨了如何通过符号链接绕过沙箱的限制，以及如何利用竞争条件获得额外的运行权限和代码执行。文章还提供了Deno的配置和交互式shell的使用方法。