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

Pattern Tap was born out of the love for the best interface designs on the web. They wanted a place where we could come and easily find the stuff we were looking for. Sometimes it was a matter of some inspiration for pulling off a horizontal nav bar with a ton of sections, sometimes it was just trying to visually separate some content.

They didn’t find any central place to find all this stuff, so they made their own. Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. They aspire to be the design tap for your next inspiration need.

Source: http://patterntap.com

• 5 Comments

As a web designer, you are going to need browser templates. When presenting your work to a client, adding a browser frame around your design will help you or your client get an idea of what the site will really look like.

Here are the free photoshop browser templates for your professional screendesign come in 1024×768 pixels and 800×600 pixels size , all kinds of different browser (Firefox, IE, Opera, Safari, Camino and etc…) flavours. For both sizes, the safe viewing area is marked in a separate layer.

Browser components are also separated onto individual layers so you can adjust them or switch them off them as you like: Page title, Address field, Favicon, Scrollbar and Dropshadow. You can download this amazing package for free.

Update: Our reader has just pointed out that the browser templates are not updated which we have not realized. We have now found a source of Photoshop Browser Templates for IE 7 and Firefox 3.0 instead. Please feel free to download them.

Requirements: Photoshop
Demo: http://www.webdesignerstoolkit.com/
Demo: http://piksels.com/photoshop-browser-templates/
License: License Free

• 8 Comments

jQuery is awesome. Jon Hobbs-Smith has been using it for about a year now The longer he uses it, the more he finds out about it’s inner workings.

He calls myself an “intermediate” jQuery user and he thought some others out there could benefit from all the little tips, tricks and techniques he has learned over the past year. Have a look at the following 25 excellent tips of jQuery, you might be able to learn something from it.

• Load the framework from Google Code
• Use a cheat sheet
• Combine all your scripts and minify them
• Use Firebug’s excellent console logging facilities
• Keep selection operations to a minimum by caching
• Keep DOM manipulation to a minimum
• Wrap everything in a single element when doing any kind of DOM insertion
• Use IDs instead of classes wherever possible
• Give your selectors a context
• Use chaining properly
• Learn to use animate properly
• Learn about event delegation
• Use classes to store state
• Even better, use jQuery’s internal data() method to store state
• Write your own selectors
• Streamline your HTML and modify it once the page has loaded
• Lazy load content for speed and SEO benefits
• Use jQuery’s utility functions
• Use noconflict to rename the jquery object when using other frameworks
• How to tell when images have loaded
• Always use the latest version
• How to check if an element exists
• Add a JS class to your HTML attribute
• Return ‘false’ to prevent default behaviour
• Shorthand for the ready event

Source: Improve your jQuery – 25 excellent tips

• 4 Comments

jQZoom Evolution is a new release of jQZoom with full featured. It is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom Evolution is a great and a really easy to use script to magnify what you want. It is easy to customize and it works on all modern browsers. This software is licensed under GPL. You can have your jQZoom in your website, eCommerce sites or whatever you want.

You can also look at other image zooming scripts we mentioned earlier on “Javascript and Flash Image Zoom Tools” and “Open Source Image Magnifier in Javascript”

Requirements: jQuery Framework
Demo: http://www.mind-projects.it/projects/jqzoom/
License: GPL License

• 6 Comments

SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn’t depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.

With single line of code you can turn any general textarea to powerful markup editor. As far as integration is unobtrusive, HTML of your application will remain unchanged. SmartMarkUP degrades gracefully for users without JavaScript without loosing functionality of your application.

SmartMarkUP is completely customizable and scriptable as well. Changing styles, implementing new markups, creating extra buttons and submenus or adding new functionality is a matter of minutes. SmartMarkUP is distributed under GPL open source licenses, so SmartMarkUP is absolutely free and you can do anything you like with it!

Requirements: Safari 3.x, Firefox 2.x, Firefox 3.x, Google Chrome, IE7, Opera
Demo: http://www.phpcow.com/smartmarkup/examples
License: GPL License

• 1 Comment

Facebook Connect is the next evolution of Facebook Platform – enabling you to integrate the power of Facebook Platform into your own site. Enable your users to seamlessly “connect” their Facebook account and information with your site. Find their friends who also use your site. And also, share information and actions on your site with their friends on Facebook.

With Facebook Connect, users can connect their Facebook account with any partner Web site using their simplified and trusted authentication. Facebook users represent themselves with their real names and real identities. Users can take their friends with them wherever they go on the Web. As a user moves around the open Web, their privacy settings will follow them, ensuring that users’ information and privacy rules are always up to date.

Update: You can also look at the video which shows you how to “Add Facebook Connect to Your Blog in 8 Minutes“.

Requirements: -
Demo: http://developers.facebook.com/connect.php
License: Facebook TOS

• 3 Comments

A lot of people have been asking for some comparison articles for some of the popular frameworks. Here I found a nice comparison between Zend framework and CakePHP framework from Douglas Brown.

ZF offers a simple component library to provide 80 percent of the functionality mostly needed by developers. The rest of the 20 percent can be altered as per your requirements of the business. This can be done since it has a flexible architecture and you do not need any configuration file to get started with. Due to this, training costs are lessened and the product reaches the market sooner.

CakePHP is a rapid development framework for PHP that offers a flexible architecture for development, maintenance and deployment of applications. It uses the usual design patterns like MVC and ORM within the convention over configuration paradigm that helps lower development expenses and does not need the developers to write a lot of code.

Just like ZF, CakePHP does not require configuration. It is very simple to use. The company has a user friendly community called #cakephp on IRC that helps new users to begin. It is distributed under the MIT License and promises Best Practices like security, authentication and session handling. It has an object-oriented approach to keep you at ease.

Overall, both these frameworks are good to use as per your requirements. CakePHP is suitable for developers new to MVC and those who require stricter conventions. ZF is a choice for those who need better control over the application design and built-in support for renowned Web services. Both the frameworks are developing fast and the choice is entirely yours.

Some of the people noted that CakePHP has poor documentation. The Zend Framework definitely has better documentation. So if you were just getting started using an MVC Framework, ZF would be a good place to start.

Source: Zend Framework vs CakePHP Framework

• 33 Comments

YensDesign has written an interesting jQuery tutorial (Create an music player using mouse gestures and hotkeys) focused on improve the user’s interaction in your web applications. There are a lot of online jukebox based on javascript interaction, but the most of them ignore the power of mouse gestures and hotkeys.

YensDesign has created an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

Requirements: -
Demo: http://yensdesign.com/tutorials/musicplayer/
License: License Free

• 8 Comments

I would like to share two Digg Spy jQuery scripts that you can use on your site. A few years ago Digg released a very cool little visualisation tool called Digg Spy (it’s since been upgraded to the Big Spy). Recently Realmac Software released the site QuickSnapper which makes use of the similar spy technique.

if JavaScript is turned off, the list of snaps is visible by default. It only keep pulling in new items until it hits the end. jQueryforDesigners shows us how we can keep the list looping in “Simple jQuery Spy Effect Tutorial“, and in a follow up tutorial he’ll show us how to hook this in to an Ajax hit that doesn’t hammer your server and keeps the effect nice and smooth too.

You can also get the “jQuery Spy Plugin” from LeftLogic. It gives you the Digg Spy effect immediately as well. You can have your very own spy, for anything, with only a few lines of JavaScript.

Requirements: -
Demo: http://jqueryfordesigners.com/demo/simple-spy.html
Demo: http://leftlogic.com/jquery_spy/spy.html
License: License Free

• 3 Comments