Development

When developing web sites, there are some tools that developers find invaluable in their development efforts. When working on web sites, I develop in Firefox, because of the wonderful ability to use ad-ons with it. These tools make it so much easier to find bugs and to make things work the way I want them to. Below are my favorites.

1. Web Developer: I've been using this tool for years now. It is a collection of a bunch of tools all in one location and allows you to see outlines of various blocks, information about different elements, and so much more. I highly recommend having it available if you do any web development work.
2. Firebug: This is my new favorite tool. It is a debugging tool that allows you to inspect various aspects of a web page. You can then make changes to the site live, such as changing, adding, or removing CSS or HTML code to see how it will affect the site.

   It also has several tools that can be added on that you might find useful. These are the three I use:

   • YSlow: Yahoo has some specifications they list for making a fast loading web site. This will give you a list of why a site might be running slowly. You can then choose which to change to make it run faster. Yes there are websites that do this, but having it in the console is nice.
   • FireCookie: Allows you to inspect, add, delete and change cookies on a site. If you are working with cookies, this tool makes troubleshooting so much easier.
   • FirePHP: My sites are all PHP based. With this tool, I add a little code to my site and then the PHP log is send to the Firebug Console for me to read. A real time saver.
3. ColorZilla: A simple color picker tool. If you need to know what the color is, just turn it on, mouse over and look at the status bar. It will display RGB, HTML # notation, and what element is setting the color. Will pick anything on the page, including within images.
4. HTTPFox: This is a new tool for me, but I like it. I turn it on and it allows me to see the HTTP Headers live. It only collects data when you tell it to, so the data does not get overwhelming. Now there is no guessing at what data is being posted or what headers are being interpreted. It also does cookies, so you might not need the FireCookie extension.
5. MeasureIt: This cool tool allows you to measure an area. You click to turn it on and then click and drag to measure the region and it returns width and height. Simple, yet useful.
6. SeoQuake: This is an extra. Not really a developer tool, but many times you also need to think about SEO as you work. This tool allows you to see, all on one bar, the Google PageRank, Google Index, Yahoo Links and Link Domain, MSN Index, Alexa Rank, Site Age (using WayBack Machine) and more. You can add other extensions to it as well.

If you have not gathered it from my other posts, I love Open Source. Not just because I'm too frugal (I like that word better than cheap) to pay a bunch of money for programs, but because it is often better, or at least as good as the for pay versions. Even though I love open source programs, I have come to realize that many do not know what it is. In several conversations with techs and programmers, it has become quite clear to me over the years that many people in the high tech industry to not know what this standard is. Today I will break down what open source is, how it is beneficial to users, and why programmers should program open source tools. At the end I will list some of the most popular open source products and their commercial equivalents.

What is Open Source?

The simplest way to define open source is to say that it is a license put on a program where the source is open to everyone. I've heard it said that there are two types of free. There is the free in that you can use it for free. In programming, this is often called "freeware". Then there is free as in freedom. This is open source. You are not just free to use it, you are free to change it. You can take the program, and the source code for it, change it, repackage it and let others use it. Read the complete definition here.

Why Should I Use Open Source?

It's Free. You don't have to pay for it, ever. Nothing, not a dime. No restrictions on when and where you can use it without paying.

There are a World of Programmers. You are not relying on the programmers working for the company who writes the software to come out with bug fixes and updates. Anyone can do it. You can then download them and run the patches to get your version to do the same. Of course, you want to make sure it is coming from a trusted source, but many of these fixes are sent to the package maintainer (a fancy term for the main contact who is in charge of the program) and included in the next version. This means that there might be thousands of people working on these programs to get them ready for you to use, instead of the few, or maybe dozens, that are paid to work on them when you buy commercial versions.

They Work as Well as the Commercial Version, if Not Better. This blanket statement is often true, but not always. Sometimes the commercial version is better, but often the open source one is. They might have different parts of them that work better than the commercial versions, but open source competes with the commercial versions very well. They just don't have a big marketing division to get you to buy them.

You Can Open the Commercial Versions Documents. Just because a document was created in a commercial program does not mean that you need that program to open the documents. Most of the open source versions allow you to open and save in the commercial programs formats. There are exceptions to this rule, so be sure to check out the program to see if it will do what you need.

Will Open Source Work for My Business?

Does your business like to save money? Does your tech support know how to support the tools, or are they willing to learn? Is your staff willing and able to learn the new software? If you can answer yes to these questions, then it will work for you. The tools do not work exactly the same, and some tools are not as good as commercial versions, but if you can find the tools you need in open source, you can save some money. Like with any change, you will need to train your staff. Don't just install it and tell them to use it. Teach them how and you will get a better response and it will work better for them and you. If you don't train them, then they will want to go back to what they already know.

Why Should I Program In Open Source?

Get Others to Code With You. In The Cathedral and the Bazaar Eric Raymond describes open source as a bazaar where programmers with differing agenda are all working on the same thing from different points of view. If you are working on a program and want others to help, open source is a good way to achieve this goal.

Build Loyalty. As a business, you can gain a lot of loyalty quickly by building in open source. Your developers will have a sense of ownership because they are working to develop it in their way, instead of the companies way.

It Is Less Expensive. As a business you only have to pay your core developers. Other developers will come on board with their own agenda and make your product better. You don't have to pay them.

Good Way To Learn. It is a good way for a newbie programmer to learn more about the trade. You can read the code others have written and make minor changes. If you are working on a good project, they will have a list of things that need to be done. You can pick one that is at or just above your skill level and go to work on it. In this way, you are working on a large project that you might not normally get to work on, but you are keeping it at a level that you can do on your own.

Sense of Community. Since you are working with a large group of programmers, there is a sense of community in working with all the programmers and learning from each other.

Can I sell open source? Yes. You can sell and make money from open source programs. But so can anyone else. If you write a program and license it open source, you are allowing anyone to look at your code, change it, and sell it, if they like. It is hard to make a business work with an open source business model, but several have.

Open Source List

Commercial Program - Open Source Competitor
Microsoft Windows - Linux. There are many versions of Linux. Check out Distro Watch as they will give you lots of information about the various versions right as they come out. You can even run Windows programs under the WINE emulator.
Microsoft Office - Open Office. Open Office will open all MS Office documents and save in their formats.
Internet Explorer - FireFox. Many of us use Firefox instead of IE, but not everyone knows that it is open source.
Internet Information Server - Apache Web Server. Apache is a great web server. It has a huge market share and does a great job.
Adobe Photshop - The GIMP. The first non-Microsoft commercial product on the list. The GIMP is great, but there are some things about Photoshop that make it a little better, but unless you are using it nearly every day, it may not be worth the $650 retail price tag. Some places sell it for $500 or less, but it is very expensive anyway.
Quicken - GNUCash. ok. This one is no competition. Quicken is hands down the best here. It is not really expensive and has way better tools. I think that people are afraid of working on financial stuff without the backing that intuit has. There are too many things you could screw up for people. There are no good alternatives in the open source world.
Audio Editing - Audacity. I don't actually know a commercial version that competes with Audacity. Of course, I'm not an audio expert either, but if you do a little audio work, Audacity is the way to go.
Many other products exist, but these are the ones I use regularly. I have two computers, and one has no commercial software on it. The other I'm making dual boot, because there are times when I need to test in Windows. I will then have some commercial software on one boot partition (the software that comes with Windows). For a more complete list of Open Source programs, check out Wikipedia's list

When programming a web site, it is often suggested that we stick to the standards, but what are those standards, and why should we follow them? When I develop my site, I look at it in the browser. It works, so why should I bother to make it standards compliant?

You don't have to follow the standards to make a site work. Some standards are a but hard nosed and might make it difficult for you to do the page the way you want, so why not just hack away and make it look the way you want it to?

What are Standards

Standards are a specific method to follow when programming. For HTML the standards are put forth by the World Wide Web Consortium. There are several versions of the HTML standards. These standards state what the code means, how it is to be interpreted, what the properties of it are, how it needs to be programmed, etc.

Why Use Standards

Using standards means that the page will look similar in every browser. If the browser follows the standards properly, then the page should look the same if every browser. See Browser Standards for more on browsers.

Many times a page is programmed to look right in one browser (FireFox or Internet Explorer, usually). This can block out some of your potential readers who are using the competitor. Sticking to the standards will ensure a greater amount of compatibility between browsers.

Which Standard Should I Use

Future proofing is also important. If you use some proprietary software, what is to say that software will be around in 5 years? Standards change, they evolve, but if you pick the right standard your document will be around for a very long time. ASCII is one such standard. ASCII has been around since the beginning of computers. If you write a document in ASCII, that document will still be readable in 100 years, most likely. Do you have any documents in Word Perfect Format? That format is not around any more and while there are still programs that will read them (OpenOffice) the standard is no longer supported.

Picking the right standard for the job is also important. I've seen people use Word documents on their web pages. Yes, most people will be able to open these documents, but the bulk of your web pages should be in an HTML standard. Which standard you use is an important question.

HTML has 4 major revisions, but the XHTML standard as well. I prefer to program in XHTML 1.0 Strict, but you might prefer transitional, or HTML 4.0. I would not go with any of the earlier versions of HTML at this point. You will see a post soon about what all these different standards mean, that is well beyond the scope of this document.

Browser Standards

Unfortunately the browsers to not all interpret the standards the same way. FireFox is more standards compliant that Internet Explorer, but IE 7 has come a long way and is fairly compliant now. The others range from fairly compliant to not so compliant. While sticking with the standards will make it look the closest in all the browsers, you need to look at each browser to see own they differ and make any changes you need. You will need to look into cross browser compatibility if you want it to look really good in every browser. This is an important task that you should take the time to do.

I have been doing some contract work on a site that I have to make look right in FireFox, IE 7 and IE 6. That means a lot of CSS hacking. In the process I've learned some interesting facts that I'll be sharing. The first is the different ways that FF and IE handle Horizontal Rules .

If FireFox, by default, the border of the hr is displayed. In IE, it is the inside. So if you want a 1px hr, you have to use style it so that it displays right in both. In otherwords, you have to explicitly tell it what you want the border and backgrounds to look like. Below is what I ended up with:

hr {
border: none;
background-color: #c4c4c4;
color: #c4c4c4;
height: 1px;
}


The first line tells FF to not display a border. The second line tells FF what color to make the line. The third tells IE. Notice they are the same color code. The last line says how high the line is. I had to spend a little time futzing to figure out why the line was thicker in FF than in IE, so I thought I'd share what I found in case someone else is having the same issue.