Open Source Resources for Web Application Developers

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

• 2 Comments

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…)

• 43 Comments

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…)

• 49 Comments

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

• 6 Comments

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

• 3 Comments

Would you like the Scrolling Background Effect like youlove.us? The technique is actually a lot simpler than it looks, it’s based around scrolling a very tall gradient image behind some transparent PNG images. The header image has a transparent background and solid text, while the main page is actually an image with the heading text as transparent cut outs.

The JavaScript is where the real magic happens. They have made use of the jQuery library and Alexander Farkas backgroundposition.js script to help them make the background move. The final result looks very nice. However, it might consume a lot of your CPU resources.

Requirements: jQuery Framework
Demo: http://youlove.us/blog/the-youloveus-scrolling-background-effect…
License: License Free

• 6 Comments

WordPress is one of the most popular CMS for blogging. There are lots of Useful Plugins and Free Themes available on the internet. Some of them are very beautiful and useful, some of them are not.

BlogPerfume has compiled a list of “45 Best Free WordPress Themes of All Time” and “45 Essential WordPress Plugins for Pro Blogging“. I am sure you would find them useful if you are using WordPress as your blogging platform.

45 Best Free WordPress Themes of All Time

45 Essential WordPress Plugins for Pro Blogging

• 5 Comments

Currently, there are two commonly used techniques on displaying columns, the fixed columns and the liquid columns. With fixed columns, there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in. The downside of liquid columns is that we are restricted to having a fixed number of columns per row.

SohTanaka has thought of a solution: Smart Columns with CSS & jQuery would be able to benefit the situations is to take the good of both scenarios and mash it into one. Allow as many fixed columns to line up across the viewport. Take excess white space and evenly distribute them to each of the columns to complete the full row. This way the columns will always fit perfectly.

And also, It keeps a default fixed width as the base, so that the columns are reasonably within the intended columns sizes while maintaining enough flexibility to accommodate for the expandable viewport.

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/smart-columns/
License: License Free

• 3 Comments

Most people getting started with JavaScript these days are faced with the challenging task of picking a library to use, or at least which one to learn first. Aaron Newton of Clientcide saw numerous posts that boil down to “MooTools or jQuery?”

He has published “jQuery vs MooTools” aims to help you make that choice. He tried to highlight the differences in philosophies between the two codebases and highlight their advantages and disadvantages.

jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability. jQuery is easy to get started and see quick results but can turn into code that’s harder to reuse and maintain, while MooTools takes longer to learn and requires you to write more code upfront before you see results, but afterwards is more reusable and more maintainable.

Both frameworks keep their cores rather lean, leaving it to you and others to write plug-ins and extensions. MooTools takes a more holistic approach and gives you tools to write anything you can imagine beyond the scope of the DOM, but pays the price by having a steeper learning curve.

MooTools extensibility and holistic approach gives you a superset of jQuery’s features, but jQuery’s focus on a slick DOM API doesn’t preclude you from using the native inheritance methods of JavaScript or from using a class system like MooTools if you want it.

Do you think so? Which framework do you choose?

Source: jQuery vs MooTools

• 24 Comments

Recently, I have been doing research on Web Caching. And I have found Caching Tutorial for Web Authors and Webmasters , which is a detailed, informational document published by Mark Nottingham.

A Web cache sits between one or more Web servers and a client or many clients, and watches requests come by, saving copies of the responses — like HTML pages, images and files — for itself. Then, if there is another request for the same URL, it can use the response that it has, instead of asking the origin server for it again.

Web Caching can reduce latency, because the request is satisfied from the cache instead of the origin server, it takes less time for it to get the representation and display it. This makes the Web seem more responsive.

And also, Web Caching can reduce network traffic, because representations are reused, it reduces the amount of bandwidth used by a client. This saves money if the client is paying for traffic, and keeps their bandwidth requirements lower and more manageable.

You can also get more information about the type of web caches, how web caches work, how to control them, tips for building a cache-aware site and etc…

Source: Caching Tutorial for Web Auhors and Webmaters
License: Creative Commons License

• 1 Comment