Shipyard
logo
THIS SITE IS NO LONGER MAINTAINED. MOST CONTENT HAS BEEN MIGRATED TO ANCHOR HOSTING WEBSITE.
     
     
Advertising
.au domain names
free transfers, registrations and renewals from $69

Australian web hosting PHP, MySQL, Java
from $198/year

Dedicated servers
Australian, Linux and Windows, $175/month
 

Used in the html page title, should be keyword rich for search enginess

Written by: James Gregory on 20 May 2009

Mozilla for Web-developers

I generally try to avoid tech-evangelism. I've heard way too many people espousing to me the benefits of their favourite technology and ultimately I end up thinking that it's a different way to work, but it's probably not superior. Occasionally though, there are some really innovative ideas that permeate through to me and they actually do change the way I work for the better. Believe me when I say that I wouldn't bother telling you about Mozilla unless it had made my life simpler.

Mozilla, for those who don't know, is an Open-Source web-browser written largely by the engineers at Netscape. For those of you with Pavlovian responses to the phrase "Open-Source", that doesn't mean "difficult to install"; There's a Windows installer program available for it that works just like any other, and if you just want to use Mozilla as an Internet Explorer replacement, it'll do that just fine as well.

The web-dev toolbar

If you're a web-developer, you really have to check this out. You can get it from here. Once you've installed it (which is only a couple of mouse clicks), you end up with something that looks like this:

sitting just below your location bar. Ever wondered what your webpage will look like on a smaller monitor? This toolbar makes that easy, just click the "Resize" button and select the resolution you want. Mozilla will instantly snap to the size you selected and you'll be able to see the world through the eyes of your smaller-monitored clients.

The toolbar has amongst its features the ability to turn your GET forms into POST forms (and vice-versa), the ability to Javascript or CSS, show the outline of all your table cells or block elements (this one's really handy -- it's just like setting border="1" on all your tables but without all the hard work) -- great for figuring out how other designers built "that" look.

The Anchor website with and without cell borders

The last nifty feature of the web-dev toolbar you've got to know about is the "Find broken images" tool that does exactly what it says -- hunts down all those images you've referred to but forgot to upload. You'll find that option in the "Images" menu along with options to hide all your images, find missing ALT tags, and show images paths and sizes. Much better than getting calls from your customers wanting to know why there's a big "broken image" icon on their webpage.

Cool. What else?

There's heaps of extensions for mozilla. Check out The Mozilla Extension Room for more nifty tools you can hook into mozilla. Here's a few of my favourites:

  • The Google bar adds the ability to search google just as easily as entering a URL.
  • The Mozilla Calendar is a full-blown calendaring application with support for the popular ical format and group-calendaring features.
  • Reload Every will optionally reload a webpage as often as you tell it to. Very useful for tracking stock quotes, sports scores, or just keeping a live-preview of your website behind your HTML editor.

The Sidebar


The mozilla sidebar

Another surprisingly useful feature of Mozilla is the sidebar. Press F9 and a panel will appear to the left of your screen. In the screenshot I'm using the excellent CSS-reference which you can get from Netscape Devedge. I think this thing is great. If you ever need to look up an obscure part of the CSS reference, just hit F9 and click on it.

You can also make your own sidebars, it's actually very simple. They are essentially mini-HTML pages that sit in the browser all the time. Very useful for site navigation on heavily used administration areas and so forth. Check out this Howto to learn more.

Mozilla ships with details of a number of sidebars, so it's easy to add some common sidebars. Just hit F9, and click the "Tabs" button at the top right of the sidebar. That will bring up a menu, click the option that says "Customise Sidebar..." and add tabs to your heart's content.

Browsing

Mozilla has made a number of breakthroughs in day-to-day browsing that you'll find it difficult to live without once you start using them. Tabs is one feature that everyone falls in love with; Hit CTRL-T and you'll get another "tab" -- like another window but all accessible inside the browser. The first time you go to a page with one of those annoying popups, Mozilla will ask if you'd like to turn popups off. It's only when you go back to a mozilla-impaired computer that you realise just how much time you can waste with popups.

All the latest technologies

It has to be said: Mozilla's support for the latest web-technologies is second to none. Mozilla's support for PNG images is light-years ahead of Internet Explorer's, and the new 1.7 version adds support for SVG images. The internet is starting to evolve and take up these new technologies, and Mozilla is the only browser you can expect them to work in.

The Mozilla Suite

Hopefully I'll have convinced you to at least take a look at Mozilla. It has powerful tools for web-developers and makes your life easier as an end-user as well. If you're happy with your web-browser, check out the rest of the Mozilla Suite at Mozilla.org -- there's a killer mail client there as well.

Happy browsing!


Related Links:

x