Firefox Tab Groups

Added on: Thursday 25th August 2011

There have been quite a few releases of the Firefox web browser recently - I'm using version 6 now! - and whilst there haven't been many major innovations for a while, I've just got round to using tab groups.

Firefox has always allowed you to save sessions and has had tab groups for a few versions now, but in the latest version performance is much better as inactive groups are loaded on demand.

I've been going along for a while now having 10 to 12 of my most used tabs open when I shut down the browser so that I can click the Restore Session link the next time to have them all loaded again.

It is not without its problems though. There have been a few times when I've had a couple of instances of the browser open and closed the wrong one last, thereby losing my session.

So today, I thought I'd have a go at setting up tab groups.

First of all you need to have a few tabs open from which to create a group.

Getting to the tab groups feature isn't obvious if you haven't already set a group up - you need to click on the tiny arrow (pointing downward) at the far right hand end of the tab strip and select Tab Groups.

If you already have tab groups set up then you'll see them side by side.

If this is the first tab group then you'll see all the web pages that you had open shown side by side in a box. At the top is an area where you can add a new name for this group.

To create another tab group, proceed as follows:

• Open the site or sites you want to put into the new tab group
• Click the Group Your Tabs icon which will now be next to the List All Tabs arrow.
• This will show your existing group with the additional sites within the group.
• Simply drag these sites outside of the group and a new group will automatically be created.
• You can name this group as described above.

Note that you need at least two websites / pages in order to create a group.

I have now set up 3 or 4 groups and find it very easy to click between them. The main advantage though is that you don't have to restore the session each time and you don't end up having to scroll through all your open tabs to find a particular one.

You can find more information on the Firefox website.

Permalink

Syntax highlighting on web pages

Added on: Wednesday 24th August 2011

I've recently been looking at various solutions for highlighting code snippets as I wanted something to make it easier to publish on this blog. I've settled on highlight.js as it is so simple.

Part of the reason I haven't published an article for a while is that I wanted a better way of displaying the code than I had before. (The other reason is lack of time!)

highlight.js is a javascript library releases by Software Maniacs and setting it up couldn't be easier because it automatically recognises the scripting language - well, as long as you use one of the 41 that it knows about.

To add the feature to a web site you just have to reference a script file and a stylesheet. These are both hosted on external servers so you don't even need to download them.

The javascript reference is:

<script src="http://yandex.st/highlightjs/6.0/highlight.min.js"></script>

and the stylesheet reference is:

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.0/styles/default.min.css">

If you want a style other than the default just replace default in the url above with the name of the style. (see the site for available styles).

Thats about it, except that you have to initialise the script when the page loads - after that it will format any code within <pre><code> tags.

I had a slight problem here in that I use WymEditor for my blog which doesn't easily allow me to wrap text within these two elements.

However, a bit of jquery soon sorted this. Within the editor, I give any code a class of code_block. The jquery then goes to work on each element with this class and wraps the contents in <pre><code> tags.

I've included the script below (because I can highlight it now!)

$("p.code_block").each(function(){
var txt = $(this).html();
$(this).replaceWith('<pre><code>'+txt+'</code></pre>');
});

Except I've found a problem. As the code above contains < and > characters to show the html being output, it isn't formatted. If I take that line out it recognises it as javascript

Permalink