Awesome IE Tool
I had to get another post in before the 6 month mark. And it just so happens I ran into this awesome tool that is quite handy in terms of testing code in multiple versions of Internet Explorer. In the past I've always used the IEDeveloper toolbar (or Spoons browser sandbox before M$ got all copyrighty on them and made them remove it) and it's fairly adequate in allowing me to test the various versions of IE. However there have been times It's missed the mark or in one case wouldn't work at all with the portal I was trying to log into (IE6) So when I ran into this little beauty I was instantly captivated (as captivated as one can be when doing anything that has anything to do with IE). Behold the Internet Explorer Collection.
Maybe I'm just behind the times but this is amazing. Multiple standalone installs of different versions of IE. You can even install really really old versions like 1.x (I didn't but you can). I installed IE6, IE7 and IE8, I don't run windows 7 either at home or work so I can't install IE9.
To be fair I'm still in the test drive phase and haven't removed my IETester install yet but so far it's looking good. The only complaint I have is IE Developer Toolbar is only available in IE8, and while Developer Toolbar is not exactly firebug (but, it has gotten better with IE8) it's about all you have when troubleshooting an IE specific issue.
Before downloading read the comments on the download site. I mention it because they seem to be about 50/50 good vs bad. The software works for me so far on Windows XP Pro SP3, if anything changes I'll update this post.
Print This Post
Object Doesn’t Support this property or method
Just a quick post to spread more love about IE. Occasionally I run into an error on IE (who doesn't) that boggles my mind, like reading toaster directions when they throw in the verticle concept. Anyhow this particular one I've seen before but not sure I've ever known what causes it. I tried to click a submit button that when clicked is supposed to run some validation on the form. Works great in FF2 and 3 but not so much in IE, instead I get this error "Object Doesn't Support this property or method" then it attempts to give me a line and character number to look at but it's way off (as you may have guessed). So I googled this baby and the first post I read on it was the helpful-est. so I'll link to it for you pleasure but also give you the quick and dirty (too late). basically this happens if one of your js functions has the same name as one of your HTML ID's or it can also happen if a JS variable has the same name as a Form Element name which was what was happening in my case. Easy fix just change the name of one or the other and your all set.
Print This Post
Tools of the Trade
I just thought I'd post a list of the tools that I use whenever I web develop. You may be using some of them, or you might not. Some of them probably don't even fit under the "web development" category, but that's the beauty of the DevBlog, I'm just throwing out what I use and you're free to take it or leave it (also if you have a tool that is awesome that isn't listed, throw it in the comments).
Browsers:
- Firefox 3 - Great browser, much better than the bloated version 2 release.
- Safari 3.1.2 - awesome browser, lacking in tools
- IETester - uses the IE5.5. IE6, IE7, and IE8b1 rendering engines
- Opera 9.5 - when I have a ton of ram and cpu to kill - see previous post
You can use Firefox as a standalone browser through a usb stick by going to portableapps.com and downloading the standalone version. They have some tutorials there on how to move your profile etc. There are many other good apps there as well.
Browser Specific Plug-ins/Add-ons:
IE:
- IE Developer Toolbar - The wannabe firebug utility for IE
- Fiddler2 - shows all of your http requests (helpful for finding leaks, or where files really are).
- IEPro - Firefoxerize your IE... well kinda
Safari/any browser:
- XRAY (bookmarklet)
FireFox:
- FireForm - Form Filler... pretty nice
- ieTab - Throws an IE tab in your firefox
- Html Validator - Validate your html
- FireBug - a nice js, css, on-the-fly editor.
- Dust-Me Selectors
- ColorZilla - Color picker tool
- Web Developer - Toolbar, actually a useful toolbar.
- *YSlow
*Honorable Mention: YSlow is a Yahoo tool that tells you how well your site performs based on speed standards formulated by Yahoo. Since Yahoo was one of the first sites to use sprites for all their images, they may just know what they are talking about. This tool will tell you how long it took to load your page, and grade it. It gives you a 'report card' that you can use to make your page better. I don't use it all the time, but it's a nice little addition to the portable Firefox3 usb stick I have...
Color/image Tools:
- ColorPic - Really nice color selection/palette utility
- Gimp - like photoshop, only really different
- colorwizard - I have a feeling adobe ripped this off for Kuler, but I can't prove it...
- adobe kuler - I actually found this at adobe labs before the color wizard, so my suspicions on who made what first may be based on the quality of them...
Measuring and Screenshot Tools:
- jRuler - Fantastic pixel measuring tool.
- fsCapture 5.3 (last freeware version) - My favorite Screen Capture utility.
- ScreenHunter - Screen Shot util (one of Dustin's fav's).
Misc Tools:
- Filezilla - the FTP server and client of choice
- Portable Filezilla - take it with you on a usb stick!
- XAMPP (can be buggy...)
- Launchy - the best application launcher *ever*
- Hamachi - Easy VPN
- MySQL Admin tools (Nice GUI interfaces for your MySQL needs)
- LogMeIn - More secure than VNC, and a little more awesome
- jQuery - seriously, this is some awesome js'ery
- MooTools - Another awesome js library
Completely unrelated to web developing sites/tools:
- SpiralFrog - PC users (with "playsforsure" media devices) rejoice!
- Songza - Everyone rejoice! (internet jukebox)
- LastFM - personalized radio station
- Pandora - LastFM was kinda based on this... so was songza... hmm...
- imeem - Like the 3 above, and yet more, social
- lifehacker - A great site for information and tutorials on hacking your life
- netvibes - Fantastic RSS collection util, all the sites you read on one page, fantastic (kinda like igoogle, yahoo, etc.)
That about wraps up the tools that I currently use when developing, but feel free to throw more suggestions in the comments. Who knows, maybe I'll have to do a follow-up post with all the goodness that gets suggested.
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
IETester: my new best friend for handling my worst enemy
I found a great tool out in the depths of the interweb, and I thought that I'd do a quick-ish post on it so that I can share the happiness with other people. The tool is called IETester, and it is brilliant. It seems to be a mdi container that is hooked into the api's of IE5.5, 6, 7, and 8 beta 1. This allows you to crack open a tab using each rendering engine and view your websites the way they would look in that browser.
This (above) is a screen shot of the program with the about pop up showing as well as several tabs open (all at nordictrack.com)
NordicTrack in IE 5.5 (above)
NordicTrack in IE 6 (above)
NordicTrack in IE7 (above)
NordicTrack in IE8 (above)
As you can see from the pictures, each release of IE handled the css styling and the page layout a little bit differently. It's almost fun to watch IE change from its quirky youth to an almost standards compliant browser (yes almost is a stretch isn't it).
BUGS:
Yeah you knew there'd be some, here's what I found, and what is posted on the developer's website.
- I almost went into epileptic shock while using it. Lots of screen flickering.
- It crashed on me the first time I opened it, not sure why.
- If you resize the screen, content may disapear.
- Flash may not work in the IE6 rendering engine (note: it did work for me at freemotion).
- Previous/Next buttons may not work.
- Focus doesn't work properly.
- Java applets esplode.
- Javascript loading may have problems... (may be the hidden cause of the screen flickering)
Print This Post
IE Hompage reset (Part 2)
Originally I had entered this information in the original post, but I felt that it needed it's own post (the video limitations of the plugin's that I'm using to display video also prompted this second post 
).
Anyway, Remo commented (in an email) about using the Group Policy Editor (gpedit) to change your group policy restrictions to change your homepage (yes you can do that and a ton of other things that you can play with), this is another viable route to the homepage lockdown problem, but he also asked for a post on using regedit to unlock or change your homepage. I thought that maybe I would find the key that actually holds the homepage information and just edit that, but I found a different way that I think I like better (seems like it has less potential for system-wide destruction). So here are the steps.
- Crack open regedit from the command line
- when this opens navigate/drill-down to
"HKEY_CURRENT_USER\Software\Policies\Microsoft\Internet
Explorer\Control Panel". Note that this will only exist if your current
admin has locked down your computer... if you can't find this route
(meaning this tree does not exist) then DO NOT CONTINUE! - If you did find the path, then now is the time to make a backup of
your registry file. To do this click on File->export->(make sure
your selected branch is at the bottom, or click "All" for the entire
registry) Save. - Now that you're safely backed up, lets double-click on "HomePage"
(it's the blue REG_DWORD value in the right pane). In the pop-up change
the value from 1 to 0, and viola! crack open IE and go to change your
homepage the "normal" way and it will no longer be locked. - rejoice in your geekery...(not a required step, but it is recommended )
[display_podcast]
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