Dance.js Is A Simple Data-Driven Visualization Framework

Dance.js is a simple data-driven visualization framework. It's basically a flavor of Backbone.js, but enriched with some of the ideas of the very popular D3.js visualization framework.  A Dance.js dance involves several Performers (aka views or visualizations) who are performing on screen. Users of Backbone.js might already be familiar with the API, as it's pretty much the same as for Backbone.View. Dance.js comes with its own data manipulation framework, Data.js which functions as a replacement for Backbone.Model.

Requirements:  Data.js and Underscore.js
Demo: http://bl.ocks.org/2172216
License: MIT License

iOS.js - A JavaScript Which Optimizes Your Website/App For iOS

iOS.js is a JavaScript which optimizes your website/app for iOS.  It deals with the following:

• Fixes: #minimum height, #webapp-links, #100% heights, #hides address bar, 
• CSS: #iOS specific CSS, #device specific CSS, #device family specific, CSS: #orientation specific, CSS, #retina display
• Javascript: #disable scrolling, #disable zooming, #getfunctions

Requirements: None
Demo: http://www.iosjs.com/examples/
License: MIT License

Shake.js - A Custom 'Shake' Event JavaScript Plugin For Mobile Web Browsers Using Device Accelerometer

Shake.js is a custom 'shake' event JavaScript plugin for mobile web browsers using device accelerometer.  Your web browser must support the devicemotion event for this plugin to work.  Shake.js uses built-in feature detection to determine if it can run in your web browser.  It will terminate silently on non-supporting browsers.

Requirements: None
Demo: https://github.com/alexgibson/shake.js
License: MIT License

Fasterize's Lazyload - An Image Lazyloader JavaScript Standalone Library

Fasterize's Lazyload is an image lazyloader is designed to help you save http requests on images.  Most of the time, when you have many images on a page, your user doesn't need them all, so the library loads only the images needed, i.e. above the fold ones.  Fasterize's Lazyload standalone and fast to show images at page load.


Requirements: None
Demo: https://github.com/fasterize/lazyload
License: MIT License

Rainbow - A Code Syntax Highlighting Library Written In JavaScript

Rainbow is a code syntax highlighting library written in Javascript.  It was designed to be lightweight (1.4kb), easy to use, and extendable.  It is completely themable via CSS.

Requirements: None
Demo:  http://craig.is/making/rainbows
License: Apache License v2.0

Wintersmith - A Flexible Static Site Generator For Node.js

Wintersmith is a flexible static site generator for Node.js.  It has the following features:

• Easy to use
• Generated sites can be hosted anywhere (output is plain html)
• Write articles/pages using markdown
• Robust templating using Jade
• Preview server (no need to rebuild every time you make a change)
• Highly configurable
• Extendable using plugins
• Fast

Requirements: None
Demo: https://github.com/jnordberg/wintersmith
License: MIT License

Grunt - A Node.js Module For Linting And Minifying CSS

Grunt is a Node.js module for linting and minifying CSS.  It is licensed under the MIT License and can be freely used in your projects.


Requirements: Node.js
Demo: https://github.com/jzaefferer/grunt-css
License: MIT License

Timeline - A JavaScript Library For Beautifully Crafted Timelines That Are Easy, And Intuitive To Use

Timeline is a JavaScript library for creating beautifully crafted timelines that are easy, and intuitive to use.  Timeline is also great for pulling in media from different sources.

It has built in support for pulling in Tweets and media from Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. More media types will be supported in the future.  Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.

Other Timeline JavaScript Libraries have been featured on Functionn. They're similarly impressive, you might want to check them out:

• Chronoline.js - A Library For Making A Chronology Timeline Out Of Events On A Horizontal Timescale
• Timeliner.js - A jQuery Plugin For Making Simple Historical Timelines

Requirements: jQuery
Demo: http://timeline.verite.co/#examples
License: GPLv3

Kickstrap - A Full Version Of Twitter's Bootstrap With Themes, Enhancements, And Other Goodies

Kickstrap is a full version of Twitter's Bootstrap (interested in more Twitter Bootstrap resources?  Check out the Twitter Bootstrap Channel on Functionn) with themes, enhancements, and other goodies.  It boasts the following features:

• Ready to go: Developers will love the advanced features, but novices need not worry about customization. Kickstrap is drag-and-drop ready to go. I've even included two sample html files with everything linked and the best features turned on.
• Minify and Optimize on the Fly: With HTML5 Boilerplate's build script, your entire directory of javascript, css, and images can be minified and optimized with two simple words (ant build) in the command line. (Optional)
• Cross-everything: Bootstrap did such an awesome job with css @media support, I've turned it on by default and responsively-designed the default Kickstrap theme.
• Javscript plugins: I've carefully selected a few optional javascript plugins to bring a little more life to your Kickstrap project.
• Sparkling HTML: The included starter HTML files are ready to go with code for Google Analytics, CDN-hosted jQuery with local fallback, IE version detection, responsive screen detection, HTML5 Polyfilling (via Modernizr), and several other delightfully nerdy things.
• Styleguide docs: Kickstrap builds on top of Bootstrap, that means Bootstrap's core layout code is still valid in Kickstrap and documented here.
• Themes Included: Easily activate and install themes. Using a LESS compiler, Kickstrap will override Bootstrap's default style where needed so your users won't need to download an extra stylesheet.
• Icon Fonts > Images: The glyphicon library has been  replaced with the identical, extended, and awesome  Font Awesome and  IcoMoon, specially made for Bootstrap. Here's why icon fonts are awesome.
• Workflow Tools: With the HTML5 Boilerplate Buildscript, easily compress, minify, and optimize your site files automatically.

Requirements: None
Demo: http://ajkochanowicz.github.com/Kickstrap/examples.html

License: Apache License v2.0

Jigsoar Icons - A Free Icon Set With 60 Vector Shapes, Perfect For The Web

Jigsoar is a  free, creative commons licensed custom designed icon set with 60 vector shapes, perfect for the web.  The zip file contains PNG bitmaps in four sizes: 16px, 24px, 48px, and 64px. Each icon is in light and dark ready for you to use straight away in your project.

Requirements: None
Demo: http://www.jigsoaricons.com/
License: CC Attribution 3.0 License

Compass - An Open-Source CSS Authoring Framework

Compass is an open-source CSS Authoring Framework.  Below are the features of Compass:

• Experience cleaner markup without presentational classes.
• It’s chock full of the web’s best reusable patterns.
• It makes creating sprites a breeze.
• Compass mixins make CSS3 easy.
• Create beautiful typographic rhythms.
• Download and create extensions with ease.

Requirements: None
Demo: http://compass-style.org/
License: CC Attribution 3.0 License

Foresight.js – A JavaScript Library For Handling Responsive Images Smartly

Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage. It modifies context image requests, specifically img src attribute, but the server does the image resizing. Media queries however should be used when dealing with CSS background-images, while foresight.js is used to handle inline img elements (or until current web standards are improved).  The features of Foresight.js are:

• Request hi-res images according to device pixel ratio
• Detect network connection speed
• Does not make multiple requests for the same image
• Javascript library and framework independent (ie: jQuery not required)
• Cross-browser and cross-platform
• Image dimensions set by percents will scale to the parent element's available width and device pixel ratio
• Fully customizable through global configuration options and individual img attributes
• Default images will load without javascript enabled
• Minifies down to roughly 5K

Requirements: None
Demo: http://foresightjs.appspot.com/demos/index.html
License: Free

Animate.css - A Bunch Of Cool, Fun, And Cross-Browser Animations

Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Requirements: None
Demo: http://daneden.me/animate/
License: ☺ License

Wookmark jQuery plugin - Alternative jQuery Masonry Plugin

Wookmark jQuery plugin lays out a series of elements in a dynamic column grid.   The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns.

Requirements:
Demo: http://www.wookmark.com/jquery-plugin
License: MIT License

Superslides - A jQuery Full Screen Slider Plugin

Superslides is a full screen slider for jQuery.  It's designed to be flexible, with very little styling done in the plugin itself. There's some recommended markup and CSS, but you can customize to your heart's content.

Requirements: jQuery
Demo: http://nicinabox.github.com/superslides/
License: Free

Legit - A Complimentary Command-Line Interface For Git, Optimized For Workflow Simplicity

Legit is a complimentary command-line interface for Git, optimized for workflow simplicity. It is heavily inspired by GitHub for Mac.  Feature branch workflows are dead simple.

$ git switch <branch>
# Switches to branch. Stashes and restores unstaged changes.

$ git sync
# Syncronizes current branch. Auto-merge/rebase, un/stash.

$ git publish <branch>
# Publishes branch to remote server.

$ git unpublish <branch>
# Removes branch from remote server.

$ git harvest <branch>
# Auto-merge/rebase commits from given branch.

$ git sprout <branch>
# Sprout a new branch from the current branch.

$ git graft <branch>
# Merge unpublished branch into current branch, then remove it.

$ git branches
# Nice & pretty list of branches + publication status.


Requirements: None
Demo: http://www.git-legit.org/
License: Free

BitArray - A Simple Bit Array/Bit Field Library In Pure JavaScript

BitArray is a simple bit array/bit field library in pure JavaScript.  BitArray is based on the Ruby library BitArray by Peter Cooper (https://github.com/peterc/bitarray).

Requirements: None
Demo: https://github.com/madrobby/bitarray.js
License: MIT License

Backstretch - A Simple jQuery Plugin To Add A Dynamically-Resized Background Image To Any Page

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page.  It will stretch any image to fit the page, and will automatically resize as the window size changes.  Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site.


Requirements: jQuery
Demo: http://srobbin.com/jquery-plugins/backstretch/
License: MIT License or GPL

BabelEXT - A Cross-Browser Extension Development Library/Boilerplate

BabelExt is a library (or perhaps more of a boilerplate) meant to simplify the development of cross-browser "userscript" style extensions for the following browsers: Chrome, Firefox, Opera and Safari.

It's likely that BabelExt will appeal most to either new extension developers, or to the existing pool of Greasemonkey script developers - which is how I got started with extension development.

The transition from Greasemonkey development to browser extension development wasn't too difficult - but there are a few nuances in each browser that are a bit of a pain to circumvent if you're in a "Greasemonkey mindset".

BabelExt is definitely more suited for developers wanting to create "content enhancement" extensions that enhance websites. It's not made for creating addons such as AdBlock Plus, etc.

BabelExt takes care of commonly used functionality that you might want to perform in content-script-like extension. Some of these things seem simple, but each browser has its own function calls and way of working, including, but not limited to:

• Accessing and controlling tabs (i.e. opening a link in a new one and choosing if it's focused)
• Cross domain http requests (extensions require)
• Storing data (using HTML5 localStorage or similar/equivalent engines)
• Triggering notifications (desktop or browser, depending on the browser's particular level of support)
• Adding URLs to history (to mark links as visited)
• Note: this is a bit of a hack in all non-Chrome browsers...
• Adding CSS to the page

Requirements: None
Demo: http://babelext.com/demo/
License: Free

Monorail.js - An Ultra Lightweight MVC Framework For Node.js

Monorail.js is an ultra lightweight MVC framework for Node.js.  It is relatively new, but is being actively developed.  Among all the different MVC frameworks available for Node.js, this is another one for you to consider.


Requirements: Node.js
Demo: https://github.com/runexec/Monorail.js
License: MIT License

Sigma.js - An Open-Source Lightweight JavaScript Library To Draw Graphs, Using The HTML Canvas Element

Sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:

• Display interactively static graphs exported from a graph visualization software - like Gephi
• Display dynamically graphs that are generated on the fly

Requirements: None
Demo: http://sigmajs.org/examples.html
License: MIT License

Gridpak - The Responsive Grid Generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Requirements: None
Demo: http://gridpak.com/
License: CC Attribution 3.0 License

Tap.js - A Lightweight 'Tap' Event JavaScript Plugin

Tap.js is a custom 'tap' event JavaScript plugin for mobile browsers. It contains a fallback to using regular mouse events if touch support is not detected.  The following browsers have been tested for Tap.js:

• iOS Safari (5.1)
• Android default browser (2.3.5)
• Opera Mobile 11.50 (Android)
• BlackBerry Playbook (1.0.8.6067)
• HP webOS 2.1.0 (click fallback)
• All modern desktop browsers (click fallback)

Requirements: None
Demo: http://miniapps.co.uk/blog/post/tapjs-a-lightweight-tap-event-javascript-plugin/
License: MIT License

Ignition – A JavaScript MVC Framework

Ignition is a jQuery-based open source mini-framework for developing JavaScript applications using the mvc pattern.  Ignition is extendable through "Modules", which in the default distribution includes a url manager and a history dispatcher (for triggering events when the location hash changes.)

Requirements: None
Demo: http://www.daytona.se/ignition
License: MIT License or GPL

Bootstrap-WYSIWYGHTML5 - A JavaScript Plugin To Create WYSIWYG Editors For Twitter Bootstrap

Bootstrap-WYSIWYGHTML5 is a javascript plugin that makes it easy to create simple, beautiful  WYSIWYG editors with the help of WYSIWYGHTML5 and Twitter Bootstrap.

Requirements: None
Demo: http://jhollingworth.github.com/bootstrap-wysihtml5/
License: MIT License

Hammer.js - A JavaScript Library For Multi-Touch Gestures

Hammer.js is a JavaScript library for multi-touch gestures.  It includes the following features:

• easy implementation of touch events to your website
• lightweight with only 2kb, easy to dig into
• focused javascript library, only for multi-touch gestures

The gestures supported by Hammer.js are: Tap, Double, Tap, Hold, Drag and Transform.  Below are the browsers supported by Hammer.js:

	Tap	Double Tap	Hold	Drag	Transform
Windows
Internet Explorer 8	X	X	X	X
Internet Explorer 9	X	X	X	X
OSX
Firefox 11	X	X	X	X
Opera 11	X	X	X	X
Chrome 16	X	X	X	X
Safari 5	X	X	X	X
iOS
iPad iOS 5	X	X	X	X	X
iPhone iOS 5	X	X	X	X	X
Android 2.2.3
Default browser	X	X	X	X
Firefox 10	X	X	X	X
Opera Mobile 12	X	X	X	X
Opera Mini 6.5	X
Opera Mini 7.0	X
Others
Windows Phone 7.5	X
Nokia N900 - Firefox 1.1	X

Requirements: None
Demo: http://eightmedia.github.com/hammer.js/demo2.html
License: MIT License