Best JavaScript Libraries of 2014 One Must Have

A JavaScript library is a pre-written JavaScript which permits to develop JavaScript-based applications easily, particularly applied for web browsers that allows to cooperate with the users and control the browser. The main use of JavaScript is to write functions that built-in HTML pages and interact with the Document Object Model (DOM) of the page. The language can be used as server side programming language for the game development and the design of desktop / mobile applications. In short, JS libraries is solution of problem as it is built to resolve the issues.

These libraries will help you to make things easier for your website related tasks. We hope these JavaScript libraries will be helpful to your website linked requirements.

Voix.js

A JavaScript library to add voice commands to your sites, apps or games.

ScrollReveal.js

ScrollReveal.js is a simple way to create and maintain how elements fade in, triggered when they enter the viewport. It helps you to build declarative on-scroll reveal animations for your websites.

AngularJS

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

ACE

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and Text Mate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

Hammer.js

Hammer is an open-source library that can recognize gestures made by touch, mouse and pointer Events. It doesn’t have any dependencies, and it’s small, only 3.71 kB minified + gzipped!

Math.js

Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser and offers an integrated solution to work with numbers, big numbers, complex numbers, units, and matrices. Powerful and easy to use.

Type Rendering Mix

Type Rendering Mix is useful in many situations. Let’s say you are using Proxima Nova on your website. Below you can see how the “thin” weight will look in OS X and Windows 7. Due to the way the Core Text rasterizer works, fonts will look heavier on OS X and iOS than on other platforms.

Switchery

Switchery is a simple component that helps you turn your default HTML checkbox inputs into beautiful iOS 7 style switches in just few simple steps. You can easily customize switches, so that they match your design perfectly.

Unison.js

Unison.js is a small plugin (1.2kb minified) that allows you to declare named breakpoints in one place and automatically sync them across your JavaScript and markup. When all of your front-end technologies share break point information, complex responsive tasks such as conditional loading and image swapping become much simpler and straight-forward.

Ember Charts

A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents our thoughts on best practices in chart interactivity and presentation.

Offline.js

Offline.js is a library to automatically alert your users when they’ve lost internet connectivity, like Gmail.

It captures AJAX requests which were made while the connection was down, and remakes them when it’s back up, so your app reacts perfectly.

It has a number of beautiful themes and requires no configuration.

Parallax.js

via Best JavaScript Libraries of 2014 One Must Have | Downgraf.

Phaser

Phaser is a fast, free and fun open source game framework for making desktop and mobile browser HTML5 games. It uses Pixi.js internally for fast 2D Canvas and WebGL rendering.

Version: 2.0.5 “Tanchico” – Released: 20th May 2014 By Richard Davey, Photon Storm

via photonstorm/phaser.

Javascript Self Invoking Functions

In this article, I will discuss self-executing or self-invoking functions of javascript and their hidden power with real-world example. We will also see why using setInterval is bad in some situations and should be avoided. Let’s explore little used but extremely powerful self-invoking functions of javascript.

Self-Invoking Anonymous Function

A self-invoking anonymous runs automatically/immediately when you create it and has no name, hence called anonymous. Here is the format of self-executing anonymous function:

(function(){
 // some code…
})();

You must be aware of the fact that javascript functions run immediately when you put () after their names eg:

doStuff(); // this will run immediately

And:

doStuff; // this will not run immediately and can be used as callback

Now because () exist at the end of self-executing anonymous function above, it will run immediately.

Interestingly, if you look at the source code of jQuery, you will see that everything is wrapped in between:

(function( window, undefined ) {
 // jQuery code
})(window);

That is as can be seen also a self-executing anonymous function with arguments. A window (and undefined) argument is created and is mapped with global window object at the bottom (window).

Notice that you can also write self-executing anonymous function like this:

(function(){
 // some code…
})();

Using extra braces like before function keyword is simply coding convention and is used even by famous javascript libraries such as jQuery and also recommended by Douglas Crockford. If you are confused about that extra pair of braces, here is another easy to remember notation:

! function(){
// some code…
}();

Notice the addition of ! before function keyword, it is essentially same in functionality to previous notation and also recommended (used by twitter too), quoting docs, section 12.4:

An ExpressionStatement cannot start with the function keyword because that might make it ambiguous with a FunctionDeclaration.

Reblogged from http://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/

TreSensa Game Engine overview

The TreSensa Game Engine (TGE for short) is a fast javascript game engine optimized for the mobile web and has out of the box integration with TreSensa’s analytics, distribution and monetization services. It has been battle tested on hundreds of mobile devices and platforms and offers the full benefit of the TreSensa platform. Download SDK 

Ease of use:

  • During dev: Straightforward JS lib purely canvas based.
  • Object oriented and easy looking for anyone familiar with 2d game engines or Flash.
  • Helper functions and boiler plates, samples and ready-made assets.
  • 2D scene graph functionality ( Parent/child relationships)
  • High-level game features: Camera, Scene Management, Parallax Planes, etc. Asset management
  • Componentized engine For example: sound and graphics features can be used Standalone or with higher level game abstraction class. TFX
  • Device independent detection

Best Reach:

  • Efficient rendering of graphics and animation across a wide range of browser runtime environments (Mobile Safari, Mobile Chrome, Android, Silk, etc.)

Features

  • Battle Tested. The most robust JavaScript mobile-game framework on the market today.
  • Mobile First. Designed for mobile, but works on desktop equally well.
  • Fast. Optimized canvas renderer ensures speed and compatibility across all mobile devices.
  • Easy. Object oriented framework. Build off of core classes and scene graph objects.
  • Familiar. Scene graph architecture & layering system makes AS3 developers feel right at home.
  • Efficient. TexturePacker plug-in makes integrating texture-packed images trivial.
  • Versatile. Animation system supports sprite sheets and keyframed exports from Flash via TFX.
  • Cross Platform. Map user input handling to both desktop and mobile without platform specific controls.
  • Asset Manager. Supports images, audio, and js. for asset loading for entire game or per-level loads.
  • Tweening . Fully featured tweening library.
  • Dynamic Camera. Extensible camera shaking effects.
  • Documented. API docs, tutorials, code snippets, sample games with full source, and developer forums.

via TreSensa Game Engine overview

Image Hover Effect to display Captions

Image hover effect is fun way to interact with any image.

Here I found number of wonderful tutorials to implement Image Hover using various method.