Open Source Resources for Web Application Developers

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use Lightbox, Carousel and Tabs to name a few – and recently Scott Robbin has offered up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.

By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

Requirements: jQuery Framework
Demo: http://srobbin.com/blog/jquery-pageslide/
License: GPL License

• 4 Comments

Ample SDK is a standard-based cross-browser JavaScript GUI Framework for building Rich Internet Applications. It employs XML technologies (such as XUL, SVG or HTML5) for UI layout, CSS for UI style and JavaScript for application logic. It equalizes browsers and brings technologies support to those missing any.

Ample SDK is entirely written in JavaScript and thus it does not require any specific components installed in your browser to operate properly. It doesn’t modify the browser infrastructure but rather fills in the missing functionality.

Ample SDK consists of a Ample Runtime (or Core) and User Interface Markup Language implementations. Ample Runtime implements DOM (Level 3) objects, XML languages, objects facilitating work with XML, XSL-T, and a whole range of UI services. Every UI Markup Language implementation is included separately depending on your needs and specifics of the User Interface you build.

Ample SDK can easily be extended by prototyping existing or new objects. You can also create new components or entire languages that suit best your User Interface specifics.

Ample SDK Runtime is fully functional in all modern web browsers. User Interface languages are still being implemented/tested and some quirks might be observed. Ample SDK is distributed using a dual-licensing approach under MIT and GPL licenses.

Requirements: -
Demo: http://www.amplesdk.com/examples/
License: MIT and GPL License

• 1 Comment

The problem of mouseover/-out the menu a couple of times. After you stop moving the mouse, the animation will continue since you’ve built up the animation queue with every mouse event.

Some uses the stop() method to prevent animation queue buildup. While this helps solve the initial problem, it introduces another: When you now do a fast mouseover/-out, you will see no animation at all or just a part of the animation. This behavior seems somehow unnatural.

The HoverFlow Plugin is the solution, which honors a single mouseover/-out with a full animation cycle while preventing animation queue buildup. A queued animation will only run if it corresponds with the current mouse position at “runtime”. That is, a mouseover animation will only run if the mouse is currently over the element, and a mouseout animation will only run if the mouse is currently not over the element. Otherwise, the animation queue is emptied.

Requirements: jQuery Framework
Demo: http://www.2meter3.de/code/hoverFlow/
License: MIT and GPL License

• 10 Comments

DHTMLX library is getting closer to people who do not want or do not know how to write the code, but need to have something for showing/updating data they store in the database. Even programmers sometimes need this to minimize the time spent on routine tasks.

With the help of DHX Quick Tables, you get necessary number of web pages with tables linked to the database records. Two entries are available: for guests (just view the tables) and for administrator (view, edit, add/delete pages). Thus, you can put it on the backend of your database-driven site and be able to access and update data.

Or you can show resulting table on your website, if tabulated data is what you need. Visitors will be able to navigate through the huge amount of records, sort and filter the information. In the next build of the tool we’ll also add printing and other nice features. DHX Quick Tables is distributed under GNU GPL for free.

Requirements: -
Demo: http://www.dhtmlx.com/blog/?p=144
License: GPL License

• 0 Comments

Node.js is an Evented I/O for V8 javascript. Node’s goal is to provide an easy way to build scalable network programs. This is in contrast to today’s more common concurrency model where OS threads are employed.

Thread-based networking is relatively inefficient and very difficult to use. Node.js will show much better memory efficiency under high-loads than systems which allocate 2mb thread stacks for each connection.

Furthermore, users of Node are free from worries of dead-locking the process – there are no locks. Almost no function in Node directly performs I/O, so the process never blocks. Because nothing blocks, less-than-expert programmers are able to develop fast systems.

Node is similar in design to and influenced by systems like Ruby’s Event Machine or Python’s Twisted. Node takes the event model a bit further – it presents the event loop as a language construct instead of as a library.

Requirements: -
Demo: http://nodejs.org/
License: MIT and GPL License

• 0 Comments

Vanilla is an open-source, standards-compliant, multi-lingual, theme-able, pluggable discussion forum for the web. With over 450 plugins so far, Vanilla is ideal for custom community solutions. Anyone can download and use Vanilla for free. If you do not have a web space, you might be interested in the hosted version of Vanilla as well.

Vanilla lets you have total control over the appearance of your forum so it can completely mesh with the look & feel of your site. Vanilla is fast. Setting up a forum takes moments, using Vanilla is a breeze. With Vanilla’s Pages feature, you can add custom pages to your forum and turn it into a complete website. Add a bunch of plugins and you’ve got a totally interactive website to go along with your forum.

Requirements: -
Demo: http://vanillaforums.org/
License: GPL License

• 8 Comments

Since icons are such a huge element in modern day web design, WooThemes has partnered with Liam McKay, and brought you a fantastic new web icon set.

The WooFunction Icon Set includes 178 amazing web-related icons in a sophisticated and glossy design style. All 178 icons are available as 32×32 pixel PNG files and they are indeed pixel-perfect. If you have an in-depth look at the individual icons, you’ll notice that Liam has spent a lot of time paying attention to the finer details.

Requirements: -
Demo: http://www.woothemes.com/2009/09/woofunction-178…
License: GPL License

• 6 Comments

jCryption is a javascript HTML-Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form. It uses the Multiple-precision and Barrett modular reduction libraries for the calculations and jQuery for the rest. jCryption is completly free and dual licensed under the MIT and GPL licenses like jQuery.

Normally if you submit a form and you don’t use SSL, your data will be sent in plain text. But SSL is neither supported by every webhost nor it’s easy to install/apply sometimes. So I created this plug-in in order that you are able to encrypt your data fast and simple. jCryption uses the public-key algorithm of RSA for the encryption.

jCryption at it’s current state is no replacement for SSL, because there is no authentication, but the main goal of jCryption should be a very easy and fast to install plugin which offers a base level of security.

Requirements: jQuery Framework
Demo: http://www.jcryption.org/
License: MIT, GPL License

• 1 Comment

IxEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. Especially, IxEdit must be useful to try various interactions rapidly in the prototyping phase of your web application.

To implement interactions on a web page, programming with JavaScript is needed. However, it is hard to manage JavaScript for many designers. Therefore, making well-designed web interactions is difficult in general. IxEdit solves this problem. If you have basic knowledge about HTML and CSS, you can create interactions as you like. JavaScript coding is no longer needed.

Requirements: -
Demo: http://www.ixedit.com/
License: GPL License

• 5 Comments

Tweetable is a lightweight jQuery plugin which enables you to display your twitter feed on your site quickly and easily. More than just displaying the feeds you can highlight @replys as well as links being dynamically generated for ease of use.

To use Tweetable simply create an empty div and apply an ID or class of your choice. There are some added parameters that you can pass into tweetable for extra functionality. as default you must enter your username, you can also control the date and set the limit of tweets you wish to display.

Requirements: jQuery Framework
Demo: http://theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/tweetable/
License: MIT, GPL License

• 11 Comments