nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: Browsers

Any browser related topics relating to browser performance and bugs.

Firefox Extensions for Web Developers

Firefox is my development browser of choice, and has been for a long time (since Firebird 0.6 from what I remember). The browser on its own has a basic set of tools for debugging but with extensions you can turn it into the perfect tool for developing websites.

Note: This is in no way a comprehensive list; there are hundreds out there to choose from, these are the few that I use every day. You only need to take a quick search of delicious to find “X number of Firefox extensions you must use!!” lists; I’m not a big of those types or posts as they all seem to post the same info.

Firebug

I think every Web Developer has heard of Firebug; I honestly can’t remember how I managed to get anything done before I started using it, it’s such a time saver. It comes packed with useful tools like a HTML inspector, CSS inspector, JavaScript debugger and website performance analysis (Net tab). You can even extend it’s functionality using plug-ins e.g Firecookie and ySlow.

One of Firebugs useful tabs.

The Firebug net tab gives you a breakdown of page load time.

One word of warning when using Firebug; make sure you disable / close it when you aren’t using it as it will increase page render time massively.

Web Developer Toolbar

Yet another tool that most Web Dev’s must have heard of as it is such a brilliant extension. There are way to many features to list here but my personal favourites are: quickly disable/enable JavaScript, view alternative media stylesheets, view page document size, display line guides and resize the browser window to a specific resolution. Most of it’s functions I’ve never used but you never know when they may come in useful; download the Web Developer Toolbar.

Colorzilla

Colorzilla is one of those extensions that you don’t realise how much you use it until it isn’t available to you. This little tool allows you to hover over any colour (color) on a page and it will give you the corresponding Hex / RGB value. Great for when you don’t want to go hunting through a stylesheet for the colour.

It has a few options I very rarely use such as the colourpicker and the ability to save favourite colours, I prefer Photoshop and a notepad to be honest but each to their own I guess.

FireFTP

For a long time I was a FlashFXP user; that was until I stumbled upon FireFTP. The extension embeds an FTP client directly into a Firefox tab! My favorite feature (which is in most FTP clients) is the ability to keep local and server folders in sync. It’s also possible to drag files directly from a folder on you computer straight to the server (not vice versa though unfortunately).

FireFTP interface, great little Firefox extension

FireFTP has a simple clean interface, no need to jump out of Firefox to upload a file.

One feature I wish it had was the ability to ignore certain file types when uploading e.g. .svn folders. It’s possible to get round this issue by hiding hidden files / folders; then of course you fail to upload the hidden .htaccess file and break your URLs…. oh well not a bad compromise when it’s free to use (the author does accept donations which go to a generous charity for children).

Fireshot

Fireshot is one of many screenshot tools available for Firefox; it comes in both free and pro versions, but I’ve never needed any of the pro features. Gone of the days of pressing the “Prnt Scrn” button and stitching long pages together, Fireshot does it all for you. Another great feature is the ability to screenshot Flash on a page which doesn’t usually show up using print screen.

HTML Validator

My final extension is HTML Validator, this places a small icon in the bottom right of your status bar and tells you when it runs into invalid HTML. Now I don’t always use this but its good when you are editing large pages and your layout is breaking due to a missing closing tag; it may not solve the issue but it will give you a line number of where to start looking.

I would recommend disabling the plug-in by default then creating a ‘whitelist’ of sites you wish it to be enabled, as it can seriously slow down your browser.

If you have any recommendations for extensions let me know, maybe I’m missing a treat in that “must use!” extension.

Plotting chaos

I’ve known about the Web Workers API (specifications) in Firefox 3.5+ for quite a while now but never had the chance to use it. With this little graphing project I saw it as the perfect opportunity to use it.

The Workers API allows you to ‘spawn’ worker threads underneath the main browser. The advantage of this is when the workers are doing heavy calculations the main browser window will still be responsive. Usually what happens is the heavy calculations are done by the browser thread, so the whole page and UI will freeze until the calculations are finished. Not at all good for the user.

There are limitations as to what the worker threads can do as they work within a sandbox. Worker threads can’t manipulate the DOM directly; for DOM changes, a message must be sent back to the main thread. Luckily creating a worker thread and cross thread communication is simple:

1
2
3
4
5
6
7
8
9
10
11
//Create a worker thread
var worker = new Worker("js/worker.js");

//Send values to worker thread
worker.postMessage("My message here");

//Message recieved from the worker thread
worker.onmessage = function(e){
    //Grab all data and do something with it
    var dataBack = e.data;
}

The worker.js file will wait for a message from the main thread like so:

1
2
3
4
5
//Message from the window
function onmessage(e){
    //Do something with the data
    plotGraph(e.data);
}

The worker thread has now been created and messages can be passed back and forth as and when they are needed. You can think of a worker as a little math slave that’s very good and number crunching but not much else.

You can view a live demo of the chaos graph here, it only works with Firefox 3.5+ at the moment due to it’s dependencies on the Web Worker API.

Graph showing order with Flot

An example of 'order' (k=1).

Chaotic results using Flot

Chaotic results (k=2).

  • Value of k: This sets the coefficient k, try changing this from 1 to 2, and any number in between and see what happens.
  • Starting value of x: Self explanatory really, sets your initial x value before it is fed back into the equation.
  • Iterate x by (per worker): This sets the difference in x value per worker thread. If this value equals 0.1, and your initial x value is 0.3, worker 2′s inital x value equals 0.4, worker 3 = 0.5 and so on.
  • Number of iterations: The number of times x is fed back into the equation. The bigger the number the longer it will take to calculate.
  • Number of worker threads: Set how many worker threads you wish to run at the same time. Each worker will return a set of points from which a graph is plotted.

The Worker API is definitely something to look out for in the future, quicker and more efficient web apps here we come!

View demo.

A little Google Chrome search tip

Google Chrome has quickly become my new favourite browser. For a good few years Firefox (or Firebird as it used to be called) was my primary browser, but I found with all the web development extensions installed it was becoming slow and bloated. That’s when I decided to give Chrome a try.

Based on WebKit; an open-source browser engine, it’s standards compliant and very fast. Chrome has a very simple interface that has lots of nice touches. One I find I use all the time is the “keyword search” function. Here’s how it works:

First navigate to your favourite website; one I use all the time is delicious. Quickly search for something in the search box, it doesn’t matter what you search for, this is just to let Chrome know it is possible to search the site.

Chrome Keyword Search - Step 1

Search your favourite website

After a successful search right click on the Chrome address bar.

Chrome Keyword Search - Step 2

Right click on the Chrome address bar

Find the ‘Edit search engines…” option and take a look inside. You should now see your favourite website listed.

Chrome Keyword Search - Step 3

Find your favourite website listed under 'Edit search engines...'

Edit your favourite website and you will see “Keyword:”. This is the shortcut key that allows you to quickly search the site. Edit it, make it short and something you will remember. In my case it is ‘del’ for delicious.

Chrome Keyword Search - Step 4

Change the keyword option to something short

Now the fun bit; when you want to search the website again type in your keyword then the search term you’re searching for e.g. “del photography”.

Chrome Keyword Search - Step 5

Try typing your keyword and a search term

And there you have it! A very quick way to search all of your favourite websites directly from the Chrome address bar.

It’s also worth noting that Firefox can also do this and I’m sure there are similar features in other browsers.

Currently on page 4 of 41234