15 interesting JS and CSS libraries

Developers, let's take a look at the front-end libraries you need for wood.

1. Displayjs

DISPLAYJS is a simple framework to help you render the DOM. With it, you can more easily traverse the JS variable into a specific HTML element, similar to how React or vue.js handles the template.

Project address: "Portal"

2. React Beautiful DnD

This is the Atlassian open source React library for making drag-and-drop components. It provides a powerful, easy-to-use API, as well as rich customization options and controls. It produces components that also have a smooth GPU animation effect. When an element is picked up or reordered, its effect is displayed.

Project address: "Portal"

3. R2

This is a new version of the node. JS Request Library, which provides a lighter-weight HTTP client solution. Unlike the Request library, it is built on the native browser Fetch API and can be applied to node. js. Also, the R2 is only 16KB in size after compression.

Project address: "Portal"

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 3 core meta-packages, each of which can be released via NPM for a standalone version.

Project address: "Portal"

5. Puppeteer

Puppeteer is a package library for manipulating Headless Chrome, which is maintained by the Chrome DevTools official team. You can also find out more about some of the features we've tried in our article, "Using node. js automation Google Chrome."

Project address: "Portal"

6. Marko

This is a new JS framework similar to React and Vue.js. It can help you to decompose the application into separate components, and can be changed over time, as well as in response to changes in user actions to display program views. At the same time, Marko can automatically update the DOM in the app to feed back data.

Project address: "Portal"

7. Redocx

Redocx is a React library that is used to generate Word documents. You can use the React component to define a document and render it as a Word document by using the command line. At the same time, this library also contains a variety of components such as tables, images, headers, and footers for your selection.

Project address: "Portal"

8. Fuzzysort

This is a JS library for building a fuzzy search interface, similar to the interface style in Sublime Text. The library calculates the search match number and duration based on the matching degree of the search query.

Project address: "Portal"

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 easier to read.

Project address: "Portal"

Ten. Vivify

Vivify is a library of animations written in pure CSS that provides more than 50 animated effects for you to choose from. You only need to add the Vivify class to the corresponding element to animate it, and after adding the Infinite class, the animation can be looped back.

Project address: "Portal"

Tons of checkboxes

This is a CSS check box component collection, which consists of different sizes and styles of checkboxes. At the same time, all check boxes are available in 4 different sizes and are compatible with ie9+ and all modern browsers.

Project address: "Portal"

Push

Push is a common desktop notification framework. It is based on the powerful Notification API, which can be used as a reliable cross-browser solution, and if the user's browser does not support the latest API, it will follow the legacy API implementations.

Project address: "Portal"

React-imgpro.

The React-imgpro is a react component for image processing. It can use filters for image processing and generate images in base64 format. It is easy to use, you only need to specify the URL of an image, select the appropriate filters, and fill out the output image size and format.

Project address: "Portal"

Lozad.js.

Lozad.js is a high-performance, configurable, pure JS implementation of the lazy loader. It is based on the intersection Observer API and does not have any dependencies to support dynamic lazy loading of added elements. At the same time, it is also a lightweight library, only 535 bytes in size after Gzip compression.

Project address: "Portal"

Semiotic.

This is a data visualization framework that combines React and D3. It provides 3 types of frames (xyframe,orframe,networkframe) to help you generate some cool charts. The way the data is displayed can also be customized by adjusting the settings in the frame or by adding CSS styles.

Project address: "Portal"

From: Http://www.jianshu.com/p/ec9ff744eb20

15 interesting JS and CSS libraries