7 posts tagged “firefox”

PicLens Screen Shot

Well, it might not be king, based on how much usage I get from it, but PicLens is definitely a beauty to play around with, and it's functional too.

I've written a full write-up on my business blog, so I won't repeat it verbatim here, but if you're interested in my ramblings, check out:

http://www.pixelapes.com/2008/03/11/pic-lens-best-browser-extension/

Otherwise, just go to Mozilla's site and install the extension:

https://addons.mozilla.org/da/firefox/addon/5579

Obviously, you're going to need Firefox as your web browser to test this out - but why would you use anything else!

The following article is something I wrote for my web design company - Pixelapes. I figured I would reproduce it here to spread it around a bit more. I would imagine that most web developers will have a system of work or will already use this extension, but for those that don't: read on!

Original Article published on Pixelapes Blog on July 21st 2007.

Here at Pixelapes we took the decision from the outset to develop all of our websites using standards based coding and always building with accessibility in mind. There have been many discussions around the web about this and, to me, the conclusion has always been that it is better to build sites that validate.

I think Robert Nyman said it best on his article titled “Validation isn’t important, it’s just intranet”

The whole idea with web standards are:

• Ensuring, as much as possible, that the web site will actually work
• Easier to identify potential errors
• Faster web development
• Maintenance

As a result of this decision, it is important to have some tools to help make sure that we’re consistently on the right track. Over the coming months I’ll be writing some short articles documenting some of these tools, and some of the other tools that we consider invaluable for web development. To start off with I’d like to introduce one of the most invaluable browser tools we use, the Web Developer Firefox extension.

Web Developer

Download: https://addons.mozilla.org/en-US/firefox/addon/60
Author Site: http://chrispederick.com/work/web-developer/

After installing this wonderful tool and restarting Firefox you will be presented with a new toolbar at the top of your browser.

As you can see from these screen captures, the new toolbar provides a wealth of tool categories.

• Disable
• CSS
• Forms
• Images
• Information
• Miscellaneous
• Outline
• Resize
• Tools
• View Source
• Options

What can it do?

There are many functions that I use in Web Developer, but there are about 4 functions that I can’t imagine working without and I will explain them in some more depth now.

Display Element Information

Shortcut: Ctrl + Shift + F

When you press active this tool you are presented with a small yellow information box that gives you a detailed display of the hierarchy of the selected element within your code. This is very useful for working out style rules for specific elements around your website, and the structural nature of the information means that it is easy to work out why a certain style rule is being over-ruled.

In addition to this it highlights the element with a red box, demonstrating the size and position of the element. This helps a huge amount with understanding the behaviour of any floating elements contained within your website.

Resize Window

Simple and quick, this allows you to quickly shift between browser window sizes so that you can get an idea how your website will look at different screen resolutions. I currently have mine set to display at 800 x 600px, 1024 x 768px, and 1280 x 1024px.

Validation

Shortcut: Ctrl + Shift + H

Web Developer can automatically send your web page to the W3C Validator tool - whether the page is online or local.

Also the validation includes tools for testing WAI and Section 508 accessibility guidelines, allowing you to check how your website fares against various level of accessibility.

I must state though that this tool is not quite as useful as the HTML Validator extension, who’s only purpose is to provide validation assistance.

Edit Style Sheet

Shortcut: Ctrl + Shift + E

Another extremely useful tool for instantly correcting style sheet errors, this tool brings up an edit window showing all the style sheets that are associated with the web page in question. As you add or change rules, the alterations are rendered instantly on the web page so you can see how your new rule affects each element. This is even useful for testing quick design ideas. Changing link colours, width of items, moving images around, you name it.

Be warned though, when you close this tool all of your edits are lost so make sure to save the sheet, or copy any code that you want to use and add it to your style sheet.

Other Functionality

There is a whole range of other functions you can perform with the web developer toolbar, multiple ways to overlay information about elements on the site, disabling images, disabling style sheets, creating user style sheets for different sites, editing HTML, measuring site areas and on and on.

Conclusion

If you’re involved in web development of any nature, I can’t recommend this highly enough and it has been an asset to us for some time. Over time Web Developer will save countless hours, improve your coding by correcting you as you develop a site, and assist you in testing and improving your website design.

Finally, this tool is not just for web developers, but can be useful for clients as well. As a client this tool will allow you a quick way to check that your web developer is producing well written code which validates against the standards you require.

Better Gmail options windows

I read Java Jane's post about using greasemonkey for Firefox to tidy up Gmail's interface and add some extra functionality, and only then did I realise that I've already been using most of the things she mentioned by installing the "Better Gmail" extension.

The Better Gmail extension has been created by the people over at Lifehacker and compiles all their favourite greasemonkey scripts into one Firefox extension. I have never used greasemonkey and any time I see a greasemonkey script I tend to think that I can't be bothered learning my way around it. There's probably not a lot to it, but I waste enough time as it is with my current lot of extensions that I don't need any more distractions.

So what does it do?

Well, it's all fairly simple really. Head over to Lifehacker and install the extension, restart firefox and check out the options screen for what you might like to turn on/off. I like the attachment icons and sidebar alterations (integrate Google Reader!). The super clean look is pretty good too.

How does it look?

See for yourself:

Gmail SuperClean

Gmail with Google Reader

That time of year again. Glastonbury festival tickets are on sale as of 9am GMT this morning.
I should point out that there is no point trying unless you registered on their site over a month ago!

I dragged myself out of a very cosy, warm, Sunday bed just calling out for a lie-in. Without too much surprise I was in bed at 5am, making getting up that little bit more unpleasant.

Now I am sitting in a bit of an untidy heap on the couch, cursing the fact the wireless router signal in my girlfriend's house doesn't reach her bedroom. If it did I could at least be doing this from the comfort of bed.

Anyway, I have my phone on auto-redial, I'm clicking redial on skype as often as possible, and I have their webpage on auto-reload, and in between clicks I'm writing here. I haven't had even the glimmer of hope of a connection, although I can only imagine what their site is being hit with traffic wise right now. 2 friends of mine have gotten tickets, and another 2 are trying. Whoever gets through first, if at all, will buy for 4 of us.

It's so rivetting that I'm finding the spelling of "rivetting" is interesting. (Apparently my Firefox spell check states that 2 "t's" is wrong, but on closer inspection, using only 1 "t" is the Americanised version.)

I wish skype had an auto-redial function.

If you are a keyboard short-cut aficionado like me, I have a tip for all you Firefox users out there.

I often find myself jumping between Vox pages (reader overview, recent-activity, compose, groups etc) like a jumping bean, and being that I love not moving my hands to the mouse the whole time I thought it would be easier to sort the common Vox pages into easy keyworded bookmarks.

Firefox Keywords

How to add a keyword

One of the often overlooked functions built into Firefox is the ability to add a keyword to a bookmark. This allows you to quickly navigate to sites that you frequently visit.

It's something that I use more and more for my common sites - and if you're a Firefox user, you should too!

How does it work?

If you edit the properties of a bookmark you'll see a keyword field. Type something short in here - v for vox maybe - and then click ok. Back in your browser, press Alt+D or Ctrl+L to jump to the address bar, now type "v" and hit return. Voila! You are brought straight to www.vox.com. Nice.

My Vox Keywords

My Firefox-Vox keywords

I've taken a screen shot which you can see on the right, so you know what I'm talking about, and for your further convenience there's a list below.

I used these keywords as they seemed to make sense in my head, but obviously you can use any that make sense to you.

• My Blog - http://yourblog.vox.com - Keyword: vb
• Vox Compose - http://www.vox.com/compose/ - Keyword: vc
• Vox Organise - http://www.vox.com/organize/ - Keyword: vo
• Vox Home - www.vox.com - Keyword: vh
• Vox Groups - http://www.vox.com/groups/ - Keyword: vg
• Vox Explore - http://www.vox.com/explore/posts/ - Keyword: ve
• Vox Watch - http://www.vox.com/reader/ - Keyword: vw
• Vox Watch - Recent Activity - http://www.vox.com/reader/recent-activity/ - Keyword: vra

Double the convenience pleasure!

Flat Bookmark Editing

Just to help out a little more: there's a handy firefox extension that makes bookmark editing much quicker and easier.

Flat Bookmark Editing

This Firefox extension alters the way the bookmarks are displayed by adding the properties box to the bottom of the bookmark manager. This way as soon as you select a bookmark you can tab down to the properties box, make your changes, and then use the up and down arrows to switch to the next bookmark and make another change.

This makes for very quick assigning of keywords!

Hope this is helpful to people - and to those IE users out there: what are you doing?! Get Firefox!

To anyone out there that doesn't use Firefox, get it now. It's a giant leap over Internet Explorer and will improve your web browsing ten-fold.

To the people who are using Firefox, are you making full use of it by using Firefox Extensions?

If you have Firefox installed you really should investigate the power of their Extensions. Extensions are written by thousands of people around the web and allow you to add new features to Firefox at the click of a button. Visit the Firefox Add-ons site to browse through a myriad of extensions.

Extensions I Recommend

Ad Block Plus
This has become my favourite extension of all time. Ad Block Plus uses filters to block adverts from web pages that you visit. These filters are updated by other people around the web and keep adverts from molesting your eyes. Once you start using it you'll never go back - and when you browse the net on someone else's machine you'll be appalled at how many adverts plague your favourite sites.

N.B. Unfortunately Ad Block Plus can cause some problems on Vox, and you'll need to add Vox to your exception list - it's simple though, once you have ABP installed, open ABP preferences and add a filter. Copy and paste the following code: @@|http://*.vox.com/ and this will prevent ABP from affecting anything in the Vox domain.

Filterset G
Filterset G is a companion to ABP, and is the best set of filter rules for ABP. It is updated frequently and once you have it installed you don't have to think about it again.

Below are 2 screenshots of the Wired homepage. The one on the left has no ABP, the one on the right has ABP enabled. I'm sure there are worse sites out there, but it's a good example nonetheless of the power of ABP.

Just wondering if anyone else has noticed this. I haven't been very active the last while but somewhere between the 6th of February and yesterday something has gotten messed up in the Vox code that has made Vox unusable in Firefox (version 2.0.0.2).

The compose window is now broken. When I go to compose I can type in a title but if I try to either tab or click into the main text window I cannot get into it. I cannot type anything. So for the time being I am using IE7 without error. I have noticed that I also cannot leave comments using Firefox.

Has anyone else noticed this? I have sent feedback to Vox pointing this out. I know they are busy working on the new Control Strip (which you can turn on in beta - more instructions here), so perhaps something has gone screwey in Firefox in the meantime.

If you've noticed this as well, let us know and more importantly let the Vox people know! I don't like being outside of Firefox too much!