Anecdotes of science and technology

1. MDN releases the new homepage, design and LOGO

On March 1, 2022, THE MDN website launched a new design. The new home page is built to focus on the core concepts of community and simplicity, making improved search a central element of the page, while also showing users the most recent and most-read articles. In addition, the new home page will showcase the latest developments in the MDN GitHub content repository and add a contributor spotlight to highlight MDN contributors.

New LOGO:

See: hacks.mozilla.org/2022/03/a-n…

2. React, Node.js side with Ukraine

React and Node.js recently posted a quote on their website with a “political point of view” in response to the current international situation.

Shortly after React expressed its position, its GitHub issue page was flooded in various languages. In the midst of the debate, Node.js removed its position from its official website and React closed its issue.

React and Node.js, as far-reaching open source projects, should remain neutral and not take sides in any form. What do you think about that?

3. Apple/Google/Microsoft/Firefox team up to solve Web compatibility issues

Browser makers Apple, Google, Microsoft and Mozilla, along with software companies Bocoup and Igalia, are working together on a Web compatibility specification called Interop 2022, To render Web technologies and code uniformly across devices and browsers.

Fundamentally, Interop 2022 is an evolving metric, generated by a set of automated tests designed to assess support for some of the Web standards that are most important to Web developers. The Interop 2022 dashboard will be updated throughout the year, showing browser engineers’ progress in fixing bugs, implementing new features and improving testing.

Interop 2022 has selected ten new areas of focus:

  1. Cascading layer
  2. Color space and function
  3. Containment
  4. Dialog element
  5. Form to repair
  6. rolling
  7. grid
  8. Layout and coding
  9. Viewport unit
  10. The network is compatible with

See: webkit.org/blog/12288/…

Update the Courier

1. TypeScript 4.6 is released

On February 28, 2022, Daniel announced TypeScript 4.6.

Here are the main new features in TypeScript 4.6:

  • 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/…

2. Nest.js 8.4 is officially released

On March 1, 2022, Nest.js V8.4.0 was officially released. This update mainly supports optional dependencies in the factory provider.

Nest is a framework for building efficient, scalable Node.js Web applications. It uses modern JavaScript or TypeScript (preserving compatibility with pure JavaScript) and combines elements of OOP (object-oriented programming), FP (functional programming), and FRP (functional responsive programming). At the bottom, Nest uses Express, which makes it easy to use the various third-party plug-ins available.

Nest really solves a longstanding architectural problem with the Node.js framework, making development elegant and suitable for large projects.

Updated details: github.com/nestjs/nest…

Trend of open source

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

1. lowcode-engine

Lowcode-engine is a set of enterprise-level lowcode technology system for extended design launched by alibaba. Its characteristics are as follows:

  • The kernel engine for expansion development is refined from enterprise-class low code platform. It pursues the design concept of minimum kernel and strongest ecology
  • High quality ecological elements out of the box, including material systems, setters, plug-ins, etc
  • Perfect tool chain, support material system, setters, plug-ins and other ecological elements of the full link research and development cycle
  • Strong expansion ability, has supported nearly 100 various vertical class low code platform
  • Developed in TypeScript, complete type definition files are provided

Star ⭐ : * * * * 1.7 k

** This Week Star⭐️ : **739

Github:github.com/alibaba/low…

2. 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 the status is updated, only the code that depends on it is run.

Star ⭐ : * * * * 15.4 k

** This Week Star⭐️ : **641

Github:github.com/solidjs/sol…

3. bypass-paywalls-chrome

This project is a Web browser extension used to bypass the payment of a specified site and watch paid content for free.

Star ⭐ : * * * * 23.3 k

** This Week Star⭐️ : **754

Github:github.com/iamadamdev/…

4. Web-Dev-For-Beginners

This is a 12-week, 24-lesson course offered by Microsoft that focuses on JavaScript, CSS, and HTML basics. Each class includes pre-class and after-class quizzes, written instructions for completing the course, solutions, assignments, and more.

Star ⭐ : * * * * 42.1 k

** This Week Star⭐️ : **1108

Github:github.com/microsoft/W…

5. JavaScript

The project is Airbnb’s JavaScript programming style guide.

Star ⭐ : * * * * 120 k

** This Week Star⭐️ : **778

Github:github.com/airbnb/java…

Tools recommended

Here are some popular video playing libraries to recommend.

1. Plyr

Plyr is a browser-based multimedia player developed using HTML5. Supports custom playback control and WebVTT captioning. Its characteristics are as follows:

  • Accessibility – Full support for subtitles and screen readers
  • Lightweight – only 4.8KB compressed
  • Customizable – The appearance can be adjusted as needed
  • Semanticalization – Adjust volume and progress using HTML5 input fields
  • Quick response – as you would expect
  • Audio and Video – Supports video and pure audio
  • API – Easy to use API
  • Backward compatibility – Automatically uses the built-in player if the browser does not support it
  • Full screen support – Supports native full screen and exit full screen
  • No dependencies – written using native JS, no jQuery required

Making:Github.com/sampotts/pl…

2. indigo-player

Indigo – Player is a highly extensible modern JavaScript video player. It builds on HTML5 video elements and can handle MPEG-DASH/HLS/MPEG-4. Its characteristics are as follows:

  • A strictly defined API, which makes it easy to build analytics and various other plug-ins on Top of Indigo – Player.
  • Dynamic bundle loading, automatically determine and load the required modules for playback.
  • Highly modular plug-in system that extends functionality without modifying its core.
  • Out of the box features such as subtitles, thumbnails, quality selection (if applicable)…
  • Reactive user interface.

GitHub:github.com/matvp91/ind…

3. video.js

Video.js is a web Video player built from the ground up for the HTML5 world. It supports HTML5 video and media source extensions, as well as other playback technologies such as YouTube and Vimeo (via plug-ins). It supports video playback on desktop and mobile devices.

Github:github.com/videojs/vid…

4. hls.js

HLS. Js is a JavaScript library that implements HTTP Live Streaming clients. It relies on HTML5 Video and MediaSource extensions for playback. It works by converting mPEG-2 transport streams and AAC/MP3 streams into ISO BMFF (MP4) clips. Transmuxing is performed asynchronously using the Web Worker when available in the browser. Hls.js also supports HLS + FMP4.

GitHub:github.com/video-dev/h…

5. shaka-player

Shaka Player is a JavaScript library that implements DASH client functionality. Its playback capabilities are based on HTML5 Video, MediaSource Extensions, and Encrypted Media Extensions. General DASH client functionality is difficult to implement, and DASH standards are not always aligned with the new browser apis built by DASH clients. The goal is to reduce friction and make it easier to adapt to these emerging web media streaming standards without plug-ins.

GitHub:github.com/shaka-proje…

6. xgplayer

Watermelon player is a class player with a separate component library in mind, as well as one of its UI layer video function components. What is important is that it is not only flexible in performance, but also in support of typical formats: video loading, buffering and playback formats. Especially for the efforts to play on demand in MP4, so that the video does not support the playback of 4 can show the playback format, such a way of playing at the same time, it can also achieve clear on demand and playback control, save video.

GitHub:github.com/bytedance/x…

7. DPlayer

DPlayer is a cute HTML5 bullet-screen video player that helps people easily build videos and bullet-screens.

GitHub:github.com/DIYgod/DPla…

8. chimee

Chimee is a set of extensible H5 component-based player framework open source by Qiwu Group. It is built by qiwu video cloud front-end team combined with their accumulation in business and video coding and decoding. Chimee supports MP4, M3U8, FLV and other media formats. It also helps us solve most compatibility and differentiation issues, including full screen, auto play, inline play, live decoding and other common media playback requirements. Through convenient hot-swappable plug-in development, it can meet the business side’s requirements of rapid iteration and grayscale release. So that developers can more easily and quickly complete the development of UI, advertising and other functional requirements under different business scenarios.

Github:github.com/Chimeejs/ch…