Open Source Resources for Web Application Developers

Sinatra is a Ruby “micro framework” for developing Web applications. It seems to have reached critical mass – it’s on the cusp of becoming really popular.

This is a good time to check it out and see where it could fit into your own projects. Lots of awesome articles about Sinatra, Sinatra apps, and various links and resources have cropped up over the past few months.

RubyInside shows us the best links and resources for Sinatra they have found on Sinatra: 29 Links and Resources For A Quicker, Easier Way to Build Webapps. Most of which you should find useful as you start to explore Sinatra in detail.

The resources includes Tutorials and Presentations, Sinatra Applications, Deployment, Sinatra Blogging Engines and Sites Built on Sinatra.

Requirements: Sinatra
Demo: http://www.rubyinside.com/sinatra…
License: MIT License

• 0 Comments

The jQuery sIFR Plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR, Scalable Inman Flash Replacement). It gives you a function in javascript to replace text in a web page dynamically with sIFR text, using native jQuery functionality along with the jQuery Flash Plugin.

The jQuery sIFR plugin is fully configurable and can choose how little or how much you want to customize the display of the sIFRed text. It uses jQuery’s native functionality to eliminate the otherwise code redundancy in SWFObject, meaning you get a much smaller filesize and even faster loading.

Requirements: jQuery Framework
Demo: http://jquery.thewikies.com/sifr/
License: GPL, MIT License

• 7 Comments

We can create javascript treeview component quickly with jsTree. It accepts various data sources including predefined HTML, JSON and XML. User can open, close, rename, create, delete nodes easily. jsTree supports drag & drop and multiple select as well. And also, jsTree supports easy CSS customization of icons, dots, background, fonts & sizes. So that you can create your own unique javascript treeview component easily.

Requirements: jQuery Framework
Demo: http://www.jstree.com/jsTree/examples/
License: MIT, GPL License

• 6 Comments

Jx is a javascript library for creating graphical user interaces based on the fabulous MooTools library. They provide access to the library as well as extensive documentation and examples. The Jx examples are a set of web pages that illustrate specific Jx components. Simply click on a page in the tree to the left to load the appropriate sample and get started exploring Jx right away.

The theme selection allows you to change between Jx skins on the fly. Simply click the button to expose a list of available skins and select a new skin to see the effect immediately. They store a cookie in your browser so you don’t have to keep changing skins every time you load a new example. Jx is distributed under the MIT license.

Requirements: Mootools Framework
Demo: http://jxlib.org/
License: MIT License

• 4 Comments

CSS Frameworks have been a hot topic the past few months. Although they’ve been getting a lot of heat from semantic freaks and minimalists (for adding unnecessary code), I think they’re a step forward. Web design is about doing things quickly and beautifully. No matter how you feel about frameworks, it’s undeniable that they speed up the design process.

We have seen some of the popular CSS Framework like, 960.gs, Blueprint, YAML. Capsize Designs decided to combine the good points of each of them to get something that I was satisfied with. He has pretty much taken the entire grid from Blueprint (with a bunch of his own changes) and the entire typography from Tripoli (with a bunch more of his changes). Since most of it came from BlueprintCSS or Tripoli, This CSS Framework is called BlueTrip. The end result ended up really nice.

Requirements: -
Demo: http://capsizedesigns.com/blog/2008/04/bluetripcss…
License: MIT and GPL License

• 11 Comments

SimpleCart(js) is a simple paypal shopping cart in under 11kb that you can setup in minutes. It uses cookies to keep track of the items in the cart. Therefore, simpleCart(js) doesn’t require any databases or programming knowledge. You simply need to know some basic HTML and have the ability to copy and paste. However, it can easily be expanded to use databases or contain more advanced options. It’s lightweight, fast, simple to use, and completely customizable.

Requirements: PayPal Account Required
Demo: http://www.thewojogroup.com/simpleCart/
License: MIT License

• 10 Comments

WYMeditor is a web-based WYSIWYM XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.

With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, …The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.

WYMeditor has been integrated in many open or proprietary applications, such as: Drupal, Symphony, Radiant, TYPO3, WordPress, Rails, CakePHP and etc…

Requirements: -
Demo: http://files.wymeditor.org/wymeditor/trunk/src/examples/
License: MIT, GPL License

• 2 Comments

Scroll Follow is a simple jQuery plugin that enables a DOM object to follow the page as the user scrolls. It means the plugin allows an element to animate down as the user scrolls the page. Scroll Follow has been successfully, though not extensively, tested on IE6, IE7, FF2, FF3, Safari 3, and Opera 9 all on Windows. You can also set the the duration of the sliding animation.

Requirements: jQuery framework
Demo: http://kitchen.net-perspective.com/open-source/scroll-follow/
License: MIT License

• 3 Comments

FormCheck is a Mootools plugin that allows to performs different tests on forms and indicates errors. It works with input (text, radio, checkbox) fields, textarea and select boxes. You just need to add a specific class to each fields you want to check. You can perform check during the datas entry or on the submit action, shows errors as tips or in a div before or after the field, show errors one by one or all together, show a list of all errors at the top of the form, localize error messages, add new regex check and etc…

Requirements: Mootools framework
Demo: http://mootools.floor.ch/en/labs/formcheck/forum-registration/index.htm
License: MIT License

• 7 Comments

Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them. You might never use alert() again. You can add Blackbird to your page easily, simply download the files and place them on your server or in a local directory on your computer. And then Include blackbird.js and blackbird.css in your page. Blackbird is has been smoke-tested on Internet Explorer 6+, Firefox 2+, Safari 2+, Opera 9.5.

Requirements: Internet Explorer 6+, Firefox 2+, Safari 2+, Opera 9.5
Demo: http://www.gscottolson.com/blackbirdjs/
License: MIT License

• 9 Comments