August 2017:15 interesting JS and CSS libraries

The hot July has passed, and autumn is closer. Again this month, Tutorialzine has brought you some interesting and useful front-end libraries.

1.Titanic

This is a nice set of SVG ICONS with hover animations. But unlike most Web ICONS – the animation is JS based and requires you to export the animation to SVG using the BodyMovin library.

2.Rebass

Rebass is a React UI Kit for building responsive Web apps. It consists of more than 60 style components and can be freely customized through properties in the style architecture. This ensures style isolation and reduces the need to write custom CSS in your application.

3.Bootstrap 4 (Beta)

The official Beta version of Bootstrap 4 has been released! The new version of the framework also includes a number of major changes, including support for flexbox-based grid architecture, new and rewritten components, faster ES6 JavaScript plug-ins, improved documentation, and more.

4.Hover Buttons

This is a set of HTML buttons with hover animations that not only come in different shapes and sizes, but also have a variety of animation effects to choose from. Hover Buttons are made by SCSS, so you can easily remove unwanted Buttons or customize them to your liking.

5.React Simple Maps

React Simple Maps is a library of components for creating SVG Maps with various components for adding map details, text annotations, markers, and custom colors to various areas of the map.

6.Gpu.js

Gpu.js is a JS library for running GPGpus in a browser, which compiles JavaScript into a coloring language that can be run on gpus via the WebGL API in order to perform complex calculations faster. If WebGL is not available, these functions will still run in regular JavaScript.

7.Pell

Pell is an ultra-lightweight WYSIWYG text editor. It consists of just 200 lines of ES6 code, is only 1kB in size, and has no dependencies. It also supports all the operations required for Markdown text formatting, including inserting images and links.

8.Chromeless

Chromeless is a Web automation framework based on the Chrome platform Headless mode. Its API and functionality are very similar to other popular tools such as PhantomJS and NightmareJS, the main difference being that it can run all tests in Chrome’s Headless mode. It can also work locally or with AWS Lambda.

9.Fitty

Fitty is a Vanilla JavaScript library that can change the font size of text to fit a fixed-width container. It works with all standard Web fonts and can be scaled “up” or “down” so that they take up the available space better without line feeds.

10.Notif.me

This is a Node.js library for sending notifications, intended to be an all-in-one solution for handling email, SMS, and push notifications. In addition, you can choose from multiple providers for each service.

11.Shoelace

Shoelace is a stir-fried chicken lightweight CSS starter kit designed to provide a simpler alternative to Bootstrap. It consists of CSS reset and some useful UI components, without much style or functionality. Because the library code is based on CSS variables, it is also easy to customize.

12.TensorFire

TensorFire is a framework for running neural networks in a browser. Since TensorFire is GPU-accelerated via WebGL, running larger machine learning models is not a problem. Although the project is still in its early stages, there have been some promising demonstrations. For example, scissors and hammer gesture detection Demo

13.Vali

Bootstrap, PugJS and Sass are used to build the background information management template. Since the project is designed with the idea of being easy to customize, all styles are organized by separate SASS modules. The template also provides a wealth of components and widgets that you can check out in the Demo.

14.BotUI

BotUI is a JavaScript framework for building chat bot session interfaces. It has a super simple API that lets you configure the conversation flow by adding messages, questions, and even forming input fields for the user to fill in.

If you want to learn more about interactive session UIs, see our article “Introduction to Chatbot Developers.”

15.Nano ID

This is a small JavaScript library for generating unique ids. It only uses URL-friendly symbols to generate strings, but it also has an option for you to provide the corresponding alphabet. On the GitHub project page, you can find some interesting information about how the library works and how the algorithms are used.

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:

June 2017:15 interesting JS and CSS libraries
May 2017:15 interesting JS and CSS libraries
April 2017:15 interesting JS and CSS libraries
March 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.