Birnam Designs Blog -- sharing tips, resources, ideas, and more on web development and design

A few weeks ago I wrote about an exciting AddOn for Internet Explorer that gave IE a lot of the developer tools we have become used to in Firefox. It’s called DebugBar, and is published by Core Services. At the time, I was able to test it out with a Virtual PC using IE6 but had stability problems in IE7 on my native Windows XP box.

The problem turned out not to be with use in IE7, but a compatibility issue with the Google Desktop addon I also have installed (it records your browsing history to be searchable with a Google Desktop search). I’m very happy to report that Core Services was eager to get this fixed, and they have already released a 4.01 version that solves the issue!

After having worked with the AddOn some more, my opinion has only strengthed, and not just in regards to the new stability. DebugBar has become a very useful addition to my toolbox. It’s free for personal use, and professionals have a 30-day trial period before having to decide on the ~$75 pricetag. If you find yourself banging your head over IE development, this could be what you’re looking for and well worth the cost.

Plus, if you’re looking for a good IE tool for working with Javascript, the same developers have also released an early version of Companion.JS, a new tool for debugging Javascript. It might be an early version, but it’s already looking good.

As most Firefox-savvy web developers know, nothing quite beats the Web Developer Toolbar (WDT) extension. As if you didn’t already have enough good reasons to develop in Firefox instead of IE, the WDT gives you so much control that after using it, development in IE feels like building a house of cards in the dark. Even Microsoft recognized the advantage that WDT gave Firefox over IE, and developed their own version, called Developer Toolbar (DevToolbar). Isn’t that a clever name? DevToolbar, currently in beta 2, shares many of the same features of WDT but lacks overall polish and really feels like a beta. And Microsoft doesn’t seem to be in any hurry to finish it, either. It’s been in beta for a long time.

Recently I was pointed towards DebugBar, an IE addon that is the closest I’ve seen to providing developers a real impetus for using IE for development again. It combines features from three of my favorite Firefox extensions: Web Developer Toolbar, Firebug, and ColorZilla, as well as a few others like ScreenGrab, Live HTTP Headers, cookie viewers, source code viewers, and a couple of bookmarklets I use frequently such as Javascript Shell and RenderMode. It’s quite the toolbox.

Read on for more about DebugBar »

For those of you that have already taken the plunge and installed IE 7.0 (before we’re all dunked), one Firefox (and Opera) feature that you might wish had been copied but wasn’t is the inline search. In Firefox, hitting Ctrl-F doesn’t open the standard Find dialog box — or any dialog box at all, for that matter. Instead it opens a small pane in the bottom of the window. The main benefit is that it allows complete interactivity with the contents of the window, even with the Find pane open. If you’ve ever used it, you love it. But IE7 still has the same-old Find dialog.

Unless you go to IEForge.com and install their Inline Search Add-On! As far as I can tell, it has identical functionality to the Firefox incarnation, so I’m happy.

Now if only someone will write an Add-On for IE to open View Source in IE window (not the default text editor), also with Inline Search.

Douglas Karr has been kind enough to provide a modified version of the WP-ContactForm plugin that I’ve been using to manage my contact form. It’s a simple change to implement, and if you get any spam through your WP-ContactForm, this will save you a lot of headache. It’s a much simpler concept than a CAPTCHA image — it verifies humanitity through a simple challenge question. By default, this is “2 + 2 =” (4). Easy enough for anyone to answer — except for bots! Recommended.

One of my favorite features of Firefox v1.5 is that when you are prompted to upgrade, you are given the option to see what extensions will break due to the upgrade! What a fantastic feature — yet one that has caused me to delay my 1.5.0.1 upgrade. (security fixes) One extension in particular — the Googlebar extension, an even better Google toolbar than Google’s own extension — would not work after the update. Unfortunately, that is probably the most actively used extension I have! Fortunately, there is a solution. (also, Googlebar has since released an updated version that fixed the problem in the first place, but that still leaves me with a few extensions that won’t work after the upgrade)

Evilsoft.org has a good rundown of how to edit a Firefox configuration file in order to restore extensions caused by minor updates.

Notes:
1) don’t try this with major updates, like a 1.5 -> 2.0 updates, and

2) pay attention to the author’s note about using a text editor, not a word processor, to edit the configuration file. I recommend either Edit Pad Pro (not free) or Notepad (free) for pure text editing.

No, I’m not talking about Quirksmode.org, the fantastic resource on browser compatibility. (Although if you don’t know about that site already, do yourself a favor and go ahead and bookmark it. Go on.) I’m talking directly about the quirks mode in browsers. More specifically — and you can skip to the end if this is all you’re interested in — I’m talking about how to determine if a browser is running in standards mode or quirks mode.

Both Internet Explorer and Firefox (and assumedly other modern browsers) have two different rendering modes, standards and quirks.

But first, what is rendering? It is the process of interpreting the markup of a web page and determining how to draw the page. As difficult as that sounds, believe me, it’s probably even more difficult than you realize. It’s not just HTML. It’s also javascript, XHTML, CSS, DHTML, DOM, VML, embedded plugins, SVG, Canvas, XML, XSLT, MathML, SGML, etc. And even within these types of markup there are different version numbers. HTML 1, HTML 2, HTML 3, HTML 4, XHTML 1.0, XHTML 1.1, CSS 1, CSS 2, CSS 3, etc. And then, within those levels of markup, are even more levels. Transitional XHTML 1.0, Strict XHTML 1.0, etc.

Obviously, trying to interpret all of these is no easy task, even if you could rely on every developer in the world to be a markup expert. Of course they’re not, so you also have to account for errors. How do you handle markup mistakes as gracefully as possible so that the resulting webpage isn’t rendered in an incoherent mess of text and images?

Enter Standards Mode (aka Standards Compliance Mode) and Quirks Mode. Just from their names, you can probably guess which one is used to render pages with flaws and which one is used to render pages that observe all markup rules. For me, Standards Mode is a goal. If I have created a webpage that is rendered with standards mode on both browsers, then I’m in good shape. (when I say ‘both browsers’ I am of course referring to Internet Explorer and Firefox) If my page falls into quirks mode, I need to figure out what’s wrong. It’s more than just observing good markup rules — it is also more reliable to have a page that is rendered in Standards Mode. When I say reliable, I mean that it is easier to get Internet Explorer and Firefox (and other standards-observing browsers) to render your page in the same way. This saves enormous headaches, because otherwise you have to sometimes create multiple style definitions, or even multiple pages, in order to get things to look right for all browsers.

Now that we know which is better, here’s the question: how do you tell if the browser is rending in standards mode or quirks mode?

In Firefox, it’s simple. Right click on the page, select View Page Info, and look for the “Render Mode:” detail. Tada! If you’re a serious web developer, though, you should also ensure that you have the Web Developer extension for Firefox. If you have this extension, then there is always a nice friendly icon in the corner of your screen that will show you the render mode. For instance, at this moment, I can look up and see that there is a blue circle with a checkmark in it, so I know that this Wordpress admin page is running in standards mode. When I roll over the icon, a tip pops up and confirms this. Or I can click on the icon to jump to the View Page Info dialog which will tell me the same information. If this blue circle is greyed out, then I know I’m viewing a page that is relying on quirks mode.

In Internet Explorer, it’s not so straight-forward. To the best of my knowledge, there is no built-in functionality that will show what render mode the browser is using. It’s not in the page info. Instead, I defer you to the Render Mode Bookmarklet. It’s easy to use: follow the link I gave you and you will find a page that contains a link at the very bottom. Clicking this link runs javascript code that will determine the render mode of the page and give it to you via alert box.

All you have to do is save this link as a bookmark, and you have a bookmarklet that will do the same thing to whatever page you happen to be visiting! Enjoy, and good luck always finding your pages in standards mode!

(Currently, available only for users with Visual Rich Editor turned off)

v0.2

WordPress makes it easy to divide content into an introduction section and an extended content section by simply clicking on the “more” button. The introduction section is displayed in the main blog page, while the extended content is added to that section on the permalink page. This is great for those of us who have a tendency for writing lengthy posts. (ahem)

The only problem is that every post with extended content gets the same link, saying “Read the rest of this entry »” or (more…), depending on which version of Wordpress you’re using. Wouldn’t it be nice if you can customize what that says?

Now you can! CustomMore is a small plugin that asks for the text you want to use to link to the extended content. In the composition page of the WP admin, it looks like the same old “more” button (note: only available if the Visual Rich Editor is turned off), but when you click it, a box will pop up asking for the link text. It will appear in your document in modified form of the WordPress default more tag.

To install, just unzip the file into your wp-content/plugins/ directory. (You will be uploading the entire bd_custommore directory as a sub-directory of the plugins directory).

Download CustomMore v0.2 here.