15 Interesting JavaScript and CSS Libraries for November 2016
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
November’s list is here and it is packed with some amazing GitHub projects. It includes new CSS frameworks, a node.js package manager from Facebook, and a couple of awesome CSS-only solutions for icons, loading spinners, and tooltips.
Wing
Wing is a minimalistic CSS framework that can be used for setting a solid base to your websites. Like all CSS frameworks these days, Wing has a 12-column responsive grid and a collection of styled components. The cool thing about this particular project is that most HTML elements are automatically styled and don’t need any extra classes.
Shave
JavaScript library that truncates multi-line text, so that it can fit within the boundaries of a HTML element. The original string is stored in a hidden <span>, so that your text remains in the page in its entirety. Following a trend seen in many modern libraries, Shave has no dependencies and instead offers a separate version for plugging it in with jQuery.
Cerebral
A JavaScript MVC app state manager that comes with its own debugger. In Cerebral, the state of your application is stored in a single tree model that manages all server- and client-side states. The debugger has authority over the model, controller, and view, and can be used to manage them in real time.
Wenk
Wenk is a tiny library that provides CSS-only text tooltips. The whole thing is only 700 bytes, but still manages to provide a handful of customization options such as different tooltip sizes, placements, and text alignment. Probably the quickest way possible to get tooltips up and running.
CSS Loader
CSS Loader is a very helpful library that allows developers to quickly create loading indicators out of pure CSS. There are many different spinner designs included and they can all be created using only a single <div> element.
Yarn
Yarn is a fancy new node.js package manager by Facebook. Its main selling points are a powerful caching system, fast install times, and a reliable file organization that keeps every instance of your project installed the same way. Although they are quite different under the hood, using Yarn is almost identical to using npm, and developers can get familiar with it quickly.
Canvas Gauges
JavaScript library for creating speedometers, compasses, thermometers, and all other kinds of measuring devices. The gauges are displayed in a HTML canvas and are fully customizable, as can be seen in the examples section of their website.
CSS Icon
A growing collection of over 500 icons made entirely out of CSS. Using icons from this font is extremely simple, and there is even an option to animate from one icon to another. We also have to give +10 points to this project for its awesome website, that lets you see exactly what part of the CSS represents what element of the icon.
CurrencyFormatter.js
As you can tell by the title, this is a library for formatting numbers and strings to various currency standards. It supports 155 currency formats and over 700 locale definitions for country specific formatting. Also, if for some reason the format you are looking for isn’t included, you are free to define your own.
KUTE.js
Native JavaScript animation engine featuring a fully modular architecture. The core library provides all the basic animation methods, and numerous plugins can be added to enrich KUTE’s functionality. There are separate extension for working with jQuery, SVGs, CSS properties, and others.
Vue Material
A lightweight Vue.js framework following closely the Material Design Guidelines. It offers a collection of high-quality components, many of which are designed toward mobile devices and provide native-like interactions and animations. The library is easy to implement, and doesn’t have any dependencies apart from Vue.js.
Test Cafe
Test Cafe is a platform for running tests on your web apps. It is node.js based and doesn’t require you to install anything other than the npm package – no browser plugins, no compilators. Once you’ve written your tests, running Test Cafe will do everything else for you, including starting browsers for testing, gathering results, and creating a report.
Core.css
A super lightweight CSS reset and grid system in only 1.3 kb. Core.css can be used as the base for any small web projects where you don’t need all the features of a full blown framework such as Bootstrap or Foundation.
Flv.js
With this awesome library you can enable the standard HTML5 video player to support FLV files. The library works with a simple JavaScript API and there is absolutely no Flash involved. Just grab an existing video element on the page and call the flvjs.createPlayer() function to turn on FLV playback.
Next.js
Next.js is an interesting experimental project. It is a Node.js framework that can server-render JavaScript web apps built with React. This allows developers to work on their websites in Node, and do all the back-end routing and front-end logic in one place.