Building Simple Javascript Classes

Three cheers for jQuery, Prototype, YUI, and other javascript libraries that have made the web developer’s life simpler. These libraries make doing what needs done straight forward and clean cut.

However, these little gems do not solve some of the basic “no-no’s” of javascript development.

1. They simplify the namespaces issue, but they don’t make it go away.
2. They often don’t do much to promote good programming patterns.
3. They usually promote a procedural approach to solving problems, rather than a object oriented approach.

On that last note, the object oriented aspect of javascript is almost completely ignored by many developers. Most developers who user these libraries assume that the libraries have removed the need to learn this aspect of the language. Why learn it if you don’t have to?

Simply put, learning javascript as an object oriented language means the same thing as it does for every other language. Your code is generally cleaner, more reusable, and solves the horrors of namespaces (or lack thereof).

Since I’m nice, here’s a quick primer on how to create a javascript “class”.

First, create a variable that equals a function like this.

jsclass = function() {
    // Code goes here!
}

Next let’s create a few properties. Properties are variables that live inside the class and belong to it.

jsclass = function() {
    this.variable1 = "This is our first variable.";
    this.variable2 = "This is our second.";
}

Now we are going to add a few methods. Methods are functions that live inside the class and belong to it. We are going to allow the script that calls this little method to pass it an argument.

jsclass = function() {

    this.variable1 = "This is our first variable.";
    this.variable2 = "This is our second.";

    this.method1 = function(anArgument) {
        alert(anArgument);
    }

}

Wahoo! We now have a fully functional javascript class! It may not do much, but it works. Let’s test it. Create an HTML file and put this script in its head.

Next, throw this little bit of code into the same script block to create an object from our class.

newObject = new jsclass();

Next, in the body of your HTML document, create a button and add an onclick event as follows.

<input type="button" value="A Button" onclick="newObject.method1('Hello world.');" />

Now load your page and press the button. Prepare yourself as you are underwhelmed by a nice little alert box containing the industry standard and massively overused “Hello world”.

Now let’s do just one more thing to round out the basics of using javascript classes. Let’s use member functions and variables inside our class. We are going to change up our class just a bit so make sure to note the changes.

jsclass = function(ourMessage) {

    this.userMessage = ourMessage;
    this.errorMessage = "No message sent.";

    this.method1 = function(anArgument) {
        alert(anArgument);
    }

    this.method2 = function() {
        if(this.userMessage=="") {
            this.method1(this.errorMessage);
        } else {
            this.method2(this.userMessage);
        }
    }

}

newObject1 = new jsclass("Hello world.");
newObject2 = new jsclass("");

Now add a second button to your HTML document.

<input type="button" value="Message" onclick="newObject1.method2();" />
<input type="button" value="Nothing" onclick="newObject2.method2();" />

Clicking the buttons will give you either the message you sent, or the error message contained within the class.

Before you say it, I know that this function is basically useless and could be easily done in other ways. However, when it comes to things like roll-overs, javascript classes can be a life saver. You can have multiple roll-overs on a page that use the same code for their functionality. You can then take that same class and use it on the next project you do easier than with a procedural approach.

So take the OO dive into javascript. You may find that some of the problems (like roll-overs, menus, etc.) that took a lot of convoluted javascript functions to get working become clean and easy when created as a class. Happy experimenting!

There are tons of people, just like me and you, who have had problems installing Magento on any server, let alone a Go Daddy one. Among the horrible errors I received, these were the most common:

• The server encountered an internal error or misconfiguration and was unable to complete your request.
• Base table or view already exists
• Column already exists, or Column already exists: magento_eav_attribute

After hours of trial and error, I’ve finally figured out how to get it done right.  Unfortunately a lot of the blogs and forums I read along the way had it figured out at some point too–but between Go Daddy changes and updates from Magento every fix requires tweaking along the way. I think the key is to find a version that works for someone, and stick with that. Lucky for us Magento keeps archived copies of all their installs.

Here are 11 straight-forward steps to installing Magento 1.3.2.1.

• Sign up with a GoDaddy Linux account. I’ve read that any account will work, or that you have to at least have a Deluxe account. For this example I used the Deluxe account.
• Create a new MySQL database using the Go Daddy Hosting Control Center. Be sure to make a note of your server name, username (which is also your database name), and password.
• Download the latest release of Magento (1.3.2.3 worked great for me)
• Download the sample data that goes with that release (also on that same page)
• Add the custom php5.ini file (below) to your web root, or just create a new one and add these three lines:
  • register_globals = on
    allow_url_fopen = on
    cgi.fix_pathinfo =1
• Copy both Magento zip files (the main application release and the sample data) you downloaded to your server root. It’s quicker to copy them there, then unarchive them using the Go Daddy File Manager. Unarchive both sets using the default path of “/”.
• It may take a few minutes, but once everything is unarchived, you’ll want to copy any folders under “media” in the sample data to the main “/magento/media” folder.
• Take the SQL file in the sample data, and paste it (or import it) into the database you created in step 2. It’ll take a while, and it will create over 200 tables.
• In the “/magento” folder we’ll need to make a change to the .htaccess file (or you can download the custom one below)
  • Change “# Options -MultiViews” to “Options -MultiViews” (remove the “#”)
• Now we need to change the permissions on a few of the folders in the main /magento directory. I used an FTP manager to do this, leave a comment if you need help. Change “/var”, “/app/etc”, and “/media” to 777, and make it recursive so that it does all child folders as well.
• Browse to your site, http://www.yoursite.com/magento, and fill in the form. I chose my timezone and currency, and did not append the table names with anything. On the three checkboxes at the bottom, the only one I checked was the “rewrite” box. Click the button, and the installation will begin. It takes a few minutes, and you will probably get an error at some point in the install. Just ignore it by going back to your magento site (ie http://www.yoursite.com/magento). If you get to the point where you can create a Magento store username and password, you’re at the finish line.

Even after the install finished, the first time I went to the front side of my store, I received an error. I just refreshed the page and it went away. This happened to me on every install attempt. I think people get stuck because they immediately try to reinstall. Don’t. Just fight through it and refresh, or go back to the /magento directory and refresh your browser. I hope this tutorial saves you hours of headaches!

In part one of this blog we discussed predevelopment documents and the value such diligence adds to the overall product. Developing this documentation will improve every aspect of the project, including customer satisfaction, code stability, time management, and overall quality of work. With a clear project direction, developing a technical roadmap becomes a much more possible and manageable task.

The traditional processes and frameworks of building websites differs little from any software development. In both cases, the project needs to be divided first into layers and then into units. These are units of work which need to be built. Units have dependencies upon each other and varying levels of difficulty or complexity. Both of these factors are considered when writing an action plan. The standard of software logical layers is the classic model, view and controller. MVC refers to the data store, interface code and application code. Typically a team would begin at the database layer.

Armed with the pre-development documents discussed above, it is important get the database schema on paper. Getting your design onto paper opens up communication between developers, expresses problematic areas and at the very least adds to a team’s growing collection of site documentation. This is a great example of measure twice, cut once. The database schema is literally the brain of the website.

Application code is at the minimum the adaptor sitting on top of the database retrieving from and updating it. Application layer is where business logic gets enforced. Server resource consideration and effectiveness are factors at this layer. Designing this layer is defining the technical architecture of the project. The level of documentation sophistication varies greatly here. There is a coding syntax, called UML, which can be employed to define this layer. In practice, UML is little more than diagramming. Typical diagrams are simply boxes and arrows with brief description of what’s happening on those little arrows. An example might be: user clicks order button, check is user, check stock level, verify no holds, add order to queue, update stock, etc. No detail is too small to document. Next, the development team overlay these diagrams with the literal class names or functions required to accomplish the actions laid out.

As this process is continued, the mosaic of the software finally begins to emerge. In a sense, this step is taking the user case flows made earlier and upgrading them to a new level of complexity and relevance. Just as the user case flow allows a team to discover issues with features or usability, this analysis will expose issues in programming that are better dealt with here than later in the thick of coding with the danger of dark side of the moon syndrome. That is to say, once a programmer has gone so far in programming only to discover a problem. They might be tempted to add more code to mask the problem rather than delete existing code. If the same developer has gone into programming mode with a clear strategy, such issues would have all ready been circumvented typically resulting in more concise and effective code.

Even once programming has begun documentation should continue, now in the form of logging. Proper logging is basically making notes. Each time a unit is completed the developer would log a note stating so and any complications encountered. These logs will become invaluable in the final development stages. Project managers can review the logs and check items off their feature list. Reviewing the amount of time each unit required will aid immensely when assessing future project risk. Often, documentation produced at this stage is kept internal to be reused in future projects. However, if the client is large and technical enough, the application design too might be a welcome addition to the overall site documentation.

Interface development has changed incredibly in the last ten years. A decade ago, interface consisted of simply laying out tables and graphics while applying styles and page properties. We simply plugged in variables produced from the application code and called it done. Contemporary web technology has taken interface to a whole new level as the market demands a rich user experience. We can use our previously created wire frames as a jumping off point for developing the interface strategy. As before we list all external libraries and justify their inclusion. Some type of scripting language will likely be employed on the front-end. Whether Javascript, VBScript, or Actionscript, it is critical to get down on paper what functionality each is going to provide. What functionality is required while assessing each unit’s difficulty level? This is a technical list that should refer to specific function or class names. A complete list would be such that once completed so is the interface

In any successfully managed project should be an abundance of documentation. Some of these documents will be highly sophisticated polished products unto themselves while others might not be much more than rough notes. Regardless, they are evidence of professional diligence. At each iteration along the way we stated on paper what we intended to do, discussed the strategy with the contributors, and then did exactly what we stated. The secret to creating a quality strategy and unlocking its value is communication.

Developing a website and building a house aren’t really so different.

Both cases start with nothing, yet through the methodical, strategic placement of different materials, and labor, a new even cooler product is created. If a general contractor brought a team of experienced builders, roofers and electricians on site with ample materials and instructed them to just start building, they would likely think him crazy, jump back into their pickups and drive off as fast as possible.

Yet many pre-development teams fall into the temptation of doing just that, often armed with only the equivalent of exterior concept sketches. In small projects this is acceptable or even advisable. There would be no need to draw a blueprint or to map out the electrical for a backyard playhouse. However, buildings such as a new symphony auditorium may undergo years of planning before the first shovel ever hits the dirt.

In the web development world, the shovel breaking ground is the first lines of code being put to a text editor. Experienced IT managers understand that writing code is paramount to nailing in rafters or installing insulation, and in some instances just as immovable as the concrete foundation. “Measure twice, cut once” is a fundamental wisdom amongst builders and a philosophy also adopted by successful web developers. Going back and changing features or functionality within software is eerily similar to tearing back the plaster because someone forgot to add a pipe to the kitchen sink. You are going to have to replace the plaster, you just made a big mess on the carpet – and it’s unlikely that pipe will be installed in the ideal manner.

That’s probably enough convincing and metaphors.

Presuming a job is big enough to warrant diligent planning, where does one start?

There are numerous techniques that break the ice.

• User case flows
• Features matrix
• Wire framing
• Composite mockups
• Style guide

While a developer or project manager might loosely follow this order, he or she is really working on all of them at once. It is common to fall back and update one document as a later one illuminates some new thought, idea or most often a requirement. In fact, every recommendation in this article can be done in parallel to some degree.

Let’s explore these documents more closely.

Creating an initial user case flow can serve as a great brainstorming session. Start with a single square, usually labeled “Homepage” and from there begin asking, “Where can the user go from here?” Continue asking that question until satisfied that every page, no matter how inconsequential, has at least been noted on your case flow. A finished user case flow can become a very sophisticated document that identifies not only what pages exist but profiles the types of users and the various paths user types will use. From this user analysis the functionality required to satisfy such usage starts becoming apparent. What becomes crystal clear is the number of distinct pages a project will consist of – a handy thing to know.

This exercise sets us up for creating a soft list of site features, written out in outline format and organized by page. The more minute detail the better, as writing text into a word processor is much less expensive for the team than writing code into a code editor. This is the document both the client and the team should become extremely familiar with. Rather than revising functionality once the site is developed, it’s preferable to argue, discuss and modify within this outline. Eventually the goal of project manager and account executive is to freeze this list.

Only two documents in and we have all ready learned a great deal about the project. For an enterprise scaled project, mocking the site up would still be premature. Instead, start simply with wire frames. It is quite literally a basic mockup of every page that contains functionality. Graphic assets, such as a logo, would likely be represented by just a box with the word “LOGO” in it. However, it’s dimensions should be to scale with the rest of the page and all graphical elements noted in the same manner. Input fields, links or any page element offering interaction should be expressed. It is important to compare the feature set list with the wire frames and verify that everything from the list has been addressed by these basic illustrations.

Once wire framing is complete we not only see a roadmap beginning to develop, but can derive a list of graphic assets needed based on the previous analysis. A team that has come this far has reached a valuable milestone, creating a technical blueprint of the website. This blueprint can be communicated with the client and discussed in depth, focusing on the feature set. Do you have any additional suggestions for formulating a development strategy? Perhaps other useful types of documentation or any cool team exercises?

Do you know what is all the rage for bloggers? Top ten lists. Surfers love to read them and bloggers love to give surfers what they desire. Based on this assumption I set out to make a list of my own. Being a professional web developer working for a classy outfit like lifeBLUE Media, it’s logical that my list should be technical in nature. A list of my top ten oatmeal toppings might be fascinating and all - but is kind of irrelevant. Maybe next time around I’ll explore my breakfast habits in detail but for my first top ten list ever, let me introduce you to some products that every developer should know about.

Nick’s top ten web developer products:

10. Smarty
The world’s leading caching and templating engine. I have seen Smarty deployed on projects ranging from a few hundred dollar hobby sites to multi-million dollar enterprise applications. Implementation of this project provides unlimited scalability and enforces clear separation between application layers. Smarty is extremely well documented and a feature rich. Adding plugins is a snap, plus it comes standard with a range of powerful plugins and modifiers. Providing even more power is the fact that any standard PHP function can be tacked right on to your template variables. Read more about this world class open source PHP template engine in Smarty’s Crash Course.

9. Wimpy
I love multimedia. Without streaming audio and video, the Internet would be about as popular as your neighborhood branch library. Over the years I have tried numerous media players and the undeniable best quality for the price is this awesome little flash player known as Wimpy. I would be hard pressed to find a product in existence with more skins available or a more convenient way to make your own. With great documentation, it’s a simple product that is easy to scale and deploy. It’s something of a treat every time I get to recommend this feisty little media player. Have a peek at some great examples.

8. XSPF Player
When thirty dollars is too serious an investment or for developers who are all about the open source, the XSPF player is an open source super lightweight flash player and the leading XML playlist format for audio. It is a standard that developers should at least be aware of. What RSS is to news, XSPF is to playlists. Like most standards that rise to the top of the open sourced fray - this one is rock solid in it’s simplicity.

7. jQuery
In the web development world Javascript is something of a prodigal son. It’s practically impossible to develop a rich user experience without it (unless using Flash), but there is a learning curve. Over the last five years some incredible javascript frameworks have been taking the Internet by storm. As the availability of products such as YUI and prototype increase, the end-user distrust of Javascript has been decreasing. Out of these numerous Javascript frameworks emerging, my product of choice is this css selector styled library known as jQuery. The initial attraction is it’s filesize. Once minified and gzipped the core library is a very lightweight 18kb. At that size why not include it everytime? Also, it’s syntax and chaining abilities just make sense. Experienced developers clearly remember the gyrations and acrobatics required when armed with only getElementbyId(); jQuery takes the guess work out. Page effects that would have required many a sleepless night filled with frustration are being accomplished in five seconds when taking advantage of many user-created jQuery plugins available online. If you are a developer, odds are you are all ready using this. And know how much it rocks.

6. class.upload.php
I wanted to have at least one PHP class in this list. And the first one that comes to mind is this feature rich image manipulation script. The convenience and power of this script makes it a pleasure to work with. Simply instantiate it with the file pointer and it’s ready to go. Besides the basic ability to move files, this free class allows you to apply filters, borders, text, watermarks, etc and convert, resize or crop your images. The only server side requirement is GD2 which is standard on any new PHP deployment. Writing those functions on your own is not super complex, but why bother when this script exists? Obviously using class.upload.php would be overkill for simply uploading files - but next time your project calls for batch processing of images, keep this jewel in mind. Read more about it here.

5. WAMP / XAMP
What can I say, my job would much more difficult without WAMP. Yes, I am a Windows user. At some point aren’t we all? But I am also a developer who wants a lamp stack running locally and deploying Linux can be a major pain in the gnads. That’s where WAMP steps in. It takes about five minutes to install and setup - and just like that you are literally running a virtual server inside Windows. You localhost is Apache, mysql is running and is accessible through the included phpMyAdmin. I at least get a warm fuzzy feeling of security and freedom being able to build and test at home. Granted if you are a developer and reading this, odds are you’re totally familiar with this product all ready. But on the off chance you came this far without using it, be joyful cause this free application rocks the Kasbah.

4. Ultraedit
What kind of developer tools list would be complete without mentioning my favorite code editor? I have tried most of the popular editors out there and keep coming back to good old UE. It has all the regular goodies you might expect such as code folding, macros, smart color coding, and built in FTP. Plus, it also has some really slick regex search functionality and though a minor thing, the ability to switch tabs with your search box open makes me happy. If I had to choose one editor to work with between Zend IDE ($300.00 for a one year license), Dreamweaver ($400.00) and Ultraedit ($39.99), I would choose the most lightweight of those three, Ultraedit.

3. AgentRansack
I think we can all agree that the Windows Search isn’t that great. Simply searching for files by name can bog down or even lock up your system and it’s not even worth trying to search inside the actual files for text. And then I discovered the beauty of Agent Ransack. It can parse every file type known to man, including graphics, and does so with blazing speed and low overhead. This free application has helped me solve many a programming mystery as I trace variables or functions back to their source. The only thing that could make this app better is if it also had search and replace functionality. But for what it does, it’s the best one on the block.

2. CSDiff
Another free tool great for uncovering developer mysteries, CSDiff simply compares files or directories and walks you through variances in a convenient and simple manner. Like all good programs, it has a very small footprint and works like a champ. It’s surprising how often this tool comes in handy during debugging or troubleshooting. When knowing the difference between two scripts, documents or directories is required this app is the de facto standard.

1. Subversion
Subversion is a next generation versioning control software. I never really used CVS, which was the standard, therefore it’s impossible for me to really compare the two. I do however know Subversion, and will gladly call it perfect in it’s simplicity and crazy useful. It has the obvious benefits of enabling collaboration and protecting developers from stepping on each other’s toes as well as the security of being able to revert changes regardless of how much time has passed or how many changes are made. But the convenience of keeping your code centralized too is a real pleasure. With a publicly accessible Subversion server I can work on the same project from four different computers without the need for a zip drive or trying to merge changes on my own.
Deploying the server can be a pain in the neck - but hey, that’s what your server admin gets paid to do right?
A word of advise, commit often and commit early.

I hope you have found this list helpful. There are many tools and products out there and just as many opinions about each. What are your “must have” tools?

It’s true, there’s so much more…

For most, Firefox is just another web browser. As long as it allows you to surf the web, play online games, search for a local salon and check your email, who cares what it’s called. It’s yet another browser to add to the list of browser icons already on our desktop. And what’s the difference in the blue “e” with a Saturn-like ring around it, the compass thing, and the earthly fox anyway? Who knows and who cares, right?

Well for a web developer, these browsers are much more of a big deal to us than to our parents or neighbors. Not only does the abundance of browsers provide chaos in our everyday lives when it comes to getting our sites to look great in all of them equally, but there are also some other features that differ them as well. And as a web developer, I can speak for all of us when saying that we all “choose sides” and tend to favor one over the others. I personally think that Firefox should take over the world and leave all the others to be forgotten. But I don’t own the internets, therefore won’t be implementing this any time soon.

Among all other elements that are important when designing and developing websites, such as, making sure it looks right, all the code is doing what it’s supposed to, and images are showing properly, Firefox also opens up many doors for web developers in our constant struggle of having some assistance every once in a while. In addition to being the greatest and most compatible, user-friendly browser out there, Firefox also offers several “add-ons” to help us along the way. They are free, easy to download and use, and right at your finger-tips, if you just only knew they existed.

Here is my fave-5 personal recommendations to use as a good starting point in your addiction with Firefox add-ons:

	Web Developer Tools – A must have for web developers, this adds a toolbar to your browser that gives you such options as editing CSS, testing forms, resizing your window to different resolutions, and a slue of others. You will become reliable on the tools this add-on has to offer.
	MeasureIt – A nifty ruler to get pixel width and height of elements on a webpage. See a blank area on the page that needs an image? Use this handy tool to see how much real estate you have to work with to crop your image just the right size to fit. This tool can also be used to see how much space you have when working with columned layouts.
	Safari View & IE View – I’m grouping this as one because they serve the same purpose. Although we, as developers, would love to just have to test in one browser, we can’t forget about the others. With these tools, all you have to do is right click the webpage you are currently on and it will open the same page in another browser. Simple as that!
	ColorZilla – Wondering what color that site is using, or needing to match up colors with a design? Use this color picker to rollover a websites colors and get the RGB values, and hexadecimals. No more print screening and taking into Photoshop, you can get what you need directly from your browser.
	CSS Validator – Can’t quite pinpoint a problem? This add-on will validate any page you’re on using the W3C CSS Validator. Stop spending hours trying to figure out what’s wrong with your code, when in less than 5 seconds you can receive a list of fixes to be made. Now that’s convenient!

This is only a select few of my everday-use add-ons, out of the bazillions that Firefox actually has to offer. Whether you’re a web developer or not, the endless amounts of Firefox add-ons will have something for everyone.

Look around the web and you’ll usually notice three things:

1. A good site will have good user management.
2. There are a lot of poorly designed sites out there.
3. Someone is blabbing about it on Facebook.

We’re here to help you with all three. You already know we can design great sites – but did you know we can make user management for your site a breeze too? If you’re a developer, you know that implementing user management can be a pain. Even something as simple as creating an account for a user to login and store basic credentials can eat a few hours out of your precious budget.

For example, to create a user, you not only will have to figure out if the username or email address is taken, you will have to figure out if the password meets certain requirements on length or complexity. You also have to wonder if the “user” really is some automated robot that’s about to create 1,000 accounts and send an infinite amount of Xanax discount coupons or personal enhancement ads to your friends and family — all from a fake user account with your nice upstanding company name tacked onto the end — which could create some tense moments between you and Grandma at the big summer BBQ. (Grandma just got her first email account, and thanks to you, her first piece of inappropriate spam).

So, you’ve figured out ways around that with some nice validation checks and maybe a free captcha generator that prints out those nice squiggly letters that surely no robot could ever figure out, right? But, once Grandma finally gets her account set up, you’re going to have to worry about her forgetting her password — or wanting to change her email address or username, and then you’ve got a whole other set of problems to worry about.

What about social networking? Won’t you want your Grandma and her knitting group to help you build the popularity of your site by forging friendships with other users on your site, and talking up all the great points and usefulness you’ve provided them? As a developer, you might typically need to set aside a good week of hardcore programming to turn out some sort of respectable social networking, and by that point, you’ve spent one week of your two week budget just on user management and social networking.

This was life before Facebook Connect.  If you haven’t heard, Facebook Connect lets you allow users to login to your site using their Facebook username and password:

What that means to you is that you’ve now got a bonafide login system, password retrieval system, and one of the best social networking engines available — all with about 5 minutes of your time and just a few lines of code. Users can now interact with your site just as they normally would, except they have the built-in convenience of not having to create a new account just to be on yet another site.

Facebook’s Developer pages make it really easy to get started. I could explain it all here, but I won’t waste your time when their instructions are every bit as good as mine. Just follow the short, simple steps and you’ll be well on your way. If you want to see it in action before you integrate it into your site, checkout this nice little demo that Facebook provides: http://www.somethingtoputhere.com/therunaround/

Anyone who has spent more than two minutes looking into creating a web presence has at least heard about Open Source Software, or OSS.  Technologies like PHP, MySQL, and others have pushed this once obscure and often nerdy software model out of obscurity.  Many of the greatest web innovations have been fueled by this movement.

What is Open Source Software?  In short it’s software that is developed, published, and maintained for the benefit of the general public.  In its most common form, it is free to use, share with others, and change as you see fit.  The most unique characteristic, and the one that gives OSS its title, is that anyone who wants to can look “under the hood” at the source code.  Most commercially available software does not allow the general public to do that.  If you want all the nerdy details, see this Wikipedia article.

So does open source have anything non-nerdy to offer?  Sure!  For starters there is Firefox, the second most popular browser out there, GIMP, a free alternative to Photoshop, and many more.  Even big boy Microsoft has introduced an “open” product: a new Office file format, called Open XML.  While open source isn’t yet as sexy as a Carlie Beck photo, it has gained some press over the last few years.

For non-nerds here is what Open Source Software can do for you.

1. OSS can cost less.  While you still have to pay for development and deployment, you can save some green by using OSS because you don’t have to pay any software licensing fees.
2. OSS is frequently on the cutting edge.  In web circles, OSS is often either ahead of the curve or setting the standard.  Just look at projects like jQuery, Drupal, and Google Chrome (yep, this new browser is an OSS project run by Google).
3. OSS can be completely customized for your use.  As long as you have the know how or the resources to hire someone who does, you can customize OSS to fit your specific needs.
4. You don’t need to re-invent the wheel.  If there is an OSS solution that does what you want, why take the time to create another one?  You can simply customize an OSS solution for your needs and cut back on development costs.

Interestingly enough, OSS and proprietary software can often work together nicely (such as the content manager Umbraco, which uses Microsoft’s proprietary .NET framework).  Because of this, you can often cherry pick solutions in such a way as to provide the most impact for the least pain.

Here at lifeBLUE Media we use the power of OSS alongside other solutions to augment and enhance our development efforts.  This creates a better product for our customers and reduces development time for us.  It’s win-win.

lifeBLUE does not exclusively use OSS.  We have some very talented .NET developers and we are not opposed to purchasing a proprietary solution if it is the best option.  We use all the tools available to us to create customized solutions to our customers.  As with everything, we choose OSS or other options in order to provide our customers with the best possible product.