A few overlooked Firefox add-ons
In my efforts to try to post more I have decided to share some tips about a few of the other Firefox add-ons that I find useful.
Today we will be covering:
- YSlow
- Live HTTP Headers
- Tamper Data
- XPather
YSlow is a firebug plug-in that has been created by the Yahoo Developer Network. It's a relatively simple tool that shows up in your status bar (right next to firebug). It has a little speedometer and "YSlow" next to it. By clicking on it, you activate it's function, which is to run a short series of tests on the site you are looking or working on. It then loads how long it took to load the page, the file-size, and the grade of the site. It then shows a "report card" on the left of the tool. The report card is broken down into performance areas. clicking on it will let you know what did wrong and give you a link to the Yahoo Developer Network guide to cleaning and speeding up your website. I personally used this yesterday and sped the WebTop up from loading in .5 seconds to .3 second (with and empty cache - .2 with a full one). I also sprited the site and cut off 80k worth of fat. I wouldn't use this tool everyday, but it is nice to have around when you really want to see how your site performs (there are a ton of other features bundled in this, but for the sake of the post I'll let you read it at the official YSlow website).
Live HTTP Headers is a great little app for firefox. Similar in nature to both Fiddler2 and httpspy for IE, this allows you to see exactly what is being passed through your browser as well as make small modifications to them and resend the request (remember kids, let's not be malicious). If you don't really know what fiddler or httpspy is, you probably won't understand this tool... but I used it to find the real location of a video file I wanted to download that was being obscured by a flash player, so it can be helpful. Oh and I used it to find out why a page was throwing errors about content loading from both secure and non-secure links (turned out to be a tracking js file... dirty tracking js).
This of course brings us to Tamper Data. This is actually a "ninja approved" tool (meaning it came from ninja, and he uses it). This is perfect for checking values in a form submit in say a shopping cart. We used it to compare the values being sent from a 'live' cart, and our 'dev' cart. It came in very handy when testing the new HealthRider sight and enabled us to find that part of the cart was being double-html-encoded. Yep we could see that the cart was converting our string into html code (you know like a 'space' into a' %20'), and then encoding that encode again. Very ugly stuff. So if you need to see what a form is really sending and you don't want to skim through your headers etc. This is a great tool to see whats there. Oh I almost forgot, you can catch a form during submit and change the data on it on-the-fly. So we found the bad encode, switched it with a single-encoded string and viola! it worked.
The last tool XPather is not something that I think most of us here would use. However since jQuery has filters that use XPaths, this is a very helpful too to write some slimmed down jQuery-alized javascript code. This add-on allows you to generate and find XPaths in a document. If you're a Firefox greasemonkey script writer, this will also come in very handy.
If anyone else has some great tools or add-ons that they'd like to share, throw them in the comments.
Print This Post
A quick and dirty benchmark of Opera 9.5
So a day or three ago Opera 9.5 was released. I didn't realize it had been released until after I had read about it on lifehacker, gizmodo, and/or engadget, but it came out and the masses rejoiced (lifehacker is still throwing a party about it). Back in the day I loved Opera, the tab feature was my favorite (before firefox came along). I use opera on my wii, and I even used it on my mobile a while back (the mobile is gone, in case you wondered). I read a few stellar reviews on it, and after seeing how it handles speed-wise, I decided to give it a shot. With everything that I'd read about Opera 9.5, I came out with very unexpected results. Opera is by no means a developer browser... at all... seriously. I mean it's really sad when IE can b!#%h slap a browser. Don't believe me? that's what screen shots are for.
I set up a test, I ran Opera 9.5, Safari 3.1 (for windows), IE7 With the Web Developer Toolbar running, and Firefox 3.0 (released today*!) with many plugins running (Firebug 1.2.0b03, ietab 1.5.20080310, fireform 0.6.3, Web Developer 1.1.6, and Html Validator 0.8.5.2). Here are snap-shots of my task manager after the browser had been opened and left on a LOCAL html file for approximately 5 minutes.
Safari 3.1 (above) - No CPU usage, and a very respectable 34MB** of memory being used.
Firefox 3.0 (above) - a little CPU, and a little more memory (this is most likely due to all of those plug-ins I have running)
IE7 (above) - better than firefox, and not chewing on any CPU... very interesting (and by that I mean I'm a little surprised).
Wow! that sucks! I mean what is Opera even doing? 50% of my CPU and over 300MBs of RAM? I don't remember them signing up with the SETI program! (ok fine, lame joke, I get it). Seriously though, that's just nuts for a browser!
Ok, now that we've seen the damage after being open for a several minutes, let's minimize all the browsers to see how it can behave down in my task bar (and hopefully free up some memory).
Safari 3.1minimized (above) - Nice, it just fades away into the background waiting to be used.
Firefox 3.0 minimized (above) - Well at least it gave up the 2% CPU it was chewing on.
IE7 minimized (above) - Explatives!! under 4 megs of memory!?! that's it, the world has gone mad...
Opera 9.5 minimized (above) - wth!? Still chewing on 50% of my CPU and crunching 170ish megs of ram? Why is everyone going nuts over this browser? Did mine not come with the hypno-ray?
Anyway, I'm sure that everyone's experiance will vary. Especially on other platforms. I mean who knows, maybe in linux or on a mac Opera really is the best browser. Also I didn't even cover all of the cool features that Opera has (and yes it has some really sweet features, so I'm keeping it installed). So go grab it and see if it destroys your system like it did mine.
*I started this post yesterday, so firefox really had been released "today"
**Yes we all know that a mb is actually 1024k not 1000, but hey getting too critical just makes it easier for me to make fun of you.
This test was run on an intel Core2 6600 @ 2.4GHz with 4 GBs of ram.
Print This Post
httpSpy for Firefox!
This morning I stumbled onto a real treat for those developers that are using Firefox. Backstory: A while ago Ninja had suggested that we use a little program called "httpSpy" for debuging the header information that was being served/requested by our server/browser (very useful to find obscured links, what items are really being loaded on a page, and what connections are being secured). The problem is that while the program is awesome (and extremely hard to find as there are 3 or 4 variants on a google search that are all different), it only works with IE. Naturally, this is undoubtedly causing a shudder and a distinct feeling of betrayal to surge up from the depths of your soul 
. The time of IE only debugging is at an end... Introducing "Live HTTP headers", a fantastic little tool that pops up in a different window that will show you your requests and let you resend them ( with some modifications) and logs everything being passed to and from the server/browser. While I haven't really played with it for more than a few minutes, it seems like a good tool, and I'd recommend throwing it in the arsenal.
Live HTTP headers - can be downloaded here (link goes to the mozilla add-on site, as I did not grab the xpi file). It also works with FFox3RC1 
.
Print This Post
FF3 RC1 – WebDev add-on is go!
As you may or may not know, yesterday I updated my portable copy of FF3b5 to the RC1 release... unfortunatly it upgraded my version 2 and my standalone 3b5. So I lost most of my plugins, and was rather hosed. Good news however, my FireFox informed me this morning that it had found an update to one of my add-ons (I actually like this new feature of FFox checking for updates for me, it's kind of nice). It turns out that the team that developed the webdev toolbar had released a new version of their tool, and it's FFox3 compatible! So now I have the latest FFox and most of my missing tools! (I grabbed the firebug beta from getfirebug.com - it's a little flakey so it's nice to have the webdev bar back). There are a few other plug-ins that work right now as well (like ie-tab). Anyway, just thought I'd let you guys know that it's out there and ready to go in case you wanted to update to RC1 (or did accidentally)...
Print This Post
FFox broken image plug in
Update: Brett/Burt has had a problem with this working on his box, so it may not be compatible with some plugins/add-ons.
One of the worst things that I run into is the prettifying that FireFox routinely does to webpages. When you surf, it's a great idea, who likes to see broken image files? But when you are developing it gets in the way and can take an otherwise smashing page, and make it look... uh... well smashed. To get around this issue you used to have to install "greasemonkey" and then grab a user-script in order to force firefox into showing you broken image files. Well luckily those days are over as the other of the original script finally made it a standalone plug in. You can grab the plug in here.
I decided to do a little testing between FF2 (with the plug-in), FF3b5 (w/o plug-in), and a control IE7 (yes using IE7 as a control actually made me cringe, and may have given me a rash). I then created a generic html page with 6 broken img links in it. Here's what we have:
Now as you can see, I have some invalid html (missing alt tag), a couple alt tags with spaces, a few with the alt tags as spaces, you know some ugly things you should never do, and yet we find all the time. Render Time!! Let's start off with our control.
Here's how FF3b5(w/o plugin) rendered this mess:
Notice that it shows up with alt tags showing, and at first glance it looks like it picked up 4 of the 6 images. Upon closer inspection though, you'll see it only saw 3 and prettified the page by removing the rest. Although I gotta say, seeing the alt text looking so plain really throws me off when I'm looking for where an image should be.
And lastly a render with FF2(with plug-in)
We can see exactly what the plug in did. It doesn't show the alt text now, but you at least know that there should be *something* showing up on the page. When it's all said and done, I'd say that this is worth the install, and quite a nice plug in.
Print This Post
VirtualBox – and a linux experiment
So a few weeks (or months) ago I read a post on a site that said how to run windows in a linux environment similar to how parallels works on OS X. I went to the website and found that there was a windows binary available for download and that you can make a Virtual Machine out of just about anything. So I made one of ubuntu 7.10 (making sure to disable the "network" portion before the install so as not to get stuck in an infinite loop when installing the distro). Everything went smoothly and soon enough I was booted fully into a very fast running virtual linux installation. That's when I opened firefox and found out that we have a firewall that hates us. So now that you've done the same thing and want to figure out how to make things work, lets start by setting up the system proxy settings.
- In Gnome (ubuntu 7.10 default interface) click on 'System' -> 'Preferences' -> 'Network Proxy'.
- Click on the "Manual proxy configuration" radio button.
- For 'HTTP proxy:' enter "proxy3.wherewework.com"
- For Port use 3128.
- Click on the "Details" button
- Check "Use authentication"
- Enter DOMAIN/username
- Enter your password
- Click the "Close" button
- Click the "Close" button again
- Crack open fireyfox and make sure that the proxy pop up window has "domain\username" then your password
- Enjoy the surf
It is fairly important to note which way the slashes are going in each step of the process. If it still doesn't work, your NAT settings may need to be tweaked... I did end up cloning my hosts MAC address, but I'm not certain that will make it work.
Print This Post