Fire Fox, Firebug, Joomla, JDump, Eclipse, XAmpp and why I hate IE

I recently programmed a complicated component for Joomla 1.5 and thought I would share some thoughts on different dev tools I used. I see a lot of questions on the forums about how to do this or that, these tools can help solve many problems, especially in a Joomla environment, my personal favorite.

What’s “Open Source”? It’s synonymous with “free”. You are allowed to see the source code, and change it however you like. It is usually maintained by a group of people, and when anyone has contributions to the development, they update it and publish it back to the world. To compare, something like Windows is “closed source” which means they own the code, you can’t look at it, you can’t change, they don’t care what you think, and they’ll update it when they feel like it. AND they will charge you money.

Firefox

Anyone that says IE is better that FF out of the box, is off their rocker. IE is consistently loosing market share and it’s for a reason, they suck. IE has always done their own thing, any web designer knows the headache of a webpage looking perfect in FF or IE and then view it in the other browser to see something horrid and ugly. This is because IE has not always been standards based. They interpret rules their own way and it causes pain for developers. I digress for the moment, go get Firefox. Over 475K google results for “ie style hacks”.

Firebug (for Firefox)

This is probably the greatest little Firefox extension a developer or designer could ever ask for, and it’s another open source (free) tool. It only works on Firefox, so visit the link in FF so you can install it. I won’t go into to many details, but here are some of the features. For designers, FB will let you see exactly what styles are applied to certain elements, and it will let you manipulate those styles, remove them, and add new ones. There is a visual box that will even let you see in an expanded view what you margins, padding, and element sizes are. It’s simply invaluable. (die IE) For JavaScripters, you are able to set breakpoints and inspect variables and objects during your breaks or after the script executes. There are so many more points, I could write a whole article on just this tool. Go get it, kick the tires, if you don’t like for any reason, you can get your money back, oh wait, that’s right, it’s free.

Joomla!… What is it?

It’s an open source (free) Content Management System (CMS) aimed at helping you publish a fully functioning website, complete with a user management administration area as well as a plethora of options for publishing content straight out of the box. If there is some sort of special feature you can think of that you need, you could do a search at their extension directory and probably find it for free. At the time of this writing there were 4,175 extensions available. A large majority of these are free. And each usually has its own dedicated website for support and further development of the extension.

Here are a few of the major extensions and ones I use frequently:

FireBoard (native forum solution)

VirtueMart (complete ecommerce solution)

Community Builder (user profile extension)

RSGallery2 (Gallery)

There are literally thousands more. This just gives you an idea.

J!Dump

This is a component/plugin that is specific to Joomla. If you have ever coded php. You can appreciate being able to see in real time what your variables are doing, what information your objects containe, and where you script is at within conditional statements. You can output any object or variable from your code simply by calling one function like so dump($varibleORobject, “Some Variable or Object”) ; When you refresh the page, you will get a popup that contains that information. If it’s an object, it will give you the objects properties and methods in a tree view format. Once you use this to code with, you won’t want to code any other way. Sped up my dev time by weeks.

Eclipse

Eclipse is an Integrated Development Environment. It has more options than even I know about. It has been another instrumental tool to help me along the way and saved countless hours of programming. The biggest feature I like is the tree view of functions when I load a php page. I can just click on the function in the tree view and I’m taken straight to where that code starts. I used to think Dreamweaver was the best dev application. It still has its uses, but eclipse is just too advanced and helpful for me to ever go back. There are multiple version of Eclipse, specific ones of Javascript developers and specific ones for PHP, and more and more. Spend some time investigating it, it’s another tool that will pay for itself over and over again. Oh yes, and it’s also open source (free). Can you tell I like the free stuff?

XAMMP

If you have never programmed or designed using a localhost, you are wasting time! Localhost is what you use when looking at webpages on your computer. The url looks like http://localhost/somepage.php So somepage.html would be located on your computer but the browser would know where to find that file, render it, and display its output. If you have never tried to setup Apache and a Mysql on your local computer, you just don’t know the joy you are missing out on. It’s more fun than six flags. No, it’s a pain in the arse and you’ll wish you were dead. This is where XAMPP comes in, it will install the necessary files you need to run these two critical programs for web development. It still takes a bit to get it running and figuring out where to tell it to look for files, but it’s 10 times easier than doing it all yourself.

I have programmed/built/customized several sites using these tools. My latest site is www.TrickyLinks.com.

I hope this was helpful to you. If you have any questions related to any of these topics, I have a good bit of experience so feel free to PM me or ask here.

Aric