Do Know Evil – Tyler Mulligan’s Tips and Tricks

When Firefox 3.5 came out, I along with many others, was eager to try it. For a while I ran it out of the archive directly but this caused minor issues as it’s a messy solution. At some point I noticed firefox-3.5 in the repository:

tyler@quadjutsu:~$ apt-cache search firefox |grep 3.5
abrowser-3.1 - dummy upgrade package for firefox-3.1 -> firefox-3.5
abrowser-3.1-branding - dummy upgrade package for firefox-3.1 -> firefox-3.5
firefox-3.1 - dummy upgrade package for firefox-3.1 -> firefox-3.5
firefox-3.1-branding - dummy upgrade package for firefox-3.1 -> firefox-3.5
firefox-3.1-dbg - dummy upgrade package for firefox-3.1 -> firefox-3.5
firefox-3.1-dev - dummy upgrade package for firefox-3.1 -> firefox-3.5
firefox-3.1-gnome-support - dummy upgrade package for firefox-3.1 -> firefox-3.5
firefox-3.5 - safe and easy web browser from Mozilla
firefox-3.5-branding - Package that ships the firefox branding
firefox-3.5-dbg - firefox-3.5 debug symbols
firefox-3.5-dev - Development files for Mozilla Firefox
firefox-3.5-gnome-support - Support for Gnome in Mozilla Firefox

and proceeded to install it with the following command:

tyler@quadjutsu:~$ sudo apt-get install firefox-3.5

It runs along-side Firefox 3.0 without a hitch. I often use the two in tandem while testing web applications.

Something that bothered me about this was the default icon isn’t as recongnizable to me as I’d like it to be.

As such I looked into a way to replace it.

First, I found a replacement icon I liked

from the following website (where other nice replacements exist).

Then I went to find the logical location of the files to replace. First I updated my ‘locate’ database file because this software is new, so it’s not yet known. This is done automatically daily on a cron but you can update it any time you’d like as follows:

tyler@quadjutsu:~$ sudo updatedb

Then I probed for icons I might think would be responsible.

tyler@quadjutsu:~$ locate firefox |grep lib |grep icon |grep 3.5
/usr/lib/firefox-3.5.2/icons
/usr/lib/firefox-3.5.2/chrome/icons
/usr/lib/firefox-3.5.2/chrome/icons/default
/usr/lib/firefox-3.5.2/chrome/icons/default/default16.png
/usr/lib/firefox-3.5.2/chrome/icons/default/default32.png
/usr/lib/firefox-3.5.2/chrome/icons/default/default48.png
/usr/lib/firefox-3.5.2/icons/document.png
/usr/lib/firefox-3.5.2/icons/mozicon128.png
/usr/lib/firefox-3.5.2/icons/mozicon16.xpm
/usr/lib/firefox-3.5.2/icons/mozicon50.xpm

The first set in the ‘/usr/lib/firefox-3.5.2/chrome/icons/’ folder will replace the icons used by the application itself (i.e. the icon in the top of your window). The latter, ‘/usr/lib/firefox-3.5.2/icons/’ will replace the ones used by shortcut icons.

Here are all the files for the icons I resized if you’d like to use them.

firefox-3.5_replacement_chrome_icons.zip
firefox-3.5_replacement_shortcut_icons.zip

bash pro-style:

cd Desktop/ && mkdir firefox_replacement_icons && cd firefox_replacement_icons
wget http://www.doknowevil.net/files/firefox-3.5_replacement_chrome_icons.zip && wget http://www.doknowevil.net/files/firefox-3.5_replacement_shortcut_icons.zip
for file in *.zip; do unzip $file; done
sudo cp chrome/* /usr/lib/firefox-3.5.2/chrome/icons/default/
sudo cp shorcuts/* /usr/lib/firefox-3.5.2/icons/

Firefox is an excellent browser that runs on an open, extendable platform by Mozilla which many users have improved through the creation of extensions, themes and add-ons. As a web developer / design and code hobbyist, I’m always looking for ways to give myself more power out of my browser and communicate ideas visually in the most efficient way. Using Stylish (a program that runs css on top of userStyles.css), I’ve found I can not only edit the looks of webpages with CSS but XUL, the building language of Firefox. This allows for some nice little enhancements.

Align Bookmarks to the Top Right

Here’s one I brewed up myself spawning from an discussion on IRC where someone pointed out the clutter I had going on in my bookmarks toolbar, I set out to condense my collection.

The plan was to align a few folders to the top right of my browser at the same level as my file menu and remove the bookmarks toolbar. Sounds easy enough right? Well.. perhaps it’s my ignorance in the XUL / CSS relationship that doesn’t allow me to float boxes but I actually ended up doing a strange little trick to make this successful.

To figure out how to get it to align to the right, I had to first figure out some class and id names. That I started trying different atrributes with….

Until I came up with the code below.

/* Align Bookmarks to the top right of Firefox
   Tyler Mulligans www.doknowevil.net
 
-- Right click the your file menu and click customize to drag around your bookmarks.
*/
 
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
#toolbar-menubar { direction:rtl !important; }
#toolbar-menubar #menubar-items, #toolbar-menubar .bookmarks-toolbar-items { direction:ltr !important; }

Using that code in stylish, I right clicked my file menu, click customize and dragged my file menu, bookmarks and loader to their appropriate places.

Fixing webpages that don’t explicitly define the background and foreground as white and black

I changed my default background color so that I’m not blinded by white when I open a new blank tab. Unfortunately many web developers assume that users have a white background with black text and don’t bother to explicitly define them. I use the script below to fix 95% of these pages… some just use inheritently bad design techniques like defining their background color in the html tag (something w3c recommended you DON’T do in HTML. While technically okay in XHTML, I think it’s better to use the first VISUAL tag on the page. After the HTML tag you have a head… and title.. etc, which technically inherit the HTML tag settings.

@-moz-document url-prefix(http://), url-prefix(https://) { body { background-color:#fff; color:#000; } }

Theme specific enhancements

I use an unusual brown theme and I’ve do what I can to match and extend my applications. I borrowed and enhanced the scripts below

Tabs / Tab Bar

A darker background and more prominent selected tab (pictured above)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
[class="close-button tabs-closebutton"], .tabbrowser-tabs tab[selected="true"] {
  -moz-appearance: none !important;
  background-color: #654C30 !important;
}
 
.tabbrowser-tab[selected="true"] .tab-text {
  color: white !important;
  -moz-opacity: .85 !important;
}
 
.tabbrowser-tab[selected="true"]:hover {
  -moz-opacity: 1 !important;
  background-color: #755533 !important;
}
 
.tabbrowser-tabs {
  border-top:1px solid #5F4A2A;
  border-bottom:2px solid #503C1E;
  background-color:#120F0B !important;
  padding:5px 1px 0 1px;
}

Awesome Bar

Added colors to match my theme.

/*
 _________________________________________________________________________
|                  |                                                      |
|          Title:  |  Awesome Bar Background Color Based on Type (WOW)    |
|    Description:  |  Different Colors based on Bookmark, tag, or regular |
|         Author:  |  -=Ben=-                                             |
|   Date Created:  |  July 3, 2008                                        |
|   Last Updated:  |  October 7, 2008                                     |
|        Version:  |  1.0.0.3                                             |
|__________________|______________________________________________________|
 
*/
 
 
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
 
.autocomplete-richlistitem[type="bookmark"] /*Blue*/
{
  background-color: #45586A;  /*#E3FCFE;*/
  color: #fff;
}
 
.autocomplete-richlistitem[type="favicon"] /*Green*/
{
  background-color: #556A45;  /*#E3FEE5;*/
  color: #fff;
}
 
.autocomplete-richlistitem[type="tag"] /*Yellow*/
{
  background-color: #6A5745;
  color: #fff;
}
 
.autocomplete-richlistitem:focus
{
  background-color: #0A246A;
  color: #FFFFFF;
}

If you enjoy my theme, you can download a beta I’ve been working on here: http://z.nexuizninjaz.com/linux/themes/

Found on a Lifehacker Article after a conversation on IRC caused me to google the known tab history that is part of the cause for FireFox’s large memory footprint, I can about the extension TooManyTabs which you can install from the Firefox Addons site.

It allows you to “dock” unused tabs and free up memory. So far so good .

Firefox 3 Beta 3 is looking pretty nice, I decided to give it a test run because Portable Apps released it yesterday.

The UI was a little strange to me a first but it started to make more and more sense. Here’s an opening shot for first impressions.

The navigation buttons have been streamlined a bit, putting more emphasize on the back button, combining the history into one drop down and moving the Home button to the bookmarks toolbar.

One of the first things I noticed (and love) is the google suggest style address bar that queries your history based off titles and URLs.

They’ve also added a star that signifies whether you have bookmarked the page or not and it allows for a quick uninvasive way to edit your bookmark for the page.

While I find this a nice feature, I don’t believe it solves the problem of organizing your bookmarks… but rather encourages sloppiness by requiring a second click to pick a folder. I’m not sure how this will fair on the ‘mom test’.

Something I ~love~ though, is the ability to search addons without going to the mozilla site.

In conclusion, FF3 is a vast improvement that certainly increasing my web browsing efficiency. Great work guys, I look forward to the final release.

A majority of my readers use Firefox to browse the web. I myself happen to be a big fan of Firefox, as some of my previous posts have indicated. Always striving for efficiency, I have made a few tweaks to lower my frustration and increase the enjoyment of my web browsing experience. Amongst these changes, one of the first things I do on a new install is to change the way the download dialog (ctrl+j) behaves.

To clarify, I don’t like the downloads box to pop-up when I start a download and I want to choose where to save my file. To achieve this, I go to Firefox options:

and select your options as noted below:

To access the infamous download box in the future, use the ctrl+j hotkey combination:

Bookmarks are something most of us don’t really keep up to par. Sometimes you just ctrl+d on a whim, losing that page in your lack of a hierarchy forever. Well, at least that’s how it’s been for me. However, once in a while I give myself a kick in the ass and try to shape up. Based upon the patterns I’ve learned in the past and the general direction I wish to go, I reevaluate my mess and decide the proper way forward. In this case it was the standard, “Make general categories and add sub-folders if they need more organization” route… with a little extra spice.

This time around, I decided to utilize folders in the bookmarks toolbar. Maybe I’m blind to this but I feel like most people don’t utilize this helpful feature, I know I didn’t until now. After spending a few days using folders on my toolbar, I’ve come to the conclusion that it is both effective and efficient.

I spend a lot of time developing locally and often do rounds on my live sites and rather than waste 4 seconds typing in a 32 character URL, I’d rather waste 0.4 making two clicks. Yes, that’s right, I’m shaving off seconds to increase my efficiency. It might not seem like a lot but it adds up to minutes a day and hours a year.

Now, because I’m going to be spending a lot of time on my laptop, I needed a global solution to my bookmarks. The path I chose to get is syncing them with the Firefox extension, Bookmark Sync and Sort. If you don’t have your own server, there are some hosted alternatives such as Foxmarks Bookmark Synchronizer. Those trendy bookmark sites aren’t really the solution for me for a few reasons.

1) I like to control my data.
2) Those sites are usually distracting to me
3) While the Firefox bookmarks manager isn’t the ideal solution, the GUI is far more advanced than something you’ll find on a social bookmarking site.

Admittedly, there is an advantage to these sites, and that’s the fact that I can get to my bookmarks quickly no matter what computer I’m on. But again, I can argue that I can find a link just as fast (if not faster) with SSH by greping the xml file Bookmark Sync and Sort generates.

Back on track, once you have the extension installed, click ‘Bookmarks’ > ‘Synchronize Bookmarks’ and fill in the dialog with your information as such:

What kind of man would I be if I didn’t take advantage of this moment to sort my bookmarks?

Mmm, alphabetical order.

Now I just need to upkeep as best I can… I’ll let you know when I come up with a better solution for that. Right now, I just force myself to take the time to find the correct folder in the hierarchy. It’s a good habit but a hard one to keep. If you have any advice, please share. Good luck and happy bookmarking.

P.S. I edited the file wp-admin/admin-functions.php, line 2126 to increase the generated thumbnail size in wordpress. Just replace ‘128′ with the max you wish. Thought maybe some of you could use that information.

Those top 10 lists about the best Firefox for Web developers, the average person or your mother always piss me off because they list the same extensions every time. All those extensions are well known… it’s not like you have to tell a web developer about firebug or the web dev toolbar.

I use a lot of extensions. I have a minimum of 8 installed, even on my portable version. I tend to use some extensions that a lot of people never heard of and I find it surprising because they are really helpful! So without further ado, I give to you a list of some lesser known but useful Firefox extensions.

ErrorZilla

The default error page for Firefox is a bit minimal… there isn’t a lot of usefulness there… and if you’re a big digger or slashdotter, you know what a pain it can be to find a website crippled before you had a chance to few it. This handy little extension gives you some useful links, including ones to corel cache and google cache.
Find it here

URL Fixer

Lets talk about common annoyances for a second, shall we? Who here hates it when you type too fast for your own good… or just very poorly? There’s no excuse for poor typing but this extension has got your back for those silly slip ups you make in the address bar and scramble to fix before you reach an error page. With this extension, www.google.cmo will automatically change to www.google.com

This extension is a bit limited in the sense that the filters are hard coded into the javascript but it’s the best solution out there right now.
Find it here

Long Titles

Another common annoyance is the … on long tooltips. This extension saves you the frustration of guessing.
Find it here

Answers

This is just damn useful. If you’re ever reading something and come across a word or phrase you don’t know, simply hold alt and click it and it will open a handy little bubble inside the webpage you’re browsing.
Find it here

Aging Tabs

I never like to have too many tabs open in my browser but at times it becomes inevitable… and unfortunately confusing. With this extension though, I can easily pick out which tabs I’ve been using most frequently as the color gets darker with lack of use. Definitely worth a look.
Find it here

Back when I first became a part of these internets, I’d get a lol or two via a link to a picture or a website. With the exception of a few of these pictures (thanks digg) most of these pictures have become distant memories of my past. After a while it occurred to me, why aren’t I saving these pictures?

However obsessive, I made it my job, nay, my duty to summon the strength to save and sort ever picture that strikes the slightest bit of interest. This, as you could imagine was a tedious task. Right click, navigate to proper folder, rename image (if needed) and save. My commitment was strong but apparently no match for this mundane method. Slowly, I would stop navigating to sub-folders and just drop them all in a folder I like to call “Internet Garbage”. Currently in the root of this folder, there resides over 3,000 unsorted images.

DON’T WAIT TO SORT YOUR FILES! This is the best advice I can give to anyone. Sure it’s easy to save everything to your desktop but chances are, you’ll mix it up, lose it, delete or whatever. If you put in the extra 20 seconds navigating/creating a relevant folder, you’ll save yourself a boatload of suffering.

Getting back on track though… I came across a Firefox extension a while back called Save Image in Folder. This extension saves you so much time and trouble, that you’d actually be wasting resources by saving files the old fashion way.

Go Install that extension and come back for a tutorial if you too, would like to start saving some ‘Internet Garbage’.

After Installing the extension, right click an image (it can be any image, we’re just using this to set things up quickly). You can use this image if you’d like:

Select “Save Image in Folder… >> Edit folders…”

Select “New”, click the folder button next to the “Path” textbox and create a new folder called “Internet Garbage”. Create all your sub folders inside of that folder.

For this example, I used:

- Art
- Funny
- Gross
- Macro
- Nerdy
- Sexy
- Wallpaper

You can add more whenever you please.

Note: You can prefix or suffice the filenames however you’d like. It’s not a bad idea to prefix the files with a short date… but it’s all up to you.

Once you have all your folders created, it’s a good idea to sort them alphabetically by using the up and down arrows located on the side of the Options dialog.

Now it’s as simple as right clicking an image and picking a folder it’s most relevant to save to.