Open Source Resources for Web Application Developers

Web is a multiple utilities. It can either be a resource that can provide information or help you keep you in touch with your loved or even be a source of entertainment. There has been exponential increase in functionalities associated with the Internet, that it is very difficult to keep a track of it.

Here are some comics that can help you catch up with what is happening on the Internet! Thank you so much for BLaugh bringing us the following funny comics about web.

Where is the Secret of Life

Baby First Language

(more…)

We’ve all seen the videos of Google’s latest product – Wave. Although not “ground-braking” and “revolutionary” as we’ve imagined, it still features some great UI that will surely inspire at least a few developers to implement some of it in their works.

Tutorialzine was one of those inspired people, he showed us how to create a Google Wave-like History Slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.

The technologies we are using include PHP as a back-end, MySQL as data storage, jQuery, CSS and XHTML for the front-end with AJAX in between. The slider itself is a component created with jQuery UI.

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2009/10/google-wave-history-slider-jquery…
License: License Free

ProgrammableWeb keeps you up to date with APIs, mashups and the Web as platform. It’s a directory, a news source, a reference guide and a community.

The database of over 900 open web APIs and thousands of applications people have built with them is the most comprehensive resource of its kind. Indexed, cross-referenced, and up-to-date.

ProgrammableWeb also gives you the resources to learn how to use APIs and build applications. Get your hands dirty creating anything from weekend project mashups to enterprise apps to VC-funded companies.

Source: http://www.programmableweb.com/

We live in a world where people are increasingly expecting more and faster speeds. In fractions of a second, your website can lose valuable visitors and in turn, money. Although most people think CDNs are for the big sites, e.g. Facebook, Twitter. CDNs are actually very cheap and incredibly easy to use these days.

Nettuts has published an article: Supercharge Website Performance With AWS S3 and CloudFront, which shows you how to setup and use Amazon’s Web Services S3 and CloudFront to decrease website load time as well as show the performance differences.

There are a lot of ways to increase the performance of your website. Why not crank up the performance of your website if you can? Especially if it could save you money in the process.

Source: http://net.tutsplus.com/articles/general/supercharge-website…

Cheat sheet is a reference tool that provides simple, brief instructions for accomplishing a specific task. We have collated a set of cheat sheets for web developers a while ago.

Woork has just released jQuery Visual Cheat Sheet, which is an useful and practical reference to jQuery 1.3 for web designers and developers. This cheat sheet (6 pages) contains the full jQuery API reference with detailed descriptions and some sample code. The simple visual style allows you to find at a glance everything you are looking for.

Requirements: -
Demo: http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html
License: License Free

A modern and easy to use Admin User Interface is the key to success of web applications. A custom made web admin user interface usually cost you a fortune. How about using some of the professionally designed Web Admin Templates at a very low price?

Here we have collected the following 20 Professional Web Admin Templates on ThemeForest. You may find them useful when designing your own web application. Also, please do not forget we have published a tutorial of How to Create a Web App Admin User Interface, so that you can create your own unique one easily as well.

1) Simple Admin – Flexible

2) Profi Admin

3) Complex Liquid Admin

4) Cleanity Complete Admin

(more…)

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.

Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away.

CSS3 Tutorials and Resources

Get Started with CSS 3 – A basic guide to using CSS3.

Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard.

Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders.

Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3.

Push Your Web Design Into The Future With CSS3 – An introduction to some of the new features in the CSS3 specification. (more…)

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

CSS3 aren’t supported by all browsers yet. The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10).

Although Firefox, Safari and Chrome support this property, they do so in slightly different modalities. For the sake of simplicity, BloggingCSS shows you how it is supported by Firefox and then explain the differences in Safari and Chrome.

Requirements: Firefox 3.0+, Safari 3.1+, Chrome 1.0+
Demo: http://www.bloggingcss.com/en/tutorials/the-css3-border…
License: License Free

Searching within the page is a major browser functionality, but what if we could code a search box in Javascript that would do the same thing? David Walsh has shown us how to create a Search & Highlight Plugin with MooTools.

However, this is not perfect at the moment. One glaring issue is that if you search for a word, then unhighlight the word, and then look for that word with the next word (”Lorem” => “Lorem ipsum”), the searcher doesn’t find the second word due to the way the nodes are in place.

Requirements: MooTools Framework
Demo: http://davidwalsh.name/dw-content/mootools-highlight.php
License: License Free