Rack and ePinion

I had a few minutes to kill so I read a few pages of the Parade magazine that comes with many Sunday papers. It starts with Walter Scott's Personality Parade, a feature where readers write-in and ask questions about celebrities. Have you seen it? It makes me embarrassed to be a member of the human race. Questions are invariably posed in a smarmy manner using phrases like "gal pal", and the answers are just as bad, or worse. Ugh.

I don't understand the popularity of Personality Parade, People magazine, the Entertainment Tonight TV show, and the hundreds of other celebrity-obsessed offerings from the entertainment media. Who cares who is dating who? Who cares that Tom Cruise married some actress?

Worse yet, you can't turn around without bumping into some advice from a celebrity. Who cares about the political views of Barbara Streisand? Does having some singing and acting talent qualify her as a political analyst? Who would ever seek or take advice from movie stars, athletes, or other famous people? Their lives are so different from the average person that their advice is worse than useless. They deserve credit for success in their chosen field, but in love, politics, or just about any other subject, they have no credentials and their unusual circumstances corrupt their point of view.

I don't blame the stars for the constant coverage, for giving advice, or for airing their political views. I don't blame the media, either. The fault lies with the buying public. People buy the magazines, and they watch the shows, and the more they do that, the more will be offered.

The troubling thing is, because the cult of personality dominates the media, less attention is given to more important, more interesting, and more relevant subjects.

# posted by John @ 11/21/2006 07:59:00 PM 4 comments

I've been using Live Local from Microsoft lately and I thought I'd write about a couple features that may be of interest to genealogists. In general, Live Local is similar to Google Maps. You can use it for viewing road maps, satellite photographs, and road maps superimposed on satellite photographs. Unlike Google Maps, Live Local provides a "bird's eye" view for selected locations. Bird's eye view uses photographs taken at an angle to show the facades of buildings and landmarks. They reveal a lot more detail than satellite photos.

Live Local also includes the ability to add "pushpins" to mark specific points of interest. Google Maps provides a similar capability, but as far as I can tell it is only available through Google Maps programming interface or applications built using that interface. With Live Local, it's a basic feature of the tool and is available to all users.

After you navigate to a particular location, you can save a permalink (permanent link) to the page. The zoom level, pushpins, etc., are all saved, so the link will recreate the current view. Use permalinks as bookmarks for yourself, or share them with other people.

There are a couple ways to save permalinks. I use the View permalink command in the Share menu near the top of the main window. You have to be careful to select all the text; if a view has lots of pushpins, the URL will be quite long.

Here are some example links.

• Old Burial Field, Lancaster, Massachusetts - bird's eye view.
• Old Burial Field, Lancaster, Massachusetts - aerial view
• Old Burial Field, Lancaster, Massachusetts - road view
• Old North Bridge, Concord, Massachusetts - bird's eye view
• 3 Savile Road, Westminster, London - aerial view
• Abbey Road Pedestrian Crossing - aerial view

Live Local permalinks may be of interest to Second Site users. You can add permalinks in event memos, or if you use the Place Index feature, you can add them as comments in place records. Here's an example of how to code a simple permalink:

[HID:][SS:]<a href="http://local.live.com/default.aspx?v=2
&cp=42.448317~-71.674458&style=r&lvl=15&scene=599294
&sp=Point.r2788v90tdw3_Old%20Burial%20Field%2c%20Lancaster%2c%20
Massachusetts_Old%20Settlers%20Burial%20Field%20is%20not%20visible%20from%20
Main%20Street.%20Walk%20through%20the%20woods%20behind%20the%20
newer%20cemetery%2c%20cross%20the%20tracks%2c%20and%20down%20a%20
slight%20hill%20to%20find%20the%20entrance.__~Point.r278y490t9xj_
Cemetery%20visible%20from%20street">Old Burial Field, Lancaster,
Massachusetts</a> - road view[:SS][:HID]

Note that I added carriage returns so that the URL would wrap to multiple lines. In an actual link, there should be no carriage returns, linefeeds, etc.

Finding places using the bird's eye view feature can be difficult sometimes, especially if you don't have an accurate address or if the location doesn't have a precise address. You can use latitude/longitude, but the Live Local user interface doesn't have latitude/longitude input fields. You have to use some other method of creating a Live Local URL.

Once you are in the right general location, you can drag the bird's eye image around, but you can't drag indefinitely. When you reach the edge, you have to click on a control which loads an adjacent area. Sometimes, the place you want to find is at the edge of an area, but loading the adjacent area doesn't show what you want because of vagaries of how the photographs relate to each other. If that happens, try using the direction control which loads an image of the same area but taken from another direction. The default direction is looking north, but quite often the best view of a landmark will be from another direction.

Bird's eye view is not 100% reliable. It may be due to the load on the Live Local servers, or who knows what, but sometimes Live Local says that bird's eye view is not available for a particular location even when I was looking at it moments before.

Don't let those little problems deter you. The bird's eye view and the pushpins make Live Local a great addition to your mapping toolkit.

# posted by John @ 9/16/2006 11:43:00 AM 0 comments

As many of you know, my TMG Utility program is offered as donorware: if you use the program and like it, I ask you to donate to the Pan-Mass Challenge (PMC). The PMC is a great charity. Every year, thousands of bicycle enthusiasts ride 180 miles on the first weekend in August to raise money for the Jimmy Fund, the fundraising arm of the Dana-Farber Cancer Institute. In October, when the fundraising has all been done, the PMC presents a big check to the Jimmy Fund. In 2005, the total was $23 million!

My wife and I have both ridden seven times already, and our daughter Casey is a two year veteran. It’s a great family activity; we train together, fund raise together, and all for a great cause. Our PMC activities remind us of our friends and loved ones who have passed away from cancer, notably Shelly Ford, Ann and Mario Labadini, Sally DeCroteau, Marie Cloherty, and Ed Parent.

There are many, many great things about the PMC, and we'd like to keep doing it forever, but this year will be our last. Each year it gets a little harder to reach the fundraising minimum and we need a break from that pressure. With three people riding this year, and a $2500 minimum for the route we ride, that’s $7500 we have to raise. Given that the three of us share the same relatives, friends, and neighbors, and we have been asking that group to support our ride for many years... well, that’s a lot to ask of people year after year.

I'd like to send a special thank you to TMG Utility users who have donated in the past. All of you embraced the idea of offering TMG Utility as shareware supported by donations, and you helped bridge the gap between the fundraising minimum and what we raised from friends and family.

If you are a TMG Utility user, and if you feel that TMG Utility has saved you time and effort, please make a donation this year. It’s a donation to a great charity, it will be a big help to me and my family, and it’s your last chance.

The ride is this weekend, August 5th and 6th. The deadline for fundraising is October 13th.

You can donate online via my eGifts page. Please note that even though the eGifts page is for my PMC account, we pool our funds and so a donation to me is a donation to Maureen and Casey, too.

TMG Utility users: don't worry!

TMG Utility will not be donorware anymore, and that's a shame, but I will continue to support it and add features to it and it will remain the essential utility for TMG users. I suspect I'll change it to freeware or shareware, but I'll decide that after we get through this year’s PMC fundraising effort.

UPDATE on Wednesday, August 2, 2006

I'm overwhelmed. In 2 days, more than 50 people have donated. That's incredible. I don't really know what to say except that Maureen, Casey and I are very thankful to all of you. The TMG user community is a caring, generous bunch. Your generosity prompted me to upload a letter written by the mother of the young cancer patient who is the Pedal Partner for my PMC team. I think Sarah's mother Michelle explains why the PMC is so important far better than I can.

# posted by John @ 7/31/2006 09:47:00 PM 4 comments

My Death by Design post elicited some comments. That's good. After reading the comments, and re-reading some of my other posts, I decided I was being more negative, in general, than I'd like. So, here's a link to a site named CSS Beauty that presents a gallery of well-designed sites. I liked the sites a lot more than the sites from the Death by Design post.

The gallery page of the site is here: CSS Beauty Gallery

The brief description of what the site is about is here: About CSS Beauty

# posted by John @ 3/30/2006 12:26:00 PM 0 comments

Let's start with a disclaimer, which is typically a bad idea. I do not have much artistic talent, at least in the area of graphics or visual media. I am often amazed by people who do, and a few of those people are my friends.

Check out the Netdiver Best of the Year 2005 awards for web site design. It's a great example of why you don't want designers making too many decisions about web site design. The sites on the list are graphically rich, and there are some innovative elements, but more importantly, they are hard to use, hard to understand, slow to load, and dogged by other difficulties.

In general, the sites scream out, "Look what I made the web do!", rather than trying to get across a more useful message. Maybe I am too much of a left-brain thinker, but those sites don't work for me at all.

If I was looking for a designer, I'd want the sites I visit to describe the services they provide. Most of the sites on the list do don't do that well, if at all.

I'd want the site to include a portfolio. Most of the sites do that, but the portfolios only show the work. They do not describe what the client was hoping to achieve, whether those goals were met, etc.

Take a look, and decide for yourself.

# posted by John @ 3/08/2006 08:35:00 PM 5 comments

I updated the design of my web site recently. The update was long overdue. In mid-January 2006 I created this blog on Blogger.com, and I chose a Theme they provide named Sand Dollar. I really liked the look of that Theme, and so I decided to use that as the basis for my whole site.

Now that the update is done—for now—I decided some of you might be interested in what I did, and why.

I changed the look of the pages, and I changed the structure. More importantly, though, I separated the presentation details from the content. Many people call that process "separating style and content," and while that sounds fairly accurate to me, some experts disagree. I'll leave that discussion for another day, or maybe never! Anyway, my stylesheet(s) now control almost everything about the way the pages look. The HTML elements in the content describe what the content is, and not how it looks.

This approach, and the explicit structure of the pages, allows me to use styles to better advantage, and the HTML content is simpler than it was before.

Page Layout

I chose a relatively simple page layout because I wanted my pages to work on Internet Explorer 5 and 6. Those browsers have a lot of CSS-related bugs and a complex layout would mean dancing around those bugs one way or another. Many page authors use CSS hacks to get around the IE bugs, but I wanted to avoid that if possible. I don't have the time or the equipment to test my pages on a wide variety of browsers and platforms, and keeping the page layout simple reduces the amount of testing necessary.

All the pages use the same basic HTML shell. The shell includes containers for the page header, the main content, and a sidebar, roughly as shown below:

Using those containers, and CSS selectors, I can control the style of HTML elements within a particular section. For example, lists in the sidebar are styled differently than lists that appear in the main content.

The site structure, and the associated CSS stylesheet, should make my site more convenient for visitors. For example, if you print a page, the sidebar is omitted, and the main content will expand to fill the printable area of the paper.

Simpler HTML

If you look at the page source, you won't see a lot of HTML clutter, such as <BR>, <FONT> and <SPAN> elements everywhere. (I'm talking about pages over on my site, not here in this blog. The blog HTML is mostly controlled by Blogger.com.) On most pages, the main content has a section heading or two using <Hn> elements, and paragraphs using <P> elements, and that's about it. Other pages use ordered and unordered lists (<OL>, <UL>).

One enabler for writing simpler HTML was my decision to just give up trying to make pages look good in old browsers. In old browsers, like Netscape 4, you'll see the content but it will be as plain as vanilla ice cream. Most new browsers have a "disable styles" command, and you can use it to see what I mean. (In Firefox, you can use the View > Page Style > No Style command to disable styles.) The pages are still legible, but all formatting is omitted. I don't want to prevent users of old browsers from using my site, but I am not going to bother to try and make the site look the same for them as it does for people using a newer browser. I'd rather encourage visitors to upgrade their browsers!

HTML 4.01 Strict

As I updated the pages, I did a fair amount of HTML cleanup. I chose to use the HTML 4.01 Strict doctype, so that means my pages don't use <B> elements, <I> elements, or any other elements or parameters that are valid in HTML 4.01 Transitional but not valid in HTML 4.01 Strict. I chose HTML 4.01 Strict because I think it's better to separate presentation from content. In addition, using the HTML 4.01 Strict doctype helps ensure consistent results across browsers. The pages won't be formatted exactly the same on all browsers or platforms, but they will look very, very similar.

All the pages that use the new style have been validated with the W3C Markup Validation Service. I use the excellent Web Developer extension for Firefox to make that process quick and easy. While viewing a page in Firefox, I can key Ctrl-Shift-A to validate the current page.

I used to think that eliminating the <B> and <I> elements in HTML 4.01 Strict forced an unnecessarily severe separation of presentation and content, but I gradually changed my mind about that. During the past year or so I have been converting or eliminating those elements (and other deprecated elements) in my HTML pages and I discovered that the process encouraged me to make better decisions about what level of emphasis was appropriate for a particular section of text. In some cases, I cleaned up HTML that was just lazy on my part. For example, I had some section headings that were implemented like this:

<P><B>Heading Text Here</B></P>

If the text truly is a section heading, then it should use one of the <Hn> elements:

<H2>Heading Text Here</H2>

Let the Brower Do Its Job

I removed "go to top" links and links that open new pages as I edited the HTML. I think people should use the controls their browsers provide rather than have web pages include links or other widgets that duplicate the browser functions. For example, if you want to go to the top of the page, from anywhere on the page, most browsers have a key combination you can use. In Firefox, you can press the Home key or Ctrl-Home keys on your keyboard. (One moves the focus as it scrolls to the top of the page, and the other doesn't. I forget which because where the focus is doesn't usually matter to me and I don't go to top that often.) Similarly, if you want to open a link in a new tab, or in a new window, you can right-click and select a command to do that from the context menu.

My mouse has a scroll wheel that is also a button, and in Firefox, clicking a link with that middle button opens a link in a new tab. Very convenient.

Anyway, I am now leaving browser functions to the browser.

Controlling Line Widths

The only tricky thing about my new site layout is the width of the main content. If you have a high-resolution monitor and your browser window is maximized, you should see that lines of text in the main content section wrap to a new line even though there is more space available on the righ-hand side of the window. That is deliberate. Long lines of text are hard to read, and so I set a maximum width that keeps the line width reasonable. It's relatively easy to force the text to wrap at a particular width, but it's a little harder to make it wrap at a particular spot or before if the window is smaller than the maximum width.

Actually, it is easy in good browsers, because CSS2 includes min-width and max-width properties to constrain the width of boxes to a range:

min-width: 20em;
max-width: 35em;

In the example above, the widths are specifed in em units. An em is a typographical measure that is defined relative to the current typeface. It is usually equivalent to the width of the letter M in that typeface, and that is the origin of the name. 35em is recommended as the maximum line length by various experts.

Internet Explorer does not support the min-width and max-width properties, and that's where things get difficult. I could have left it at that; site visitors using good browsers would see text wrapped at a reasonable width, and Internet Explorer users would see text that wrapped at the right edge of the window. I chose not to do that because my old site design used nested tables to constrain the width of paragraphs and I didn't want to take a step backwards.

After a lot of searching and some experimentation, I found a compromise. I implemented a simple version of a technique first described by Svend Tofte in his article max-width in Internet Explorer. Basically, Internet Explorer supports (non-standard) expressions in CSS properties, and it is possible to implement a reasonable substitute for the max-width property like this:

min-width: 20em;
max-width: 35em;
/* IE5/6 version of max-width */
width:expression(document.body.clientWidth>700?"500px":"auto");

The expression tests the width of the body element. If the width of the body element is greater than 700, the width is constrained to "500px" (500 pixels). If the width is less than or equal to 700, the width is set to "auto", which means that text will wrap at the right edge of the window. It's not exactly what I want, because I'd prefer to wrap the text based on the size of the current font, not on the size of the window, but it's the best I could do in IE.

Sven described a more elaborate version of the technique that converts pixels to EMs but I decided to use a simpler version.

Compliant browsers ignore the width property because it is not valid CSS syntax, and so they use the min-width and max-width properties to determine the width.

Global White Space Reset

I used one other technique which is worth mentioning. It's called Global White Space Reset and it was originally described by Andrew Krespanis. Essentially, a simple CSS rule is used to set the margin and padding properties to 0 for all elements:

* {
  margin: 0;
  padding: 0;
}

The rule above cancels padding and margins for all HTML elements, which means that you subsequently have to define margin and padding properties for every HTML element you use that needs non-zero values. While that sounds like a lot of work, it's actually easier than accepting the default values that vary by browser because writing CSS that selectively resets margins and padding requires knowing how every browser, and every browser version, on every platform, sets margins and padding values. If that sounds impossible, that's only because it is. The technique has some pitfalls, so read Andrew's description for more details and some examples before you use it on your site.

Content Management

I should also mention that I build my home page, and the sub-sites for Second Site and TMG Utility, using a homegrown content management system that mixes content files with page templates to produce finished pages. If I change a page template, or one or more of the content files, I can regenerate the site very quickly. I have about 400 pages on my site, and it would be very painful to change the site design without a content management tool. If you have a small site, you probably don't need one. Some people use commercial content management tools, or HTML editors that have some content management features. I haven't found one I like. They all have some fatal flaw, like bad HTML output, or quirky WYSIWYG editors, or worse, and so I use my own program.

Over and Out

I hope you found this article useful. If you are considering an update of your site, some of what I did will apply to your project. In particular, separating presentation details from content, keeping the HTML simple, and making better use of styles are goals every web publisher should consider during a site overhaul.

# posted by John @ 2/26/2006 03:53:00 PM 2 comments

A user reported that a page produced by Second Site didn't look right in a beta version of IE7. Given that the page looked right in Firefox and in IE6, and given that IE7 is supposed to be more compliant with standards, one would think the page would look right in IE7.

The first thing to mention is that IE7 is still in beta, and so an IE7 bug may be responsible for the problem. On the other hand, pages produced by Second Site use pretty vanilla HTML and CSS, and it seems likely that an IE7 bug that affected Second Site would affect a lot of sites and there would be a general hue and cry about it. There isn't, so that means Second Site might be doing something wrong.

The second thing to mention is that some changes in IE7 are going to break existing sites that used work-arounds to make IE6 render pages properly. There's lots of discussion of this on the web, including an article CSS Hacks and IE7 on Position Is Everything, a very useful site that discusses CSS bugs in modern browsers and other CSS-related topics.

It turns out that Second Site avoids using those CSS tricks and so the problem isn't one of those.

At this point, I don't know what the problem is, and that brings us to the reason for this blog entry. I am going to have to install a version of IE7 and see the problem firsthand to solve it.That should be easy, but it isn't...

Microsoft says that IE7 can not coexist on the same PC with IE6.

Here's my reaction to that bit of news.

1. It wasn't a surprise. The same was true of previous versions of IE. It's been a PITA for a while.
2. I need a working copy of IE6 on the PC I use to develop Second Site. Whenever I make any change to Second Site, I test the change using Firefox 1.5 and IE6. Those two browsers are used by the lion's share of the browsing audience and I need both of them on my main development PC.
3. I don't want to risk the stability of any other PCs I use for other tasks by installing IE7.
4. My development PC currently has the following non-Microsoft browsers installed and operating properly:
   • Firefox 1.5.0.1
   • Firefox 1.0.7
   • Mozilla 1.7.7
   • Opera 8.5
   • Opera 7.54
   • Netscape 8.1
   • Netscape 7.2
   • Netscape 7.1
   • Netscape 6.2
   • Netscape Communicator 4.76

   Why is it that all those other browsers can peacefully coexist, but IE6 and IE7 won't? It's a rhetorical question. I don't really want to know the answer; I want Microsoft to fix the problem.

I can't find the blog link now, but some developers have argued that other developers ought to stop whining about this problem and buy a PC to use for IE7 testing. I don't know about you, but I don't have money burning a hole in my pocket that I am just dying to spend for a PC dedicated to IE7, and I don't have an extra PC lying around. When Bill Gates sends me a check for $1000, that's when I'll consider buying a PC for IE7 testing.

Meanwhile, I found some unofficial instructions for installing IE7 without uninstalling IE6. If I install IE7 at all, I'll probably do it that way.

Sorry about this rant going on so long, but there's one last thing. The web is a democracy, and you get a vote. In fact, you get several. You vote by the sites you visit, the ads you click, and the tools you use. If you are using Internet Explorer, you are essentially voting for Microsoft to keep operating the way they have been for a few years now. That's a bad use of your voting power. I urge you to download and use Firefox. Vote for the challenger, so that the incumbent will know you demand a better browser.

# posted by John @ 2/18/2006 01:10:00 PM 3 comments