The Joomlashack Blog

Must Have Web Tools

Written by Joomlashack Help Joomlashack Help
Published: 08 July 2011 08 July 2011

toolboxI've been designing Joomla websites and templates for over 5 years now and a lot has changed in my productivity and production cycle throughout the years. I've found some great tools in my career as a web designer and just wanted to share some of the web developer tools that I think are a must.

Firebug

firebug_logoMost of my time in support is spent on debugging. This is just one of the many hurdles I have when I'm building templates and refining things that have been made in the past. With the ever changing way we build websites these days it's tough to keep track of all of the nuances that happen on a day to day basis. This is why I would highly recommend the Firebug add-on for Firefox.

If you're designing, developing, or debugging this is a must. I use Firebug everyday, several times a day. You can get it here: https://getfirebug.com/. This extension gives you the ability to edit and change CSS and HTML on the fly before you even look at your source files to edit them. I use it mostly for editing or debugging certain CSS problems that happen withing the Joomla template.

Below is a sceen of what the editor looks like.

firebug_2

Colorzilla

colorzilla_logoColor is a key ingredient of building a website. and sometimes it's not always easy to find which color a graphic is using on a website. That's why I'd recommend adding Colorzilla to your add-ons for Firefox. This simple little tool allows you to select any color on the screen of your web browser and get that hexadecimal color. If your creating graphics and find a great palette you can quickly select any color and grab the hex value.

Beow is an example of the Colorzilla add-on.

colorzilla_2

Ultimate CSS Gradient Generator

css3_genAlong with the Colorzilla color picker they've created a new CSS gradient creation tool. The Ultimate CSS Gradient Generator is an absolute must if your diving into CSS3 gradients. Easily input your hex values of the colors you wish to use in your gradients and it generates the CSS code for you. You don't have to know the semantics of building CSS3 gradients any longer. An added bonus is the fact that it works for IE as well.

css_gen_2

Stock.XCHNG

sxc_logoI'm asked quite often about where we get a lot of my images for the Joomla template demos we use as examples. The answer is simple. Stock.XCHNG. This is a great resource for finding images to use on your website but also just for mockups.

sxc_2

These are just a few of the tools I use on an everyday basis and I hope they can help you as much as they've helped me in my production cycle. More tools to come in the future.