Feel Firefox - blog, extensions, themes and more

5 essential Firefox add-ons for productive web work

Firefox benefits from a vast community of add-on developers and here are a few that will supercharge your every day browsing experience.

One feature that distinguished Firefox early on was its support for tabbed browsing. But the default configuration contains some awkward behaviors when switching between tabs and opening new tabs.

1. First, install Last Tab. It allows Firefox to cycle through tabs in order of most recent use. This will feel more intuitive to anyone familiar with switching between applications in Windows using ALT+TAB.

A nice supplement to this is Tabs Open Relative, an add-on that opens new tabs next to the currently active tab. By default Firefox opens new tabs at the far right of the screen. But when opening a new tab, usually the intent is to find/display information or resources related to what’s on the first tab. In essence this add-on will help group similar topics.

2. With all of those tabs open, it can be cumbersome to switch to those not recently viewed. For targeted switching, install Fancy Numbered Tabs. It replaces the small “x” on the right of every tab with a number graphic of the same size.

Then you’ll be able to hit CTRL+<number> to activate any given tab without counting first.

3. No list of essential browser add-ons would be complete without mentioning mouse gestures. My favorite flavor for Firefox is All In One Gestures, which provides the ability to customize every gesture, and lots of configuration options. It also supports rocker gestures.

4. For sites you visit most frequently it’s helpful to set up keywords that activate a target bookmark. As an example, ff could be the keyword for Firefox to visit FeelFirefox.net . But, in Firefox’s default installation that requires first accessing the bookmarks menu, then right clicking and going to the properties for an existing bookmark. There isn’t an option to set up a keyword when adding a new bookmark.

Meet Openbook. It customizes the options displayed when creating a new bookmark. Note that in the image below, the Keyword textbox option is filled.

And, to access sites you search frequently more efficient, add a variable to your bookmark. For example, take a look at dictionary.reference.com. A search for feathers yields a URI like this: http://dictionary.reference.com/browse/feathers. To sidestep the main page and dive right in to search results, bookmark this page and replace feathers in the URI with %s, like this: http://dictionary.reference.com/browse/%s.

If you made d a keyword for the bookmark to http://dictionary.reference.com/browse/%s, then searching the site later would only require you to type d feathers in the address bar.

5. Like it or not, lots of content online is formatted as PDF. Google provides the option to convert PDF into html when accessing a file from its search page, but what if for some strange reason, you were accessing a PDF from another page?

Install PDF Download to control how Firefox handles PDFs. It allows you to download it, open it normally or view it as HTML. You can configure it to choose one of those options by default or prompt for every PDF.

Via Tech.blorge.com

Add comment December 28th, 2007

12 Essential Extensions for Web Developers & Designers

Firefox is more than a browser. It’s a toolbox, just waiting to be filled with tools.

This is for freelancers who want only the best tools to make their working day easier and more productive.

This first installment contains the top 12 most useful Firefox extensions for freelance web developers and designers.

1. FireFTP
A powerful FPT client in one tab, your work in another. Sometimes the simplest solutions can be profoundly useful. (Note: Does not as yet support SFTP).

2. ColorZilla
This extension allows you to pick colors from the web, paste the hex code into other programs, zoom in on pages, measure distances and utilize a built-in pallet browser. A must-have for any web designer.
3. IE Tab
Shelve the need to open up both Firefox and Internet Explorer to test your work in IE or properly view a website that hasn’t been optimized for Firefox. IE Tab places a small icon in your status bar allowing you to use IE’s rendering engine for a specific site. You can also open a new IE tab via the right-click menu.
4. Firebug
An essential part of the web developer’s toolbox, Firebug allows you to tinker with the undercarriage of your project’s CSS, JavaScript or HTML. You can operate Firebux through a panel or in a separate window. It allows you to identify how each line of code shapes the final product as rendered on the web.
5. Load Time Analyzer
Isolate the loading times of images, stylesheets, page requests, scripts and so on. You can even graph the results — though I’m not really sure why you’d want to…
6. Greasemonkey
Add Javascript to any webpage. Whether you write your own scripts or use scripts provided by other coders, Greasemonkey helps unlock the full potential of any given website. (Note: try it with DOM Inspector.)
7. Web Developer
Another developer essential, Web Developer adds an array of custom tools and menus to Firefox. Use it in tandem with Firebug for maximum functionality and control over your code.
8. View Source Chart
Color codes your HTML to help keep track of hierarchies and nested elements.
9. MeasureIt
Click the ruler icon in your status bar to unlock MeasureIt’s functionality. It allows you to measure the pixel width and height of page elements via the cursor. Yep — no more cumbersome copying and pasting into Photoshop. When you’re done, hit ‘Escape’ and everything returns to normal. A useful, subtle tool.
10. HTML Validator
This nifty extension adds a little validation error and warning display to your status bar which updates as you browse. It can validate both HTML sent by the server and HTML in memory after Ajax execution.
11. Window Resizer
Quickly resize your browser to view websites in 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolutions.
12. Aardvark
As you move your mouse cursor over a page element it will be isolated by a red rectangle. A yellow caption will display the element’s type and class or id (if available). Keyboard shortcuts then allow you to edit or delete the element.

Via Freelanceswitch.com

Add comment December 19th, 2007