FileDrop is a JavaScript class for quickly creating drag 'n' drop file upload interfaces.

The class doesn't require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

It has support for multiple file uploads, there are callbacks on many events and any number of FileDrop uploaders can be used in the same page.

Also, the size of the class is lightweight (3.5 gzipped) and its API is well-documented.

For the last few months, with Devrim,  we were very busy working on a new project which focuses on easing the web development tasks of any web person (so, the title is a little self-promotion but not an exaggeration -: )-).

It is called ioDeck and launched, built with PHP and it is installed into (runs from) a single website and serves its features to any number of websites.

Like said, it focuses on easing web development tasks and we started simplifying the biggest headache for many: forms (the most simple looking yet complicated web elements).

Creating a simple form is not a big deal but integrating validations (on the client-side and server-side), sending the contents via e-mail, recording it to a database and having an interface for viewing them later requires serious effort. And, if this form has many fields (like a HR form), this gets worse.

ioDeck is an intuitive form builder where a form of any type can be created within seconds. It simply allows you to insert form elements (textfields, radio buttons, select boxes, buttons, etc.), set the validations, re-order the items with drag 'n' drops and build any simple-to-complicated form so quickly.

There are many built-in validation rules (required, e-mail, URL, min, max..), they are validated both with JavaScript + PHP and there is support for reCaptcha for spam protection.

You can also define the default values of a field and set a CSS class for it to customize it.

ioDeck is so good in notifying users when a form is submitted. It can send the notifications via e-mail (with PHP mail() or SMTP authentication), Twitter and Facebook. Btw, you can create and customize the templates of these notifications so they look exactly as you want and reflect your brand.

Also, forms can display a custom message and redirect to a given URL after submissions.

Once the form creation is complete (it really takes seconds, give it a try in the demo), we can go to the embed menu and select its look from a list of styles (the forms HTML structure uses Twitter Bootstrap's form structure which is so flexible to customize). Or select a bare-bones version to customize it yourself completely.

After that, simply choose the embed method that fits to you the best:

• a shortened URL to the form (in case you want to share the form via Twitter, e-mail, etc.)
• embedding via JS or iFrame
• getting the HTML code of the form (for max customization)

And, voila! A fully-functioning, customizable and secure form is ready for collecting submissions.

When a submission occurs, you (+ your customers, friends..) will be notified, these submissions will also be stored and can be viewed from ioDeck anytime.

As mentioned in the beginning, ioDeck will ease multiple tasks. Forms was the 1st app, 2nd app will be Newsletter for sending unlimited newsletters to your lists (and e-mail fields of forms). Let's keep the 3rd app as a surprise. ioDeck is priced $69 one time fee (no monthly payments), a "use it forever" license and comes with 6 months of free upgrades + support. And, any future apps will have their own prices.

P.S. By clicking the "Demo" in ioDeck, you get a full-featured custom installation that will be available for 48 hours so that you can play with it.

Early Birds Special For WebResourcesDepot readers

First of all, thanks very much for being an awesome reader of WRD.

And, here is an "Early Birds Discount Link" for WRD readers that will bring down the price to $59 for the next 1 week.

Looking to hear your feedback and have a great day!

Proto.io, a mobile prototyping service, has created a handy generator for quickly creating on/off flipswitches.

The switches are built with pure CSS3 and it is possible to customize the look completely.

It also comes with pre-defined styles for iOS4, iOS5 and Android as well.

P.S. In order to add functionality to such a control, it would be a good idea to listen to the "state" of the switch and add our custom events accordingly.

Usually in web apps, when we want to collect color values from users, color pickers help a lot. And, there are various high-quality color pickers out there.

colorjoe is a new one which differentiates itself by being completely scaleable which is great for responsive layouts.

It doesn't use any images, can be customized with CSS and works with all major formats (RGB, HSL, HSV or CMYK).

The color picker is standalone and has 2 callbacks: change (which is triggered continuously to detect value changes) and done (which is fired when a color is selected).

jQuery.my is a lightweight jQuery plugin which binds HTML with JS objects (in real-time).

The plugin is form-centric and it is used to validate simple-to-complex forms while making sure every rule and data is in sync.

jQuery.my catches a moment when a watched control (input) is updated. Once it happens, it applies formatting and checks whether tied controls are to be revalidated and redrawn. Also jQuery.my stores data from the control into JS object and modifies other data if needed.

It is jQuery UI-friendly and requires SugarJS to function (besides jQuery).

Improving (manipulating) standard HTML elements with JavaScript for a better usability makes sense when used wisely.

ddSlick, a lightweight jQuery plugin, does that by mimicking the behavior of list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

The data source that populates the drop-down options is JSON and there are multiple options for customizing the functionality. The look & feel can be changed as well (very few styles used).

There is also a callback function that is fired when an option is selected (which is good for auto-modifying a hidden form for a possible submit, etc.).

Today, using JavaScript frameworks, it is so easy to accomplish complex stuff with few lines of code, including Ajax.

For forms, if you want to make it much easier, ALAJAX is there for you. It is a jQuery plugin that automagically converts standard forms into Ajaxed ones, no coding required.

Once inserted and the forms are defined, It blocks the default POST functionality, analyzes the input types used and sends them as an Ajax request.

Its code is well commented and leaves space for further customizations (extra actions to be taken before/after submitting).

jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).

It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.

We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).

There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.

minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

Currently, there are 3 components: minform, longtable and dtcal.

minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.

jQuery File Upload is an impressive plugin for creating a flexible and user-friendly upload functionality with ease.

The plugin support multiple file selection and drag 'n' drops. It can display a preview of images to be uploaded and progress bars exist to inform users.

jQuery File Upload can handle cross-domain, chunked and resumable file uploads. File types and max-min sizes can be restricted with simple functions and it can work with any server-side language.

There are callbacks on every level and a detailed documentation that covers many different scenarios exists.