Pimp my Firefox

Well, my week in Chrome was nice, but as I posted on Friday, it just didn't quite live up to what I wanted from a web browser. Yes, the statistics certainly seem to show Chrome as the winner in the performance stakes at least, but if you take into account other factors like the level of extension support, customisability, memory usage, etc. the results could look pretty different and, as I concluded in my previous post, it's these very things that have led me to revert back to using Firefox, at least for now.

So, being the inveterate extension-junkie that I am, here's an update on my latest browser configuration.

(I should point out that even though I have a lot of extensions installed, I'm quite particular about them. For a start, they must be stable, have good reviews and ratings and a good track record of usage. Secondly, I only install extensions that provide some specific functionality that I particularly need or want.I'm not into just downloading things for fun; I'm looking to make my web browser look and work the way I want it to. And finally, I'm always mindful of the need to constantly keep an eye on what I have installed, get rid of it if I don't make much use of it or it doesn't work properly, switch to something else if another extension does it better, and regularly update everything. I realise there's a performance hit with having a lot of extra stuff installed, so I'm always trying to keep a balance between browser enhancement and speed.)

Currently installed extensions:

Adblock Plus
Speeds up browsing and makes pages cleaner by blocking ads from loading and displaying.

AFOM
Automatically recovers memory leakage to make Firefox run faster

AVG Safe Search
This gets installed automatically with AVG antivirus. Some people find it annoying, and while it can be removed (using a hack, admittedly) I find it reassuring to have that extra level of security.

ColorZilla
As a web developer I find this one of the most useful extensions. An unobtrusive statusbar icon gives you an eyedropper to select (and copy) any colour off web pages, along with the option (highly configurable) of displaying various bits of info such as element name, size, DOM path etc to the element you're hovering over in the statusbar.

CookieSafe
Lots of options to configure how Firefox handles cookies. Personally I disable all cookies by default, then only allow the sites I trust and visit regularly. If I make a one-off visit to a site and need cookies, I can enable them temporarily just for that visit or session.

Download Statusbar
Replaces the downloads window with a neat, configurable statusbar.

Firebug
Loads of web developer tools. I've added the 'Inspect element' icon (spectacles) to my toolbar for quick checking of information relating to page elements.

Gmail Manager
Until recently I was using GMail Notifier, but this one just seems a little nicer with a few more features.

goo.gl lite
Adds a toolbar button that, when clicked, automatically copies a shortened version of the URL (using Google's new URL shortening service) to the clipboard. Essential if you're using a Twitter client that doesn't have URL shortening built in (which would obviously be ideal, but you can't win them all!)

Google Gears
Required in Firefox for various Google applications/features.

Greasemonkey
I don't make a huge amount of use of this at the moment except for Flickr - there are a bunch of really nice userscripts that make browsing and using Flickr so much better (Flickr Multi Group Sender, Flickr Auto Page, Flcirk Group Pool Admin - Warn + Delete, Flickr Tag Autocomplete, Flcirk Filter Hearts, FlickrZoom2)

Hide Menubar
Until recently I was using Personal Menu, but that just has far too many options and is unnecessarily complex. This extension achieves exactly what I need so much more simply - auto-hides the menu bar and lets you temporarily display it by pressing Alt. I've also customised Friefox's toolbars so everything else is displayed on a single toolbar - nav buttons, followed by location bar (which doubles as a search bar with the aid of keyword searches and a config tweak - see http://kb.mozillazine.org/Location_Bar_search), followed by a few extra icons (goo.gl lite, Web Developer and Firebug inspect element buttons), followed by the bookmarks toolbar (which I limit to one or two items I need quick and frequent access to (To save space I've deleted the title if they've got a decent favicon. If I need more than one or two items here I'll put them inside a folder so there's just a single folder icon on the toolbar itself)).


Html Validator
Essential for web developers - a statusbar icon shows the validation status of every web page, including local ones, and clicking it opens the source code with the validation report.

JSView
Provides quick access to javascript files used by the current page.

KeyScrambler
See my last post - its a nice extra layer of security but I'm in two minds about it, as it is a bit laggy.

Locationbar Limit
Lets you show more items in the location bar dropdown, so saving scrolling if you're searching through a lot of results.

Locationbar2
Emulates a feature built in to Chrome, where the domain of the current page is highligheted, and URL segments are selectable.

MeasureIt
Statusbar icon which, when clicked, allows you to drag out a rectangular box/ruler over any area of the current page, showing the dimensions.

NoScript
I use this in a similar way to CookieSafe - set all scripts as blocked by default, then only allow scripts on sites I trust and visit regularly, then just temporarily for other sites. You have fine-grained script control so if you don't want to allow scripts for a particular advertising service included in a page you don't need to.

OpenBook
Enhances Firefox's built-in bookmark management by allowing customization of the 'Add bookmark' dialogue, such as automatically opening the bookmark tree, etc.

Organize Status Bar
Essential if you have as many extensions as me!!! Lets you organize what icons are displayed and where.

Resizeable Textarea
Forces all textareas to be resizeable.

Speed Dial
Create a new tab/start page showing thumbnail links to all your favourite sites. You can have multiple tabs as well if you like (I have one for 'Work' and one for 'Personal'). Loads of customisation options.

Unsorted Bookmarks Folder Menu
Adds a link to Firefox's 'Unsorted Bookmarks' folder in the  bookmarks menu. Simples!

Vacuum Places Improved
Optimizes Firefox's places.sqlite database - really makes a big difference to browser speed if your history file is quite large.

Web Developer
Absolutely essential for web developers. End of.

Xmarks
Bookmark backup/sync. A million times better than Google Bookamarks.

Yoono
I've only just discovered this so it's still 'on trial' but it's an integrated social networking sidebar for Firefox. Seems pretty good at the moment and I think I prefer this to loading a separate app like Digsby when I've got the browser opan all day anyway.

Finally, here's a screenshot of how my browser looks:

Google Chrome - week 1

Well, it's been just over a week since I decided to try using Google Chrome as my main web browser. How have I found it? Will I stick with it?

To be honest still I'm torn between Chrome and Firefox. There are pros and cons to both. Here's  a quick list of where each browser scores, from a fairly non-technical perspective (i.e. I'm sure there all sorts of things 'under the hood' that could affect the comparison but which I don't know enough about):

Chrome

• Significantly faster startup time
• Separate processes for each tab and extension (if one crashes you can carry on using the browser)
• Memory is periodically 'cleaned' to prevent memory usage constantly creeping up (although it uses more memory overall)
• Looks nicer!
• Web search integrated into address bar (although FF similar, though not quite so good, with search keywords)
• Searching browsing history searches page content, not just titles
• Generally, Google apps (which I use a lot of - who doesn't?) work better with Google browser

Firefox

• Uses less memory overall (although memory leaks do tend to mean it increases over time)
• Several key extensions not available for Chrome (yet), e.g. Web Developer, Colorzilla, NoScript, CookieSafe
• Better bookmark management (e.g. tags)
• Sorting options for history
• Right-click to view images/background images (have to open developer console in Chrome)
• Toolbars are customizable (particularly important with extensions - Chrome's extensions all get added into the main toolbar and move around randomly! Plus FF has the added advantage in this respect of a status bar for extension icons etc.)
• As a colleague pointed out yesterday, from a web development and browser compatibility point of view, Firefox is the most widely used browser (if you treat each major version of IE as different browsers) so it makes more sense to use it as your primarily browser when developing sites.

So, the jury is split! I expect Chrome to catch up with Firefox in many of these areas, although having said that, I know that the Firefox developers are already looking into many of the things where Chrome has taken the lead, such as separate processes, better search integration, etc. for future versions, so nothing is a foregone conclusion!

Google Chrome extensions

This week I finally made the big switchover from Firefox to using Google Chrome as my web browser of choice. I'd tried several times before, but the lack of extension support in Chrome put me off as I'm a bit of an extension junkie, as those of you who know me will testify!

However, with extensions now supported in the Beta version of Chrome and soon to be in the main release version too, I decided to make a serious attempt at switching over. I was already convinced about the browser itself - it wins hands down on the speed and stability stakes, compared to Firefox which, while it started out so well, has just got slower and clunkier as time has gone on (partly a result of all those extensions, but by comparison Chrome hasn't seemed to be affected too noticeably yet).

Admittedly, Chrome's extension gallery is still in its infancy. There are a number of things that are not yet catered for and many of the existing extensions are still in the early stages of development and quite buggy. However, there seems to be just about enough to work with and obviously over time things will improve.

I started out by making a list of all the addons I've got installed in Firefox and then searched for equivalent Chrome extensions.

Here's the list as it stands at the moment:

Firefox	Chrome
Adblock Plus	AdBlock
AFOM Addon	-	Not needed in Chrome as memory leaks are not such an issue
AVG Safe Search	WOT	However, Chrome's built-in security features make the need for this less urgent.
Colorzilla	-	One of my most-used FF extensions. However, the various functions are fairly well covered by Pendule and Chrome's built-in developer tools.
CookieSafe	-	This is one that I'd really like to see ported over to Chrome as soon as possible (I'd do it myself if I knew how!). In FF I disabled all cookies and then just enabled them on a per-site basis only when absolutely required, and temporarily unless for trusted sites I visited regularly.
Download Statusbar	-	No need for this as Chrome already shows download status in a fairly unobtrusive way.
Fasterfox Lite	-	Chrome is already a lot faster so no need for this at the moment.
Firebug	Firebug Lite	However, Chrome's built-in developer tools provide all the Firebug-like functionality I need at the moment.
GMail Notifier	Google Mail Checker Plus	The Chrome extension is actually much nicer than the FF one, although still has a few bugs.
Greasemonkey	-	It is possible to enable userscripts in Chrome, but as the only Greasemonkey scripts I used in FF were for Flickr, I've managed to find Chrome extensions for Flickr that do most of what I want anyway. Still, a standard way to add userscripts would be handy.
Html Validator	-	There are several validators for Chrome, including HTML Validator, but none currently works with locally hosted pages, like the FF one, which is a shame.
JSView	-	I never used this all that much anyway, but occasionally it was handy for quick access to scripts. The lack of an equivalent for Chrome is not a big deal though.
KeyScrambler	KeyScrambler Pro	Although I do like the added layer of security this provided, I did often find it a bit slow meaning I'd sometimes find myself typing garbled text into the browser. You can use the Pro version of KeyScrambler which works with a whole host of desktop applications, but I'm not about to fork out for it at the moment,
NoScript	-	Like CookieSafe, this is another one I'd really like to see ported to Chrome. FlashBlock provides some of the functionality (blocks Flash and Silverlight) but not all.
OpenBook	-	Chrome's bookmarks don't seem to have a tagging mechanism so this is fairly redundant. It would be nice to see more bookmark features in Chrome though.
Organize Statusbar	-	A must if like me you had so many extensions installed. Chrome doesn't have a status bar, but it would be extremely useful to have some way of customising and managing extension icons in the toolbar and address bar as currently there's no way to arrange them and they swap order for no reason every time you open the browser!
Personal Menu	-	See above. Thankfully Chrome has a much more minimal interface which minimises the need to mess around with the built-in menus etc.
Profile Switcher	-	I'm not sure if Chrome even supports profiles yet. This was handy at home with my wife and I using the same browser. However, as I've just bought her a netbook this won't be a problem in the future!!
Resizeable Textarea	Always Resize	Chrome supports resizing textareas by default anyway, but this extension makes even locked textareas resizeable.
Speed Dial	Speed Dial	Not quite as feature-rich as the FF one yet, but nonetheless does the job.
Split Browser	-	Never made too much use of this anyway, but Chrome's nifty ability to drag a tab out into a new window makes this less necessary anyway.
Unsorted Bookmarks Folder Menu	-	Not needed due to the different way Chrome handles bookmarks. It was a bit of a hack for Firefox anyway!
Vacuum Places Improved	-	FF got slower and slower the more pages were stored in it's history. However, even after importing my browsing history from FF into Chrome, it's still incredibly fast, so no need for this.
Web Developer	-	Number one on the wishlist of FF extensions for Chrome. Chris Pederick is apparently looking into the possibility but its a complex extension so could take a while even if he does decide to give it a crack! However, Chrome's built-in developer tools do cover a lot of the more useful functions, and Pendule has a few more, so its not the end of the world.
XMarks Bookmark Sync	XMarks Bookmark Sync

In addition, I've found a number of additional Chrome extensions that are proving (or look) useful, either in covering some of the fucntionality of one or more of my old Firefox extensions, or providing other functionality:

Fittr Flickr
Facebook To-Go with Instant Notifications
RSS subscription extension
Flickr Gallery Plus!
Chromed Bird
Google Calendar Popout
AutoPager Chrome
Slideshow
Google Apps Shortcuts

Speeding up Firefox

If you use Firefox and have found it slow starting up or laggy typing into the address bar, install the oddly named 'Vacuum Places Improved' add-on from https://addons.mozilla.org/en-US/firefox/addon/13878.

It adds a little icon to the status bar allowing you to defragment Firefox's places.sqlite database file with a single click- that's the file that holds all the information about your browsing history etc.

I've installed it in FF on all the computers I use and noticed a considerable improvement. On my laptop the places.sqlite file was initially 25Mb and after 'vacuuming' its 15Mb. On my desktop, Firefox had almost ground to a halt, often taking over a minute to start up, and when you clicked into the address bar it took around 10 seconds before you could actually type anything! After 'vacuuming', FF starts up in 10 seconds and typing into the address bar is fine.

I highly recommend this if you use Firefox and notice any performance issues. Obviously its not going to solve memory leak (FF's other big problem) but it's a big help nonetheless.

Just to explain - the extension doesn't delete anything, it just optimises the file that holds all the data so that that data can be found more quickly.

You can set the statusbar icon to be hidden and only reappear a certain number of days from the last 'vacuum' to remind you to run it, or it can set to automatically run every x number of days.

Changing the document root in XAMPP

I know this has been covered many times before but I've found myself Googling for this info a number of times now and thought if I wrote it here then at least I'd know where to look next time!

After installing XAMPP on Windows, the document root, by default, is set to C:/xampp/htdocs (that is, if you installed xampp into the root of the C: drive).

In this particular case I wanted to change the root directory to the sites directory in my Dropbox (C:/Documents and Settings/[username]/My Documents/My Dropbox/sites/)

To do this, open xampp/apache/conf/httpd.conf and edit the 'DocumentRoot' setting (line 188 in the version I have) to the required path (as above). Several lines below where it says "This should be changed to whatever you set DocumentRoot to" (line 215) change the Directory path to the same thing.

Open xampp/php/php.ini and edit the 'doc_root' setting (line 804) to be the same path as above.

Save both files and restart apache. This should do the trick.

UPDATE: As pointed out in the comments, I'd forgotten about my MySQL data. To move the MySQL data into Dropbox:

Open xampp/mysql/bin/my.ini and:
- under [mysqld]:
- change datadir (line 30) to the full path to the mysql data directory on Dropbox.
- change log_error (line 45) to the same path as above PLUS '/mysql.err'.
- change general_log_file (line 48) to the same path as above PLUS '/mysql.log'.
- change slow_query_log_file (line 50) to the same path as above PLUS '/mysql-slow.log'.
- below where it says "Uncomment the following if you are using InnoDB tables"
- change innodb_data_home_dir (line 137) to the same path as above.
- change innodb_log_group_home_dir (line 139) to the same path as above.

Move contents of xampp/mysql/data into the new mysql data directory in Dropbox.

Running SQL queries within query result loops in CodeIgniter

This took me a while to figure out but it's pretty obvious really. Initially I thought I'd have to run row-specific queries in the view itself (inside the results loop) but the solution is just to change where the result 'processing' happens from the view to the controller, allowing you greater control over what gets passed to the view in the first place.

Where you'd do something like this in plain old PHP:

$result = mysql_query("SELECT value FROM table");

while ($row = mysql_fetch_assoc($result)):

    mysql_query("SELECT id FROM table WHERE field='" . $row['value'] . "'");

endwhile;

in CodeIgniter you put the following code in your controller function:

$query = $this->Model->function($params);

$result = $query->result(); 
$foo = array();    

foreach ($result as $id => $object): 

    foreach ($object as $key => $value): 

        $foo[$id][$key] = $value;
    endforeach;
    $foo[$id]['bar'] = $this->function($params); 

endforeach; 

$this->data['foo'] = $foo;

$this->load->view('baz', $this->data);

then in the view:

foreach ($foo as $key => $row):

    print $row['item1'];

    print $row['item2'];

    print $row['bar'];

endforeach;

Basically, instead of passing the result of the main query direct to the view and looping through it there, you loop through the query results in the controller instead, and build up a two-dimensional associative array of results, to which you can add additional row-specific query results. Then in the view you just loop through your custom array.

Update:  You need to initialise the array ($foo = array()) before the foreach loop in the controller, otherwise if the query returns an empty result you'll get an error!

Speed Dial + Foxmarks? Would be nice!

I use Foxmarks to synchronise my Firefox bookmarks across all the computers I use (it also works with IE and Safari now I believe) and it's great. You can create different profiles as well which you can switch between as required, so when I'm at work I use my 'work' profile with access to all my work-related bookmarks. At home I use my 'home' profile which has all my non-work bookmarks. But if I'm working from home as I was today I can easily switch profiles so I have all my work bookmarks at home! This includes all my bookmarklets which is great.

I also use Spped Dial which is a great and highly configurable way of having quick access to my most-visited sites whenever I launch a new window/tab. It's a bit like Chrome's dashboard but you can define which sites you want to show rather than it just displaying whatever you've been looking at a lot recently, which is better I think (the Speed Dial way I mean!).

But working from home today made me think how nice it would be if my Speed Dial 'home page' worked the same way as my bookmarks - so I could switch to my work Speed Dial page instead of my home one. At the moment there is no way to do this (unless there is some clever clogs way of doing it using Dropbox etc.).

Of course, with the steady march of Google towards world domination we'll probably have everything in the browser synced through Google in a couple of years - albeit using Google Chrome....

Run IE6, 7 and 8 on the same machine

Note to self:

http://blog.case.edu/jeremy.smith/2008/03/07/ie_6_7_and_8_running_on_same_machine

Presumably it will still work with the final version of IE8 when it gets released.

(As as aside, I've been using Tredosoft's MultipleIEs for a couple of years now and it works pretty much flawlessly. Extremely handy for testing purposes.)

Taming the information overflow

News feeds and activity streams are becoming ever more popular as the amount of online information we share and consume grows.

I am starting to wonder, however, where all this is going. The amount of information is only going to keep increasing, and at some stage it is going to become too much.

Do I really want - or need - to know exactly what every person I've ever met is doing or thinking right now? Sure, to a certain extent it can be useful and/or interesting, but there must come a point at which it is actually more of a distraction.

There is only so much information we can take in. Filtering of content is a partial solution, but only partial.

It will be interesting to see what happens!

Google to drop Notebook

Along with several other less-well-known-about Google services, its been announced that development of Google Notebook is to stop.

This is a great shame as I really like this little tool, especially in conjunction with the Google Notebook extension for Firefox.

Although Google Notebook will remain active (at least for the time being), I think I'll have to start searching for an alternative.

The all-in-one social network?

http://www.readwriteweb.com/archives/diso_dashboard.php

This sounds like exactly the sort of thing I've been waiting for, although the details are obviously still pretty vague. One of the growing frustrations of internet use these days is the barriers that exist between different services and applications. I want to be able to link things, move things around, and generally customize my web experience (and web presence) the way I want it without having to be bound by the limitations imposed by each service.

There are a few inroads being made already - Facebook allows you to set up data imports from Twitter, Flickr, Blogger, Wordpress etc. (but the amount of customisation is limited); Twitterfeed lets you automatically post to Twitter every time you update your blog (or anything with an RSS feed); Digsby does a very good job of combining all your email and IM accounts as well as Twitter, Facebook etc. into a single desktop app; Flock (the web browser based on Firefox) does an admirable job of pulling together a lot of different web services into one place - although the level of customization is fairly limited and you're stuck with a few pre-defined apps.

Make scaled images render nicely in IE

A colleague just noted this blog post in his RSS feed and I thought it was worth sharing on here (and for my own future reference).

If you force an image to a certain size via its width and height attributes in HTML or CSS, most browsers will handle this ok and display the scaled image reasonably nicely, but in IE the edges often look pixelated and jagged.

To fix this, just add the following to your CSS:

img { -ms-interpolation-mode:bicubic; }

I shall be adding this to my reset stylesheet ASAP.

It's magic! Experiencing the power of Foxmarks...

I came in to work this morning and fired up the old 'Fox as usual, with the thought at the back of my mind that I needed to add that Gmail bookmarklet I blogged about yesterday.

But I was genuinely surprised to see it was already there! Magic? No. Foxmarks of course!

Learning to lose the mouse!

I always used to marvel at people who were able to use a computer almost solely from the keyboard. But it never seemed worth learning all the keyboard shortcuts to be able to become a keyboard wizard!

Over the years I have picked up the odd shortcut here and there - mainly for things like Photoshop where you tend to be constantly chopping and changing between tools. But one area where I've been quite slow to pick up keyboard habits is, oddly enough, web browsing, despite the amount of time I spend doing it!

Only with increasingly using a laptop (and finding that the right 'mouse' button is wearing out!) have I started to take browser keyboard shortcuts - and general keyboard navigation - more seriously.

Lifehacker have a useful article (rather old now actually but still just as useful) introducing the most useful Firefox keyboard shortcuts.

As something of a Firefox extension addict, the Keyconfig extension is certainly highly recommended by me - simply to resolve the inevitable conflicts over shortcuts that arise from installing multiple extensions.

Keyword bookmarking is another very handy feature. In relation to my last post, it's really handy to be able to simply press Ctrl+L and type 'gm' (as I have set it up) to get an instant Gmail Compose window pop up. About 10 times quicker than any other way of doing it!

I think it's one of those things where you have to make a bit of an initial effort (old habits die hard, of course) but in very little time that effort is repaid many times over in time saving. The same lesson has been recently learned in getting used to using Launchy - at first I was continually wanting to use the mouse and click on programs in the Quick Launch bar. Now 'Alt+Space' is second nature! Similarly, using 'Alt+Tab' to switch applications rather than constantly having to move down to the taskbar, etc. etc.

Add a 'Compose new Gmail' Bookmarklet to Firefox

This is a modified version of the 'GmailThis' bookmarklet which automatically adds the title and url of the current page into the email. I don't often need to send URLs to people, but being able to instantly open up a compose window in a popup is very useful.

• Right click on your bookmarks toolbar and select 'New Bookmark...'
  
  
• In the 'Name' field put 'Gmail' or something.
  
  
• In the 'Location' field put:
  
  javascript:(function(){m='http://mail.google.com/mail/?ui=1&view=cm&fs=1&tf=1&to=&su=&body=';w=window.open(m,'addwindow','status=no,toolbar=no,width=575,height=545,resizable=yes');setTimeout(function(){w.focus();},%20250);})();
  
  
• Save it.