Tag Archives: library

Canvasquery html5 with jquery syntax



Posted on by
2

CanvasQuery is a library to work with JavaScript HTML Canvas element, which has as main advantage, a syntax similar to the framework jQuery, considerably facilitating implementation.

Canvas jquery

Canvas jquery

The entire library is very lightweight, only about 8KB in development version compressed using gzip and about 6kb in its production.

Example:

cq(640, 480)
  .drawImage(image, 0, 0)
  .fillStyle("#ff0000")
  .fillRect(64, 64, 32, 32)
  .blur()
  .appendTo("body");

An interesting detail is that the project is ready to be used with plugins, this capability lets you expand your repertoire of possibilities in a simple way.

Howler.js audio player

Posted on by
Reply

Howler.js is a simple library written in JavaScript to create a small audio player that runs perfectly in any modern browser.

howler.js

howler.js

The compatibility of this library is very good, works perfectly: Chrome 4.0 +, Internet Explorer 9.0 +, Firefox 3.5 +, Safari 4.0 +, Safari 6.0 +, and Opera Mobile 10.5 +.

This library seems particularly useful, beyond the great advantages it gives us to use HTML5, the need for an alternative to help us exploit the virtues of the various browsers is something that was lacking.

Code:

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {
    alert('Finished!');
  }
});

Other interesting features are:

  • If the browser supports it uses the native interface.
  • HTML5 runs whenever possible.
  • Supports multiple formats.
  • Through the web audio API creates a cache, including HTML5.
  • Volume control.
  • Callback function to control the execution of sound.
  • Effect Fade In / Fade out.
  • Ultralight weight, just 5kb.

Howler.js has a wide variety of settings, they are well documented on the official site, they will also be able to see several examples to see this library running.

Analytics.js

Posted on by
Reply

Analytics.js is an interesting project to enhance and facilitate the way we integrate statistics systems of third parties, for example, in an efficient and fast  way we can integrate Google Analytics, KISSmetrics and Mixpanel, with just a few lines of code.

And what is the difference directly insert the code for each company? The answer is simpler integration and approved. Analytics.js not only allows basic counting visitors, but it also comes ready to perform advanced functions, such as event tracking. A function is not widely used but which is really useful in order to improve our services.

Analytics.js

Analytics.js

Another great advantage is that we will be able to manage all third party service from one side, and do not forget that this also gives us the ability to modify or optimize load times and basic functions, so avoiding littering our code with third fragments. Besides dependence forget that if the service falls third also affect negatively our project.

 

Examples:

analytics.initialize({
    'Google Analytics' : 'UA-XXXXXX-XX',
    'Mixpanel'         : 'XXXXXXXXXX',
    'KISSmetrics'      : 'XXXXXXXXXX'
});
analytics.initialize({
    'Google Analytics' : {
        trackingId              : 'UA-XXXXXX-XX',
        enhancedLinkAttribution : false
    },
    'Mixpanel' : {
        token  : 'XXXXXXXXXXX',
        people : true
    },
    'KISSmetrics' : {
        apiKey : 'XXXXXXXXXXX'
    }
});

For more information go to http://segmentio.github.com/analytics.js/

Recline.js: A JavaScript library for management and data visualization

Posted on by
Reply

Recline.js is an open source project for creating applications based on pure HTML and JavaScript.

Recline run on Backbone, this structure provides excellent support for building applications that handle heavy loads of data, using models for management information and views to display them. Within these views can choose to use grids, maps and even graphics.

Recline.js

Recline.js

The library has three distinct parts:

Model: Where we can define the data structure, for example, we define the dataset that we use as the source and type of data.

Backend: Connect the data using the API directly Recline.js the data source, it can be a database, a comma separated file, etc..

Views: show the information we collect and manage in the two previous instances.
In the official documentation Recline will find many examples of implementation.

If you are interested in putting into practice I highly recommend Recline.js visit the tutorials section where you will find several ways to implement this fantastic JavaScript library.

Download from : Recline.js

Cubism.js: D3 Plugin for displaying time series

Posted on by
Reply

D3.js is a small and powerful JavaScript library for handling different types of data, providing a simple manner different display types about information processing.

While D3 is written using JavaScript use  new technologies such as: CSS3, HTML5 and SVG, maximizing a good implementation.

This library is so widespread that began to appear plugins to extend its functionality, and one recent publication is Cubism.js, a plugin that uses Graphite D3 addition. Cubism is specially intended for publication and charting time series.

javascript library

javascript library

Cubism.js unlike other plugins to display time series, makes an initial load to display the information, and then simply applying the most recent values​​, greatly reducing server load. In the project page emphasizes the ability to scale of Cubism.

Another thing great about this plugin is that it displays perfectly without the need to occupy large areas which is great for sites that do not have much room to display graphs. In the picture below insert can see the same graph with different heights, they will notice how the information is perfectly in tight spaces.

Cubism.js is released under Apache license and can be downloaded directly from its section on GitHub.

Download from here http://square.github.com/cubism/

Formatting dates with JavaScript

Posted on by
Reply

A common task, and every developer must face, is related to the formatting of dates with JavaScript, either by converting formats or performing calculations between two or more dates.

JavaScript has many functions for manipulating dates, however make such calculations is not always as simple. To facilitate working with dates is that there Moment.js, a small JavaScript library that provides us with some simple mechanisms to operate with dates.

Formatting dates with JavaScript

moment().format(‘dddd, MMMM Do YYYY, h:mm:ss a’);
moment().format(‘dddd [on the] wo [week of the year]‘);
moment().format(“MMM Do ‘YY”);
moment().format(); // defaults to ISO-8601

Moment.js not only serves us to convert formats of dates and times, it is also extremely useful for performing arithmetic and calculations between two different dates.

JavaScript-dates

JavaScript dates

Calculate time elapsed since a date

moment(“2011-10-31″, “YYYY-MM-DD”).fromNow();

One detail that is contemplated in Moments.js and not so with other similar alternatives, is the representation of dates by country. That detail is perfectly studied in this small library, with it we can get the dates in several different languages ​​and with just a few lines of code.

English : Wednesday, April 18 2012 12:42 PM
Catalan : Dimecres 18 Abril 2012 12:42
Danish : Onsdag 18. April, 2012 12:42 PM
German : Mittwoch, 18. April 2012 12:42 Uhr
Spanish : Miércoles 18 Abril 2012 12:42
Basque : asteazkena, 2012ko apirilaren 18a 12:42
French : mercredi 18 avril 2012 12:42
Galician : Mércores 18 Abril 2012 12:42
Italian : Mercoledi, 18 Aprile 2012 12:42
Korean : 2012년 4월 18일 수요일 오후 12시 42분
Norwegian : onsdag 18 april 2012 12:42
Dutch : woensdag 18 april 2012 12:42
Polish : środa, 18 kwiecień 2012 12:42
Portuguese : Quarta-feira, 18 de Abril de 2012 12:42
Russian : среда, 18 апрель 2012 12:42
Swedish : onsdag 18 april 2012 12:42
Turkish : Çarşamba, 18 Nisan 2012 12:42
Chinese : 星期三, 18 四月 2012 12:42 下午

Moments.js is very light, just 3.7kb in its simplified version, compressed with gzip. The author provides downloading the development version, this is particularly useful for those who want to further reduce the library size by eliminating all unnecessary code, for example, we remove everything related to the language that we will not use.

Javascript library to create animations

Posted on by
Reply

TweenJS is a simple, easy and fast engine to creat animations using JavaScript only.

This small library makes heavy use of HTML5 to achieve various animations, which are not close substitutes, leaving out one of the great opportunities provided by this update.

JavaScript-animations

JavaScript animations

Add the library to our project:

<script type=’text/javascript’ src=’tween.js’></script>

Move an item from one point to another:

var position = { x : 0, y: 100 };
var target = { x : 500, y: 150 };
var tween = new TWEEN.Tween(position).to(target, 1000);

The official website will find several examples as much documentation
of use. The example I use is as simple as we can do, do not miss visiting the project to learn more about the power of this magnificent library JavaScript.

Web: TweenJS

Javascript library to humanize numbers

Posted on by
Reply

Humanize is a handy little JavaScript library to humanize the management of information. This is achieved through the reinterpretation of data, writing more readable information directly expressed may become harder to understand it.

A small example to understand that in order to humanize it, eg: 1000000 instead of writing simply express it as 1 million. This is achieved by using the intword.

Code example:

intcomma (4500000 = 4,500,000)

intword (1000000 = 1.0 million)

naturalDay (15 April 2012 16:25:30 = Today)

ordinal (3 = 3rd)

While humanize was developed in English can be easily translated with only JavaScript file access arrangements to find English words translated and ready to be used in our web applications without any problems.

Do not forget that while this library is a great thing to offer a significant improvement in terms of user experience, making it easier to read and greatly facilitating the use of our applications.

Download here https://github.com/milanvrekic/JS-humanize

Retina displays and javascript

Posted on by
Reply

Retina.js is an open source script to facilitate the work of high resolution images serve only to devices with the ability to do it. Saving transfer and download time by not wasting bandwidth by sending high resolution images to devices that can not display them natively.

javascript

javascript

The operation is very simple, when the user loads the page, retina.js checks if the device has a retina display, to find the script automatically adds modifier (@ 2x).

For example image path looks like this:

<img src=”/images/my_image.png” />

If the script detects a retinal display and the same high resolution image hosted on the server, modify the path to:

“/images/my_image@2x.png”

How to install retina.js:

<script type=”text/javascript” src=”/scripts/retina.js”></script>

Simply assign the path to the script it does its job smoothly, no need to initialize the script or anything similar. Nothing could be simpler

 

Download here http://retinajs.com/

Pivot.js table with json or csv

Posted on by
Reply

Pivot.js is a fantastic tool to visualize data quickly and efficiently. The technique addresses the need to display information without the need to assemble a complex structure that interpret and display.

With Pivot simply as a data source having a JSON structure or a comma separated file can display tabular data.

table-JSON-CSV

Pivot.js

Pivot is a simple way to visualize data without the need to program a single line, this script can be enabled, and is recommended to use in conjunction with jQuery to provide more functionality to the table, for example, filtering and sorting capabilities . All very well detailed in the official documentation.

Pivot While not designed for use on production servers, it is more a tool for internal use than anything else, does not have any problem in displaying the information from large documents, without going further into the online demo CSV file used as a data source has 1000 records, and the system displays it without any problems or delays.

Do not forget to check the documentation, it will find all the information needed to get all the juice to this great script.

Download from https://github.com/rjackson/pivot.js