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

I don’t have a Vista horror story, everything has worked remarkably smoothly. That’s not to say there haven’t been any glitches, just that my overall experience has been very positive.

One minor problem that I’ve had is with Dreamweaver — the 8.0.2 update didn’t install. It turns out this problem is only with 64bit version of Vista, and is actually a problem with the InstallShield wrapper around the update file. Fortunately the fix is simple enough — even though it is fairly difficult to locate!

Adobe outlines the problem here, and provides the update file without the wrapper.

That’s not the end of the story, though. Unless you run the file with administrator privilege, you will get an error as soon as you run it. It’s a little difficult to run it with administrator privileges, though, because it’s an .msp file and “Run as Administrator” doesn’t appear in its right-click menu or properties dialog. To get around this, you need to open a PowerShell or command shell with administrator privileges, and then run the file from there.

I don’t know why I didn’t think of this before.

Dreamweaver templates use the .dwt extension, which means that if you try viewing them through a browser you just see it as text, or it will try to download the file. This means that developing Dreamweaver projects means either creating the original file as a .html file and converting that to a dwt down the road, or creating an .html file that uses the template, and keep updating it. Both options are just a little more work than I think should be required.

I’m running apache, but the principle is the same (albeit slightly different steps) in IIS. I’m also running this on my local computer so I have quick access to httpd.conf, which is apache’s configuration file. On a shared server, I believe this would also work by adding it to a .htaccess file.

It’s easy, just add this line to your apache config file — httpd.conf

AddType text/html .dwt

And that’s it! Restart apache and reload the page. Apache will now describe the file as a text/html file in the header, and your browser will render it as such.

Have you ever wondered if the SQL Server 2005 database your host is providing might actually be an Express installation? Or maybe you’re curious if they’re running the most recent service pack?

I’ve run into several methods of finding out the version information. The easiest, and my preferred method, is using sseutil — my command-line sql utility of choice. All you have to do is use the -version argument! For instance:

sseutil -m -version -s .\SQLEXPRESS

If you’re interested in the version number, that’s on the first line. This lets you see if the server is up to date. Here is a full list of SQL Server 2005 version numbers, up to the December CTP of Service Pack 2. (If you need the same info on an older server, ASPFAQ has is an extensive list of SQL Server 7 and SQL Server 2000 versions)

If you’re more interested in which edition you’re running, that’s on the last line. It might read “Express Edition” or “Express Edition with Advanced Services” for the free Express edition, or “Standard Edition,” “Workgroup Edition,” or “Enterprise Edition” for the $$$ editions.

But this is only one method! What if you don’t have sseutil? You can always run this sql command:

SELECT @@VERSION

And finally, I found an alternate method on Microsoft’s KnowledgeBase, it goes like this:

SELECT SERVERPROPERTY('productversion'), SERVERPROPERTY ('productlevel'), SERVERPROPERTY ('edition')

One of the most brilliant applications I’ve used recently is called Synergy. Are you familiar with VNC, PC Anywhere, or Windows/Apple Remote Desktop? Synergy is basically a smart, scaled down version of these programs, and is meant for situations when you have the actual, physical computers right there on your desk.

Unlike VNC, etc., Synergy does not transfer any of the graphics between systems, only the mouse, keyboard, and clipboard. In this sense, it’s also like using a KVM switch to allow control of multiple computers from the same keyboard/mouse. But instead of buying an expensive switch (I couldn’t find any suitable for my needs under $75), all you do is drag the mouse off of one of the edges of your primary computer, and it pops up on another one, complete with keyboard control! So if you have a mac screen to the left of your PC screen, you can set up the left edge of the PC/right edge of the mac is the hot edge. Then you can drag the mouse between screens, just like it was one big desktop. Amazing.

Since we just added a new mac to our computer setup as a browser testbed, this has been an enormous benefit. No juggling multiple keyboards and mice!

Oh, and it’s 100% free. Incredible!

One good trick using CSS is making wrapping blocks of elements. Grouping elements together used to be something developers used table cells for, but when CSS started to be used more regularly, alternate methods were invented. A common use is converting <ul> lists (which are typically vertical structures) into horizontal menus. The really good thing about the CSS-based solution is its flexibility when wrapping is involved.

For table-based designs, the number of rows and columns had to be preset. With a CSS-based wrapping solution the size of the container can dictate the wrapping. For instance:

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

Can be produced like this:

ul.wrapping_blocks li { list-style: none; float: left; padding: 10px; border: solid 1px #aaa; } ul.wrapping_blocks li .block { width: 120px; height: 20px; background-color: #1B2B3A; color: #fff; }

<ul class="wrapping_blocks"> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> </ul> <div style="clear: both; "> </div> <!-- necessary to cancel float ... -->

The “block” and “caption” groups are kept together, and sequentially listed in the HTML. They are all floated, and therefore ’stacked’ horizontally, wrapping at the edge of the container. An arbitrary number of these groups can be placed using the same code, and the wrapping is taken care of by the rendering. Here is the same code with ten blocks:

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

To get an even better demonstration, this link will open a new window that you can resize and watch how the wrapping takes place.

At first one of the drawbacks of doing this with CSS as opposed to table is the lack of a border-collapse style! As you can see from the examples above, the bordering edges are doubled. Uh-oh! Border-Collapse only applies to tables!

No problem, just reduce the right and bottom margins by -1. If you want thicker borders, just change these margins to the negative border thickness.

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

.collapsedborders li { margin: 0 -1px -1px 0; }
<ul class="wrapping_blocks collapsedborders"> ... </ul>

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.

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.

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>.

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!

I recently ran into a really puzzling problem. I was creating an administrative interface in Flash, which included a few form elements (flash components) and some custom buttons. One of the buttons was a toggle switch, with a funny behavior! I could only click the button once! Subsequent clicks were ignored until I moved the cursor. Just a single pixel would suffice, but for some reason it needed to reactive the onrollover event for the button.

After hours of searching for clues online, I found some clues...

In Flash, selecting a keyframe in the timeline will also select the stage object (graphic, movieclip, etc.) involved in the keyframe. When I am animating an identical transition of a large number of objects at the same time — such as setting the alpha to 0 to fade-out a set of objects — I will select all of the keyframes involved in the edit. This will automatically select the instances of the objects in the transition.

The only problem is that the Properties panel is sensitive to the type of object that is selected. This sensitivity is normally a very good thing, but in this case it means that the panel still shows the Frame properties, not the instance properties that would allow me to edit the alpha. In order to show the instance properties, I have to click on the stage. Unfortunately, this can unselect everything that I just selected! Traditionally, I get around this by shift-clicking one of the selected objects. This will toggle the selection for just that object, which I can shift-click again to reselect. Now the instance properties are available, and the edit can be made.

There is a better way! I just accidentally discovered a handy way of switching from the frame properties to the instance properties without losing the selection! After selecting the keyframes in the timeline, hit “v” to re-enable the selection tool (or “q” to use the transform tool), and now the Properties panel show the instance properties! The selection is intact.

In the last eight years, I have made lots of advances with my web development. I am always learning new methods, new tools, and new strategies on the path to intelligent web development. These are tips I’ve learned from my progress so far.

(Inspired by the Graphic Push article “The Path to Intelligent HTML“)

Business

(This are tips I’ve learned as a home office-located, solo-operating, contract-based worker. These may or may not apply to your own unique situation.)

Hourly Tracking - NO

I hate keeping track of my hours, so I might be slightly biased on this one. But, biased perception aside, I believe using a fixed estimate is much better alternative than tracking my hours. Granted, you need plenty of experience before you can build an accurate fixed estimate. It also takes more up-front, unpaid time to generate your estimates, which aren’t guaranteed to turn into a paying project. But I find it is almost always worth it in the long run.

Most importantly, you’re getting everything out up front. No surprise costs for your clients! I make my estimates extremely detailed. This way, they serve as scope documentation, pricelist, and checklist. Focusing on so much detail at the start of the project means that both parties are aware of exactly what they’re getting themselves into, cost-wise and time-wise. A detailed list with individual costs for each task allows a client to see which items cost the most, allowing them to refocus their project to fit their budget. In the development phase, the estimate becomes a detailed todo list!

In most projects, a request or two will surface after the initial esimate is approved and the project gets going. This is 100% normal - developers shouldn’t be surprised, and client’s shouldn’t be reluctant to ask! But armed with a detailed estimate, both parties can easily see what was or wasn’t in the original scope, and can determine if the new request will be an additional cost or not. Again, the goal is to eliminate surprise costs. Clients are more comfortable working with you if they know the exact cost of the project from the beginning, and your cash flow is more reliable because you know exactly how much a particular project is going to bring in! (Note: there are certain projects where getting paid hourly is the better alternative, but I use fixed estimates by default.)

Time Awareness - YES

I’ve talked a little about this already in the Tools section, but let me repeat a piece of advice you’ve heard before: time is money. Especially if you’re a freelance or contract worker and work by yourself. There’s no one to distribute the work to! Good time management doesn’t just keep you organized, it also a free way to increase the value of your time. Being able to squeeze more billable hours into your day means that your days are worth more.

There are also ways to increase the value of your time that aren’t free. Another phrase you’ve heard before is: it takes money to make money. Sometimes it takes an investment to save some time down the road. For instance, if you know that a new tool will save you time, consider buying it. If part of a project is outside your comfort zone, and you don’t think learning to do it is worth the time it would take, consider outsourcing that part of the project. Sometimes learning new tricks and techniques will save you time down the road, which would mean the time spent learning it would be paid off later.

Predict Updates - YES

If you’re like me, the single most important assest to your business is your time. The more time you spend making in-scope tweaks and modifications to a fixed-estimate project, the less you are effectively getting paid for your time, and the less time you’ll have to work on other projects. You can’t eliminate the tweaks - they’re an important step towards the goal of developing something your client is ecstatic with - but you can make the tweaking process smoother for both of you. Smoother tweaking not only means spending less time on updates, but it also means being more responsive to your client and being more flexible with their needs. Sometimes this means doing extra work in the initial development.

It takes experience to recognize the most likely targets for modification - sometimes it takes experience with a particular client to know their unique trends. But once you know what to look out for, you can start simplifying those adjustments. For instance, take the XML-based link definitions I referred to in the Methods and Techniques section. I adopted that method when I noticed a tendency of my clients to edit the external links embedded in a flash movie towards the end of the project. By moving the link definitions into an XML file, I not only helped make these edits smoother for myself and my client, but I also opened up the possibility of my client being able to edit these links themselves after I had completed the project, using just a text editor!