前端周刊第十一期

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

大事件

  • 大事件!大事件!浏览器可能支持运行 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。