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

I’ve been thinking a lot lately about exactly why working from home is so important to me, and the benefits to myself and to my clients. The reasons I do it, and my own benefits, may not be the same as someone else’s. But I think these are general enough to reflect a majority of situations, not just for those in freelance or contract positions, but also for those telecommuting on a salaried position.

I believe that nearly all benefits are mutual to both sides, at least indirectly. An employer may not care one way or another if, for instance, having a private bathroom is important to me. But if it makes me more comfortable, then it makes me a better and more productive worker, and that is a measurable benefit for the employer.

I do want to point out that I don’t have a complete perspective on this - for instance, I’ve never been in the employer role in a telecommute arrangement. But I do speak from experience; I have been freelancing since 1998. But I should also point out that I’m an introvert and this is written from my perspective; many of these benefits might be outweighed by the sheer energy that extroverts enjoy when in the company of others.

continue »

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')

Yes, their search results still use tables and font tags. BUT I noticed today that Google’s results have switched from being listed with <p> tags to using <div> tags! It’s definitely progress.

If you’re interested, I noticed this when one of my Greasemonkey scripts stopped working. My script will number the Google results, which I use to test SEO rankings. If you have Greasemonkey, and you’re interested, you can install Number Google Results here. It’s already updated to work with Google’s new format.

I really had a lot of hope for IE7. I was eager for the Big Day when IE7 would be pushed out to millions of computers around the world, changing the landscape of the internet overnight. Suddenly the support for PNG transparency would be in the majority of internet users! Suddenly CSS bugs would be vanquished, and multi-headed hydra designs would be a thing of the past as IE7 would bring better standards support to the majority of the population!

Oh well. It was a noble thought.

As developers all over the internet are discovering, IE7 simply replaces old bugs with new bugs. Most of what I’m seeing now seem to be pure rendering issues, such as the inability to redraw backgrounds in negatively-margined div elements after the users scrolls out and scrolls back in. I’m seeing some positioning bugs. And big problems with opacity support.

So now I’m stuck importing yet another stylesheet declaration into my html.

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!

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

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.

I’m not talking about always closing your database connections, or commenting your code. I’m talking about something a lot more fundamental. Electricity usage.

Our location has four computers, three of which run pretty much 24/7. The biggest machine we have uses about 260 watts, and it trails off from there. So we probably have 650-700 watts of computer running 24 hours a day. I’m no die-hard environmentalist, but that’s significant. On a monthly basis, that tallies up to about 500 Kilowatt/hours on our electricity bill. Ouch! So, today we went out and bought enough CF bulbs — those little Compact Flourescent bulbs where the flourescent tube is in a little coil attached to a normal light bulb base.

We spent about $175 on 39 light bulbs.

But read about how we're saving $1,400!

I’ve been expanding my toolset lately, looking for better ways to increase my efficiency. I first wrote about some of my tool preferences during my Better Web Development series, but with some more tips I wanted to come back to this.

Here are some quick links and reports of some terrific FREE software:

update: Microsoft has recently revamped its Windows Live search to use much less AJAX and behave more like a traditional web search application. Kudos for Microsoft — they have bypassed much of what I’m am complaining about!

If you follow tech news, you have probably already heard that Microsoft has recently made available the beta version of its new search engine, Windows Live. Microsoft has tried to generate a lot of hype for this, going so far as to say that they will beat Google at their own game. Well, that’s a tall order. Google means more than just accurate results. When I first started using Google over Yahoo! and Altavista, it wasn’t because I thought the results were more accurate. It was because Google had a clean, open, spartan, quick-loading interface that didn’t get in the way. It wasn’t a portal. It was just a search engine. Later, Google also gained recognition as a leading developer of AJAX-based online applications, like Google Maps and GMail. These, too, utilized simple, clean, and responsive interfaces.

So, without considering the accuracy of search results,

how does Microsoft's newest offering compare to the Google way of life?

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!

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“)

Flash

Single Files - NO

Working with Flash, it is very easy (and tempting!) to put everything into a single file. As long as your flash file is neatly organized, this shouldn’t be a problem, right? Not quite. It’s very easy to create gigantic files that not only take forever for the user download, but which take forever to compile, wasting precious development time. I first started dividing my flash movies into multiple files in an attempt to solve bandwidth problems for the end-user. But it wasn’t until Flash introduced the ability to import external JPGs and MP3s instead of just other SWF files that I really started loving this technique.

My favorite example is with galleries or slideshows. These can include dozens or even hundreds of images, yet since the point of these movies is to show off the images, lowering the resolution really just defeats the purpose. This is an easy recipe for an enormous flash file! So, to solve this problem, I create the initial interface in flash, but load the images from external files - each with their own loader bar if necessary. This splits up the download nicely for the user, and the sky’s the limit for the number of images you can use with this technique.

External Definitions - YES

Traditionally with Flash, it has been possible to load text files full of variable definitions. I used this to its fullest potential, but it was… well, clunky. Importing single values was fine, but importing a collection of values was done by defining “value_01″, “value_02″, “value_03″, etc. After the variables were loaded, you would run a function to move all of these individual variables into more accessible structures like Objects or Arrays (or arrays of objects!). There had to be a better way. And then Macromedia gave it to us: XML!

Now, if I want to include variables in external files, I can use an XML document. I particulary like to use XML defined values when I am creating galleries and slideshows. I mentioned above that I like to import the external JPGs at runtime. I also like to define what images are used and the order in which they’re used with XML files. This is one of the best ways to speed up project updates! Say, for instance, a client wants to rearrange the order of slides in a slideshow. If you made the movie the traditional way, you’ll have to open up Flash, move clusters of frames around, and recompile. But by using external JPGs defined in an XML document, all you have to do is open up the XML in a text editor and cut and paste the nodes that need rearranging. Easy!

Another favorite use of external XML is for link definitions. If a client needs to change the URLs of external links within the movie, all it takes is a quick XML update. I also use this technique for menus, image sequences, and content.

Reusable Scripts and Components - YES

After developing in flash for a while, you will have accumulated a library of functions, objects, and animations that you frequently reuse in other projects. Scripts can be included into a Flash document with the “#include” directive, which can help you avoid repetitive changes. For instance, say you have a button that triggers a function on the rollOver event, and this button is animated over many keyframes. Normally, if you wanted to change the rollOver event for that button over the entire animation, you would have to edit the button’s actions at every keyframe. But if you defined the button’s actions in an external script, and “#include” that script at every keyframe, you simply edit the external script once to change the button’s behavior for the entire animation!

Graphics, buttons, and movieclips can be reused as well by being saved to an external library. You can open the external library, and drag and drop these items into your current document. But it gets even better with components! In Flash, components are a nice method of packing your most powerful custom objects in a way that makes them even more accessible - just look for your custom elements in the Components panel! You can even ‘run’ them inside the Flash development environment, so you can see how they will look in the final compiled output! (this is called “Live Preview”) Components can be simple, or can involve complicated, programmatically-rendered designs. They’re the ultimate in resusability and, if done right, in scalability as well.

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“)

Methods and Techniques

Templates - YES

Dreamweaver has them. GoLive has them. Visual Studio 2005 has “Master Pages,” which are basically the same thing. For static small and medium sized websites, I have found no reason not to use the template systems available in these applications. I had long eschewed using these proprietary template systems, prefering a non-proprietary system that runs on the server. Script includes or SSI can be used to make “header” and “footer” files that form the foundation of a template system, and are good options for large sites or sites with a lot of custom scripting.

But for smaller sites, especially if you want to make the most out of your editing tool, go ahead and use the template systems they offer. You might have to swallow some pride when you do so, but once you’ve made it through a good-sized project using such a system, I’ll bet you’ll like it. You’ll be creating pages faster than ever! The individual page editing is a painless, automated process. The template markup is in the form of HTML comments, so you won’t be sacrificing your HTML validation. It’s safe and easy. Just relax, take a deep breath, and give it a shot.

3rd Party Scripts - YES

Something else I was once loath to use were 3rd party scripts. I avoided them at all costs, from simple javascript functions to full-blown web-based applications. I was proud, stubborn, and oh so very picky about my code. I wanted to do everything myself. What an idiot I was! (This was before I learned the value of my own time.) I did benefit in the beginning, because I learned a lot more this way. But there were downsides, mostly rooted from the extra time committment. By spending so much time on the rudimentary code, I didn’t have time to make user-friendly and powerful systems.

Eventually I started using 3rd party scripts, some of which turned out to be very useful packages. A perfect example is Wordpress, a host-it-yourself blog package. With Wordpress, I can take advantage of all the tools I wouldn’t have had time to make myself - like a truly user-friendly administration system, a beautiful template architecture, a plugin architecture, RSS feeds, and more.

Wordpress has such a good plugin interface, in fact, that there is a whole community of developers out there creating free plugins that anybody can use. So now I can take advantage of even more features that I don’t have to spend my own time on. What a system! Converting normal templates to the Wordpress system is a piece of cake, and very easy to manage.

Content Management - YES

For almost any size site, content management is an enormous benefit. Even for sites that require a lot of custom scripting, it’s worth it. I consider it an up-front cost with long-term savings. It’s an easy decision for my clients: why not pay an extra $1500 today, if it will save you $5000 in update costs over the lifetime of the site? (just example costs, of course) But it’s not only an advantage for the client, it’s an advantage during development, too. Making templates for modern content management systems is easy enough once you get familiar with the system, and suddenly you have a robust, user-friendly administration system that you can hand over to your users.

Wordpress can be used as a content management tool, but for sites that need a bulkier content management tool, I use Joomla (it used to be known as Mambo). Joomla is as incredible for large-scale content management as Wordpress is for blogging.

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“)

Tools

Text Editors - NO

I know. I’m being mentally slapped by hard-core programmers all over the world. So let me explain. I would be perfectly comfortable coding websites in a text editor. I don’t have a problem with that. In fact, even though I use Dreamweaver and GoLive to develop webpages, I almost exclusively rely on their code editors, and only occassionally use their WYSIWYG interfaces. I started off using text editors because I believed - and still believe - that a full understanding of the actual HTML/CSS/Javascript code is absolutely essential in good web development.

That said, I do recommend using an editor like Dreamweaver or GoLive, for all the built-in productivity benefits. Built-in FTP transfers. Remote versioning control. Templates. Snippets. Components. Error checking. Reference guides. Code completion. Built-in scripts. Drag and drop linking. The advantages are too numerous to list! (Incidentally, I have no preference between Dreamweaver and GoLive, although I have the feeling that Dreamweaver is going to be the one to survive the Adobe/Macromedia merger)

Professional Tools - YES

I’m not trying to say that text editors are not professional — I am a huge fan of EditPad Pro and high recommend it, and I find it very professional. Perhaps what I am trying to say is to use Specialized Tools. Even among HTML editors, Dreamweaver and GoLive just scratch the surface of a well-rounded toolset. Since I work in such a broad range of projects, I use a wide variety of tools. Photoshop is probably the most important tool in my shop. 99% of my projects start there. With Photoshop comes ImageReady - and while I feel that most of ImageReady is fluff, there are a few really good tools in it. Flash is a great tool all by itself, but I also use SWF Studio for building CDROMs. I also have to supply my Flash movies with audio and sometimes video, which require their own tools. (I use Adobe Audition and Sony Vegas.) I use Blender for 3d graphics. InDesign and Acrobat for PDF publishing. OpenOffice for document and spreadsheets. Illustrator for vector graphics. Visual Studio for application development and .NET programming. And these are just the big ones. I use dozens of tools for various smaller tasks. (Note: I hope to put up an article fairly soon that discusses my favorite tools.)

The point of a good tool isn’t just functionality, it’s higher efficiency. That’s what justifies the cost of the software. I bought Adobe Audition, for instance, after having a particularly difficult time finding proper tools for a particular set of audio editing requirements. I could do what I needed to do, but I was spending hours longer than I knew it would have taken with a good application. So I bought a copy of Audition, and it literally paid for itself in the first two weeks of using it.