September 2017:15 interesting JS and CSS libraries

What new and interesting front-end resources have Tutorialzine brought to us in the golden autumn of September? Front end developers, take a look at the front end libraries you need.

1.DisplayJS

DisplayJS is a simple framework to help you render DOM. Using it, you can more easily iterate through JS variables into specific HTML elements, similar to how React or vue.js handle templates.

2.React Beautiful DnD

This is Atlassian’s open source React library for making drag-and-drop components. It provides a powerful, easy-to-use API and a wealth of customization options and controls. The components it generates also have smooth GPU animation. When elements are picked or reordered, their effects will be shown.

3.R2

This is a new version of the Node.js Request library that provides a lighter HTTP client solution. Unlike the Request library, it is built on top of the native browser Fetch API and can be applied to Node.js. Also, R2 is only 16KB in size when compressed.

4.Primer CSS

Primer CSS is a CSS framework developed by GitHub’s front-end designers. For ease of installation, its 23 packages are divided into three core meta-packages, each of which can be released as a separate version through NPM.

5.Puppeteer

Puppeteer is a packaged library for manipulating Headless Chrome, maintained by the Official Chrome DevTools team. You can also learn more about some of the features we tried out in our article automating Google Chrome with Node.js.

6.Marko

This is a new JS framework similar to React and vue.js. It helps you break down your application into separate components and display changes in the application view over time and in response to changes in user actions. At the same time, Marko can automatically update the DOM within the application to feedback data.

7.Redocx

Redocx is a React library for generating Word documents. You can define documents using the React component and render them as Word documents through the command line. The library also contains tables, images, headers, footers, and many other components to choose from.

8.Fuzzysort

This is a JS library for building fuzzy search interfaces similar to those found in Sublime Text. The library calculates the number and duration of search matches based on the matching degree of the search query.

9.Trowel

Trowel is a SASS toolkit that provides a new way to write SASS variables, allowing you to group multiple variables into a single object, making your SASS code easier to write and read.

10.Vivify

Vivify is a csS-only animation library that provides you with over 50 animation effects to choose from. All you need to do is add Vivify’s class to the element to animate it, and after adding infinite, the animation will play in a loop.

11.Tons of Checkboxes

This is a collection of CSS checkbox components, which consist of checkboxes of various sizes and styles. Also, all check boxes come in 4 different sizes and are compatible with IE9+ and all modern browsers.

12.Push

Push is a generic desktop notification framework. It is based on the powerful Notification API and can be used as a reliable cross-browser solution. If the user’s browser does not support the latest API, the older API will be implemented.

13.react-imgpro

React – ImgPro is a React component for image processing. It uses filters for image processing and generates base64 images. It’s easy to use. You just specify the URL of an image, select the appropriate filters, and fill in the size and format of the output image.

14.Lozad.js

Lozad.js is a high-performance, configurable lazy loader for a pure JS implementation. It is based on the Intersection Observer API, which has no dependencies and supports lazy loading of dynamically added elements. It is also a lightweight library, only 535 bytes after Gzip compression.

15.Semiotic

React is a data visualization framework that combines React and D3. There are three types of frames (XYFrame, ORFrame, NetworkFrame) that can help you generate some cool charts. The way the data is displayed can also be customized by adjusting Settings in the framework or adding CSS styles.

Thank you for reading. If you gain something, please like and share.

Note:

The copyright of this article belongs to the original author and is only used for learning and communication.
If you need to reprint the translation, please indicate the source information below, thank you!

More articles:

August 2017:15 interesting JS and CSS libraries
June 2017:15 interesting JS and CSS libraries
May 2017:15 interesting JS and CSS libraries
April 2017:15 interesting JS and CSS libraries

At the same time, please follow my wechat [IT Program lion] and share IT learning articles and resources from time to time.