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

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

trunk8 - An Intelligent Text Truncation Plugin jQuery Plugin

trunk8 is an intelligent text truncation plugin to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.

Unlike conventional truncation that just limits the character length of text, trunk8 measures the content area for spill-over and intelligently chooses the text that best fits in the given space.

Requirements: jQuery
Demo: http://jrvis.com/trunkk8/
License: MIT License

Ratchet - A Tool To Prototype iPhone Apps With HTML, CSS And JS Components

Ratchet is a tool to prototype iPhone apps with simple HTML, CSS and JS components.  Ratchet has a list of components it supports, among which are:

• Title bar - Title bars are full width and docked to the top of the viewport.
• Lists - Lists can be used for organizing data, showing collections of links or a series of controls.
• Buttons - Buttons come in four flavors and should be used for user actions.
• Segmented controller - Created with flex-box so button sizes and spacing are consistent. Content sections that are to be swapped in and out by the controller should all be siblings and have the class "segmented-controller-item". Then, just give each content section an id and point the link in the segmented controller to that id.
• Counts - Counts come in four flavors and should be used to indicate "how many" of something there are.
• Forms
• Toggles - Toggles can be used by sliding or tapping the control.
• Popovers - Popovers are designed to only fire from title bars.
• Sliders - Can be used with any number of slides with any type of content.
• Push - Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.

Requirements: None
Demo: http://maker.github.com/ratchet/
License: MIT License

Fluidity - A Modern CSS3 And HTML5 Framework For Node.js/Stylus

Fluidity is a CSS framework made for web designers who would like a CSS framework simple enough to quickly express their ideas, smart enough to help with the mundane, and lean enough to stay out of the way and let them write pure CSS3 syntax.

It's built using the awesome Stylesheet language Stylus and all the super powers it has for working with CSS. Fluidity now includes normalize.css, some base-line typography, a grid system that can be used semantically or with in-line classes to create both fluid-width and fixed-width designs, a collection of transparent mixins that gracefully handle browser pre-fixes for CSS3 properties.

Fluidity is for any web designer that knows how to use CSS and want to use CSS3 features now, a fluid semantic and responsive grid, and code their CSS in a clean and maintainable way using a powerful stylesheet language. There is a slight learning curve for designers who have never used Stylus before, so it is highly recommended that you familiarize yourself with the Stylus Stylesheet language and the Node.js environment.

Requirements: Node.js, Stylus
Demo: http://fluiditycss.com/
License: MIT License

Chaplin - An Application Architecture Using Backbone.js

Chaplin is an architecture for JavaScript applications using the Backbone.js library. The code is derived from moviepilot.com, a large single-page application. 

While developing several web applications using Backbone.js,  Chaplin Developers felt the need for conventions on how to structure such applications. While Backbone is fine at what it’s doing, it’s not a framework for single-page applications. Yet it’s often used for this purpose.

Chaplin is mostly derived and generalized from the codebase of moviepilot.com, a real-world single-page application. Chaplin tries to draw the attention to top-level application architecture. “Application” means everything above simple routing, individual models, views and their binding.

Backbone is an easy starting point, but provides only basic, low-level patterns. Especially, Backbone provides little to structure an actual application. For example, the famous “Todo list example” is not an application in the strict sense nor does it teach best practices how to structure Backbone code.

To be fair, Backbone doesn’t intend to be an all-round framework so it wouldn’t be appropriate to blame Backbone for this deliberate limitations. Nonetheless, most Backbone use cases clearly need a sophisticated application architecture. This is where Chaplin enters the stage.

Features

• CoffeeScript class hierarchies as well as object composition
• Module encapsulation and lazy-loading using AMD modules
• Cross-module communication using the Mediator and Publish/Subscribe patterns
• Controllers for managing individual UI views
• Rails-style routes which map URLs to controller actions
• A route dispatcher and a top-level view manager
• Extended model, view and collection classes to avoid repetition and enforce conventions
• Strict memory management and object disposal
• A collection view for easy and intelligent list rendering

Requirements: Backbone.js
Demo: https://github.com/chaplinjs/chaplin
License: MIT License

Tres - A Mobile JavaScript Web Development Framework Built On Top Of Backbone.js

Tres is a framework for developing JavaScript applications, with a focus on mobile phones and tablets. It's built on top of Backbone.js.

Tres is a development suite, focused on mobile devices (phones, tablets). It features automatic compilation of template formats such as Haml, as well as transparent CoffeeScript and Compass support (and thus, Sass.).

The idea is you'd develop a mobile web app locally, package it, and then use it with whatever other back-end you want.

Tres also provides default/desirable styles for creating mobile applications, such as headers, lists, buttons, and other common mobile app design patterns.

It also provides helpful JavaScript classes to easily implement behaviour and connect the UI with real data from say, an API.

Requirements: None
Demo: http://tres.io/
License: MIT License

Fuel UX - A JavaScript Library To Extend Twitter Bootstrap With Additional Lightweight Controls

Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

The Fuel UX Philosophy

The Fuel UX aim is to provide a suite of related but independent projects that help web developers integrate, manage, and customize quality libraries and utilities to more efficiently develop, maintain, test, and distribute their projects. Any improvements or fixes we make to the open source projects used will be contributed upstream if they are useful to the rest of the community.

Fuel UX Controls

• Combobox - Combines input and dropdown for easy and flexible data selection.
• Datagrid - Renders data in a table with paging, sorting, and searching.
• Pillbox - Easily manage selected items with color-coded text labels.
• Search - Combines input and button for integrated search interaction.
• Spinner - Provides convenient numeric input with increment and decrement buttons.

Features

• Fuel UX provides all of the styles and plugins from the revolutionary Twitter Bootstrap project, with the following additions:
• Fuel UX JavaScript controls (with unit tests) see them live
• Combobox - combines input and dropdown for easy and flexible data selection
• Datagrid - renders data in a table with paging, sorting, and searching
• Pillbox - manages selected items with color-coded text labels
• Search - combines input and button for integrated search interaction
• Spinner - provides convenient numeric input with increment and decrement buttons
• One-step installation and updates through volo
• AMD compatibility for modular structure and deployment optimization
• Grunt-based build script to easily create custom distribution files
• Namespaced CSS (just add a fuelux class) for safe use on existing sites

Requirements: Twitter Bootstrap
Demo: http://exacttarget.github.com/fuelux/
License: MIT License

JavaScript InfoVis Toolkit - Tools For Creating Interactive Data Visualizations For The Web

JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.   The toolkit implements advanced features of information visualization like TreeMaps, an adapted visualization of trees based on the SpaceTree, a focus+context technique to plot Hyperbolic Trees, a radial layout of trees with advanced animations (RGraph) and other visualizations.

Requirements: None
Demo: http://philogb.github.com/jit/demos.html
License: MIT License

Freetile - A Dynamic Layout Plugin For jQuery

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement.

Features

Freetile is inspired by similar, existing efforts such as Masonry, vGrid and Wookmark. However, it differs from these solutions in some aspects:

• It allows for any size of elements to be packed without using a fixed-size column grid, so you don't have to worry about specifying a column width appropriate to the size of your elements.
• The algorithm that evaluates each possible insertion position is easily customizable, allowing for different preferences to be expressed, e.g. a preference to left- or right-alignment of elements, or proximity between certain elements.

Additionally, Freetile has the following key features:

• A smart animation routine allows distinguishing between elements that is meaningful to be animated and ones that are not (e.g. elements that have been just added to the arrangement, or those that are not visible). Special classes allow for explicitly limiting animation to select elements.
• It has been battle-tested through it's use in the many hundreds sites that make use of the Assemblage and Assemblage Plus templates. Furthermore, it has been used for layout in projects such as Properietary Polymers and Reffffound.

Requirements: jQuery
Demo: http://yconst.com/web/freetile/
License: BSD

Countdown.js - A JavaScript API For Accurate, Intuitive Description Of The Timespan Between Two Dates

Countdown.js is a  simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances. 

While seemingly a trivial problem, the human descriptions for a span of time tend to be fuzzier than a computer naturally computes. More specifically, months are an inherently messed up unit of time. For instance, when a human says "in 1 month" how long do they mean? Banks often interpret this as thirty days but that is only correct one third of the time. People casually talk about a month being four weeks long but there is only one month in a year which is four weeks long and it is only that long three quarters of the time. Even intuitively defining these terms can be problematic. For instance, what is the date one month after January 31st, 2001? JavaScript will happily call this March 3rd, 2001. Humans will typically debate either February 28th, 2001 or March 1st, 2001. There isn't a "right" answer, per se.

Countdown.js emphasizes producing intuitively correct description of timespans which are consistent as time goes on. To do this, Countdown.js uses the concept of "today's date next month" to mean "a month from now". As the days go by, Countdown.js produces consecutively increasing or decreasing counts without inconsistent jumps. The range of accuracy is only limited by the underlying system clock.

Countdown.js approaches finding the difference between two times like an elementary school subtraction problem. Each unit acts like a base-10 place where any overflow is carried to the next highest unit, and any underflow is borrowed from the next highest unit. In base-10 subtraction, every column is worth 10 times the previous column. It is a little more complex since the conversions between the units of time are not the same and months are an inconsistent number of days. In the final step of the algorithm, Countdown.js prunes the set of time units down to only those requested, forcing larger units down to smaller.

Requirements: None
Demo: http://countdownjs.org/demo.html
License: MIT License

Meny - A JavaScript Library For A Three Dimensional And Space Efficient Menu Concept

Meny is a JavaScript library to create a three dimensional and space effecient menu.  Meny works best in browsers with support for CSS 3D transforms, although it falls back on 2D animation for older browsers.  It also supports touch events for mobile devices.

Requirements: None
Demo: http://lab.hakim.se/meny/
License: MIT License

Jam - A JavaScript Package Manager For front-End Developers

Jam is a JavaScript package manager for front-end developers who crave maintainable assets.  Unlike other repositories, Jam puts the browser first.

Features

• Manage dependencies - Using a stack of script tags isn't the most maintainable way of managing dependencies, with Jam packages and loaders like RequireJS you get automatic dependency resolution.
• Fast and modular - Achieve faster load times with asynchronous loading and the ability to optimize downloads. JavaScript modules and packages provide properly namespaced and more modular code.
• Use with existing stack - Jam manages only your front-end assets, the rest of your app can be written in your favourite language or framework. Node.js tools can use the repository directly with the Jam API.
• Custom builds - No more configuring custom builds of popular libraries. Now, every build can be optimized automatically depending on the parts you use, and additional components can always be loaded later.
• Focus on size - Installing multiple versions works great on the server, but client-side we don't want five versions of jQuery! Jam can use powerful dependency resolution to find a working set of packages using only a single version of each.
• 100% browser - Every package you see here will work in the browser and play nicely with module loaders like RequireJS. We're not hijacking an existing repository, we're creating a 100% browser-focused community!

Requirements: None
Demo: http://jamjs.org/
License: MIT License

Fokus - A JavaScript Library For Emphasized Text-Highlighting

Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.  The library has no dependencies and weighs in at around 3kb. A <canvas> element is used to paint the cut-out cover.

Forkus works in most modern browsers except IE and touch devices.  Forkus is also available as a Google Chrome extension.

Requirements: None
Demo: http://lab.hakim.se/fokus/
License: MIT License

LightningJS - A Safe, Fast, & Asynchronous Embed Code Intended For Third-Party JavaScript

LightningJS is a safe, fast, and asynchronous embed code intended for third-party JavaScript.  Why Use LightningJS?

• Safe: Ensures zero Javascript code conflicts - Globals, prototypes and mismatched library versions can cause lots of compatibility headaches for third-party code.  With LightningJS, all of that third-party code lives in its own separate window context. If the code needs to do DOM manipulation, it still has access to the original document via window.parent.
• Fast: Avoids blocking window.onload and document.ready - Slowdowns in embedded third-party code should never impact the original document. Traditional embed techniques can block window.onload if the server responds slowly, even when the embed itself is asynchronous.  With LightningJS, third-party server response time has zero impact on the original document. It should even be safe to embed the code at the top of the body of the document for an added speed boost.
• Asynchronous: Defers API calls with a simple interface - When customers are using your third-party API, asynchronicity can make usage a bit more complicated. Some libraries require manual creation of a callstack (e.g. Google Analytics var _gaq=[]; _gaq.push(…)), and others try to hook into script.onload events.  With LightningJS, the third-party namespace is immediately available as a callable function. All calls return objects that adhere to the CommonJS Promise API. Just a few modifications to the existing API will enable these deferred calls.

Browser Compatibility

Exhaustive browser support is really important for LightningJS. To that end, this loading approach has been battle-tested in production by both Meebo and Olark across thousands of websites and browsers. The included tests have been verified to pass in every browser the developers could get their hands on:

• Firefox 2+ (tested in 2.0, 3.0, 3.6, 4.0, 5.0, 6.0, 7.0)
• Chrome 12+ (tested in 12, 13, 14, 15)
• Internet Explorer 6+ (tested in 6, 7, 8, 9)
• Safari 4+ (tested in 4.0, 5.0, 5.1)
• Opera 10+ (tested in 10, 11.5)
• Mobile Safari 5+ (tested in 5.0, 5.1)

Requirements: None
Demo: http://lightningjs.com/
License: MIT License

Pagify.js - A jQuery Plugin For Single Page Web Sites

Pagify is a simple jQuery plugin that simply replaces the contents of a div with content from other HTML files.

Features

• Simple - include pagify.js, create a div, make one jQuery call and you're done!
• Lightweight - pagify.js is far less than 100 lines of code, well commented and easy to understand and extend!
• Flexible - Get started by only specifying a list of pages or customize animations, default pages and caching!
• Fast - Load all pages upfront or load on the fly; a simple $.get() is used to get content with minimal proccessing!
• Clean - Replace long HTML files broken up into sections and verbose JS to do the simple task of switching content!
• HTML & JavaScript Only - Uses only Javascript and HTML so it can be uploaded like any other static site!

Requirements: jQuery
Demo: http://cmpolis.github.com/Pagify/
License: MIT License

Singool.js - A Lightweight Framework To Develop Single-Page Web Applications

Singool.js is a lightweight framework built on top of Backbone.js that helps you develop single-page web applications. It has a structure similar to popular server-side MVC frameworks, and supports plugins and themes.


Requirements: Node.js
Demo: http://singool-tasks.herokuapp.com/#!/tasks
License: MIT License