One really cool thing about Ubiquity is that you don’t have to type “add-to-calendar blah blah”. If you type “add”, Ubiquity will figure out what you want so you just have to type: “add beer with David Walsh at 9pm” and it will figure it out. If you have text selected, just type “this” and it will insert the selected text into that part of the command.

Get started with Ubiquity

While using Firefox, download the Ubiquity Firefox extension. Once you have it, you can install extra commands by clicking any of the command links above. You can summon Ubiquity with Ctrl-Space by default, but this is easily changed. That’s all!

Ubiquity is better to…

1. Manage your calendar – Adding an event to your Google Calendar should be painless in every situation. The add-to-calendar and check-calendar commands let you do so easily.
2. Update your status – Ubiquity comes with tweet, but you can grab an enhanced tweet command. There are commands for Facebook, FriendFeed, and ping.fm as well.
3. Share links A lot of sites provide links so you can share links. If not, though, you can do so easily using the digg (built-in), reddit, stumbleupon, delicious, dzone and other places.
4. Shorten URLs – You can shorten links in-line by selecting it and using tinyurl (built-in), is.gd, tr.im and hurl
5. Read languages you don’t know – Gone are the days you “go” to Google Translate. Now you just highlight some text on a web page, call up Ubiquity, and type translate this to English (or whatever).
6. Manage your to-do list – I use Remember the Milk to manage to-do lists that my whole family can share. Now there’s a remember the milk command so it’s always just a keystroke away.
7. Lookup programming APIs – Very often I find myself having to look up available methods or something. This is faster using specific searches like those for the Java API, Pydoc, or jquery. You can also do things like W3C site validation

What next?

1. Watch Aza Raskin’s video intro to Ubiquity. Seeing it in action is much cooler than just reading.
2. Check out other Ubiquity commands
3. Write your own command. Instructions. It’s so easy, I could do it!

Bonus: I wrote you a command :) Here’s a dzone command, since I couldn’t find one out there. Enjoy!

Share your favorite Ubiquity commands in the comments!

Related posts:

1. Why every programmer should have a Tiddlywiki
2. Using aliases and command-line functions for speed
3. Firefox add-ons for productivity

Suppose we want to remove that bookmark star on the right side of the URL bar. I’ll show you a simple way to do this and then generalize the technique for use with anything.

Setup

If you didn’t get the DOM Inspector when you downloaded Firefox, you’ll obviously want to do that first. Open it up by hitting Tools > DOM Inspector or key in Ctrl+Shift+I (default). You’ll want to start out by going to File > Inspect a Chrome Document and choosing the first option which is your Firefox window.

Find your target

The easiest way to check it out is to inspect it by clicking the button and clicking on the star. The DOM Inspector is helpful here because it will highlight the block containing the star with a big red border and show you the markup in the browser document with the XML element highlighted.

We also could have clicked the button and searched for "bookmark" to see if we could find it that way, but that would not really be the easiest way in this case.

From there you can easily right click and "Insert" a new node. Type "style" in the Node Name field and then the CSS you want to apply in the Node Value. In this case you’ll type "display: none;" which removes the star immediately once you click OK. We won’t worry about the Namespace URI in this tutorial.

Now take note of the node name, class, or id so you can use CSS rules in your userChrome.css file. We can see that the ID of the element is "star-button". Great, in this case that’s all we need. You’ll need to know a bit of CSS to do any good tweaks so if you want you should check out sitepoint’s CSS reference.

Since you know the element ID, class, etc. you should add a snippet to you userChrome.css (instructions) file like this:

#star-button { display: none; }

So easy! Once you get the hang of it you’ll think of all kinds of things you’d like to change about Firefox’s interface. Now to save you time on some bits I’ll close up with a…

Big ol’ list of userChrome.css tweaks

/* Autohide Back/Forward Buttons and Dropdown Marker when there is nothing to go Back/Forward to */
#back-button[disabled="true"] { display: none; }
#forward-button[disabled="true"] { display: none; }
#back-forward-dropmarker[disabled="true"] { display: none; }

/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }

/* remove Sidebar maximum width restriction */
#sidebar { min-width: none !important; min-width: 0px !important; }

/* hide live feed icon in Address url toolbar */
#feed-button { display: none !important; }

/* Add a keyword when adding a bookmark */
#editBMPanel_keywordRow { visibility: visible; }

/* Combine Stop and Reload Buttons, Hide Both as Necessary */
#reload-button[disabled="true"] { display: none; }
#stop-button[disabled="true"] { display: none; }
#stop-button:not([disabled]) + #reload-button { display: none;}

/* Remove search magnifying glass */
.search-go-button { display: none !important; }

/* Hide the green "Go" arrow */
#go-button { display: none !important; }

/* Move "List All Tabs" Button to the left side of the tab bar */
.tabs-alltabs-stack {-moz-box-ordinal-group: 1 !important}
.tabbrowser-arrowscrollbox {-moz-box-ordinal-group: 2 !important}
.tabs-closebutton-box {-moz-box-ordinal-group: 3 !important}

/* Style the new auto-complete list */
.autocomplete-richlistitem { background: #222222 !important; color: #FFFFFF !important; padding: 0px !important; margin: 0px !important; }
.autocomplete-richlistitem:hover, .autocomplete-richlistitem[selected="true"] {  background: #444444 !important; }  

/* Remove unimportant Location Bar Icon Text */
#identity-icon-label { display: none !important; } 

/* Remove separator under Bookmarks Toolbar */
#bookmarksToolbarFolderMenu + menuseparator { display: none; }

/* Remove Favicon placeholder in Tab Bar */
.tab-icon {display: none !important; }

/* Search bar color */
#search-container .searchbar-textbox { -moz-appearance: none !important; border: 1px !important; font-weight: bold !important; color: darkslateblue important }

/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }

/* Hide the dropmarker in the Address url toolbar */
.autocomplete-history-dropmarker { display: none !important; }

/* Hide live feed icon in Address url toolbar */
#feed-button { display: none !important; }

/* Chage tab background */
tab { -moz-appearance: none !important; }
.tabbrowser-tabs > tab[selected="true"] .tab-text { background-color: #FF9 !important; color: #0F0 !important; font-style: bold !important;}

/* Change color of inactive tabs */
.tabbrowser-tabs > tab:not([selected="true"]) .tab-text { background-color: #8D6 !important; color: #000 !important;}

/* Hide "List All Tabs" button */
.tabbrowser-arrowscrollbox + stack { display:none !important; }

/* Dim the RSS icon until hover */
#feed-button {-moz-opacity: 0.2 !important;}
#feed-button:hover {-moz-opacity: 1.5 !important;}

/* Dim the URL Bar star icon until hover */
.ac-result-type-bookmark{-moz-opacity: 0.2 !important;}
.ac-result-type-bookmark:hover {-moz-opacity: 1.5 !important;}

/* Dim the Bookmark star icon until hover */
#star-button {-moz-opacity: 0.2 !important;}
#star-button:hover {-moz-opacity: 1.5 !important;}

/* Display only Location Bar textbox */
#menubar-items, #unified-back-forward-button, #stop-button, #reload-button, #search-container, #identity-box, #urlbar-container dropmarker { display: none; }

/* Change Location Bar font */
#urlbar { font-family: “Courier New”, monospace; }

/* Turn Location Bar Yellow for HTTPS */
#urlbar[level] .autocomplete-textbox-container { background-color: #FFFFB7 !important; }

/* Remove Search Engine dropdown button */
.searchbar-engine-button { display: none; }

/* Change border of unselected tabs */
#content tab:not([selected="true"]) { border-style: dotted !important; }

/* Remove History Sidebar Search */
#bmHi-toolbar { display: none; }

There you have it! I welcome any questions or additional tweaks.

Related posts:

1. Early Adopters: Your Firefox 3 chrome tweaks are HERE
2. Tweak chrome for a cleaner Firefox
3. 8 steps to my personal Firefox setup for productivity

1. Go to your Firefox extensions directory in your profile (WinXP default is C:\Documents and Settings\<user>\Application Data\Mozilla\Firefox\Profiles\<profile>\extensions\*nix is ~/.mozilla/firefox/<profile>/extensions)
2. Zip up the extension you want
3. Unzip in another profile extensions directory

One step command-line (Cygwin or Shell) example

#Make backup
cd ~/.mozilla/firefox/xxxxxxxx.default/extensions && tar -cvf ~/firebug.tar.gz firebug@software.joehewitt.com/
# OR to copy to another profile
cd ~/.mozilla/firefox/xxxxxxxx.default/extensions && cp -R firebug@software.joehewitt.com/ ../../yyyyyyyy.otherprofile/extensions/

You might even use it to play around with settings of your favorite extensions! I can’t verify this for every extension obviously, but the ones I’ve tried work like a charm! You can also do this with entire profiles!

Chuck Baker’s FEBE is my preferred way to backup a Firefox extension and my profile, but it is not yet compatible with Firefox 3 as of this post. Has anyone else used a different method or other suggestions? Let’s hear them!

Chuck updates us that FEBE 6.0 beta is available at: the FEBE download site and is compatible with FF3! Great!

P.S. – I’m sure you’ve already heard about the Firefox 3 download day this coming Tuesday, June 17th. You have? Just checking. :)

Related posts:

1. Firefox extension to watch: Firecookie
2. Quick Tip: Editing layout in Firebug
3. Cutting Edge: Exclusive Firefox 3 about:config hacks

It looks like David Baron is working hard on new CSS support for Firefox 3. His latest blog post tells us that he has finished up support for a bunch of CSS3 selectors, available now in the Firefox nightly build:

We now support :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type() (see bug report) and :first-of-type, :last-of-type, and :only-of-type (see bug report)

This will be released with the next major version of ‘fox (probably 3.1). It looks like support for Media Queries is next. Hurrah! Good work David!

Related posts:

1. Early Adopters: Your Firefox 3 chrome tweaks are HERE
2. How to use the DOM Inspector to hack your Firefox UI
3. Cutting Edge: Exclusive Firefox 3 about:config hacks

Step 1: My Theme

NASA Night Launch – This has little effect on my productivity but I get asked about this more than anything else. I like the cool blackness and the fact that this theme is Firefox 3 compatible.

Step 2: Get Extensions

• Adblock Filterset.G Updater – Update ad killer
• Adblock Plus – Kill ads
• All-in-One Sidebar – Really, really slick sidebar
• Delicious Bookmarks – I use del.icio.us for bookmarking everything so having this is a must. I basically switched to FF3 once this extension was compatible.
• DOM Inspector – For all those tricky userChrome.css questions you give me ;)
• Firebug 1.2 Beta – In case you haven’t heard there is a new beta with some more cool features!
• Firecookie 0.5beta – Firebug extension that is now essential for cookie debugging
• FireGestures – Simple mouse gestures extension. Compatible with FF3 unlike many others
• Fission – Not a productivity enhancer, just cool to put my progress bar behind my address bar like Safari
• Keyconfig – Configure everything to be a simple key command away! OK, you got me, the latest keyconfig is not compatible with FF3b5. Wait, what’s this I made for you?
• Web Developer – Another staple for anyone doing web development work.
• XUL/Migemo – Enhances search by allowing regex search with nice highlighting. Way better than I can describe in this one-liner.
• YSlow – Web performance analytics tool that works through Firebug. Another must-have.

I also plan on using this extension when they are compatible with Firefox 3:

• Google Browser Sync – Sync history, bookmarks, cookies, etc. across my many Firefox instances.

Step 3: Menu & Interface Customization

I right click and customize my top toolbar by dragging the back, forward, etc. buttons to the top, as well as the address bar and the search bar. I remove pretty much everything else and am left with only the Menu Bar and the Web Developer Toolbar on top.

I first configure All-in-One Sidebar by making basically everything except "Page Source" open in the sidebar. I leave the hotkeys at their default values and enable the thin sidebar switch. I put a few buttons for things on my sidebar but really I use hotkeys to access everything on the sidebar. Ctrl-B gets me my searchable del.icio.us bookmarks, Ctrl-H for searchable history etc. More on that in Step 7

Last but not least, my status bar with Firebug, YSlow and Greasemonkey sits on the bottom. I also use the XUL/Migemo extension to freshen up my search, allowing it to use regular expressions and highlighting the text just like Safari. A lot of you have specific questions about this, so keep ‘em coming by contacting me.

Step 4: userChrome.css

You have probably already seen most of my userChrome.css file posted in a couple earlier posts, you can just grab the file I use here (Right-click to Save Link As…). Here are instructions just in case ;)

Step 5: userContent.css

I am not going to post the thousands of lines of code in my userContent.css file, but you can download my personal userContent.css here (Right-click to Save Link As…). Allow me to give you the important bits – the titles are pretty self-explanatory:

• Digg.com – Dark gray design
• GMail Redesigned
• Dark Gray Google
• about:blank – Dark Firefox

Just like editing userChrome.css, and instructions are here.

Step 6: about:config

You might be surprised to learn that I don’t use all of the about:config entries that I have posted. Let’s go through the ones I DO use:

browser.cache.disk.capacity » 150000
browser.cache.offline.capacity » 20480
browser.download.manager.closeWhenDone » true
browser.search.openintab » true
browser.tabs.loadDivertedInBackground » true
browser.tabs.opentabfor.middleclick » false
browser.urlbar.hideGoButton » true
browser.urlbar.maxRichResults » 5
network.http.pipelining » true
network.http.proxy.pipelining » true
zoom.maxPercent » 400

I seem to remember there being more that I used with Firefox 2 but Firefox 3s interface just suits my needs more so I don’t have to do so much :)

Step 7: Special bookmarks

Lifehacker provided me with some really cool chrome bookmarks that I use to quickly get to pretty much any Firefox setting quickly. Let me give you some examples: Ctrl-L goes to the URL bar, then I type "opt" to access Firefox options. Similarly, I can type "gmonkey" to access my greasemonkey scripts. You can also set this up yourself to access Live HTTP Headers and friends. Cool, huh?

Step 8: Hotkeys etc.

The point of many of these tweaks is to make everything available with few keystrokes. Of course, I set hotkeys for pretty much everything. Another really important part of my setup is bookmark keywords. I use this alongside del.icio.us to make my browsing super-efficient. When you hit Ctrl-D to enter a bookmark, make sure you have a short "keyword" so that you only have to type "g" and hit Enter to go to Google.

Use all these things and I think you will be a master web browser. What do you do to optimize your browsing? Which extensions? Let’s hear it!

Related posts:

1. Firefox add-ons for productivity
2. A quick way to backup a Firefox extension or profile
3. Cutting Edge: Exclusive Firefox 3 about:config hacks

Bleeding Edge: Force Extension Compatibility

WARNING: I take no responsibility if enabling all your favorite extensions borks up your browsing experience. Hence the “bleeding” as it were…

extensions.checkCompatibility -> Toggle to false
extensions.checkUpdateSecurity -> Toggle to false

Credit may go to Lifehacker’s article for posting this first.

Location Bar

This is a good alternative to the userChrome.css hack to trim down that huge auto-complete list on your URL bar. Note that the browser.urlbar.maxRichResults one does not like to display more that 12 as far as my testing goes. I personally set mine to 3.

browser.urlbar.maxRichResults -> # results for URL auto-complete list

Zoom, Zoom

These are most useful for presenters that need the ability to zoom in very close for their audience when showing them Firefox. You can also make Firefox 3 behave like Firefox 2 by settingbrowser.zoom.full to false. As you might have guessed, putting browser.zoom.siteSpecific at false takes off site specific zoom settings.

zoom.maxPercent -> Set to 400 for the ability to zoom closer
zoom.minPercent -> 10 will let you can zoom out further
browser.zoom.full -> Set to false for Firefox 2-like text zooming only
browser.zoom.siteSpecific -> False removes site-specific zoom settings
toolkit.zoomManager.zoomValues -> You can change zoom levels here

Random

Toggle extensions.getAddons.showPane if you don’t care for the Add-ons search part of the Add-ons dialog. You can also crank up the space you make available for the shiny new offline capabilities of Firefox 3!

extensions.getAddons.showPane -> False removes Add-ons search
browser.cache.offline.capacity -> Increase offline cache (I set to 20480)

As always you may want to stay tuned because a lot of these were added with beta 5 and I’ll be posting more as I get them. I would also recommend subscribing to the comments on this one in particular as the readers here tend to have good additional hacks! Thank you commenters!

Related posts:

1. Firefox about:config roundup
2. 8 steps to my personal Firefox setup for productivity
3. A quick way to backup a Firefox extension or profile

You may not have known that you can also edit the values in the layout pane as well! (You can find it on the right side of the HTML tab) This makes it even easier to adjust the layout of a block and see the results. As a bonus, if you press the up and down arrow keys while editing a value the pixel value will adjust by one pixel in that direction. One note on this though, you can’t specify values in anything other than pixels (sorry fluid layouts).

If you haven’t already, you might want to check out 10 more things you may not know about Firebug.

Related posts:

1. Javascript: Measure those “em”s for your layout
2. 10 Things you didn’t know about Firebug
3. A quick way to backup a Firefox extension or profile

According to my poll about 1 in 4 of you readers have already switched to Firefox 3 and almost everyone else will switch after their extensions are compatible. I am considering switching myself but before I do I need to tweak the heck out of it like I tend to do.

Now after a bit of searching I really couldn’t find any good resources out there for tweaking Firefox 3 stuff so I thought I should create one and share it with you!

So here I have compiled a list of Firefox 3 only userChrome.css tweaks. Here are instructions if needed.

Firefox 3 userChrome.css snippets

/* Specify a maxiumum height for the Autocomplete list */
#PopupAutoCompleteRichResult {
  max-height: 100px !important;
}

/* Remove splitter between the URL and Search bars to save space */
#urlbar-search-splitter {
  display: none !important;
}

/* Changed from #bookmarks-menu in FF2 */
#bookmarksMenu {
  display: none !important;
}

/* Remove the Bookmark star, I use Ctrl-D instead */
#star-button {
  display: none !important;
}

/* Remove the URL bar Go button, not necessary IMO ;) */
#go-button {
  display: none !important;
}

/* Style the new auto-complete list */
.autocomplete-richlistitem {
  background: #222222 !important;
  color: #FFFFFF !important;
  padding: 0px !important;
  margin: 0px !important;
}
.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected="true"] {
  background: #444444 !important;
}

Bonus tweak that also works with Firefox 2 (thank you Lifehacker):

/* Make the active tab wider (when you have a few tabs open) */
#content tab[selected="true"] {
  min-width: 200px !important;
}

I’m sure there will be more to add to this list by the time Firefox 3 is released so stay tuned! Of course most of the other userChrome.css tweaks for Firefox 2 work with Firefox 3 as well. If you have any entries to add to this please share in the comments.

Related posts:

1. Tweak chrome for a cleaner Firefox
2. How to use the DOM Inspector to hack your Firefox UI
3. Personalize your Thunderbird by changing it’s chrome