前端周刊第十九期(Front end weekly issue 19)

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

大事件

  • 使用 Google 的 CrUX 比较 JS 框架的性能——Chrome用户体验报告 ( CrUX ) 是从真实世界的 Chrome 用户收集的用户体验指标数据集,可以使用它来分析和比较不同 UI 框架的性能配置文件
  • Meta 将 Jest 项目转移到 OpenJS 基金会——Meta,née Facebook,在 10 多年前创建了现在流行的 Jest JavaScript 测试框架,虽然它将在内部继续使用,但他们现在认为它“功能完整”,因此认为它可能会蓬勃发展在更广泛的社区中得到更好的管理。
  • 关于 React 即将推出的useEventHook的思考——用于新的基本 React 钩子或定义一个“看到”新的 props/state 但具有稳定函数标识的事件处理程序。

文章

  • 使用 Web 音频 API 构建乐器 — 我们在前端领域最喜欢的作家之一回来了,她简单地介绍了她如何构建Keyboard Accordion,这是一种基于 Web 的全音阶手风琴(我很难以任何连贯的方式演奏它一切,但听起来很棒)。
  • 了解您的浏览器的性能分析器 — 如果您的浏览器开发工具中的性能选项卡看起来有点吓人,那么本文试图总结您需要了解的关于它所显示内容的绝对基础知识。
  • JavaScript 开发人员从 0% 到 80% 的 Rust – 如果关于用 Rust (重新)编写 JavaScript 工具的永无止境的消息还没有让你感到厌倦,也许你想知道如何从 JS 的角度学习 Rust。Daniel Bulant 的Rust 基础,从高级程序员的角度来看,也是一个很好的解释者。
  • 使用 PyScript 在浏览器中运行 Python – 从 Rust 到 Python,我们开始了。最近发布的PyScript提供了一种在网页上编写 Python 代码的简单方法,就像您现在编写 JavaScript 一样。这个 8 分钟的截屏视频稍微展示了一点。
  • 用 JavaScript 制作一个基本的“落沙”游戏 – 一个平静而平和的教程,其中包含贯穿始终的示例。

框架发布

  • Wild Wild Path 3.0 – 使用路径和查询挖掘对象。
  • GraphQL Yoga 2.0 – 完整的 GraphQL 服务器功能。
  • Hexo 6.2.0 – Node.js 博客框架。
  • graphql-schema-linter 3.0 – 验证 GraphQL 模式定义。
  • pnpm 7.1.0
  • Solid 1.4 – 很棒的声明式 UI 库。

代码和工具

  • InfiniteGrid 4.3:在网格布局上无限排列卡片元素:非常成熟和成熟,可以轻松创建由不同大小的卡片元素组成的网格。它也适用于您选择的框架,并且在桌面和移动设备上都很满意。
  • blursort 1.9: Fast Fuzzy Search Library:灵感来自 Sublime Text 中的模糊搜索。查看现场示例- 确实感觉很快。
  • Parvus:无依赖的可访问灯箱:我喜欢它所说的不要在网页上使用叠加层,但如果必须,使用它!有一个 CodePen 示例。
  • crypto-random-string 5.0:生成加密强随机字符串:例如:cryptoRandomString({length: 10})可能会返回2cf05d94db(虽然我真的希望你尝试它时不会返回,否则它会失败)。现在可以在 Node.js 和浏览器中使用。
  • Reagraph: WebGL Graph Visualizations for React:一个在底层使用 WebGL 的高性能网络图形可视化库。您可以使用的基本示例。
  • DFlex:适用于所有 JS 框架的拖放库:这是一个原生 JavaScript 解决方案,专注于良好的性能和易于实现。在这里尝试一些演示。
  • nve 15.0:使用特定的 Node.js 版本运行事物:使用特定版本(或多个版本)的 Node.js 轻松执行文件、命令或 REPL。例如,您可以一次运行npm test多个版本。
  • actions/github-script:用 JavaScript 编写 GitHub API 脚本的工作流程:如果你想编写通过 GitHub API 执行操作的 GitHub 操作,这可以让你的生活更轻松。
————————

Front end weekly publishes major events, articles and tutorials related to front-end technology every week, version updates of some frameworks, as well as codes and tools. It is published regularly every week. You are welcome to pay attention and reprint.
If the external chain cannot be accessed, follow the official account front end weekly view , and there are solutions

Major events

  • Compare the performance of JS framework using Google’s crux – Chrome user experience report (crux) is a user experience indicator data set collected from real-world chrome users. It can be used to analyze and compare the performance profiles of different UI frameworks
  • Meta transferred the jest project to the openjs foundation – meta, n é e Facebook. It created the popular jest JavaScript testing framework more than 10 years ago. Although it will continue to be used internally, they now think it is “functional and complete”, so they think it may flourish and be better managed in the wider community.
  • Thoughts on the upcoming useeventhook of react — for a new basic react hook or defining an event handler that “sees” a new props / state but has a stable function ID.

article

  • Building musical instruments using the web audio API – one of our favorite writers in the front-end field came back and briefly introduced how she built the keyboard accordion, a web-based diatonic accordion (it’s hard for me to play everything in any coherent way, but it sounds great).
  • Understand your browser’s performance analyzer – if the Performance tab in your browser development tool looks a little scary, this article attempts to summarize the absolute basics you need to know about what it displays.
  • JavaScript developers from 0% to 80% of rust – if you’re not bored with the endless news of using rust to (RE) write JavaScript tools, maybe you want to know how to learn rust from a JS perspective. Daniel bulant’s rust foundation is also a good interpreter from the perspective of senior programmers.
  • Run Python in the browser using pyscript – from rust to python, let’s start. The recently released pyscript provides an easy way to write Python code on Web pages, just as you write JavaScript now. This 8-minute screenshot shows a little bit.
  • Make a basic “falling sand” game with JavaScript – a calm and peaceful tutorial with examples throughout.

Framework release

  • Wild wild path 3.0 – mining objects using paths and queries.
  • GraphQL Yoga 2.0 – 完整的 GraphQL 服务器功能。
  • Hexo 6.2.0 – Node.js 博客框架。
  • graphql-schema-linter 3.0 – 验证 GraphQL 模式定义。
  • pnpm 7.1.0
  • Solid 1.4 – great declarative UI library.

Code and tools

  • Infinitegrid 4.3: unlimited arrangement of card elements on the grid layout: it is very mature and mature, and it is easy to create a grid composed of card elements of different sizes. It also applies to the framework of your choice and is satisfactory on both desktop and mobile devices.
  • blursort 1.9: Fast Fuzzy Search Library:灵感来自 Sublime Text 中的模糊搜索。查看现场示例- 确实感觉很快。
  • Parvus: accessible light box without dependency: I like what it says. Don’t use overlay on Web pages, but use it if necessary! There is a codepen example.
  • Crypto random string 5.0: generate encrypted strong random string: for example, cryptorandom string ({length: 10}) may return 2cf05d94db (although I really hope you won’t return when trying it, otherwise it will fail). Now it can be on node JS and browser.
  • Reagraph: WebGL Graph Visualizations for React:一个在底层使用 WebGL 的高性能网络图形可视化库。您可以使用的基本示例。
  • Dflex: drag and drop library for all JS frameworks: This is a native JavaScript solution that focuses on good performance and ease of implementation. Try some demonstrations here.
  • NVE 15.0: use specific node JS version running things: using a specific version (or multiple versions) of node JS to easily execute files, commands, or repl. For example, you can run multiple versions of NPM test at once.
  • actions/github-script:用 JavaScript 编写 GitHub API 脚本的工作流程:如果你想编写通过 GitHub API 执行操作的 GitHub 操作,这可以让你的生活更轻松。