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

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.

I shouldn’t have been surprised. Web Development is just another skill, after all, and as far as I’m concerned all skills have exactly one thing in common: you start out bad, and you get better. So what was so surprising? Why, taking a look back at some of my earliest projects, of course.

They stunk.

But it wasn’t just my designs that were bad. My code was bad. My tools were bad. My fundamental strategies were bad. I can’t receive all the blame for this – after all, the web has been evolving, too. Popular stratagies, browser capabilities, and available tools have all gone through their own changes. But in the last eight years, I have made lots of advances on my own. 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“)

Coding and Design

Frames - NO

My first websites used frames everywhere. But I know enough now to realize that frames are Bad News in most cases. Frames complicate bookmark behavior. They require a fundamental fragmentation of a page, which reduces search engine optimization and can cause other problems. For instance, users coming to a site through a search engine link might only see a partial page. It’s not pretty, and frames are safely out of my life now.

There was some good to come out of frames, though - or at least the IFrame variant. Several years ago (early 2001) I was experimenting with IFrames as a method of transferring data between the page and the server and updating the existing content without having to reload the page. I knew that was pretty neat at the time, but now I realize I was, in fact, experimenting with an early version of AJAX. Fortunately, there are better tools for AJAX now, but using IFrames was a start.

Tables - NO

One of the worst aspects of my old code were the enormous nested tables. Four, five, six layers deep? Maybe more. Updating old code was like scraping off wallpaper and discovering that you had to peel off five or six more layers before you could paint the wall.

There will always be a place for tables in web design, but there are better ways to layout a page. CSS allows you to arrange your page into simple, logical blocks of content. It’s much simpler and cleaner than the old table-based layout, which improves code readability and makes a page easier to update. Not only is the code cleaner, but I believe that the entire philosophy behind CSS-based pages helps promote cleaner, more user-friendly pages on the user end. Better code and better pages? It’s a win-win. While we’re on the topic of CSS:

CSS - YES

For years my web projects were all very simple. Five or six pages, minimal fuss. Site-wide changes like updating font size or link color were merely a little annoying. But when you’re working on large websites, even simple changes can take a long time. With CSS you just edit one file and that’s it. That’s efficiency. Markup was also improved, by eliminating the need for tags like <font>.

CSS also opens up a lot of possibilities that weren’t available before. Web developers now have access to better typography, more sophisticated use of background images, easier printer-friendly and text-friendly designs, better search engine optimization results, better accessibility support, and lots, lots more. Moving to CSS was one of the biggest steps in my evolution as a web developer.

Javascript, AJAX, and DOM - YES

My old experiments using IFrames to communicate behind-the-scenes turned out to be a sign of times to come, but I had no idea how far it would go! Now, tools like XmlHttpRequest are available on the most popular browsers, and I am more comfortable with DOM scripting - both of which get used in AJAX, the hottest thing on the web right now. I’ve incorporated it into a few projects so far, and I love it!

The most interesting thing I’ve found about AJAX is that instead of adding a layer of difficulty to the programming, it actually makes a lot of my tasks on the backend even easier! More user-friendly and easier to develop? There’s a reason why it’s the hottest thing on the web!

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!

VB.NET or C#? It’s an age-old argument. Well, not really, since .NET has only been around for four or five years. But it’s a classic debate among .NET developers. I’m not here to say which is better for you, but I’ve found some statistics that you might find interesting if you are trying to make a choice between learning one of these languages.

I looked at CodeProject, SourceForge, Freshmeat, CMSMatrix, Monster, and HotJobs. I also did my best to look at every .NET-based blog software available, in order to determine what is used more. Note the distinction: not which is better, but which has seen more use by more developers that I could find. In other words, I’m letting developers that are more experienced than I speak.

Read on for the results »

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

Note: this post has been imported and re-editing from a personal blog. Time-sensitive material may no longer be relevant.

If you want to embed video into a webpage, one of the parameters you can use is “autostart.” The autostart parameter options are true and false.

Problem: Firefox does not read ‘false’ correctly. It will autostart the video with settings of both ‘true’ and ‘false.’

Solution: use ‘0′ (zero) instead. In most programming languages, ‘true’ and ‘false’ are really just pseudonyms for ‘1′ and ‘0′. Or to be more precise, false is zero and true is non-zero. Firefox does not seem to be converting the text “false” into the programming concept ‘false’ and instead reads it as non-zero, therefore true, because the text isn’t blank.

Note: this post has been imported and re-editing from a personal blog. Time-sensitive material may no longer be relevant.

Have you ever had a problem with Firefox where the window size/position doesn’t seem to be saved like with most applications? Every time you open Firefox is appears in the same unusual position at an unusual size. It’s annoying. And here’s what to do:

Locate the “localstore.rdf” file in your Firefox profile, and delete it. Don’t worry, Firefox will make a new, fresh one when it restarts.

Of course, the corruption of localstore.rdf might be an indicator of a larger disk corruption, in which case this fix might not keep you happy for very long — but it’s worth trying.

If you’re having trouble locating your Firefox profile (and you’re on a Windows machine), look in C:\Documents and Settings\[your user login name]\Application Data\Mozilla\Firefox\Profiles\default.xyz Replace “C:\” with your systems root drive, and insert your login name in the indicated spot. Your profile might be in “\Mozilla\Profiles\” instead of “\Mozilla\Firefox\Profiles” depending on what version of Firefox you’re running. And the “default.xyz” will almost certainly be different on your system (the extension is random, from what I can tell), but it’s normally the only folder in “Profiles.”

Note: this post has been imported and re-editing from a personal blog. Time-sensitive material may no longer be relevant.

Since my preferred backup method is to archive all of my content to DVD, I have found myself with a very large collection of very full DVDs. To be honest, the problem started a long time ago, when I found that when I needed a particular file I had to go through each disc. It started out as a routine task. Then, as my backup CD collection grew, it became an annoying chore. Then, as the collection grew again and they were now full DVDs instead of full CDs, it became a bone fide problem.

What I really needed was an application that would save the directory structure — all the file names, dates, locations, etc. — of all of my discs. Something that I could search through even when the disc wasn’t in the drive. And I needed something that let me determine which copy is the most recent of any particular file. If you need similar software, read on — I found a couple of good ones!

(more…)