Open Source Resources for Web Application Developers

Creating accessible Web2.0 applications can be a tricky process. Many of the advanced widgets and controls we develop today don’t exist in the current HTML specification — there is no “slider” element. So Filament Group has developed an accessible slider based on the core principle of progressive enhancement with jQuery.

Filament Group designed and developed an accessible slider with a very nice interface which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.

The code is open source and licensed under GPL. You can view source to grab the code from this working example.

Requirements: jQuery
Demo: http://www.filamentgroup.com/lab/developing_an_accessible_slider/
License: GPL License

• 3 Comments

markItUp! is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites.

markItUp! is released under both the MIT and GPL Open Source licenses. In short, this means that markItUp! is totally Free, and you can do whatever you want with it. You are only obligated to keep the credits in place. Check out the examples yourself.

Requirements: jQuery 1.2 Javascript library
Demo: http://markitup.jaysalvat.com/examples/
License: MIT / GPL License

• 3 Comments

Password Strength Checker is an application that is designed to assess the strength of password strings. The instantaneous visual feedback provides the user a means to improve the strength of their passwords, with a hard focus on breaking the typical bad habits of faulty password formulation. Since no official weighting system exists, Password Strength Checker has created its own formulas to assess the overall strength of a given password.

Password Strength Check is written in Javascript and released under GPL License. You are allowed to download this application and integrate it into your web application. I am sure it will help users choosing a more secure password when filling in registration forms. However, this application is neither perfect nor foolproof, and should only be utilized as a loose guide in determining methods for improving the password creation process.

Requirements: Javascript Enabled
Demo: http://www.passwordmeter.com/
License: GPL License

• 11 Comments

Flexible WYSIWYG editing in the browser is still an inconsistent affair at best in terms of user experience, integration effort, and generated markup. In the meantime a crop of text formatting languages such as Markdown, Textile, BBCode and wiki markup have emerged as ways for users to enter rich content in a controlled enviornment.

Control.TextArea provides a toolbar for textareas where users are entering text in one of these markup languages. In addition to a toolbar it provides access to a cross browser text selection and manipulation API so that creating new functionality, or integration with your custom application features is vastly easier. The design of Control.TextArea is very clean and clear. It requires Prototype.js to work.

Requirements: -
Demo: http://livepipe.net/projects/control_textarea/
License: MIT License

• 3 Comments

Would you like to include an input that resembles the famous Apple Mail to: textfield? It would be something similar to Facebook List Input. Basically, it’s a group of pieces or bits, that can be either a box or an input. The user is able to move around between the bits by using his keyboard or his mouse. You can remove the bits by click the “x” symbol.

It has a auto complete feature as well. It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types. You’ll also be able to let it add boxes from the HTML directly. If you are interested in this amazing textboxlist, you can view the full article.

Requirements: Mootools 1.2+
Demo: http://devthought.com/wp-content/articles/autocompletelist/test.html
License: License Free

• 4 Comments

CSS Globe continues to provide us unobtrusive solutions, this time CSS Globe has presented us SearchField. It serves as a way to style your search field and add behavior without any additional JavaScript or modifications in your markup.

It features plug & play onfocus and onblur behaviors and auto suggestion. Search suggestion terms displayed as a dropdown box below the search field. You can navigate with up and down keys, or your mouse and you can edit your own keywords. All you need is two lines of code, links to JavaScript and CSS files and that would be it.

Requirements: Modern Browser with Javascript Enabled
Demo: http://cssglobe.com/lab/searchfield/
License: License Free

• 2 Comments

Do you need a spell checker for your forms? Spellify is an automatic text field spell checker. You just need to type or paste some text into the text field. No need to press the enter key. The spell checker automatically checks the text when you’re finished. It will suggest some words for you if it cannot find your text in dictionary. It is extremely useful if you need users to fill in forms or submit contents. It works in IE7, FF2, IE6, Opera 9, Safari 3.

Requirements: PHP4+, Script.aculo.us 1.8.0+
Demo: http://spellify.com
License: GPL License

• 4 Comments

Most web applications have many more model objects exposed on the backend, or admin side, than they do on the front. Coding interfaces for all those models is redundant and a waste of resources when all you need is CRUD functionality that’s smart enough to handle all your ActiveRecord associations.

ActiveScaffold is a Ruby on Rails plugin that provides you with a wealth of dynamically created goodness, just plug the ActiveScaffold into your controller, you can have a AJAXified table interface for creating, updating, and deleting objects then. It has the following main features as well.

• Automatic handling of ActiveRecord associations
• Sorting, Search and Pagination
• Graceful JavaScript degradation
• RESTful API support (XML/YAML/JSON) baked in
• Sexy CSS styling and theming support

Requirements: Ruby on Rails
Demo: http://demo.activescaffold.com/users
License: MIT License

• 4 Comments

Nowadays everybody knows that javascript can be used to validate input data in HTML forms before sending off the content to a server. Despite of that, when there are many fields in the form, the JavaScript validation becomes too complex and boring to code. That’s why fValidator exists, with it form validations are many times easier. fValidator is compatible and tested in Internet Explorer, Firefox (and its mozilla friends), Opera and Safari.

*** It works perfect with iMask as it’s complement.

Requirements: Any Modern Browsers
Demo: http://zend.lojcomm.com.br/fvalidator/exampleB.asp
License: MIT License

• 5 Comments

NicEdit is a Javascript/AJAX inline content editor to allow easy editing of web site content on the fly in the browser. It integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

NicEdit was created as an alternative for the complexity, many files and large download size (> 200KB) of popular WYSIWYG editors such as TinyMCE and FCKEditor. It implements many of the standard rich text features like these editors but is easier to integrate without impact on download size. Small file size <35KB Total, <10KB Compressed! Only 2 files (js + icons) required for operation.

Requirements: IE 5.5+, FF 2+, Opera 9+, Safari 3+
Demo: http://nicedit.com/
License: MIT License

• 4 Comments