Anecdotes of science and technology

1. The Node.js trademark is transferred to the OpenJS Foundation

For the past six years, the OpenJS Foundation has been granted a free perpetual license to use the Node.js trademark and logo.

On February 14, 2022, the OpenJS Foundation, which provides vendor-neutral support for the continued growth of the open Source JavaScript community, announced the acquisition of ownership of the Node.js logo and trademark.

As of today, the OpenJS Foundation will assume the ongoing management and maintenance of the Node.js trademark. Ownership and management of the Node.js trademark has been transferred from Joyent to the OpenJS Foundation. The rules governing the use of node.js trademarks will now be consistent with those of all other OpenJS Foundation projects. For the contributors, nothing will change.

Learn more: openjsf.org/blog/2022/0…

2. Spotify has announced that it will open its App analytics tool

Spotify has announced the open source of its App analytics tool, Ruler, to help address the growing problem of App packages.

Ruler is an App analytics tool. It mimics the way Google Play uploads App bundles and generates optimized APK sizes, including download and install sizes. The Ruler can then scan the App and find the list of files in it and their sizes. It also finds all Gradle modules and dependencies that affect the size of your App. In this way, all the files in the App are grouped and the size ratio of each module and dependency in the overall App is determined for further optimization.

According to Spotify, the Android version of the App has over 1,000 Gradle modules and hundreds of third-party dependencies. And in the past six months, Ruler has helped reduce App size by more than 9%. Spotify exports App size data once a day with the latest version and uses it to track historical trends across the App as well as individual modules and third-party dependencies. It also analyzes the impact of each pull request on App size so it can provide early feedback to developers.

Open source: github.com/spotify/rul…

3. Build a C++ machine learning library from scratch with 13,000 + lines of code

The library (ML++) built by 16-year-old novak-99 has more than 13,000 lines of code covering 19 topics such as statistics, linear algebra, numerical analysis, machine learning and deep learning. He said he built the library because C++ was his language of choice, but when it came to ML front-end, C++ was used very little. This is mainly due to the lack of user support and the complexity of C++ syntax. So he decided to write a machine learning library for C++ himself.

Open source: github.com/novak-99/ML…

Update the Courier

Express.js 5.0 is now in Beta

Express.js released the first alpha version of V5.0 in 2014. After more than seven years, the first Beta was finally released on February 14, 2022.

Express is a minimum-sized flexible Node.js Web application development framework that provides a powerful set of capabilities for Web and mobile applications. Express provides streamlined basic Web application functionality without hiding the Node.js functionality you know and love.

Updated details: github.com/expressjs/e…

2. ESLint V8.9.0 is released

ESLint V8.9.0 was released on 11 February 2022. This release adds a new ES2022 environment. When enabled, it adds all ECMAScript 2022 globals (currently the same as ECMAScript 2021 globals) and automatically sets the ecmaVersion parser option to 13.

ESLint is a plug-in and configurable checker for JavaScript syntax rules and code styles. ESLint can help you write high quality JavaScript code easily.

Updated details: eslint.org/blog/2022/0…

3. TypeScript 4.6 RC release

On February 11, 2022, the TypeScript 4.6 release candidate (RC) was released, and no further changes are expected to be made to the stable version of TypeScript 4.6 other than critical bug fixes.

You can install the RC version using the following command:

npm install typescript@rc
Copy the code

The major TypeScript V4.6 updates are as follows:

  • Allows code to be used in constructors before super ();
  • Control flow analysis of unstructured discriminant union;
  • Improved recursive depth checking;
  • Improved index access reasoning;
  • Control flow analysis of related parameters;
  • --targetOptions now support ES2022;
  • More syntax and binding errors in JavaScript
  • Type script trace analyzer

TypeScript is a new language from Microsoft that is based on JavaScript and is a superset of JavaScript that is ultimately compiled by tools.

TypeScript is compatible with JavaScript and can load JavaScript code and run it. TypeScript’s improvements over JavaScript include: annotations that allow the compiler to understand supported objects and functions. The compiler removes annotations without adding overhead. Add a complete class structure to make it an entirely new object-oriented language.

Update details: devblogs.microsoft.com/typescript/…

4. Next. Js 12.1 released

On February 18, 2022, Next. Js 12.1 was officially released.

You can install version 12.1 using the following command:

npm i next@latest
Copy the code

Next. Js 12.1 has the following major updates:

  • ISR on Demand (beta) : Revalidate the page now using getStaticProps.
  • Extended support for SWC: Styled – Components, Relay, etc.
  • Next/JEST plug-in: Use SWC’s zero-configuration JEST support.
  • Shrinkage using SWC (RC) is faster: shrinkage is 7 times faster than Terser.
  • Self-hosted improvements: Docker images have shrunk by about 80%.
  • React 18 and Server Component (Alpha) : Improved stability and support.

Next. Js is a small framework for general-purpose JavaScript Web applications for server rendering, built on React, Webpack, and Babel, which provides powerful support for the site.

Updated details: nextjs.org/blog/next-1…

5. Remix V1.2.0 is released

On February 16, 2022, Remix V1.2.0 was officially released.

The major updates to Remix V1.2.0 are as follows:

  • New feature: serverBuildTarget
  • New feature: Single file server build
  • What’s new: Node’s built-in browser plugin
  • New: Use ESM packages only on Node
  • Experimental features: Deno adapter

Remix is a new full-stack JavaScript framework that does away with static web site generation and does a few other things that are different from other frameworks we commonly use. It relies on React to render the user interface, and if you’re familiar with next.js, you’ll notice a lot of similarities. However, it also has its own characteristics, such as nested routines, data acquisition and data saving processing and error handling.

Updated details: github.com/remix-run/r…

Trend of open source

Here’s a look at some of the hot open source front-end projects on GitHub this week

1. Mermaid

Mermaid is a javascript-based charting tool that enables the creation and dynamic modification of charts by parsing the text syntax of the Markdown class. The main purpose of Avi was to keep documentation up to date with development.

Star ⭐ : 43.5 k

This week Star⭐️ : 3051

Making: github.com/mermaid-js/…

2. Font-Awesome

Font Awesome is a great set of icon Font libraries and CSS framework that provides scalable vector ICONS that you can change with all the features provided by CSS, including size, color, shadow, or any other supported effects.

Star ⭐ : 68.7 k

This week Star⭐️ : 878

Github:github.com/FortAwesome…

3. Mantine

Mantine is a React component library with native dark theme support that allows you to build fully functional, accessible Web applications faster than ever before. Mantine includes more than 120 customizable components and hooks.

Star ⭐ : 6 k

This week Star⭐️ : 643

Making: github.com/mantinedev/…

4. 3d

3D is a Three. Js 3D project, including bing Dwen Dwen 🐼, digital city 🏙, 3D portrait 👤, car model 🚗, Legend of Zelda 🏙 and some INTERESTING 3D demo pages.

Star ⭐ : 1 k

This week Star⭐️ : 332

Github：github.com/dragonir/3d

5. Solid

Solid is a declarative JavaScript library for creating user interfaces. It does not use the virtual DOM. Instead, it chooses to compile its templates as real DOM nodes and wrap the updates in fine-grained responses. This way, when your status is updated, only the code that depends on it runs.

Solid has the following characteristics:

  • High performance – consistently top recognized BENCHMARKS for UI speed and memory utilization;
  • Powerful – composable reaction primitives combined with the flexibility of JSX;
  • Pragmatic – Reasonable and tailored apis make development fun and easy;
  • Productivity – Ergonomics and familiarity make it a breeze to build something simple or complex.

Star ⭐ : 14.4 k

This week Star⭐️ : 292

Making: github.com/solidjs/sol…

Tools recommended

Here are five recommended PDF libraries for React projects.

1. React-pdf/renderer

React- PDF/Renderer is a widely used library for creating PDF files on browsers and servers. Some useful features of the library are as follows:

  • Supports multiple styles and CSS properties.
  • Better control of documents through the usePDF hook API.
  • Provide node apis.
  • Great documentation.
  • Fast and efficient.
  • Highly customizable and easy to use.

​

GitHub:github.com/diegomura/r…

2. @mikecousins/react-pdf

@mikecousins/ React-pdf is a component that renders PDF documents using pdF.js. This library uses a Hook call to usePdf to render the PDF. We need to pass several parameters through this Hook:

  • The URL of the file-pdf file.
  • Page – Indicates the page to display. The default value is 1.
  • Scale – allows you to zoom in and out of PDF. The default value is 1.
  • OnDocumentLoadSuccess – You can define a callback function that will be called after the PDF document data is fully loaded.
  • OnDocumentLoadFail – lets you define a callback to be called when a PDF document data loading error occurs.
  • OnPageLoadSuccess – lets you define the callback that will be invoked after the PDF page data has been loaded.
  • OnPageRenderSuccess – lets you define a callback that will be executed after the PDF page is fully rendered into the DOM.

GitHub:github.com/mikecousins…

3. React-file-viewer

The React-file-viewer is an extensible file viewer for Web applications that support PDF, images, CSV, XSLX, and DOCX.

GitHub:github.com/plangrid/re…

4. @phuocng/react-pdf-viewer

React-pdf-viewer is a React component written in TypeScript and driven entirely by the React hook. It has some features:

  • Files that support password protection.
  • Zoom: Supports custom levels, such as actual size, page size, and page width.
  • Page to page navigation.
  • Search text.
  • Preview page thumbnails.
  • View and navigate directories.
  • List and download attachments.
  • Rotation and many scrolling modes.
  • Text selection and manual tool modes.
  • Full screen mode.
  • You can open a local file (for example, drag and drop a local file to view it.)
  • Download the file and print it.
  • View document properties.
  • Support for SSR.

Note: Only versions of React 16.8+ and TypeScript 3.8+ can use react-pdF-viewer.

GitHub:github.com/phuoc-ng/re…

5. React-pdf

The above react-pdf /renderer was specifically used to create PDFS. React-pdf is used to preview the PDF.

React-pdf provides a React component API that allows you to open PDF files and render them using pdF.js. It has some useful features:

  • Easy to use;
  • Supports custom events.
  • Multiple rendering methods.
  • Support text selection and annotation.
  • Cross-browser compatibility.
  • Accessibility — React-PDF does more than render PDFS as images. But it can also serve as a layer of visible text that screen readers can master, making PDF content easier for visually impaired people to use.

GitHub:github.com/wojtekmaj/r…

The article recommended

1. Fun and useful CSS tips

This article covers some useful and fun CSS tips.

Article link: mp.weixin.qq.com/s/Gos-IvUWt…

2. JavaScript is not what it used to be

This article introduces the development of JavaScript, as well as the advantages and disadvantages of JavaScript.

The article links: mp.weixin.qq.com/s/MZFlAyd4e…

3. 27 front-end animation libraries to make your interactions cool

This article introduces some common front-end animation libraries to make your page interaction more cool!

The article links: mp.weixin.qq.com/s/czvnS0c7y…

4. Best practices for JavaScript naming conventions

This article covered best practices for naming conventions in JavaScript, including naming variables, booleers, functions, constants, classes, components, files, and more.

Article link: mp.weixin.qq.com/s/4Nr5Y-ngF…