Fresh and Useful Javascript Library for Web Developers

javascript-library

Javascript is always evolving and growing. Web programmers require javascript library to complete their projects. Most are jquery plugins, because users jquery very much. However, many programmers that do not use jquery.

This time I want to gather useful javascript library for web developer or web programmer. Every week, on the internet, developers released a javascript library that is ready to use for various purposes.

JSON Server

Is a javascript library that can be used to create REST-API server in just a few seconds. This server can serve requests through a browser. The concept is simple, but can be developed further.

Download

Highlight.JS

is a javascript library that is used to highlight programming language syntax on the web.

highlight.js

  • 125 languages and 63 styles
  • automatic language detection
  • multi-language code highlighting
  • available for node.js
  • works with any markup
  • compatible with any js framework

Download and info

Moment.js

Is a javascript library to handle and manipulate the date on javascript.

moment.js

Code example

moment("20111031", "YYYYMMDD").fromNow(); // 4 years ago
moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
moment().startOf('day').fromNow();        // 9 hours ago
moment().endOf('day').fromNow();          // in 15 hours
moment().startOf('hour').fromNow();

Download

Famous Engine

Is a javascript library to create animations and interactions on the web. Perhaps, with the famous engine, you can create a simple animation games or movies.

Famous now unites DOM and WebGL under a single coordinate system. Borrowing concepts from modern game development, Famous structures applications in a scene graph hierarchy that makes manipulating HTML and WebGL together simple and programatic.

famous engine

Info and Demo

Stanford Javascript Crypto Library

Is a library to encrypt the data encryption technique that has been developed by Stanford.

SJCL is secure. It uses the industry-standard AES algorithm at 128, 192 or 256 bits; the SHA256 hash function; the HMAC authentication code; the PBKDF2 password strengthener; and the CCM and OCB authenticated-encryption modes. Just as importantly, the default parameters are sensible: SJCL strengthens your passwords by a factor of 1000 and salts them to protect against rainbow tables, and it authenticates every message it sends to prevent it from being modified. We believe that SJCL provides the best security which is practically available in Javascript. (Unforunately, this is not as great as in desktop applications because it is not feasible to completely protect against code injection, malicious servers and side-channel attacks.)

Download

Iconate.js

A javascript library to provide animation to the icons. This library is easy to use and lightweight.

iconate.js

Download

Pixi.Js

Is a javascript library to create 2D animation. The Pixi renderer Allows everyone to enjoy the power of hardware acceleration without any prior knowledge of WebGL. Also, it’s fast. Really fast.

pixi.js

Download Demo

 TimelineJS

A javascript library to create a timeline story easily and quickly. With this library, you can create a storyline that is easily understood by the user. Layout is used similar to Plurk, but this one is much simpler.

timelinejs

Download Example

Social Unlocker jQuery Plugin

social unlocker jquery plugin

Features

  • 3 social networks support
  • Fully customizable mask and components
  • 7 unique design styles
  • Support different social unlock styles
  • Mobile devices ready
  • Fully Responsive
  • Cross-browser compability
  • Unlimited number of locked content on same page

Download

Parsley.js

A javascript library for form validation purposes without rewriting one line of code. For those of you who want to add validation features, then parsely.js worth trying. You simply add an HTML attribute that can recognize javascript

parsley.js

Download Demo

Fabric.js

If you need a library that can handle HTML5 canvas and image, then fabric.js very appropriate for you. You can do anything with the image, such as resize, drag and drop, add text, animations, hover and others.

fabric.js

Demo

Motion Slider Jquery Plugin

motion slider jquery plugin

Motion Slider is a responsive jQuery slider plugin for mobile and desktop that enables multi-transition and browser prefix free CSS animation to your HTML DOM elements

Download

Imgix.js

imgix.js is a dependency-free Javascript library that allows you to easily use the imgix API to make images on your site or app responsive to device size and pixel density.

imgix.js allows for intuitive use of imgix features like text formatting, color palette extraction, color adjustments, effects, and watermarking.

imgix.js

Download

TinyTable for Responsive Table

responsive tinytable jquery plugin

TinyTable is jquery plugin for your website which will convert your tables into mobile format

Download

DarkroomJS

DarkroomJS is a JavaScript library which provides basic image editing tools in your browser, such as rotation or cropping.

darkroomjs

Features

Currently, the implemented features are:

Crop
Crops the image by selecting a zone with your mouse. This supports several options like ratio and dimensions control (min/max).
Rotation
Adds two buttons to let you rotate hte image to the left or the right.
History
Allows to undo and redo any changes on the main image.
Save
Transform back the canvas into image. This is mainly a proof of concept to show how plugins work. 

Download

Responsive FlipBook jQuery Plugin

jquery responsive flipbook

It is fully HTML & jQuery driven no Flash Player needed. Works on desktop and mobile devices! You get the same experience on every platform because responsive design makes it look good on all resolutions. Easy to customize with a JSON.

Download

Layzr.js

A small, fast, modern, and dependency-free library for lazy loading.

layzr.js

Demo

New Javascript Resource Edition #4

Javascript is best and most promising ways to make better  the user interface and user experience when using the web. Javascript is used to modify the UI on the client side. Excess javascript for faster execution and easy to write programs, especially when using a framework like jquery and angularjs.

Every week, more than 1000 libraries javascript released on the internet and all of them aim to make it easier for web developers create better again.

This time I collect libraries, tutorials, tools and snippets related to javascript and framework.

Regulex – A Regular Expression Visualization

regulex

JavaScript Regular Expression Parser & Visualizer.

Demo

SVG Morpheus

SVG Morpheus

JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design’s Delightful Details transitions.

Demo

TXTJS

txtjs

A way to write text to <canvas>

Demo

Mithril Javascript Framework

mithril mvc framework

Mithril is a client-side MVC framework – a tool to organize code in a way that is easy to think about and to maintain. Mithril was created by Leo Horie, and it provides models, views, controllers, and the benefits that a virtual DOM brings. It also has a routing layer that is used for manipulating the browser’s URL.

Download

Tutorial : Creating a Social News Sharing App in 20 minutes with Meteor


A demo showing how to create a social news sharing app in 20 minutes with Meteor.

Read more

 

New Javascript Resource #2

Javascript is backbone for web UI and best way to modification web element. In this edition, we was collected new javascript resource for your productivity and speed up your project done. And in this post, we include angular UI,  angular Google map where you can easily add google map to your angular app.

Another javascript library is new jquery plugin, tutorial, image management and many more.

Let begin with angular JS.

Angular Google Map

angular google map

Easy way to integrated your angular app with google map. Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications. Read more

UI Bootstrap for Angular JS

ui bootstrap

Its a bootstrap component for angular JS. Read more

Ng-Grid for Angular JS

ng-grid

Its component for angular JS to creating grid layout or table interface. Read more

TheWall.js

thewall.js

TheWall.js is jquery plugin to create grid layout for image + text, such as google image search. Read more

Nightmare JS

nightmare js

Read more

PlumageJS

plumagejs

Plumage is a UI framework for building data intensive, private web apps, including internal tools and authenticated public services. Read more

Griddle for React.js

griddle for react.js

Griddle is a simple grid component for use with React.js. Griddle is powered by React and its virtual DOM. Only the current page of the grid is rendered at any given time. Whether you have several or hundreds of records, Griddle should render your data quickly. Read more

React Google Map

react google map

Its a react component to integrated google map into your app. Read more

React Datepicker

react datepicker

Component to build datepicker in react.js. Read more

Progressbar.JS

angularjs

With ProgressBar.js, it’s easy to create arbitrary shaped progress bars. This JavaScript library provides a few built‑in shapes like Line, Circle and Square but you can also create your own progress bars with Illustrator or any vector graphic editor. Read more

Brackets.io

bracket

The code editor for web. Free and fast. Read more

Lazysizes

lazysize

High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. Read more

 

New and Useful Javascript Library for Designers and Developers

Javascript is continue to develop, in a week, developer release new useful library and resource to javascript. After release in first year, maybe it two decades ago, javscript become a backbone on client browser programming. Many game built on javascript, app, DOM modification and many more

We’are covered new resource and library for javascript. Maybe some of them dedicated for expert and newbie. Here is list of javascript resource that useful for developer and designer.

You Dont Know JS

Its a ebook series that teach you javascript from basic. You will get understrand javascript from right man. Please see the introduction below

Read more

JSS

Is a javascript library to interact with CSS. Maybe its just like CSS that written in javascript, and its perfect for build dynamic display.

jss

Read more

Imgix.js

Its a javascript client library for Imgix. If you dont have account there, please register at imgix.com. With Imgix.js you can easily interact with Imgix server, see the code example below

<html>
<head>
    <style>
        .imgix-fluid-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: block;
        }
    </style>

    <!-- include imgix.js -->
    <script src="http://www.imgix.com/static/js/imgix.min.js" type="text/javascript"></script>
    <script>
        imgix.onready(function() {
            imgix.fluid({
                updateOnResizeDown: true,
                pixelRounding: 5,
                autoInsertCSSBestPractices: true
            });
        });
    </script>
</head>
<body>
    <div data-src="http://assets.imgix.net/coffee.jpg?fit=crop&crop=faces" class="imgix-fluid imgix-fluid-bg"></div>
</body>
</html>

Read more

JuliusJS

juliusjs

Its a javascript library to support speech recognizing for web. This library need access to your microphone device. Its libary are not perfect, maybe its still in beta section, and currently in development. Read more

Respimage

respimage

Its a javascript library to save client bandwidth when loading site.  It implements the srcset/sizes attributes as also the picture element. Unlike other responsive images polyfills respimage plays nicely with your graceful degradation / progressive enhancement strategy. Read more

Jquery Viewport Plugin

Its simple and smart jquery plugin to access viewport.

jquery viewport

Demo

Git-it

git it

is not a javascript library, but its guide style to understanding git hub. I am including it because is useful for developer. Read more

Peerflix for Node.JS

peerflix

Its a node.js add on for streaming torrent. Read more

Franc

franc

Its a useful javascript library for detecting a language of a word or text. Read more

DataCollection.Js

DataCollection.js is a JavaScript library for storage, filtration, manipulation and accession of large datasets. It is ideal for working with data returned from RESTful API endpoints. Read more

 

Math.Js : Time Saver When Deal with Mathematical in Javascript

mathjs

Did you have made ​​a mathematical calculation with javascript? if ever, may you feel how complicated working on a mathematical formula with javascsript. Notation javascript difficult makes it difficult to apply a mathematical formula or physics. For that, they need a special library to handle mathematical operations on javascript.

Introduce, Math.Js

Math.Js is a library which is specialized to handle a wide variety of mathematical and physical operations. For you who are making the application on the basis of calculation, this library is perfect and you must use. Math.js advantages are: Supports numbers, big numbers, complex numbers, units, strings, arrays, and matrices. So that your application is not limited to the number and types of data.

Getting Started with Math.Js

Download this awesome library here (development version) and here (production version)

<!DOCTYPE HTML>
<html>
<head>
  <script src="math.js" type="text/javascript"></script>
</head>
<body>
  <script type="text/javascript">
    // use math.js
    math.sqrt(-4); // 2i
  </script>
</body>
</html>

You’re ready to write down your math code.

Example

<!DOCTYPE html>
<html>
<head>
  <title>math.js | basic usage</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/mathjs/1.0.0/math.min.js"></script>
</head>
<body>

<script>
  function print(value) {
    var precision = 14;
    document.write(math.format(value, precision) + '<br>');
  }

  // functions and constants
  print(math.round(math.e, 3));            // 2.718
  print(math.atan2(3, -3) / math.pi);      // 0.75
  print(math.log(1000, 10));               // 3
  print(math.sqrt(-4));                    // 2i
  print(math.pow([[-1, 2], [3, 1]], 2));   // [[7, 0], [0, 7]]

  // expressions
  print(math.eval('12 / (2.3 + 0.7)'));    // 4
  print(math.eval('5.08 cm to inch'));     // 2 inch
  print(math.eval('9 / 3 + 2i'));          // 3 + 2i
  print(math.eval('det([-1, 2; 3, 1])'));  // -7

  // chained operations
  var a = math.select(3)
      .add(4)
      .multiply(2)
      .done();
  print(a);                                // 14
</script>

</body>
</html>

I think Math.js is time saver when deal with mathematic, and i recomended its if your app has calculation feature

Follow the community at Github : https://github.com/josdejong/mathjs

Clipboard.js : Simple and Powerfull Library to Handle Your Clipboard Memory

Clipboard.js is simple and lightweight javascript library to handle your clipboard. Its support copy and cut data on clipboard. The idea is simple. Make clipboard handle is simple.

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.

You can using clipboard.js right now by use CDN. Access it here

Clipboard.js support modern browser

  • Chrome 42+
  • Edge 12+
  • Firefox 41+
  • IE 9+
  • Opera 29+
  • Safari 10+

Read more about clipboard js. here

Trianglify.js : Javascript Library to Create Low-Poly Graphics on the Fly and Save it as CSS Background

Trianglify is a JavaScript library that can be used to generate beautiful low-poly graphics right in your browsers, that can also be saved locally as SVG images

Low poly is a technique used by 3D rendering engines which is basically a low-number polygon mesh. While this technique was invented for faster rendering of computer graphics it has also recently caught on with Web designers which tend to use a lot of abstract low-poly images as backgrounds for their designs.

Trianglify works by taking some input parameters and generating a low-poly mesh in SVG format. The rendered image can be saved locally or used as a CSS background.

Trianglify required d3.js and enabled javascript on client side

Example of Trianglify

Download

Vue.js : Build Interactive Web Interface with Data-Reactive

Every front end designer need Vue.js. Vue.js is awesome javascript framework for building interactive web interfaces. It provides data-reactive components with a simple and flexible API. Its amazing size, just 19kb gzipped, make its faster to load.

vuejs

Vue.js has feature

  • Declarative rendering with a plain JavaScript object based reactivity system
  • Component-oriented development style with tooling support
  • Lean and extensible core
  • Flexible transition effect system
  • Fast without the need for complex optimization

Note that Vue.js only supports ES5-compliant browsers (IE8 and below are not supported).

Download vue.js

URL.Js : Javascript Libary Allow Developers to Manipulate URL

Have you ever worked with URLs using JavaScript? If you want to be sure you will get problems like how to parse URLs, extract URLs and modify them. If so, then you need a javascript library that you can use to handle URLs. You will work faster, save time And write fewer code

Introduce URL.js

Image result for url.js
Is a javascript library that can use to handle URL. allow developers to manipulate strings in the form of URIs (or URLs).

The library does not modify the page’s current URL, and is merely a basic string manipulation tool, but specialized in URL strings alone. URI.js works with client-side (browsers) and server-side (Node.js) environments.

A jQuery plugin is included with the download package as well.

Download

Useful Javascript Library for Web Developer Edition #1

perfect effect 8

I found the new useful javascript libary for web developers. This is 100% open source javascript libary and free to use in any purpose. Every time browsing on the internet, and I found the javascript libary, I will keep it in getpocket account. Because I know this will require a libary for next project. And because I feel this is very useful libary, I finally decided to make this post

In this post, you can found a library for reading PDF in javascript based, gesture kits to optimize the touch action on the mobile device, heatmap javascript, drag and drop for angularJS, localStorage and more.

Ok, lets begin to explore useful javascript library, dont forget to saving this post is useful, share to your social network and if needed you can write down to your notes. Read more

Plyr : Simple HTML5 Javascript Library to Play Multimedia File, Including Youtube and Video Embed

Is a javascript library that allows you to work with a variety of videos, including videos from YouTube and Vimeo. You can configure Libra today to work in accordance with your wishes. Excess plyr is when you embed the video on YouTube, much simpler interface that does not impress the video came from YouTube. To Websites which have a lot of video content I believe plyr is a library that is suitable to handle video content

Other plyr excess is a measure of this library is very small only 10 kilobytes and supports a wide range of features such as

  1. Full screen support
  2. bootstrap support
  3. responsive
  4. keyboard shortcuts

Just download and view plyr demo

How to install Plry

<script src=“path/to/plyr.js”></script>

<script>plyr.setup();</script>

Include the CSS

<link rel=“stylesheet” href=“path/to/plyr.css”>

Download Plyr here