A weekly collection of front-end (but not limited to) articles, news, open source projects, tools, and more, updated every Monday.

📰 News

Electron 14.0.0 release

Electron 14.0.0 has now been released with a number of updates and the termination of support for Electron 11.xy.

This update brings Chromium 93, Node.js 14.17, and V8 9.3.

Github.com/electron/el…

github.dev

Github has a new feature that allows users to directly open the online version of the vscode editor by replacing the url “.com “with”.dev “.

Mp.weixin.qq.com/s/fRdEkLvxN…

📖 articles

Close reading catching all Asynchronous Errors

Mp.weixin.qq.com/s/mgSJHgp-R…

Interactive learning tools for front-end developers

I heard that you can learn better by playing games.

Here is a collection of code tools and games to help you learn CSS, JavaScript, SQL, React, Vim, regular expressions, Jamstack, and more.

www.smashingmagazine.com/2021/09/int…

You can understand the VUE3 principle in a few episodes

Mp.weixin.qq.com/s/fsyqkj5Fh…

Learn the way to Webpack5

This article will introduce how to optimize the Webpack project from the perspectives of optimizing the development experience, speeding up the compilation speed, reducing the packaging volume, and speeding up the loading speed.

Mp.weixin.qq.com/s/pwynolH0p…

It’s enough to read this article about authentication

Mp.weixin.qq.com/s/-Yf6a58H7…

E-commerce minimum inventory – SKU and algorithm implementation

At present, as long as there are commodities in the business of e-commerce platform, it is inevitable to encounter SKU functions. From theory to practice, from product creation to product purchase, this article will walk you through the implementation of SKU related “core algorithms”.

Mp.weixin.qq.com/s/A2BLVnhas…

You can’t possibly know the skeleton screen gameplay 🐶

Juejin. Cn/post / 699467…

All in One: Project-level MonorePO policy best practices

Segmentfault.com/a/119000003…

Does your tree-shaking really work?

In this article, we will discuss the current situation of Tree-shaking, why tree-shaking is still difficult, and finally summarize some ways to improve tree-shaking performance.

Jishuin.proginn.com/p/763bfbd2d…

type-challenges

A TypeScript type challenge collection that provides a wide range of topics, from easy to hard, to learn by practice.

tsch.js.org/

Github.com/type-challe…

🛠 Tools and software

Mafs

Mathematical visualization components.

mafs.dev/

react-pdf-highlighter

React-pdf-highlighter is a component for annotating PDF documents. It is based on PDF.js and supports text and box highlighting.

Online examples:

Agentcooper. Making. IO/react – PDF – h…

www.npmjs.com/package/rea…

JZZ.js

Jzz.js can send, receive, and play MIDI messages. In simple terms, jzz.js can output MIDI signals to control electronic devices to play, or receive MIDI information to play music.

MIDI is the most widely used standard format for music in the music editing world and can be called “computer readable sheet music”.

Github.com/jazz-soft/J…

smartcrop.js

Smartcrop. Js captures the best and most important part of an image.

Online examples:

29 a. ch/sandbox / 201…

Github.com/jwagner/sma…

Fiddly

Turn your project’s readme. md into a nice, simple HTML page that will make a nice project home page when deployed on the server.

fiddly.netlify.app/

bundle

A quick NPM package size check tool.

bundle.js.org/

TypeIt

Powerful typing effect plugin, but commercial use will have to pay.

typeitjs.com/

FFCreator

A high speed short video processing library based on Node.js

FFCreator is a lightweight, flexible video creation library based on Node.js. Everyone can make video.

Example 1 Example 2

features

  • Developed entirely based on Node.js, it is very easy to use and easy to extend and develop.
  • Few dependencies, easy to install, low requirements for machine configuration.
  • Video production is extremely fast, a 5-minute video only takes 1-2 minutes.
  • Support nearly 100 scenes cool transition animation effects.
  • Supports images, sounds, video clips, and text.
  • Support subtitle component, which can combine subtitle and voice TTS to synthesize audio news.
  • Support simple (extensible) virtual anchor, you can make your own virtual anchor.
  • Contains animate. Css90% animation effects that can convert CSS animations to video.
  • The FFCreatorLite version, with its faster compositing, is also a good choice.

Github.com/tnfe/FFCrea…

react-cosmos

React – Cosmos is a sandbox environment for UI component development and testing.

Online demo:

reactcosmos.org/live-demo/

Github.com/react-cosmo…

The weekly is published on GitHub. Please subscribe to:

My weekly