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

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 »

Don’t snuggle up too closely with the current Joomla 1.5 beta, a new templating system is coming down the pipe (currently in the nightly builds) that replaces the patTemplate system that had been in development. Amy Stephen brings us the news. I trust the Joomla developers, so I’m sure this will only lead to a more flexible, more extensible system.

So now here I am, developing a site based on a version of Joomla that will now have a radically different templating system from the launch version. Am I worried? Not a bit. I am developing with fully semantic code, so the bit that involves the template is purely structure, not design. All I need to do is move my CSS file, and the transition will be very easy.

I just never thought I’d be reaping the benefits of semantic code so quickly!

As ye faithful readers out there (all three of you) will hopefully see in the next week or two, I am currently redeveloping the main Birnam Designs website. I am creating new branding, new content, and will be using the new Joomla 1.5 CMS for development. Joomla 1.5 is a terrific (and free!) CMS, if you haven’t used it before, and this is just one example of how easy the templating system is.

My goal was to set the CSS class of a <div> to a particular value depending on whether or not a separate module (that was specified outside of this div) existed or not — in my case I was trying to alter the margin of my main column depending on whether or not the right column existed.

I could have probably done the whole maincolumn <div> in a conditional template, but it’s a largish section of code and I really didn’t want to maintain such a chunk in two places. Fortunately the patTemplate system that the Joomla templates are based on has a var tag, and it can handle boolean expressions that are evaluated as PHP code. Here’s how to use it:

Replace the “default” attribute value with the template module you want to check for, and the “false” value with the value you want if it doesn’t exist, and the “true” value to what you want if it does. The expression evaluator automatically replaces the “$self” variable in the code with the value you specify in the “default” attribute, so you don’t need to modify the expression code unless you want to extend it.

This is all I needed to use the variable now:

It gives me a class of “normal” if I don’t have a right margin, and “rmargin” if I do.

(note: this is using Joomla 1.5 beta, I haven’t tested this in anything else)

The new “anti-alias for readability” setting for text in Flash 8 and up looks really good. The only problem is that there are sometimes unexpected behaviors related to text wrapping. That’s because, by default, the advanced antialiasing uses “grid fitting”, which is not used by traditional (anti-alias for animation) text. Grid fitting is a text rendering technique that aligns horizontal and vertical lines in the font glyphs to a whole pixel. For instance, say you have a lower-case ‘L’ that is draw as a one-pixel wide bar. In order to render it as crisply as possible, that one-pixel wide bar should be lined up with the monitor’s actual pixels.

Unfortunately, this alignment process can alter the width of the text, which can alter the wrap points in multiline textfields. This normally wouldn’t be noticeable in static text fields, but it is very obvious if the textfield is being animated. Especially when being scaled! The text will jump around as the wrap points keep changing.

Fixing the jumping wrap problem »

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.

Here is an excellent article on using photoshop to radically change a photo of an elderly lady to a young and beautiful woman. It covers the use of a wide variety of tools, and has stunning results. This is the kind of photoshop tutorial I really like to point people to, where the results are so amazing as to really excite people towards the possibilities, but are laid out in a good way as to actually be repeatable.

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.

I just found this short and to-the-point flowchart over at The Google Cache that helps you (or your clients) to decide whether or not to use an all-flash website.

Ok, so it’s overly simplified. Personally, I think some pages can benefit from being all-flash, like a virtual tour that is part of a bigger site, but I do try to discourage my clients from having a flash-only site. If you’re unaware of the downsides to flash, the biggest reason is because search engines are completely blind to content in a flash movie. Completely. And even if you’re not overly concerned about being available to search engines, that doesn’t mean your business or organization wouldn’t benefit from that availability.

If you're not convinced this is a problem, read on...

A few more great examples for using javascript to its fullest: 9 Javascript Tips You May Not Know

Are you more of a javascript beginner? I always recommend W3Schools, they’ve got a good reference for javascript. If you need to look up something quickly, GotAPI is a language reference tool built with Ajax that acts as a front-end to the W3Schools library.

While you’re at it, don’t forget to look and see what’s new in Javascript 1.7, which will be included in Firefox 2.0. (update: Firefox 2.0 final release is available!) Don’t get too excited, though, because other browsers aren’t quite there yet. Opera’s specs page says, “Opera supports the entire ECMA-262 2ed and 3ed standards, with no exceptions. They are more or less aligned with JavaScript 1.3/1.5 Core.” I’m having trouble nailing down IE7’s support.

I’ve been experimenting with Windows Powershell (formerly known as Monad or MSH) recently. It’s currently in version 1.0, Release Candidate 2 (RC2), so it’s pretty much ready. Download it here to give it a try. I’ve struggled with a few aspects of it, but it’s very powerful and I’ve already started customizing it to help out with my day-to-day work.

If you’re like me, you’ve heard of how great the Linux/Unix shells (like Bash) are, but are pretty much just familiar with the old DOS command prompt. This will blow your socks off. There was just a *pop* and a realization that, ohhhh, so this is what a Shell is.

There’s a great introduction to Powershell (then MSH) at ArsTechnica that I highly recommend. But just to give you a tease, here is a one-line bit of code that will tell you how many pages Google has indexed for a specific site (I’ve used ArsTechnica again, you can see the reference in the url bit):

 
That’s really sweet.

Are you having trouble setting the alignment (e.g. right align) of a dynamic HTML textfield in Flash? The paragraph align settings — even if you specify them through a TextFormat object — don’t work when the html text has been set dynamically. Why?

The text inside the html text field is being rendered into an HTML block element, even if you don’t specify any HTML tags in the text, and the contents of that block are, by default, aligned left. So even if the text field is aligning the contents to the right, all that is accomplishing is aligning a 100%-width block to the right. The alignment of a 100% block doesn’t matter, since it takes up the entire width anyway. And it doesn’t touch the left-aligned text inside!

So don’t forget to wrap any text you want aligned to the right in an HTML text field with the proper HTML alignment techniques — such as <p align="right">(text)</p>.

asfunction: is one of those neat little tricks that I almost never use, so I usually end up having to look up the exact terminology every time. If you already know about asfunction:, maybe you’re like me and are looking it up again for the zillionth time, but now maybe you’ll be able to remember where to find it. If you don’t know about asfunction:, it can really come in handy sometimes, so check it out:

asfunction: is the Actionscript equivalent to calling javascript: from a link in a standard HTML page.

Read about use and syntax »

Here’s a quick tip — even though it was far from quick to figure out in the first place. In fact, I’ve been banging my head on the desk over this one for days.

Ever have a dynamic text box in flash that will show text when it uses device fonts, but not if you do embed any of the font? I couldn’t even get Arial to show up! Only if I switched it to static text, or dropped the embedded characters would anything show up. At first I thought it a problem with the font — it’s one of the few OpenType fonts I use and I couldn’t remember if I’d ever tried embedding OpenType in flash before. So I even went so far as to convert the font (via VirualPC -> Ubuntu -> FontForge). Nothing. I tried converting to PostScript and TTF.

The solution? It turns out the text box was set to a left-margin of a negative amount. I changed this to zero, and viola. Everything works — OpenType and all.

Check your margins!