Author's Opinion

The views in this column are those of the author and do not necessarily reflect the views of iTWire.

Have your say and comment below.

Thursday, 06 December 2007 17:05

Firefox hero: Legends of FOSS

By
There’s a software title out there really rocking the charts. It’s casting a spell over all who use it, bringing fun and freedom in its train around the globe. Battle against some of the largest empires. Unleash your inner spirit. What – no, we’re not talking about that game, but Firefox, the lean, clean and mean web browser. Here’s a collection of terrific plug-ins that will really enhance your web experience, for developers and end-users alike.
Firebug
Make no mistake, there are excellent web development tools around. We’ve really evolved from the days where you wrote pure HTML with vi or notepad. Back then, you carried around a handful of HTML tags in your head and marked up the text straight out your fingertips. Of course, mistakes happened but you could see these pretty quickly by viewing your page. Finding the problem wasn’t a big ask because the markup was linear – it was all just a continuous sequence of text, in order.

Modern web sites are far more complex. Styles can be applied giving a consistent and aesthetic theme across all pages. Styles can cascade – where multiple individual style sheets all combine to give the overall effect – but with this extra power and flexibility comes much more difficulty in locating the root cause of any errors.

And it’s not just page markup; add some JavaScript into the mix and you no longer have a linear, top-to-bottom flow through your page. It becomes hard to debug scripting problems, often requiring web pages to be reloaded over and over with lines added to output showing periodically that lines of code have been reached successfully.

If you can relate to this situation, fret no more. Firebug puts unprecedented live debugging tools right in your hands. It is one of the most impressive Firefox add-ons and it makes jaws drop when Internet Explorer web designers see the power it offers.

Like Firefox itself, Firebug is free and open source. It can be freely downloaded and its source code inspected or even modified, with changes contributed back to the project.

Firebug offers a series of window panes and tab pages to let you analyse in depth the underlying HTML, CSS and JavaScript that make up a page. You can see at a glance everything that can be possibly known about any style in your page. If your CSS elements are lining up, you can inspect the margins, borders and sizes and figure out why. You can pause JavaScript at any point, inspect all the variables and then set it running again or even step through it line by line.

These are pretty cool things, and some of its features are items you’d ordinarily not expect to find except in high-end expensive tools. The best is still yet to come.


Where Firebug really stands on its own is how it lets you edit any part of the HTML page right then and there and see the changes immediately. You can change HTML markup, you can modify CSS styles, and you can modify JavaScript, without any need to close your browser or reload the page. Just fix the problem, add extra debugging statements or what have you and continue. The sheer magnitude of this shouldn’t be underestimated. Give it a try and your approach to web development will never be the same again.

Firebug goes on: a JavaScript profiler shows the speed of execution of your code. You can find which functions are grinding to a halt and then focus your optimisation efforts on these key pain points for maximum return in the shortest amount of time.

Other features let you drill right into the document object model (or DOM) and see all the properties of your page. Once again, you can modify any value on the fly and keep running the page.

Note carefully there’s a known Firefox issue which will prevent Firebug running. If Firebug fails for you, open Firefox’s special URL about:buildconfig. If you see a line reading
-disable-jsd
then it’s not going to work; you need to get a different build of Firefox, or download and compile the source yourself. Be sure to include these build options
--enable-jsd --enable-extensions=default,typeaheadfind,venkman

With this build of Firefox, you’ll find Firebug works fine.

YSlow
This next Firefox add-on – which is also integrated with Firebug above – is another must-have and one which will again raise the envy of IE users. It also is free and open source.

YSlow analyses web pages and tells you just why they are slow, based on rules for high performance web sites as determined by Yahoo!’s so-called “Exceptional Performance team.”

These rules aren’t just guesses; the crowd at Yahoo! have figured out 13 ways to dramatically cut down load time and file size of web sites. These include some which are obvious like making fewer HTTP requests in general and removing duplicate scripts, but also some which you may not have considered. For instance, Yahoo!’s team discovered that putting stylesheets in the document head make pages load faster, because the page can render as it loads without having to wait for style information. Other items include stripping all unnecessary whitespace out of JavaScript which reduces human readability but increases computer performance, as well as adding content expiry headers that give caches confidence they don’t need to check for new versions.

YSlow puts this theory into practicality. Set YSlow onto a poorly-performing web page and it will generate a series of views giving heavy-duty information on the problems.

Firstly, the performance view lists the 13 mantras giving a grading for each. An ‘A’ grade means the page ranks highly for that criteria. Expending any effort on these areas will not provide any noticeable gain. By contrast, a ‘C’ grade or worse highlights a definite situation that is impinging on the load and display speeds of the page.

YSlow won’t just point out the problem locations, but will also give some advice and information. It will tell you how many external images or stylesheets or JavaScript modules or other items you’re loading. It will tell you how many DNS lookups you’re forcing on the user. It will show you where CSS is defined in the page body.

That’s just the beginning; there’s more to come.


The stats view works out the total file size of the web page, both for empty and primed cache situations. You can see immediately how large all your combined source files are and you can see which of these files are not conducive to being cached.

YSlow will show here how many total HTTP requests have to be made by a user’s browser to view your page as well as how many cookies are being set, and what their size and content are.

The components view lists each individual distinct item that appears in the page including detailed metadata like expiry date, type and size.

YSlow is easily installed, but requires Firebug be installed and loaded first. From then on, YSlow shows as another menu option within Firebug.

Additional tools built into YSlow include a syntax checker, views to separate out and combine all the JavaScript and CSS by themselves, and finally a single-paged printable view of all the performance rankings and recommendations.

If you make web sites, whether for fun or profit, you need YSlow. It’s as simple as that.

Adblock
Advertising is the necessary evil of the Internet. Most pragmatic people appreciate the need for advertising: it’s what makes things free or low-cost for the rest of us. Major newspapers don’t give their content away daily purely out of altruism, it’s because somebody else is subsidising the cost.

Yet, some ads really get up your nose. I’m particularly put off by the ones which dynamically open to take up a huge slab of the web page, obscuring the very items you’re reading until you manage to find the miniscule “close” button.

Nevertheless, whatever your view on Internet advertising, you can take some control via the third Firefox plug-in we’ll look at today. Adblock can pick up a large set of advertising types out of the box (so to speak), and has an extensible architecture so you can teach it new advertisement forms as you come across items which have not been blocked automatically.

The end result is a cleaner web viewing experience. Once again, let me advocate the beneficial nature of advertising but while advertisers keep using intrusive methods to get your attention – like the once-major scourge of the Internet, pop-up advertising – programs like Adblock will fill a need.

All three of these Firefox add-ons are free; all three can be downloaded freely and installed at will. And all three are tremendous adverts (if you’ll allow the word after dirtying it just above!) for Firefox. And whether you’re a web site designer or a professional web surfer like the bulk of us, you’ll find these plug-ins have a lot of use and value and will definitely enhance your Firefox experience.

Subscribe to ITWIRE UPDATE Newsletter here

GRAND OPENING OF THE ITWIRE SHOP

The much awaited iTWire Shop is now open to our readers.

Visit the iTWire Shop, a leading destination for stylish accessories, gear & gadgets, lifestyle products and everyday portable office essentials, drones, zoom lenses for smartphones, software and online training.

PLUS Big Brands include: Apple, Lenovo, LG, Samsung, Sennheiser and many more.

Products available for any country.

We hope you enjoy and find value in the much anticipated iTWire Shop.

ENTER THE SHOP NOW!

INTRODUCING ITWIRE TV

iTWire TV offers a unique value to the Tech Sector by providing a range of video interviews, news, views and reviews, and also provides the opportunity for vendors to promote your company and your marketing messages.

We work with you to develop the message and conduct the interview or product review in a safe and collaborative way. Unlike other Tech YouTube channels, we create a story around your message and post that on the homepage of ITWire, linking to your message.

In addition, your interview post message can be displayed in up to 7 different post displays on our the iTWire.com site to drive traffic and readers to your video content and downloads. This can be a significant Lead Generation opportunity for your business.

We also provide 3 videos in one recording/sitting if you require so that you have a series of videos to promote to your customers. Your sales team can add your emails to sales collateral and to the footer of their sales and marketing emails.

See the latest in Tech News, Views, Interviews, Reviews, Product Promos and Events. Plus funny videos from our readers and customers.

SEE WHAT'S ON ITWIRE TV NOW!

BACK TO HOME PAGE
David M Williams

David has been computing since 1984 where he instantly gravitated to the family Commodore 64. He completed a Bachelor of Computer Science degree from 1990 to 1992, commencing full-time employment as a systems analyst at the end of that year. David subsequently worked as a UNIX Systems Manager, Asia-Pacific technical specialist for an international software company, Business Analyst, IT Manager, and other roles. David has been the Chief Information Officer for national public companies since 2007, delivering IT knowledge and business acumen, seeking to transform the industries within which he works. David is also involved in the user group community, the Australian Computer Society technical advisory boards, and education.

Share News tips for the iTWire Journalists? Your tip will be anonymous

WEBINARS ONLINE & ON-DEMAND

GUEST ARTICLES

VENDOR NEWS

Guest Opinion

Guest Interviews

Guest Reviews

Guest Research

Guest Research & Case Studies

Channel News

Comments