Open Source Resources for Web Application Developers

CKEditor is a Version 3.0 of FCKeditor. After almost two years of intensive development, the first stable version of CKEditor 3.0 has finally released.

CKEditor is a complete rewrite of our so loved FCKeditor, which got a bit old after six years of great success. Not to say that FCKeditor is doing bad, but there are some new things we could bring to it, and CKEditor is the result of it. There are dozens of new features in CKEditor.

CKEditor is fast to load and fast to use. The development team stayed focused to bring the best performance you can have, using all modern best practices. You’ll be amazed with it.

You’ll note that they have also a brand new UI based on the Kama skin. Other than modern, Kama is colorful like a chameleon, so you can precisely match its color to your needs. This is an innovative and unique feature you’ll find in CKEditor only.

The CKEditor code is also much different now. It’s up to date with the new JavaScript development requirements, offering a rich and powerful integration and interaction API. The editor is totally plugin based, and it can be extended and modified in all senses to fit all needs.

Requirements: Internet Explorer, Mozilla Firefox, Google Chrome, Safari and Opera
Demo: http://ckeditor.com/demo
License: GPL, LGPL, MIT License

• 11 Comments

In-Field Labels jQuery Plugin is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

There are some major benefits. The input element or textarea never really has content, so validation can proceed without first checking for the field value. It takes one line of jQuery code to implement. And its compatible with all modern browsers (And even IE6, the “not-so-modern” browser).

Requirements: jQuery Framework
Demo: http://fuelyourcoding.com/in-field-labels/
License: GPL, MIT License

• 2 Comments

Long time ago, we have featured SimpleCart(js) on WebAppers. Recently, SimpleCart(js) 2.0 has released and it was completely rewritten from scratch to bring you a more flexible and simple API to get a custom shopping cart up and running quicker than ever.

SimpleCart(js) 2.0 is no longer only for Paypal. It now works with Google Checkout as well. You can now add increment, decrement, and remove buttons to your cart. You can also rearrange items, change the HTML tags, do whatever you like to display your cart how you want.

No databases, no programming, no headaches. A simple javascript shopping cart in under 20kb that you can setup in minutes. It’s lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML.

Requirements: -
Demo: http://demo.simplecartjs.com/
License: MIT License

• 5 Comments

The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.

Calendar events can be supplied as an array, url or function returning json. They can be dragged, dropped and resized. Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc. The jquery-week-calendar plugin is also highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.

Requirements: jQuery Framework
Demo: http://jquery-week-calendar.googlecode.com…
License: MIT License

• 14 Comments

By leveraging typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text, Type Select is able to combine custom fonts with your browser’s native text selection functionality. You can now interact with beautifully rendered typefaces just like you do with normal text.

Web professionals have been stuck with 9 “web safe” fonts for too many years. There have been some clever solutions (SIFR, FLIR, Typeface.js, Cufon), but text selection has been a tough nut to crack. This approach can become a viable workaround until browser technology catches up. Type Select is offered as a free proof-of-concept under the MIT License.

Requirements: jQuery 1.3.2+
Demo: http://www.typeselect.org/
License: MIT License

• 7 Comments

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures.

That’s why Apple implemented an alternative method on iPhone/iPod Touch: passwords get masked while typing but the last character in row is shown in plain text. Compared to common password fields on the web this method improves usability.

Therefore, Stefan Ullrich has developed a dPassword jQuery Plugin for transforming password fields into iPhone-like password fields, which delays password masking. It works unobtrusive too. Non-JS users get the common masked password fields.

Requirements: jQuery Framework
Demo: http://blog.decaf.de/2009/07/iphone-like-password-fields…
License: MIT License

• 7 Comments

Filament Group wrote an article describing how to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The technique is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

Now they have rewritten and extended the code behind the technique and packaged it up as a new jQuery plugin called “Visualize“, which you can download. The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Requirements: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT, GPL License

• 0 Comments

XRegExp is an open source (MIT license) JavaScript library that provides an augmented, extensible, cross-browser implementation of regular expressions, including support for additional syntax, flags, and methods.

XRegExp adds new regex and replacement text syntax, including comprehensive support for named capture. It also provides a suite of 12 functions and methods that make complex regex processing a breeze. And it lets you easily create and use plugins that add new syntax and flags to XRegExp’s regular expression language.

XRegExp is fully compliant with the regular expression flavor specified in ECMA-262 Edition 3 (ES3), and has been tested with Internet Explorer 5.5–8, Firefox 2–3, Safari 3–4, Chrome 1–2, and Opera 9. XRegExp uses feature detection—no browser sniffing.

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

• 1 Comment

Hemlock is an open-source web development framework, focused on allowing easy development of real-time, many-to-many apps. Hemlock follows the inspiration of Ruby web frameworks like Rails and Merb. It can be used for applications such as games, workspace collaboration and education.

A client registers for message and is only contacted when a relevant one arrives. By combining the scalability of XMPP with the flexibility of Flash, Hemlock allows you to create web applications that are more dynamic, interactive and exciting.

Hemlock 0.1 is now ready for download. Hemlock includes an example app called DrawingDemoContainer. This shows off two of the starter HemlockWidgets: a basic chatroom, and a multi-user canvas for drawing pictures. Either of these can be reused, modified, and skinned across Hemlock apps. You can learn more about Hemlock and the setup process in Learn section.

Requirements: Flash Required
Demo: http://hemlock-kills.com/
License: MIT License

• 0 Comments

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. Cedric Dugas has created a jQuery Validation Engine in order to solve this problem.

When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

When you submit a form, it will look for inputs with predefined class selectors, and validate them accordingly to their type. It also does on the fly validation when you click outside of the input. Localisation language is also available. It has been tested on Internet Exploder 6 & 7, Firefox 3+, Safari 4 and Chrome 1+.

Requirements: jQuery Framework
Demo: http://www.position-relative.net/creation/formValidator/
License: MIT License

• 9 Comments