My favourite Web developer add-ons for Firefox

Mozilla released Firefox 4.0 on Tuesday—it has already been downloaded 16,041,437 times; that’s about 92 downloads a second!— and there is a lot to commend it for: a clean look, that’s not too far away from both Google Chrome and Internet Explorer 9 and it’s much faster too.

While I use Google Chrome for most of my day-to-day browsing I still use Firefox for Web development, largely thanks to the number of mature add-ons available for it. These are my favourites:

1. Firebug

20110324-firefox4-firebug

Firebug is the number one reason that I use Firefox. Sure, Chrome and Internet Explorer have their own Web developer tools but none of them come close to Firebug for its awesomeness.

That said, I recently tried out Opera Dragonfly and I was really impressed.

2. Web Developer

20110324-firefox4-webdeveloper

A close second is Chris Penderick’s Web Developer toolbar that adds all sorts of useful tools to Firefox: disable CSS, outline headings and tables on the page, show HTML classes and IDs, show image sizes as overlays on the images. Brilliant!

3. ColorZilla

20110324-firefox4-colorzilla

The most useful feature of ColorZilla for me is the eyedropper tool that allows me to sample a colour on a Web page and find out the RGB or HEX value for it.

4. HTML Validator

20110324-firefox4-htmlvalidator

HTML Validator does exactly what it suggests that it does: it shows HTML validation information in the Firefox add-on bar (what used to be the status bar) at the foot of the browser viewport.

It’s very useful for at-a-glance error checking; obviously, recognising that HTML validation is an ideal and a guide rather than a hard-and-fast rule.

5. Wappalyzer

20110324-firefox4-wappalyzer

Wappalyzer is a new add-on for me that adds to Firefox the functionality that I’ve been enjoying with the Chrome Sniffer extension in Google Chrome.

It shows you in the AwesomeBar what technologies are being used, e.g. JavaScript framework, server type, content management system, web statistics, etc.

6. RSS Icon in Awesombar

20110324-firefox4-rssiconinawesomebar

For some unfathomable reason Mozilla has removed the RSS icon that appears in the AwesomeBar when you visit a page that has an RSS autodiscovery tag, such as the University homepage.

That’s where RSS Icon in Awesombar (sic) comes in. It… well, puts an RSS icon in the AwesomeBar.

7. Tab Mix Plus

20110324-firefox4-tabmixplus

There are some options within Firefox that I still cannot believe are missing. There is still no way to, by default, open your homepage when you open a new tab.

Tab Mix Plus allows you to set this option—and a whole lot more, like being able to duplicate existing tabs, or protect or lock tabs so that you don’t accidentally close them.

Over to you…

What are your favourite Firefox add-ons, for Web development or otherwise?

Advertisements

PDF problems? Check your filenames

We have been contacted a couple of times recently by content maintainers who were concerned that some users of the website were unable to open PDF files. Our users have particularly been having problems opening some PDFs in Firefox, while I have also known of Google Chrome being affected. Internet Explorer has been fine (for once!).

These odd problems have only been cropping up recently, and not just on the University website. I have heard reports from other people who have been having difficulties opening PDFs in Firefox and Chrome in general. Strangely, despite hearing numerous reports “in real life”, I have seen little chat about this on the web. So I am not entirely sure what is going on. But here is what I think has happened.

What might be causing the problem?

Both of the times I have been asked to investigate this issue, the same thing appeared to be causing it. I noticed that the PDFs in question had filenames that were not web-friendly. They were something like Example File Name.pdf.

A filename that contains capital letters, special characters or spaces is quite common, and is normally adequate if you just want to open your file from your desktop. But they are unsuitable in a web environment. URLs are not designed to contain spaces. But if you upload your PDF with a filename that contains spaces, this is what will be created. This is also what causes the dreaded “%20” ugliness that we are often asked about.

For instance, if I was to upload my hypothetical document with the filename Example File Name.pdf, its URL on the web would be http://www.st-andrews.ac.uk/media/Example%20File%20Name.pdf. This is not ideal.

Normally the software we use is smart enough to work around it. But it seems (and this is just a guess on my part because I have been unable to find any firm information) that a recent update to the Adobe Reader software (perhaps the release of Adobe Reader X) has caused a few bugs in the way certain browsers handle PDFs.

How to avoid these problems — name your files correctly

Both times I have remedied the issue by downloading all of the PDFs onto my computer, renaming the files so that they had web-friendly filenames, then re-uploading them. It seems that the best way of ensuring that your PDFs will open in all browsers is to give them a web-friendly filename in the first place. As a nice bonus, they will end up having nicer URLs as well!

If you are preparing a document to be uploaded to the website, please ensure that you have a web-friendly filename before uploading it. Avoid using any special characters, capital letters or spaces.

Do ensure that your filename is all lowercase and replace any spaces with hypens.

So if you have a file that’s called Example File Name.pdf that you want to upload to the web, create a copy and name it example-file-name.pdf. Upload this new version of the file. That way, you can help prevent users having problems viewing your documents.

This advice also applies to any sort of file you are uploading, including Word documents and  images.

Xobni for Outlook

Outlook 2007 with Xobni sidebar on the right

Outlook 2007 with Xobni sidebar on the right

The University is currently in the process of moving to a replacement service for staff email and calendars, which are currently provided via two separate, locally-hosted applications, including Meeting Maker.

The new service, dubbed Unimail, will be provided by Brightsolid in Dundee and is built on Microsoft Exchange 2010. It will be nice to have everything in one place, and as most of the Web team have been using Microsoft Outlook since we started there won’t be too much of a learning curve.

Xobni

One add-on that I’ve been using off-and-on for a year or two is Xobni, which is described as an “Outlook plugin to search people, email, and attachments instantly.“.  The name, you’ll notice, is simply the word ‘inbox’ spelt backwards.

Once installed Xobni takes a few minutes indexing your email and builds up some interesting statistics about each email recipient, such as

  • who you most frequently email
  • what times of day you most often exchange emails
  • how many emails you’ve sent and received
  • how long it takes you to respond

This is the mini-stat for my boss:

Xobni statistics

Xobni statistics

What I’ve found it most useful for is quickly searching through my email.  It is significantly faster than using Outlook’s built-in search.

The threaded email conversations are also really helpful.  Last week I received an email from someone at the University of Strathclyde, Glasgow.  I knew that he’d sent me emails a few days before but I couldn’t find them.

With Xobni it was simple.  I selected his most recent email and Xobni showed me the entire conversation, including the messages that I couldn’t find (I’d accidentally dropped them into the wrong folder).  It would have taken me ages to find those messages without Xobni.

Xobni threaded conversations, attachments, links, etc.

Xobni threaded conversations, attachments, links, etc.

As you can see from the screenshot above Xobni doesn’t just group conversations. It also remembers which files and links you’ve been sent, it extracts contact information from people’s signatures, it analyses emails to see who else is copied into emails and it builds up a picture of your contacts’ actual work or social networks.

And if that’s not enough you can explicitly enter your Twitter, Facebook, LinkedIn, Hoover’s and Xing login details and Xobni will also pull in your contacts’ profile photos and latest updates so you can see who you’re emailing.

Scheduling time with my contacts is something I do all the time. Xobni helps with that too, checking my calendar to see when I’m next available.  With one click Xobni gives me this to send to colleagues:

Here is my availability for the next few days.  (All times are GMT Daylight Time, GMT+01:00.) Auto-generated Xobni Schedule:

Mon September 27, now to 14:30

Tue September 28, 09:15 to 10:00, 11:00 to 11:30, 12:00 to 12:30, 13:30 to 14:00, 16:00 to 17:00

Wed September 29, 09:00 to 10:00, 13:30 to 15:00

Thu September 30, 09:00 to 10:00, 10:15 to 12:15, 12:45 to 15:00, 15:30 to 17:00

Fri October 01, 09:00 to 09:30, 11:00 to 17:00

Once we’re all using the Exchange calendar Xobni will also be able to tell me when I’m already scheduled to meet with my contacts.

Outlook 2010 Social Connector

Outlook 2010, which we’ll be upgrading to at some point, has a built-in social connector which does some of the same things, but having been using the two together on my PC at home I much prefer how Xobni does it, and it’s much faster too.

Free and plus

Xobni comes in two versions: Xobni (free) and Xobni Plus (US $29.95).  The paid-for version comes with more features such as a really impressive auto-suggest option when adding recipients to an email and it can search unlimited PST files (e.g. email archives).