Open Source Resources for Web Application Developers

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application. The plugin is targeting all newer browsers.

Requirements: No Requirements
Demo: http://code.google.com/p/flot/
License: MIT License

• 1 Comment

Datejs is an open-source JavaScript Date Library. Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.

Requirements: No Requirements
Demo: http://www.datejs.com/
License: MIT License

• 2 Comments

To be honest, this is one of the best calendar I have ever seen. I was really excited when I was playing with Calendar. It is powerful and yet really easy to implement. You can also have different CSS Styling for the calendar.

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers. Rloaderro has implemented over the years and has been completely re-written for Mootools. He tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. See what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Calendar has been successfully tested in Safari, Firefox, Opera and Internet Explorer. The class requires Mootools 1.1 with Fx.Style, Element and Window. In order to enable dragging, the class also requires the Drag component.

Requirements: Safari, Firefox, Opera and Internet Explorer with Mootools Framework
Demo: http://www.electricprism.com/aeron/calendar/
License: MIT License

• 6 Comments

Mocha is a MooTools user interface class made with canvas tag graphics. It is really impressive that it requires no images. The windows, including their controls, gradients and shadows, are drawn with the canvas tag. The rounded corner radius are adjustable. Windows can be focused, dragged, resized, maximized, restored down and closed. You are able to create new windows dynamically as well. And also, it is being tested in Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9, so you are safe to use it on your web application.

The author is planning to add the following additional features as well. I really can’t wait to see these features being implemented.

• Create custom canvas scrollbars.
• Add a modal window.
• Create more class options.
• Add minimize to windows.
• Add a sortable dock.
• Make shadows easier to adjust.

Requirements: Mootools Framework
Demo: http://greghoustondesign.com/demos/mocha/
License: MIT License

• 8 Comments

This is a really good example that shows us how to create a password strength meter with a beautiful Ext User Interface. It uses the algorithm based on the code of Javascript Password Strength Meter from Geek(Wisdom).com and then use the Ext Forms to build and layout forms on the fly. It looks stunning and really professional, however this Ext form do not do anything and have very little validation on the other fields except the password field.

Requirements: No Requirements
Demo: http://testcases.pagebakers.com/PasswordMeter/
License: LGPL and MIT License

• 7 Comments

Lightbox is a simple, unobtrusive script used to overlay images on the current page. This frees you from the constraints of the layout, particularly column widths. However it only supports images.

Now Videobox is a 6kb script, which allows you to show your videos in Lightbox. It was inspired from Lightbox.v2 and uses some of the Slimbox’s code. It’s written for the wonderful mootools library. And used swfobject to embed flash. It has done a really great job, if you would like to show your videos in the page with an overlay, Videobox is a really great choice.

Requirements: No Requirements
Demo: http://videobox-lb.sourceforge.net/
License: MIT License

• 8 Comments

When developing PHP applications a great deal of time and effort is wasted writing tedious SQL queries to create, read, update, and delete (CRUD) entities. This situation is exacerbated when working with objects because relational database management systems, with which most persistent storage is maintained, can only store scalar values organized into tables. The developer is responsible for translating objects into a series of scalar values. This translation process is often very time consuming.

Junction maps an object’s state to a database, letting application developers concentrate on application level details. It is the glue between your application and its database, and it is easy to use and extensible.

Requirements: PHP 5+
Demo: http://junctionphp.com/
License: MIT License

• 1 Comment

Phatfusion has showed us another way to build our menu, he has created a image menu with the aid of Mootools framework. It looks really good and easy to use. It is very similar to the menu design of Mootools Official Website. It has the following features.

• It allows onClick event keeps selected item open.
• Click open item to close.
• Specify a function for the onClick event.
• Auto open when the page loads.

Requirements: Mootools Framework
Demo: http://www.phatfusion.net/imagemenu/index.htm
License: MIT License

• 41 Comments

CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique. CoolTips is used to replace conventional web-browser tooltips which has been tested on Windows and Mac. Firefox, Opera, Safari, Internet Explorer 6, 7. The tooltips get contents of title attribute, so it’s fully unobtrusive. CoolTips is an Object-Oriented class based on Prototype JS and Script.aculo.us frameworks. You can customize the look of different CoolTips instances using bunch of parameters or CSS easily.

Requirements: Prototype JS and Script.aculo.us Frameworks
Demo: http://www.wildbit.com/labs/cooltips/
License: MIT License

• 4 Comments

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

• Multi-column sorting
• Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
• Support for ROWSPAN and COLSPAN on TH elements
• Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
• Extensibility via widget system
• Small code size (7,4kb packed)

*** You can sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header.

Requirements: jQuery
Demo: http://tablesorter.com/
License: GPL and MIT License

• 0 Comments