JS libs

From Things and Stuff Wiki
Jump to navigation Jump to search


headings need a real good rearrange

Repositories

  • JSAN - JavaScript Archive Network is a comprehensive resource for Open Source JavaScript libraries and software.
  • JSwiki indexes libraries and resources available for JavaScript. In addition it provides some starting points for newbies in form of Beginner's Resources. In case you want to contribute, do take a look at Meta first for some extra pointers. Happy hacking!

CDN

  • Google Libraries API is a content distribution network for the most popular, open-source JavaScript libraries. The Libraries API provides access to a growing list of the most popular, open-source JavaScript libraries, including: AngularJS, Chrome Frame, Dojo, Ext Core, jQuery, jQuery UI, MooTools, Prototype, script.aculo.us, SWFObject, WebFont Loader
    • irc.geekshed.net, #googleapis

Scripts

  • 140byt.es is a tweet-sized, fork-to-play, community-curated collection of JavaScript
  • TodoMVC - Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. Backbone, Ember, AngularJS, Spine... the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?

to sort;

Modules and loading

  • Jam. For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first by using AMD modules.
  • RequireJS [2] is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
  • volo - A JavaScript dependency manager and project creation tool that favors GitHub for the package repository. Written in JavaScript for JavaScript.
  • yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.
  • Head JS - Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.
  • LABjs is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site's performance.
  • RSVP.js provides simple tools for organizing asynchronous code. Specifically, it is a tiny implementation of Promises/A+ and a mixin for turning objects into event targets.
  • dependo - Visualize your CommonJS or AMD module dependencies in a force directed graph report - powered by D3.js.
  • Ender is a full featured package manager for your browser. It allows you to search, install, manage, and compile front-end javascript packages and their dependencies for the web. We like to think of it as NPM's little sister. Ender is not a JavaScript library. It's not a jQuery replacement. It's not even a static asset. It's a tool for making the consumption of front-end javascript packages dead simple and incredibly powerful.

jQuery

to sort

jQuery UI

  • jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Graphs

Table

Popup

Navigation

Tooltips

  • qTip2 - Pretty powerful tooltips

Animation

  • jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element.

Carousel

$("ul#roundabout").roundabout({
   autoplay: true,
   autoplayInitialDelay: 2000
});

The above works only for the first instance. Use window.setTimeout to alter further IDs. [3]

Scroll to anchor

$('body').plusAnchor({
  easing: 'swing',
    // The easing method, defaults are 'swing' and 'linear'.
    // Anything else  requires the easing.js plugin
  speed:  1000
    // The amount of time, in milisecons, it takes to complete a transition
});

$("#someDiv").slideto({
  highlight_color: 'blue',
  highlight_duration: 'slow',
  slide_duration: 500
});

$("some_selector").scrollintoview({
   duration: 2500,
   direction: "vertical",
   complete: function() {
     // highlight the element so user's focus gets where it needs to be
   }
});

$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });

$('a').smoothScroll();
$('#container a').smoothScroll();
$('#container a').smoothScroll({excludeWithin: ['.container2']});
  exclude links if they are within a containing element: 
$('a').smoothScroll({exclude: ['.rough','#chunky']});
  exclude links if they match certain conditions
$('.backtotop').smoothScroll({offset: -100});
  adjust where the scrolling stops
$('a').smoothScroll({afterScroll: function() { alert('we made it!'); }});
  add a callback function that is triggered after the scroll is complete 

{
  offset: 0,
  direction: 'top', // one of 'top' or 'left'
  scrollTarget: null, // only use if you want to override default behavior
  afterScroll: null, // function to be called after scrolling occurs. "this" is the triggering element
  easing: 'swing',
  speed: 400
}

Scroll with page

Scrolling and parallax

Injection

  • DiceJS (dynamically injected css engine) is a jQuery extension that allows you to store your CSS in JavaScript objects to dynamically manipulate and inject as you please.

Feedback

Introduction overlay

Forms

Time

  • Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").]

Waypoints

Actions on certain areas of the page.

Footnotes

Video

Shadows

Twitter

RSS

  • zRSSFeed - will read RSS feeds from any website URL using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling.

Utility

  • Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
  • Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.
    • underscore-contrib The brass buckles on Underscore's utility belt - a contributor library for Underscore.
  • Lo-Dash - A low-level utility library delivering consistency, customization, performance, and extra features.
  • Lazy.js it a utility library for JavaScript, similar to Underscore and Lo-Dash but with one important difference: lazy evaluation (also known as deferred execution). This can translate to superior performance in many cases, especially when dealing with large arrays and/or "chaining" together multiple methods. For simple cases (map, filter, etc.) on small arrays, Lazy's performance should be similar to Underscore or Lo-Dash.
  • wu.js - A lazy, functional Javascript library that ain't nuthin' ta f*ck wit.
  • Valentine provides you with type checking, functional iterators, and common utility helpers such as waterfalls, queues, and parallels; all utilizing native JavaScript methods (when available) for optimal speed. Inspired by Underscore.
  • Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobtrusive, and let you do more with less code.
  • Functional is a library for functional programming in JavaScript. It defines the standard higher-order functions such as map, reduce (aka foldl), and select (aka filter). It also defines functions such as curry, rcurry, and partial for partial function application; and compose, guard, and until for function-level programming. And all these functions accept strings, such as 'x -> x+1', 'x+1', or '+1' as synonyms for the more verbose function(x) {return x+1}.
  • Udon is a library providing basic support for functional programming idioms in JavaScript.
  • OxJS is Ox.js, a general-purpose utility library. It embraces functional programming, supports modules, provides lots of tools to deal with dates, has all the missing math methods (plus some more for geographic coordinates) and helper functions for strings and regular expressions, fixes type detection and equality testing, includes utilities to handle HTML, the DOM and remote requests, can tokenize and minify JavaScript, comes with its own documentation format, including inline tests, and does many other cool things. Then there are modules, most notably Ox.UI, which provides a simple but flexible model to write complex, desktop-class web applications for HTML5-compliant browsers.
  • funkjs is a pure functional immutable library without side effects. It consists of: list library (good to have functional list library). stream library (lazy list), tuple (immutable tuple implementation), semigroup (basic semigroup library + 11 predefined semigroups), monoid (basic monoid library + 9 predefined monoids)
  • Matches.js brings the power and expressiveness of pattern matching to Javascript.
  • Behave.js - Less-than-pure Functional Reactive Programming for Javascript
  • allong.es is a collection of functions designed to facilitate writing JavaScript and/or CoffeeScript with functions as first-class values. The emphasis in allong.es is on composing and decomposing functions using combinators and decorators. allong.es is designed to complement libraries like Underscore, not compete with them.
  • Augment.js - Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods. Never overrides any native implementations; it only adds what is missing.
  • objgrep Find strings inside complicated javascript objects

Templating

See also JavaScript#Templating

  • Hogan.js is a 2.5k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.
  • Walrus is a templating library inspired by mustache, handlebars, ejs and friends, but with a couple of important differences in philosophy and style
  • t.js - A tiny javascript templating framework in ~400 bytes gzipped
  • Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use. It is particularly well-suited for asynchronous and streaming applications.
  • Nunjucks is a full featured templating engine for javascript.
  • dōmo lets you write HTML markup CSS styles in JavaScript syntax, in the browser and on the server. At less than 1.4kb of minizipped JavaScript, dōmo is a simpler, easier, and more reliable alternative to template engines and CSS pre-processors. And it works well with all the tools you already use, from jQuery to Backbone.js to CoffeeScript.
  • templayed.js - The fastest and smallest Mustache compliant Javascript templating library written in 1806 bytes (uncompressed)
  • Pithy.js - An internal DSL for generating HTML in JavaScript.
  • json2html is an open source javascript library that uses on JSON templates to convert JSON objects to HTML.
  • X-Tag - X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.

DOM

  • Laconic DOM Library - Laconic offers an intuitive approach to generating DOM content in JavaScript. Laconic adds a method to the $.el namespace for all known HTML Elements. These methods should be invoked with a variable-length list of child elements, strings, numbers, or arrays containing these types. An optional attributes object may be passed as the first argument.
  • rangy - A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer up to and including version 8 and DOM-compliant browsers.
  • uiji is jQuery in reverse. Instead of using CSS selectors to find elements, you use the same syntax to create elements.
  • fasterDOM.js - Fast DOM manipulation with "jquery-like" syntax and ~1.8Kb code. Operations that are supported: .css(), .attr(), .html(), .append(), .prepend(), .show(), .hide() , .get() (returns elements)
  • QuoJS is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented and micro coherent API.

Ajax

  • Phonebook.js is a lightweight wrapper for your jQuery.ajax calls. It makes your code more readable and more maintainable.

Typography

Lettering.js

FitText

  • FitText - Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
$("#responsive_headline").fitText();

$("#responsive_headline").fitText(1.2); // Turn the compressor up   (text shrinks more aggressively)
$("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively)

$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

jquery.textFit

Hatchsow

slabText

BalanceText

  • BalanceText - A jQuery plugin to provide an alternate text wrapping algorithm.

to sort

  • Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle
  • strokeText.js is an unobtrusive javascript library working in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML.

Layout

Text

Textarea

Images

Interface

  • Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

Lightbox

URL

  • url() A simple, lightweight url parser for JavaScript (~1.6 Kb minified, ~0.6Kb gzipped).

Input

Events

Dates

Viewport

  • Keep in View - Don't allow elements to scroll out of view by having them stick to the top or bottom of a window.

Fullscreen

Scrollbars

Keyboard

  • Mousetrap - A simple library for handling keyboard shortcuts in Javascript.

Mouse

Media

http://www.html5rocks.com/en/tutorials/casestudies/jamwithchrome-audio/

Canvas

Graphics

  • Datavisualization.ch Selected Tools is a collection of tools that we, the people behind Datavisualization.ch, work with on a daily basis and recommend warmly. This is not a list of everything out there, but instead a thoughtfully curated selection of our favourite tools that will make your life easier creating meaningful and beautiful data visualizations.

D3

Graphs

Colours

Shapes

Animation

Other

  • Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.
  • gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action.
  • Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS.
  • Dojo GFX is a cross-browser 2D vector graphics API that enables development of rich graphic web application on desktop and mobile without having to deal with the browsers native graphics technologies.
  • Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
  • Bonsai - A lightweight graphics library with an intuitive graphics API and an SVG renderer.
  • Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
  • svg.js - A lightweight library for manipulating and animating SVG.

Presentation

  • h5slides - basic presentation system, in chinese
  • Impress.js - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
  • jmpress.js - jQuery and Impress.js, a jQuery plugin to build a website on the infinite canvas
  • dizzy.js is a Javascript library that enables you to create nonlinear presentations similiar to Prezi without using Flash. The presentation data is stored in the SVG-format, the navigation and animation is done via Javascript.

Parallax

  • skrollr - Parallax* scrolling lib with zero dependencies (seriously, you don't need jQuery) in just under 5.5k minified (2.6k gzipped). No JavaScript skills needed.

Deep Zoom like

Maths

  • Numeric Javascript library allows you to perform sophisticated numerical computations in pure javascript in the browser and elsewhere.
  • jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language
  • MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.

3D

Physics

Menu / tabs

Alerts and tooltips

Reading

  • Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.

WYSIWYG

  • Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

Webcam

Diagrams

Bubbles

Search

Networking

Concurrency

Joke

Libraries and frameworks

YUI

  • YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications.

MooTools

Google Closure

  • The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.

Dojo Toolkit

Knockout

  • Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.

Backbone.js

  • Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Articles

Docs

Related

  • Backbone UI provides a simple way to represent your Backbone Models and Collections as UI components. The need to shuffle data in and out of your UI is replaced with simple data binding techniques. All components are skinnable with CSS, and will render consistently accross browsers.
  • Recline.js - Building on Backbone, Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).
  • Btapp.js provides access to a browser plugin version of uTorrent/BitTorrent via a tree of Backbone Models and Collections. The intent of this project is to allow access to the extensive functionality of a torrent client, from web apps that are as simple as a single Backbone View.
  • Chaplin is an architecture for JavaScript applications using the Backbone.js library. The code is derived from moviepilot.com, a large single-page application.

AngularJS

  • AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Ember

Other

  • cujo is an architectural framework for next generation JavaScript applications. It encourages highly modular development, declarative application assembly, and embraces the asynchronous nature of JavaScript and its fusion of object-oriented and functional programming styles. cujo’s extensible architecture and use of industry standards allows it to work seamlessly with your current application framework -- and adapt easily to your next.
  • CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy
  • Cappuccino is built on top of standard web technologies like JavaScript, and it implements most of the familiar APIs from GNUstep and Apple's Cocoa frameworks. When you program in Cappuccino, you don't need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM.
  • Seed is a library and interpreter, dynamically bridging (through GObjectIntrospection) the WebKit JavaScriptCore engine, with the GNOME platform. Seed serves as something which enables you to write standalone applications in JavaScript, or easily enable your application to be extensible in JavaScript.
  • Montage simplifies rich HTML5 application development by providing modular components, real-time two-way data binding, CommonJS dependency management, and more.
  • Opa is an advanced application framework for JavaScript. All aspects are directly written in Opa: Frontend code, backend code, database queries and configuration. And everything is strongly statically typed.
  • DoubleDollar is a new kind of JavaScript Framework, that enables you to create pure JavaScript applications with beautiful Zen-like code. Built on jQuery, DoubleDollar is lightning fast, requires no compiler, and is infinitely extendable.
  • Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.
  • Kendo UI has it all: rich jQuery-based widgets, a simple and consistent programming interface, a rock-solid DataSource, validation, internationalization, a MVVM framework, themes, templates and the list goes on.
  • JavaScriptMVC is a MIT licensed, client-side, JavaScript framework that builds maintainable, error-free, lightweight applications as quick as possible. It packs best-of-breed libraries and tools that are guaranteed to work together. It supports every browser that jQuery supports.
  • component - modular framework; client package management
  • ColtJS is a simple framework allowing for easy deployment of JavaScript Applications using Asynchronous Module Definition (AMD). It's only dependency is RequireJS. The central concept behind behind Colt is simplicity. The framework is built to be lightweight, flexible, and highly efficient.

Caching

  • jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved. jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.
  • locache.js is a simple framework to help you cache objects on the client-side. It's not a replacement for HTTP caching, and often that is a better idea. Rather it allows you to cache JavaScript objects ( anything that is JSON serialisable) for re-use or offline usage. You can optionally provide an expiration time for cached objects.
  • AES.io offers online tools for secure data storage and collaboration. We use client-side encryption to ensure all information is safe - both private and shared.

Sharing

  • Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.

Syntax highlighting

  • Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Emulation

  • n64js - A work-in-progress n64 emulator.

Code visualisation

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=JS_libs&oldid=12370"