What makes the front end interesting is that there are so many new plugins and tools to explore every year. When we develop front-end applications, it’s natural to look for third-party plug-ins to help us develop more efficiently. The 50 new tools introduced in this article are quite new. They are all new projects of last year, and the time will not exceed one year. I hope you can find suitable tools to apply to your projects through my introduction.

1, the autoComplete. Js

Website address: https://tarekraafat.github.io/autoComplete.js/

Github Star 2.6K, this plug-in can be easily integrated into your project, easy to use, this plug-in has the following features:

• Native javaScript scripts
• Zero depends on
• Simple and easy to use
• Small size, compressed version only 6KB
• feature-rich
• Can be customized

2, indigo – player

Website address: https://github.com/matvp91/indigo-player

Highly extensible modern JavaScript video player, a modern JavaScript player plug-in, this player features a full range of features, can meet most of your needs, even beyond your expectations, very easy to use, out of the box. This plug-in has the following features, enough to make you move:

• Supports video selection of different resolutions
• Support subtitles
• Supports double speed playback
• Support picture in picture playback
• Add pictures and text to videos
• Support for MPEG-DASH streaming media format (MPEG-DASH + DRM)
• Supports HTTP Live Streaming (HLS) dynamic bitrate adaptive technology
• Support interspersed Google and custom ads
• Adjust the adaptive resolution for your network
• Custom video cover
• Custom keyboard function keys control player
• Supports changing the length ratio of the video container
• Initial custom video playing position

There are many more features waiting to be discovered

3, simple – the rid_device_info_keyboard

Official website: https://virtual-keyboard.js.org/

A zero-dependency library, high performance, support for custom extension of the soft keyboard plug-in, help you quickly build rich Web applications. This plug-in has the following features:

• Easy integration into Angular, React, Vue, and Vanilla projects
• Flexible setting parameters and methods, customized personalized soft keyboard
• Based on elastic box layout for easy integration and design
• Support plug-in personalization, such as autocorrect, Input Mask in a specific format
• Support for custom keyboard styles, custom special keyboards, and personalized layouts
• Support for multiple keyboard instances
• Multi-device support: PC keyboard, mobile keyboard (Android, IOS)
• Support background dark style
• Numeric keypad support
• Internationalization support, such as French, Japanese, Russian, etc

4, fslightbox. Js

Official website: https://fslightbox.com/

You can display images, add text and videos, and support thumbnail images. It is easy to integrate into existing projects, such as React and Vue.

5, Rellax. Js

Website address: https://github.com/ChrisCavs/rallax.js

A zero dependency pure native JavaScript plug-in, can help you quickly achieve scrolling parallax effect. The plugin’s performance and easy-to-use API make it easy to implement parallax effects on target HTML elements, and easily implement callbacks (when methods) using chained syntax. The core methods include: start/stop, speed, etc.

6, FrenchKiss. Js

Website address: https://github.com/koala-interactive/frenchkiss.js

Frenchkiss.js is a fast, lightweight I18n library written in JavaScript for use in browsers and NodeJS environments. It provides a simple and convenient solution for handling internationalization. FrenchKiss is by far the fastest I18N JS package available, working 5 to 1000 times faster than any other similar plug-in by jit-compiling translation and running benchmarks!

7, Moveable

Website address: https://daybrush.com/moveable/

Moveable is a native, zero-dependent javaScript plug-in that allows you to drag, resize, scale, rotate, distort, group, and even display design reference lines as you drag and drop specified HTML elements. Drag-and-drop plugin is a powerful drag-and-drop plugin to help you implement complex WEB interaction applications.

The plugin is easy to integrate with existing projects and supports integration with native projects, React, Preact, Angular, Vue, Svelte and other front-end frameworks.

8 Hotkey.

Website address: https://github.com/github/hotkey

A zero dependency set page element shortcut key operation of javaScript plug-in, this plug-in is characterized by zero dependency, easy to use, you can give links, forms, click events to set shortcut keys.

9, Freezeframe. Js

Official website: https://github.com/ctrl-freaks/freezeframe.js/

This plugin supports mouse movements, clicks, touch movements, and custom events to trigger GIF images. In addition to these features, it is only 68KB in size, zero dependency, and easy to integrate into your native, Vue, or React projects.

10, pagemap

Website address: https://github.com/lrsjng/pagemap

For long web pages for mini thumbnail map javaScript plug-ins, do not know whether you have such experience, if your website content is too long, sliding web page is not particularly difficult, especially the web a long time, you can use this plug-in, in the top right-hand corner of the page to be a mini version of the web page thumbnail map, by sliding the map, Get to a part of the page quickly.

11, lax. Js

Website address: https://github.com/alexfoxy/laxxx

A native zero dependency production follow the page slide JavaScript animation plug-in, this plug-in is very lightweight, the compressed version of the size of only 3KB, zero dependency native plug-in, when you slide the page, to help you create cool animation effects, such as scrolling parallax, deformation movement and other basic animation effects, responsive compatibility, For example, there is good support for mobile, and using this plugin can make your website come alive immediately.

In addition to using the plugin’s default integrated animation properties, you can also customize the animation properties. It also allows you to integrate with existing projects such as native projects, React, React hooks, Vue, and Ember.

section

If you like my sharing, please pay attention, like and forward oh, your support, is the power of my sharing, in the next article I will share with you some CSS, HTML, testing and data tools, please look forward to…