New week, check out what happened last week!

This article was first published on wechat public account: Front-end Charging Treasure

Welcome to add my wechat: cug-gz

Anecdotes of science and technology

1. New ECMAScript proposal: Type as annotation

On March 10, TypeScript posted on social platforms asking, what if you could support types directly in JavaScript? We’re exploring bringing optional type syntax to the JavaScript language!

They say the “type as comment” proposal means that browsers can run T-checked code directly (even if they don’t do any type checking). This means a better editing experience and faster iterations. Hopefully, this proposal will make coding easier for TypeScript and JavaScript users of all sizes.

This is a syntax proposal for the new stage0, which has not been submitted to TC39 yet.

Proposal address: github.com/giltayar/pr…

2. The new Chrome on Mac is faster than Safari

On March 8th, the Chrome team posted on the Chromium blog that the latest version of Chrome M99 has scored a record 300 points on Apple’s Speedometer web benchmark.

It’s 7% faster than Safari on Macs, and since its launch on M1-based Macs in late 2020, Chrome is 43% faster than it was 17 months ago. Speedometer is a web response testing tool developed by Apple WebKit team, simulating various interactions between users and web pages. Chrome’s passing is a milestone, as Safari is most certainly ahead of the pack as it is a test tool made by Apple’s WebKit.

According to the Google team, the V8 Sparkplug compiler and short built-in calls are the two main reasons for Chrome’s recent speed increase. Sparkplug generates efficient code with low compilation overhead, and the V8 JavaScript engine improves performance by avoiding indirect jumps when calling functions.

Chrome 99 will be the last double-digit release, Chrome 100 is already available in the developer channel and will be available later this month.

Details: blog.chromium.org/2022/03/a-n…

Update the Courier

1. React 18 RC Is officially released

React 18 was released as a release candidate (RC) on March 8. A full production release of React 18 seems imminent. React has published a blog detailing how to upgrade to the React 18 release candidate.

Details: zh-hans.reactjs.org/blog/2022/0…

2. Node.js V17.7.0 is released

Node.js v17.7.0 was released on March 9th with the following major updates:

  • Add KeyObject. Prototype. The equals method;
  • Add new options to net.Socket and Net. Server
  • Add Bryan English;
  • Allows Inspector to be initialized in env;
  • Upgrade NPM to 8.5.2;
  • Update nGHTTp2 to 1.47.0.

Updated details: nodejs.org/en/blog/rel…

3. Chrome 100 Beta is officially released

Chrome 100 is now in Beta, with both Chrome and Firefox set to release version 100 on March 6. This release comes with two new apis, including the multi-screen window placement API and the digital goods API, as well as some feature updates. The official release of Chrome 100 is expected at the end of March.

Among other things, Chrome 100 will have new ICONS, the mobile version will eliminate the data-saving compact mode, the Android version will introduce an optional confirmation dialog that closes all tabs at once, and a download information icon in the top taskbar.

Details: developer.chrome.com/blog/new-in…

Trend of open source

Here’s a look at the hot front-end projects on GitHub this week.

1. type-challenges

Type-challenges is a TypeScript collection of gymnastic poses. The purpose of this project is to give you a better understanding of the TS type system, write your own type tools, or just enjoy the challenge! I also hope to create a community where you can ask questions you have encountered in real situations, or help others answer questions – these questions may also be selected as part of the question bank!

Star ⭐ : 14.1 k

This week Star⭐️ : 683

Github:github.com/type-challe…

2. discord.js

Discord. Js is a powerful Node.js module that allows you to easily interact with the Discord API.

Discord. Js has the following features:

  • Object-oriented;
  • Predictable abstraction;
  • High performance;
  • 100% coverage of the Discord API.

Star ⭐ : 18.3 k

This week Star⭐️ : 731

Github:github.com/discordjs/d…

3. react-query

React -query is a hook for getting, caching, and updating asynchronous data in React.React Query features:

  • Remove a lot of complex and misunderstood code from your application and replace it with a few lines of React Query logic;
  • Make applications easier to maintain and build new functionality without worrying about connecting to new server state data sources;
  • Have a direct impact on users by making applications feel faster and more responsive than ever before;
  • Saves bandwidth and improves memory performance.

Star ⭐ : 26.1 k

This week Star⭐️ : 358

Github:github.com/tannerlinsl…

4. remotion

Remotion is a library that lays the foundation for creating videos programmatically using React.

Why create videos in React?

  • Leverage Web technologies: use all CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: using variables, functions, apis, math, and algorithms to create new effects;
  • Leverage React: Reusable components, powerful composition, quick refresh, package ecosystem.

Star ⭐ : 11.9 k

This week Star⭐️ : 1110

Github:github.com/remotion-de…

5. MarkText

MarkText is a simple and elegant open source Markdown editor that focuses on speed and usability.

MarkText has the following features:

  • Live preview (what you see is what you get) and a clean and concise interface make for a distraction-free writing experience.
  • Support CommonMark and GitHub converged Markdown specifications.
  • Markdown extensions such as mathematical expressions (KaTeX), front Matter, and emoji.
  • Supports paragraph and inline style shortcuts to improve your writing efficiency.
  • Output HTML and PDF files.
  • Various topics: Cadmium Light, Material Dark, etc.
  • Various editing modes: source code mode, typewriter mode, focus mode.
  • Paste images directly from the clipboard.

Star ⭐ : 30.1 k

This week Star⭐️ : 412

Github:github.com/marktext/ma…

Tools recommended

Here are six recommended data visualization libraries for React.

1. Victory

Victory is a collection of composable React components for building interactive data visualizations. This is a great choice for implementing graphs and charts in the React application, which includes great features such as brushes and zooming.

GitHub:github.com/FormidableL…

2. kepler.gl

Kepler.gl is a high-performance, data-neutral web-based application for visual exploration of large geolocation data sets. It is also a React component that uses Redux to manage its state and data flow. It can be embedded in other React-Redux applications and is highly customizable.

GitHub:github.com/keplergl/ke…

3. fusioncharts

FusionCharts is a JavaScript charting library that provides over 100 charts and over 2,000 maps for Web and mobile applications. All visualizations are interactive and animated, rendered in SVG and VML (for IE 6/7/8). The software package also contains FusionTime (Time series charts), FusionWidgets (Meters, real-time charts), PowerCharts (Statistics and advanced Charts), and FusionMaps (contour geographic maps).

GitHub:github.com/fusionchart…

4. Reaviz

REAVIZ is a library of modular chart components that use React locally to render components while using D3js for calculations behind the scenes. The library provides an easy way to start creating charts without sacrificing the ability to customize.

GitHub:github.com/reaviz/reav…

5. React Vis

React Vis is a set of React components for rendering common data visualizations, such as broken line/area/bar charts, heat maps, scatter plots, contour plots, hexagon heat maps, pie and ring plots, rising sun plots, radar plots, parallel coordinates, and trees.

GitHub:github.com/uber/react-…

6. React Flow

React Flow is a library for building node-based diagrams. You can easily implement custom node types with components such as mini-maps and graphical controls.

GitHub:github.com/wbkd/react-…