Functionn

Chart.js - A JavaScript Library For Easy Graphs For Designers & Developers

2013-04-12T09:31:00.001+04:00

Chart.js is a JavaScript library which allows you to create graphs for the client-side easily using an object-oriented approach. Chart.js provides 6 ways of representing your data, with each being animated and fully customizable.

Chart.js can display your data in form of line charts, bar charts, radar charts, pie charts, polar area charts, and donut charts. The library uses HTML5 Canvas to display the graphs and has polyfills for IE7/8.

Chart.js is also very lightweight and dependency free, weighing in at only 4.5KB (minified & gizpped).

Requirements: None
Website: http://www.chartjs.org/
Demo: http://www.chartjs.org/
License: MIT License

Intro.js - A JavaScript Library For Tour Guides For Websites

2013-04-11T19:51:00.001+04:00

Intro.js is a JavaScript library for guided tours for your websites. It uses data attributes within your HTML to feed the library with the data needed to operate.

You can navigate through the tour using mouse and keyboard shortcut keys. The library makes use of overlays and popups to focus the user’s attention to the proper part of the page being toured.

Intro.js is lightweight, weighing in at 7KB, with #KB of CSS code. Intro.js is supported in all modern browsers, including IE8+.

Requirements: None
Website: http://usablica.github.io/intro.js/
Demo: http://usablica.github.io/intro.js/
License: MIT License

Countable.js - A JavaScript Library For Live Paragraph, Word & Character Counting

2013-03-12T14:14:00.001+04:00

Countable.js is a small JavaScript library which allows you to present the number of paragraphs, words and characters from a text area to any HTML element of your choice.

The library updates the counts in real-time and is very easy to use. Countable.js might find application in areas where text length limiting is necessary, such as comment length, description length, etc.

Requirements: None
Demo: http://radlikewhoa.github.com/Countable/
License: MIT License

lunr.js - A JavaScript Library For Simple Full-Text Search In Your Browser

2013-03-12T14:08:00.001+04:00

lunr.js is a JavaScript library which implements a full-text search in your browser in a simple and easy way. lunr.js is designed to be small and fast, without you needing a server-side engine to implement the search engine.

lunr.js also has inbuilt filtering of stop words, which are common words in search queries which do not affect the way pages are retrieved.

lunr.js has no external dependencies and is written using ECMA5. Hence for browsers which do not support the latest version of JavaScript, you might need to use a shim.

Requirements: None
Website: http://lunrjs.com/
Demo: http://lunrjs.com/example
License: MIT License

SPOILER ALERT! - A jQuery Plugin Which Uses Blurs For Hiding Spoilers

2013-03-12T13:57:00.001+04:00

SPOILER ALERT! is a jQuery plugin which uses blurs to hide spoilers from readers online. However, SPOILER ALERT! adds some more bells and whistles to the concept by enabling you to specify maximum blurs and partial blurs.

Maximum blur is used to hide the spoilers completely from the readers. However, upon hover, the partial blurs are applied which makes the content a bit more distinguishable. Finally, clicking upon the blurred content fully reveals the hidden material.

SPOILER ALERT! can not only be used for blurring out spoiler texts, but can also be used for images. This technique for hiding spoilers is a nice change from the usual blacked out or completely hidden text we usually find on website as it keeps the flow of the content essentially the same.

Requirements: jQuery
Demo: http://joshbuddy.github.com/spoiler-alert/
License: MIT License

ZEON.js - A Bookmarklet To Find Errors in JavaScript Code Displayed Within Textareas

2013-02-22T19:27:00.001+04:00

ZEON.js is a bookmarklet which when applied to a page finds all textareas which contains JavaScript code and applies error checking to them.

It then shows which errors are found in the code along with with helpful hints on the nature of the errors. ZEON.js could be a useful learning tool as well as a good tool for quick prototyping.

Additionally ZEON.js allows you to minify the code displayed in the textarea and beautify it on the fly too.

Requirements: None
Demo: http://zeonjs.com/
License: Free

Instano.js - A Library For Instant noscript Message On JavaScript Disable

2013-02-22T19:12:00.001+04:00

Instano.js is a JavaScript library which allows you to detect whether JavaScript has been turned off after the page has been loaded.

It then modified the noscript tags to display its contents immediately and also provides callback functions which you can hook onto when JavaScript is enabled or disabled.

Instano.js works in all modern browsers except Internet Explorer. It uses plain JavaScript and @keyframe CSS animations to display the messages.

Requirements: None
Demo: http://laucheukhim.github.com/instano/
License: MIT License

Resemble.js - A JavaScript Library For Image Analysis & Comparison

2013-02-22T19:00:00.001+04:00

Resemble.js is a JavaScript library which allows you to perform image analysis and comparison in the browser, using JavaScript and the HTML canvas.

You just need to supply an image and the library will compute the RGB values of the image as well as well as it’s brightness.

With Resemble.js you can also perform comparison between two images easily. You can ignore colors and antialiasing while comparing the images, with Resemble.js giving you a true or false on whether the images are same or not.

Requirements: None
Demo: http://huddle.github.com/Resemble.js/
License: Free

typeahead.js - A Fast & Fully-Featured Autocomplete jQuery Plugin By Twitter

2013-02-20T20:54:00.001+04:00

typeahead.js is a fast and fully featured autocomplete JavaScript library by Twitter. typeahead.js can display to users as they type, show top suggestions, allows suggestion to be drawn from multiple datasets.

It also works with hardcoded data as well as remote data, rate-limits networks requests to reduce server load, supports customized templates for suggestions as well as plays nicely with RTL languages and input methods.

Requirements: jQuery
Demo: http://twitter.github.com/typeahead.js/
License: MIT License

Emblem.js - A New Templating Language That Compiles To Handlebars.js

2013-02-20T20:36:00.001+04:00

Emblem.js is a new templating language which compiles down to the popular Handlebars.js templating engine.

Emblem.js is an indentation based templating language, similar to Slim, Jade, HAML, etc. It compiles to Handlebars; full compatibility with both custom and built-in Handlebars helpers.

Emblem.js is also has Ember.js-friendly syntax and full compatibility with auto-updating functionality.

Requirements: Handlebar.js
Demo: http://emblem-test.herokuapp.com/
License: MIT License

Markdown.css - A CSS Stylesheet To Make HTML Look Like Plain-Text Markdown

2013-02-20T20:29:00.001+04:00

Markdown.css is a CSS stylesheet which allows you to display your normally rendered HTML text in Markdown syntax.

Markdown.css also comes in as a bookmarklet which enables you to apply it on any webpage so as to generate markdown code from it.

This might be useful if you need to copy and paste some text with formatting in a Markdown editor (like at StackOverflow). You can check out Markdown.css below.

Requirements: None
Demo: http://mrcoles.com/demo/markdown-css/
License: Free

PeerJS — A JavaScript Library For True Peer-To-Peer Data In The Browser

2013-02-19T20:15:00.001+04:00

PeerJS is a JavaScript library which acts as a wrapper for WebRTC and allows you to create peer connections very easily. With PeerJS you can create such a connection in just 3 lines of code.

PeerJS deals with the WebRTC handshake and allows connection by peer ID. However, to establish a connection, you need a PeerServer. This is written in Node.js and you need to set it up.

No data passes through the server – it is only used to broker the connection between peers.

Requirements: Node.js
Website: http://peerjs.com/
License: MIT License

w2ui - A Full-Featured JavaScript UI Library For jQuery

2013-02-19T20:06:00.001+04:00

w2ui is a full featured JavaScript UI library based on jQuery. It contains common UI controls like layout, grid, sidebar, tabs, toolbar, popup, field controls and forms.

With w2ui you get a very well integrated set of UI components, which weight in at only 37KB (minified and gziped). w2ui makes extensive use of HTML5 and CSS3 making sure it supports latest browsers.

Browser Support

w2ui works in Chrome, FireFox 7+, Safari 5+ and IE 9+ are among supported browsers.

Requirements: jQuery
Demo: http://w2ui.com/web/demo
License: MIT License

Nanoko - A Professional JavaScript Framework For Modular Applications

2013-02-19T19:52:00.001+04:00

Nanoko is a JavaScript framework which allows you to write highly modular web applications. With Nanoko, every piece of functionality or GUI is packaged as a module.

Each module is independent of each other, thus allows you to add and remove modules as you please, without breaking your application. Nanoko also has an integrated build system which allows you to concentrate on coding and less on building.

Requirements: None
Website: http://www.nanoko.org
License: Free

SVG.js - A Lightweight JavaScript Library For Manipulating & Animating SVG

2013-02-18T20:54:00.001+04:00

SVG.js is a lightweight JavaScript library which allows you to easily manipulate and animate SVG. SVG.js comes with a whole plethora of methods such as create, move, center, clone and more.

There are also lots of animation methods such as animate move, size, rotate, skew, easing, etc. You can check out the test suite for a demo on all the animations.

The library itself is very small, 5KB gzipped, with support for extensibility and plugins.

Browser Compatibility

Firefox 3+
Chrome 4+
Safari 3.2+
Opera 9+
IE9 +
iOS Safari 3.2+
Android Browser 3+
Opera Mobile 10+
Chrome for Android 18+
Firefox for Android 15+

Requirements: None
Demo: http://svgjs.com/test/
License: MIT License

hexagonal.js - A Clean Architecture Single Page Apps JavaScript Library

2013-02-18T20:44:00.001+04:00

hexagonal.js is a JavaScript library which allows you to build single page applications easily. hexagonal.js is based on the Hexagonal Architecture and allows you to take advantage of it to create web apps.

With hexagonal.js, the business logic of your application is made the heart of it, then using adapters/ports allows you to build GUIs, APIs around the core.

Requirements: None
Demo: https://github.com/hexagonaljs
License: MIT License

Kimbo.js - A Fast & Lightweight ECMAScript 5 Only Compatible JavaScript Library

2013-02-13T18:59:00.001+04:00

Kimbo.js is a fast and lightweight ECMAScript 5 only compatible JavaScript library. Kimbo.js tries to take advantage of newer native JavaScript functions without adding extra code for supporting older browsers.

Kimbo.js has a jQuery-compatible API which means that it should not be difficult for anybody who knows jQuery to pick it up.

Kimbo.js is also more high-performance than jQuery in some aspects. You can check out the benchmarks on the Kimbo.js homepage. Kimbo.js also has an extensive documentation which you can refer to for coding your next web application using Kimbo.js.

Requirements: None
Website: http://kimbojs.com/
License: MIT License

jWebAudio - JavaScript Web Audio Library Designed For Games

2013-02-13T18:50:00.001+04:00

jWebAudio is a JavaScript library, which also comes in as a jQuery plugin, designed as a Web Audio library for games. jWebAudio provides a simple API ontop of Web Audio, which allows you to easily manipulate audio in your games.

jWebAudio provides functions like fade in, fade out, multishot and more which are targeted at game development. You also get basic controls like play, pause, stop, volume, mute, seek and loop. jWebAudio also allows you to add sound effects in a simple fashion, including 3D effects.

The standalone jWebAudio library weights in at only 9.0KB minified, but is feature packed.

Requirements: None
Demo: http://01org.github.com/jWebAudio/index.html
License: Apache License v2.0

Tecate.js–A jQuery Plugin For In-Page HTML Validation

2013-02-13T18:42:00.001+04:00

Tecate.js is a jQuery plugin which allows for in-page HTML validation. Tecate.js automatically checks for common HTML writing mistakes like matching tags, general bad syntax.

If found, automatically shows a popup with the errors descriptions and the lines on which they appear.

The library is might also be useful as a learning tool, where if one is learning HTML, they can drop Tecate.js in the header and be alerted when mistakes occur.

Requirements: None
Demo: https://github.com/kevinburke/tecate
License: MIT License

threesixty.js - A jQuery Plugin For Creating Draggable 360s

2013-02-12T21:24:00.001+04:00

threesixty.js is a simple jQuery plugin which allows you to create draggable 360s easily. You can then use your mouse to drag the image generated to view it in 360 degree view.

Creating the 360 degree view is quite simple. You just take a bunch of images which will make up your 360 degree view and name them in the format imageNameimageIndex. Then you specify the max index to the plugin and it takes care of the rest by generating your360s.

Requirements: jQuery
Demo: http://nick-jonas.github.com/threesixtyjs/
License: MIT License

Kraken - A Lightweight, Responsive Mobile-First Boilerplate For Front-End Web Developers

2013-02-12T21:17:00.001+04:00

Kraken is a lightweight, responsive mobile-first boilerplate for front-end developers. Kraken is very minimalistic in nature. It features a CSS reset, a responsive mobile grid, a well-designed fluid typographic scale, CSS3 buttons, basic form styling and several add-ons.

Kraken is built using several smaller independent components. It uses Origami, a fluid, mobile-first grid system, Astro - a collection of mobile-first navigation patterns, Drrop - mobile-friendly dropdown menus, Houdini - a simple expand-and-collapse widget, Tabby - a lightweight, mobile-first toggle tabs and more components – all created by the same author.

Requirements: None
Demo: http://cferdinandi.github.com/kraken/
License: WTFPL

Parallel.js - A JavaScript Library For Parallel Computing Using Web Workers

2013-02-12T21:09:00.001+04:00

Parallel.js is a JavaScript library which allows you to perform multi-core processing in JavaScript. Despite fast JavaScript engine like Google V8 engine, JavaScript is inherently single-threaded.

Compared to other languages like Java, this might seem like a disadvantage. However, Parallel.js solves this problem by giving you a high level access to multi-core processing using web workers.

As long as your browser supports web workers, you can have parallelism in your JavaScript applications.

Requirements: None
Demo: http://adambom.github.com/parallel.js/
License: CC 3.0 License

Bourbon - A Simple And Lightweight Mixin Library For Sass

2013-02-11T20:56:00.001+04:00

Bourbon is a simple library which provides support for mixins for Sass. It allows you to write CSS faster and easier by taking care of vendor prefixes for you.

It not only contains great vendor-prefixes support but also other functions and addons to help you build web projects faster.

Requirements: Sass 3.2+
Website: http://thoughtbot.github.com/bourbon/
License: MIT License

Cinnamon.js - A JavaScript Library To Find In-Page Text Using Synonym

2013-02-11T20:50:00.001+04:00

Cinnamon.js is a JavaScript library which allows you to find in-page text using synonyms. Consider the following scenario. You have a link to your Twitter profile on your blog, which the anchor text being @your_username.

You then have a visitor who wishes to follow/interact with you via Twitter. The first thing that comes into his find is to search the page for the word Twitter. However since you’ve linked to your Twitter profile using your username as anchor text, the search does not yield any result.

This is where Cinnamon.js steps in. It allows you to attach search terms to elements and allows those elements to be included in the search results of browsers. This way, accessibility is improved and you help users find what they are looking for in an easier manner.

Requirements: None
Demo: http://thomaspark.me/…/cinnamon-js-…synonyms/
License: MIT License

Vesper HTML5 Audio Player - Fully Featured Music Player With Last.fm Artworks

2013-02-11T17:42:00.001+04:00

Vesper HTML5 Audio Player is a fully featured HTML5 audio player with a nice UI. It is very lightweight in size, weighing in at only 14KB and supports Last.fm artworks.

Integration is very easy, with you needing to only include the stylesheet and the JavaScript with the proper HTML5 markup in your page.

Requirements: None
Demo: http://firezenk.github.com/html5player/
License: MIT License