Open Source Resources for Web Application Developers

Batman.js is a framework for building rich single-page browser applications. It is written in CoffeeScript and its API is developed with CoffeeScript in mind, but of course you can use plain old JavaScript too.

It got a stateful MVC architecture, a powerful binding system, routable controller actions, pure HTML views, toolchain support built on node.js and cake. The APIs are heavily inspired by Rails and designed to make Rails devs feel right at home. It has been tested on Chrome, Safari 4+, Firefox 3+, and IE 7+ for compatibility.

Requirements: -
Demo: http://batmanjs.org/
License: MIT License

• 0 Comments

A couple of months ago, Ian Lunn has created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level.

Now Ian Lunn has written a tutorial that took the original jQuery Parallax script he wrote and recreated a webpage with Nikebetterworld Parallax Effect. And also, he has turned the tutorial into a jQuery Plugin, you can download and fork it on Github.

Requirements: jQuery Framework
Demo: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
License: GPL, MIT License

• 0 Comments

Mobi Pick is an Android-style datepicker widget for jQuery Mobile. It uses the date library XDate and allows progressive enhancement for date input fields using Modernizr. It is free for download and released under MIT license.

If Mobi Pick does not suit your porject, you can also take a look at other datepicker and calendar components we have mentioned before.

Requirements: jQuery Mobile
Demo: http://mobipick.sustainablepace.net/
License: MIT License

• 1 Comment

Imagine you’re filling a complex form on site, or typing effervescent and extensive comment. And when you’re almost done with that browser is crashed, or you closed tab mistakenly, or electricity is turned off, or something else break your efforts. Disgusting, huh?

With Sisyphus on site you just reopen page in your modern (with HTML5 support) browser and see all your changes at that forms. It’s lightweight (3.5 KB) jQuery plugin uses Local Storage to prevent your work being lost. And Sisyphus is easy to use and needs you just to select forms to protect.

Requirements: HTML5 Support & jQuery Framework
Demo: http://simsalabim.github.com/sisyphus/
License: MIT License

• 0 Comments

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It work with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery and that all the images are same size.

Biggest difference to other responsive slideshow plugins is the file size (~1kb minified and gzipped) + that this one doesn’t try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.

Requirements: jQuery Framework
Demo: http://responsive-slides.viljamis.com/
License: MIT License

• 1 Comment

jQuery.suggest is a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke. Tab or Enter will accept the suggestion and update the input field accordingly.

If more than one match is found, a small indicator will appear underneath the input (you can still it via CSS as you wish). The user can then use the arrow up/down keys to cycle through the options.

Requirements: jQuery Framework
Demo: http://polarblau.github.com/suggest/
License: MIT, GPL License

• 0 Comments

The jQuery ContextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike the other similar plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

The contextMenu can provide a simple list of clickable commands, or offer an in-menu form. This makes very simple attribute modification possible. The contextMenu knows the two callbacks show and hide which can be used to update the state of commands within the menu. This allows en/disabling commands, changing icons or updating the values of contained <input> elements.

Requirements: jQuery Framework
Demo: http://medialize.github.com/jQuery-contextMenu/
License: MIT License

• 1 Comment

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes tons of great tools and elements that’ll get you up and running in no time.

Within global.css you’ll find The Grid, a layout framework that works on mobile devices, small screens and full-on modern desktops. It’s a twelve column, semi-liquid, mobile-scaling grid of awesomeness that you’re gonna love. It even supports arbitrary nesting.

Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff. Foundation is MIT-licensed and absolutely free to use.

You should also look at Twitter Bootstrap Toolkit we mentioned earlier too. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and etc.

Requirements: -
Demo: http://foundation.zurb.com/
License: MIT License

• 1 Comment

fcbkListSelection is a fancy item selector, just like the friends selector you can see on Facebook. It is built with jQuery javascript framework, with wide range of options. You can check out the Demo here and download the source code on Github. fcbkListSelection is released under MIT license.

Requirements: jQuery Framework
Demo: http://www.emposha.com/demo/fcbklistselection/
License: MIT License

• 1 Comment

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.

JS Bin allows you to edit and test JavaScript and HTML. Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required. JS Bin was built by Remy Sharp and is completely open source and available on http://github.com/remy/jsbin.

You can also check out JSFiddle, which is a handy online editor for JavaScript too.

Requirements: -
Demo: http://jsbin.com
License: MIT License

• 2 Comments