Open Source Resources for Web Application Developers

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

• 23 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

The iPhone is a fantastic phenomenon. It’s a communications device, a multimedia platform and much more all rolled into one single tool. Everyone wants in on this device. With millions of iPhones out there, it makes sense to have your content, or application available on that platform, but how do you go about doing this?

WebDesignerDepot has published How to Get Started with iPhone Dev, which is an introduction to the various ways of getting content and applications onto the iPhone. It is by no means a full guide, but it can point you in the right direction and give you an overview of what is involved in the process.

Source: How to Get Started with iPhone Dev

• 1 Comment

Ethan Marcotte has raised an issue about Fluid Grids, that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?

He has wriiten a little script that makes Fluid Images. In short, it cycles through your document, swaps out the images for a transparent GIF, and applies the AlphaImageLoader property to each one. Then, whenever the window’s resized, the script automatically recalculates the proper, proportional height and width of the image, and resizes the spacer graphic accordingly. You can see it in action, and download the script.

Requirements: -
Demo: http://unstoppablerobotninja.com/entry/fluid-images/
License: License Free

• 4 Comments

Quality is a word that a lot of people like to use when describing their web design services. But what is quality, how do you know if a design is quality or not. There’s quite a few ways to spot quality within web designs.

Function has put together a few pointers, and collected some examples to explain just how they look for quality within a website design. It Includes Spacing, Pixel Perfect Detail, Typography, Organization of Elements and etc… The post is extremely well-written and informative with some really good examples. It is one of the best posts I have read for a long time.

Once you can see just what goes into making a quality web design, you can use the techniques to perfect your own style.

Source: http://wefunction.com/2009/04/quality-within-web-design/

• 5 Comments

I would like to share 25 Most Useful Blogs for Web Design and Development. Almost all of them are daily updated, and cover a wide range of topics including inspiration, design trends, tutorials, interviews, website showcase, programming techniques and resources. Add them all to your RSS reader and receive these useful information every day.

Subscribe to all of them by importing this OPML file (Right-click and Save as)

GoMediaZine is a group of guys and girls who are passionate about art and graphic design. The blog filled with lots of helpful tutorials and advice about business and design. (RSS)

WebDesignerWall serves as Nick La’s public blog where he posts his design ideas, tutorials, and talk about modern web design trends. (RSS)

Veerle Pieters is a graphic/web designer living in Belgium. Veerle’s Blog is an online source for topics ranging from XHTML/CSS to graphic design tips. (RSS)

Fubiz site is focused on the subjects of the graphic world. You can get some really inspiring and creative pictures from Fubiz. (RSS)

AdGoodness showcase only the best advertising and design around the globe. This site is there to start a conversation, to inspire, to enjoy great work, or to just talk about what your views are. (RSS) (more…)

• 97 Comments

Google Ventures seeks to discover and grow great companies, they believe in the power of entrepreneurs to do amazing things. Google Ventures is broadly interested in startups in industries including consumer Internet, software, hardware, clean-tech, bio-tech, health care and others.

They invest anywhere from seed funding to tens of millions of dollars and embrace the challenge of helping young companies grow from the garage to global relevance. They’re looking for entrepreneurs who are tackling problems in creative and innovative ways. Are you one of them?

Source: http://www.google.com/ventures/

• 1 Comment

Are you interested in developing some plugins for Chrome too? We have seen lots of browser plugins for Firefox at the moment, it would be nice if we can see some nice plugins for Chrome as well.

Matt Cutts, the head of Google’s Webspam team, has published an article about “How to Write a Chrome Extension in Three Easy Steps“. Here is a brief introduction of how to write your own Google Chrome extension in three steps:

1. Install the developer-channel version of Google Chrome
It takes maybe 3-4 minutes, you basically run a small program to indicate your preference. The developer version also gets new features (such as pressing “F11″ to get full-screen mode) way before the beta/stable releases of Chrome.

2. Read the initial documentation
Extensions currently have very Greasemonkey-like functionality: you identify which web pages should be modified, plus JavaScript to be added to those pages. Your plugin has to have a unique identifier. And you have to bundle your extension directory into a “.crx” Chrome Extension file.

3. Try it out
If you’re running the developer version of Chrome, you can install the “hello world” plugin from the extension howto page just by clicking to download the .crx file. Then type “chrome-ui://extensions/” .

Source: How to Write a Chrome Extension in Three Easy Steps

• 0 Comments

Have you migrate your feeds hosted on Feedburner to Google’s servers yet? We have just completed the migration one week ago, and It looks like my feeds are working normally. All of us should perform the migration as soon as possible because Google has announced that they expect to get all the feeds transferred by February 28, and after that day Feedburner feeds will start reporting a 404.

Feed Compare and Feed Analysis has released new versions that support migrated Google Feeds recently. You can analysis the growth of your own feed and compare it with your competitors. However, if you have not completed the migration yet, they are not working for you. So, what are you waiting for?

Source: http://www.blogperfume.com/feed-analysis/
Source: http://www.feedcompare.com/

• 2 Comments