前端周刊第十一期

前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表，欢迎大家关注、转载。
<span style="color:red;">如果外链不能访问，关注公众号前端每周看，里面有解决办法</span>

大事件

• 大事件！大事件！浏览器可能支持运行 Typescript啦——今天，我们很高兴地宣布我们支持并与第三方共同合作来推进 新的 Stage 0 提案，以此为 JavaScript 带来可选和可擦除的类型语法。因为这种新语法不会改变周边代码的运行方式，所以它可以有效地充当注释。我们认为这有可能使 TypeScript 更容易、更快地用于各种规模的开发。

• Shader Park：使用 JavaScript 创建交互式 2D 和 3D 着色器——一个基于 Web 的开源平台、社区和 库，通过让您使用 JavaScript 程序化地创建着色器和 GPU 来简化神秘的着色器和 GPU 世界。这里有很多可以玩和探索的地方。注意：由于使用了 WebGL，该站点在浏览器上的负担很重，因此可能并不适合所有设备。

• Prettier 2.6 发布——流行的代码格式化工具现在可以singleAttributePerLine选择每行只放置一个属性（这在某些类型的模板中很常见），添加了 TypeScript 4.6 支持，并在各种上下文中更好地格式化 JS 代码（例如装饰器、内await联JSX，行尾注释）。

• npm 包如何用于乌克兰反对战争的抗议活动——几天前，依赖node-ipc的项目（例如 Vue CLI）的用户开始注意到一些奇怪的行为，包括文件在地理定位到俄罗斯的系统上被覆盖（或白俄罗斯）和抗议信息。这是一个复杂的故事，也是包装供应链有多脆弱的另一个提醒。如果您愿意， Register有一个更短且更具新闻性的文章。

• Deno 1.20 已发布——JavaScript / TypeScript 运行时的一个相当大的版本，具有更高的性能、用于运行基准测试和测试套件的新命令、AbortSignal 超时，以及对 V8 10.0 和 TypeScript 4.6 的升级。要是所有项目都写得像这样彻底就好了。

文章

1. How To Make a Drag-and-Drop File Uploader with Vue.js 3 — 整整四年前，我们链接到Joseph 的使用vanilla JavaScript制作拖放文件上传，但现在他又回来了最新版本的 Vue.js 面临同样的挑战。

2. 令人愉快的 React 文件/目录结构 — 我们已经介绍了许多此类文章，但对于布局项目的“正确”方式，总是有另一种观点的空间，尤其是 React 本身在这个问题上相当不以为然。

3. jQuery 源代码中的“双重分配模式” - 作者在 jQuery 的代码中发现了一种有趣的技术，并着手研究它的好处。

4. Next.js 的新官方“基础”课程 - Next.js 发布了一个新的基础课程，涵盖了 React 的基本知识、它与 Next.js 的关系以及构建第一个 Next.js 应用程序。

5. Remix vs Next.js - Remix是一个相对较新的基于 React 的全栈框架，由 React Router 背后的原始团队创建。它对更为人所知的Next.js采用了不同的方法。这是关键差异的详细指南。

6. 创建一个简单的表格排序和分页功能 - 在 JavaScript 的帮助下呈现一个可排序的分页表格。

7. TypeScript 擅长的地方的讨论 - TypeScript 的 Luke Hoban 和 Daniel Rosenwasser 的采访摘录。

8. 升级 Next.js 以实现即时性能改进 - Vercel 团队如何将 Next.js 8 演示提升到 Next.js 12 标准并在过程中看到巨大改进的案例研究。

框架发布

1. Verdaccio 5.8 – 私有 npm 注册表，现在具有可定制的 Web UI。
2. Vuetify 3.0 Beta – Vue 的材料组件框架。
3. MDX 2.1 – Markdown 中的 JSX。
4. React Menu 3.0 – 可定制的嵌套菜单组件。
5. angular 13.3.0

代码和工具

1. Peaks 1.0：与音频波形交互的 UI 组件——假设你正在构建某种音频编辑器——这就是你可能想要使用的那种控件。它也来自 BBC，这很酷。
2. Wave.js 2.0： Real Simple String Diffing — 一个音频可视化库——如果你不需要创建音频编辑器而只想要一个音乐去 wub wub，线条去摆动摆动类型的可视化，这是给你的。这里有一些现场演示。
3. Faker 6.0：在节点或浏览器中生成大量虚假数据——在维护者“流氓”的问题之后，一个社区团队接管了流行的 Faker 项目，他们的第一个主要版本现已发布，并提供 ESM 支持。v5 到 v6 迁移说明。
4. sysend.js：在同一浏览器中打开的页面或选项卡之间发送消息——一个小型库，抽象了在同一浏览器中打开的页面之间发送消息的机制。支持跨域通信，基于 localStorage 和 BroadcastChannel API。这是一个演示（如果你打开它两次）。
5. Chrome 扩展 CLI：下一个 Chrome 扩展的 CLI — 想要尽快为 Chrome 构建扩展？该工具旨在让您尽快走上正确的道路。
6. js2xml：将 JavaScript 代码转换为 XML 文档——为什么？显然，为了更容易使用 XPath 从其他地方提取东西。
7. Emoji Button：A Vanilla JavaScript Emoji Picker — 将按钮元素转换为 emoji 选择器（类似于某些操作系统提供的）。
8. Liqvid 2.1：使用 React、HTML、CSS 和 JS 创建交互式视频——现在您也可以在视频中使用 Web Animations API。