Best ideas how to improve a website using open source libraries on Github
Tags: webdev, github, opensource, libraries
Published: 2018-06-11 16:20:55

---
title: Best ideas how to improve a website using open source libraries on Github
published: false
description: In this article you will find out how to enhance your website using open source projects.
tags: #webdev, #github, #opensource, #libraries
cover_image: https://thepracticaldev.s3.amazonaws.com/i/goo4s4fr9lo2hfpk8y1c.jpg
published: true
---

JavaScript libraries are a useful tool for developers and designers since they can bring really powerful functional capabilities for web applications or websites by making their design smarter. Every day more and more new alternatives appear in such open source services like GitHub. How to choose the library worth your attention? This article analyzes the most effective free [JS libraries](https://www.cleveroad.com/blog/discover-top-javascript-libraries-to-keep-an-eye-on-in-2017). Information and techniques from these sources will make your website more interesting and popular.

## D3.JS

![D3.js](https://thepracticaldev.s3.amazonaws.com/i/6ytl59xr0oennirnda12.png)

[D3.js](https://github.com/d3/d3) is often called the most powerful open source JavaScript library for data visualization. It is collaborating with SVG for the rendering of graphs, charts, and dynamic visualization. Not so long ago it was widely used by such websites as NYTimes, Uber, and Weather.com.

D3 meets W3C web standards supported almost in  all Web browsers. Despite it doesn’t include some preliminary built charts and graphs, it offers numerous samples and such useful features like “Input” and “Output”. It also processes in debugging and making powerful animated conversions.

## CREATE.JS

It is a kit of JS libraries with open source code and tools for development of an abundant interactive content for open web technologies.

[Create.js](https://github.com/CreateJS) includes:

**Easel.js** for working with HTML5 Canvas elements.

The library makes it possible to create a high-performance interactive 2D content in HTML5. It provides with the multifunctional display list to animate graphics. It also provides a reliable interactive model for sensory and mouse interactions. Apart from being good for games, it is also perfect for generative art, advertising, data visualization and other highly developed graphic experiences. It works well on its own and as a part of Create.js: SoundJS, PreloadJS, and TweenJS. Deprived of external dependencies, it is compatible with almost any framework.

**Tweet.js** for web animation development

Library’s API is very simple but very powerful tool that allows users to create complicated animation easily. It supports animation of numeric properties of the object and CSS styles properties.

**Sound.js** for working with digital media

This JavaScript library is developed for working with audio. It creates a coherent interface for loading audio and audio playback in various browsers and devices. For now, it supports WebAudio, HTML5 Audio, Cordova/PhoneGap и Flash Fallback.

**Preload.js** coordinates loading of assets

It represents unified API for loading of different types of files, automatic detection of XHR (XML-HTTP-Request) availability as an alternate option for extended download. It includes plugin model to help with downloading in other libraries such as SoundJS as well.

## CHART.JS

![Chart.js](https://thepracticaldev.s3.amazonaws.com/i/3zxe1u4z3exa7fsg8tyg.jpg)

[Chart.js](https://github.com/chartjs/Chart.js) is a library with an open source code for development of graphs, bar charts, charts and other linear graph elements using JavaScript and Canvas API. It represents 8 chart types and allows mixing them. Furthermore, it provides amazing ready options for animation as well. It can be installed with ease and customized.

## THREE.JS

![three.js](https://thepracticaldev.s3.amazonaws.com/i/2wqmwf7odcb45dx3jgxx.png)

The library makes it possible to create an interactive 3D graphics in JavaScript. On account of using OpenGL low-level support tools, part of the code in WebGL can be implemented directly on the graphics card. Library’s website contains many complete samples. You can create a background sensitive to motions, user 3D web graphics, dynamic elements of the interface and other interesting things.

Visit it on [GitHub](https://github.com/mrdoob/three.js/).

## GSAP

![GreenSock Animation Platform](https://thepracticaldev.s3.amazonaws.com/i/ull7lm7rpi1e2cuz3x1c.jpg)

[GSAP](https://github.com/greensock/GreenSock-JS/) (GreenSock Animation Platform) is an advanced solution for animation highly evaluated by the world’s largest enterprises like Ford, Nike, Adobe, Microsoft, Samsung etc.

Its characteristics are a low entry threshold, detailed documentation, high performance, flexibility and compatibility with old browsers. GSAP has one important advantage - the library can animate not only CSS or Canvas but also any numeric variable of any JS-object.

On the other hand, GSAP is relatively heavy, therefore, it is better to use other analogs for creation of a small HTML elements animation like appearance, vanishing, flip etc.

## Bounce.js

![Bounce.js](https://thepracticaldev.s3.amazonaws.com/i/2ti9xnwoy0p2i4n6h05x.jpg)

The JS library for the development of impressive animation using CSS. It allows applying to monitors various types of motion, rotation, scalability and converting on the CSS3 basis. The library can function in all browsers that support 3D converting and animation of key frames.  

This library is free and has MIT license that makes it a good alternative to other libraries in case you don’t need a long list of animation types or just want to try yourself in visual arts.

Find the library on [GitHub](https://github.com/tictail/bounce.js).

## Skeleton

It is an adaptive CSS library that enriches simple HTML project with a stylish and interesting design. You will need only a few classes and Skeleton automatically stylizes all elements in your project. The library is very light, it contains a simple grid of 12 columns and main components. 

You can get acquainted with it on [GitHub](https://github.com/dhg/Skeleton/).

## Moment.js

![Moment.js](https://thepracticaldev.s3.amazonaws.com/i/f47g6yzqdna1z1lshc94.jpg)

Manipulations with dates in JavaScript are not a simple task both for beginners and for advanced developers. [Moment.js](https://github.com/moment/moment/) library allows you to simplify your job substantially if you work as a JavaScript programmer. Moment.js is a light JS library to parse, process and format of dates not expanding Data prototype.

Moment.js website has a table containing available parameters that can be used for [dates processing](http://momentjs.com/docs/#/parsing/string-format/).

## Elevator.js

![Elevator.js](https://thepracticaldev.s3.amazonaws.com/i/5nc49v4lmglg1hdczzjy.jpg)

It is a simple library that allows to make scrolling with Up button in an original way. Page scrolling is performed slowly to the vintage standby melody.

Check it on [GitHub](https://github.com/tholman/elevator.js).

## Math.js

[Math.js](https://github.com/josdejong/mathjs/) is a large mathematical library for JavaScript and Node.js. It includes definitions of mathematical expressions with the support of symbolical calculations. Apart from containing a large set of integrated functions and constants, it offers integrated solution for working with different types of data such as large numbers, complex numbers, fractions, units, matrices etc.

Each library can offer you something interesting. Some of them are large and complicated while some can offer you just a couple of functions. But if you like working with JavaScript, use of these libraries will help you diversify your project. As for our company, our developers use many of projects listed above. And we are always ready to apply them during the development of your new project.