Tuesday, November 21, 2006

More Than We Need to Know

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.

Saturday, September 16, 2006

Live Local

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.

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.

Monday, July 31, 2006

TMG Utility and the PMC

Summary: This is the last year my family and I will be riding in the Pan-Mass Challenge (PMC). If you use TMG Utility and you have been thinking about making a donation to support cancer research, now is the time!

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.

Thursday, March 30, 2006

The Other Side of the Coin

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

Wednesday, March 08, 2006

Death by Design

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.

Sunday, February 26, 2006

Site Design Update

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:

header
main content
sidebar

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.

Saturday, February 18, 2006

IE7 Wants a PC All It's Own

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.

Friday, February 03, 2006

XML

I mentioned XML in a recent message sent to the Second Site News mailing list, and that generated some questions from subscribers, including "What is it?" and "Why would I use it?" It is beyond the scope of a blog entry to explain XML in great detail, but I can provide you with a brief description and some reasons why XML might become more important to you in the future.

XML stands for "eXtensible Markup Language". XML is a text processing standard, a set of rules and other criteria that define how applications store and process data stored in text files. XML is very useful for exchanging data between applications because the standard is fairly simple, and very precise, and that reduces the cost of implementing the importing and exporting components of a program.

XML is eXtensible because users can define the data elements they need for their application. Data can be exchanged between applications when multiple developers agree on a set of data elements.

Here's an example of some text data, and the same data in XML. I've chosen some data elements that represent the typical fields in a standard U.S. address.

Text XML
John Doe, 15 Main Street, Anytown, MA 99999
<name>John Doe</name>
<address>
    <street-address>15 Main Street<street-address>
    <city>Anytown</city>
    <state>MA</state>
    <zipcode>99999</zipcode>
</address>

If you know HTML, you may notice that HTML looks similar to XML. In fact, there is a version of HTML that is XML. It's called XHTML. HTML and XML are similar because they are both based on an older text standard.

There are many uses for text documents, and XML is now the format of choice for many of those uses. For example, many applications write user preferences to XML files.

XML is a popular standard, and so there are many tools available for developers and for end-users. One tool is XSLT, a tool for converting XML documents to some other format. Second Site uses XSLT to convert TMG data to web pages. Second Site converts the TMG data to XML, and then passes the XML to an XSLT stylesheet, which converts the data to HTML. By leveraging XML and XSLT, I saved time and effort implementing Second Site, and the users benefit, too. The transformation facility in Second Site is more powerful and flexible than it would have been if I had to develop it all myself, and users can learn about XML and XSLT on the web and in books. Anything they learn about XML or XSLT from customizing Second Site will transfer to similar projects with other tools that use XML and XSLT.

You don't have to know anything about XML in order to benefit from it. Software developers understand the value of using XML to exchange data, among other things, and so they are building XML capabilities into their applications. As time goes on, you'll see more and more applications using XML.

XML is not ideal for all text applications. One downside to XML is that it is verbose. There are 43 characters in the text-only version of the address data above. There are 147 in the XML version if you don't count the indentation and line breaks. (They aren't necessary in XML; I added them to make the structure clearer.) The overhead varies dramatically based on how much structure the data requires.

There has been a lot of talk in genealogical circles about XML replacing GEDCOM. As of February, 2005, there is little or no support for XML in any of the widely-used applications. That's unfortunate, as GEDCOM needs to be replaced.

I am adding an XML Export feature to TMG Utility so that users can export a subset of their TMG project data to XML. I am including some stylesheets so that data can be converted to web pages. The XSLT Stylesheets I provide will also serve as examples for people who want to write their own... more on that later.

In the initial release, the XML Export facility will support these data items:

  • DNA Log
  • Exhibit Log
  • Master Source List

If you have ever wanted to create a custom report for one of the data items above, but you were unable to get the results you want using one of TMG's built-in reports, then you might want to consider using TMG Utility's XML Export feature. XSLT Stylesheets are not for the technically naive, but they are easier than writing a database application to produce a report. If you can't write an XSLT Stylesheet to produce the report you want, maybe a cousin, friend, or power-user can.

Sunday, January 29, 2006

Get Sage!

Some of the e-mail messages I received in response to my Get Firefox! article asked one of these two questions:

  1. How do I install extensions?
  2. How do I subscribe to your news feed (and others)?

Sage is an extension for Firefox that makes it easy and convenient to subscribe to news feeds. I'll describe how to install it and that will answer both questions.

This is a long article, but don't let that discourage you. The process is pretty simple, especially when someone walks you through each of the steps. It takes a lot of words to describe even simple steps.

Installation Basics

Please read this section and the Install Sage section before you attempt an installation. Some of the steps are not necessary in every case and if you read all the directions first you'll know how to skip one of the more tedious steps.

These are the basic steps to install any extension:

  1. Open Firefox.
  2. Find the download link for the extension.
  3. Click the link to download and install.
  4. Restart (close and re-open) Firefox.
  5. Configure the extension. (Optional)
  6. Use the extension.

In my experience, finding the extension is half the battle. There are a lot of extensions available, and many of them do similar things. For example, I use IE View to open pages in Internet Explorer from Firefox. There's a similar extension named IE Tab which does the same thing in a different way. Some people prefer the IE Tab approach. Having options is a good thing, so what's the problem?

If there are a few extensions that all do basically the same thing, how do you choose? There's no easy answer, but here's what I do. I read the description carefully. Does the extension actually do what I want? Is the description well-written? If not, I move on. If the feature I want is not the primary function of a particular extension, and it comes with a lot of other features, I typically opt for one of the other choices.

I always review the user comments and ratings. Well-implemented extensions will have few, if any, low ratings.

Install Sage

There is nothing unusual about installing Sage. It does require a little configuration after you install it; you have to subscribe to one or more news feeds.

In this case, we already have a link to the download page for the extension so we can skip that pesky "find the extension" step.

  1. Right-click on the download page link. Choose "Open Link in New Tab".
    Opening a new tab keeps this article handy in the original tab.
  2. Click on the new tab (it's near the top of the window). The name will start with "Mozilla Update :: Extensions".
    Clicking on the tab will make that tab's content visible.
  3. Scroll down to the Install Now link that is in a rounded-corner rectangle next to a graphic of an arrow pointing into a box, and click it.
    Clicking the link will start the automatic installation process. The Software Installation dialog will open.
  4. Review the information in the Software Installation dialog window. Click the [Install Now] button to install the extension.
    The Extensions window will open. The new extension will appear in the list, and a progress bar will show the download progress.
  5. When the installation is complete, the progress bar will disappear.
    For Sage, and most extensions, a status message beneath the name of the extension will tell you that "Sage will be installed when Firefox is restarted." The software is copied to your PC, but the install process isn't complete until you restart Firefox.
  6. Close all Firefox windows and then reopen Firefox.

The previous instructions have been pretty general except for the link to the Sage download page. The remaining instructions are specific to Sage.

  1. Click the Sage command in the Tools menu.
    A sidebar will open. A sidebar is a user interface panel on the left-hand side of your browser window.
  2. At the top of the sidebar there are two icons and an Options pull-down menu.
  3. The left-most icon, two arrows pointing at each other in a circular fashion, is a refresh button that checks all your subscribed news feeds for new content.
  4. The magnifying glass icon is a Discover Feeds button that helps you find news feeds on the web pages you visit.
    We'll use that button after we explain the other user interface elements in the Sage sidebar.
  5. The Options menu contains a set of commands that can be used to customize Sage.
    Explaining those commands is beyond the scope of this article. You'll have to learn those options on your own. For the time being, you don't need to change any options.
  6. The top-half of the side-bar has a list of news feeds.
    Each news feed is a collection of articles published by a single source. If the news feed is shown in bold text, there are unread articles in that collection.
  7. The bottom-half of the side-bar has a list of articles from the currently-selected feed in the news feed list.
    Bold entries are unread.
  8. At the top of the articles list are four icons.
    Move your cursor over the icons to reveal a tooltip. The tooltip explains the function of the icons.
  9. Sage includes a few pre-subscribed news feeds. Click on the "BBC News | News Front Page | World Edition" feed or one of the others.
    The browser window changes to show content from the articles in the news feed. In many cases, only a brief summary is shown. In others, the entire content is included. You can browse to the web page for the article by clicking the title of the article.

At this point, Sage is installed and working and you should be familiar with the basic operation of the extension. Now let's add a news feed.

News feeds are a simple concept that can be surprisingly difficult to grasp. Essentially, a news feed is a list of articles from a particular publisher. Many news organizations publish news feeds. In addition, web logs (usually called blogs) are often published via news feeds.

The computer file that contains the news feed must conform to one of the accepted news feed formats. Collectively, those formats are often called "RSS". Describing those formats is beyond the scope of this article. In general, you don't have to worry about that. Sage, and most other news readers understand all the common formats. The only thing you need to know is, when you see the letters RSS, the site you are visiting publishes one or more news feeds.

Most sites use a distinctive icon to indicate that a news feed is available. When you see one of those icons, you can click the magnifying glass icon in the Sage sidebar to list the available news feeds.

Let's try that now. My blog has a news feed. Click the Sage magnifying glass icon. When the DIscover Feeds window opens, select "Rack and ePinion" and then click the [Add Feed] button. You've just subscribed to a news feed.

You should see "Rack and ePinion" in the news feed list. It will work the same as the news feeds that came with Sage.

Done!

That's it. You've installed a Firefox extension, and you can now subscribe to a few of the thousands of news feeds available via the Internet.

Here's a short list to get you started.

News Feed Notes
FOXNews.com(Red!)
CNN.com(Blue!)
Eastman's Online Genealogy NewsletterGet the news letter via a news feed reader rather than e-mail.
SecondSite-LMailing lists on RootsWeb can be read via a news reader. This is just one example. Go to the "browse the archives" page for the list and click the "discover feeds" icon.
RssGenealogy.comA news site for genealogy that has it's own news feed, links to other news feeds, and links to pages that should be news feeds but aren't!
DearMyrtle"Practical, down-to-earth advice for family historians."

I hope you found this useful. News feeds are an efficient way to monitor some of the stream of information that pours out of the web.

Saturday, January 28, 2006

Blaming the (CSS) Victim

Articles, blogs, and forum posts by CSS proponents are full of complaints about (A) browser suppliers, especially Microsoft, and (B) web developers who haven't dropped the TABLE-based layout method in favor of a pure CSS solution. Most of the browser supplier complaints are related to CSS layout problems and so the two topics are closely related.

I think the complainers are barking up the wrong tree.

I agree with some of the complaints, but there is a better target for their—and my—dissatisfaction. I spent some time thinking about this recently and two questions came to mind that lead me to a different villain.

1. Why are there so many bugs?

The number and severity of the issues varies widely, but all browsers have bugs that negatively affect pure CSS layouts. Browsers are complex applications and so it's understandable that there are bugs. Many old browsers are in need of a mercy killing or a significant update, and that explains a lot of the bugs that lead to hair-loss for CSS coders. But even new and recently updated browsers have significant layout-related bugs or issues. The cross-browser problems related to layout-related features in CSS1 and CSS2 lead me to conclude that those features are disproportionally hard to implement properly compared to the other browser features and capabilities.

I think I know why it's hard, but let's cover the other question first.

2. Why are TABLE-based layouts so common?

Why have so many web developers and publishers chosen to stick with the TABLE-based approach? The TABLE-based approach has some significant problems and limitations, and it fails to deliver the separation of layout and content that everyone acknowledges is an important implementation goal. But if you use the "View Source" command on these sites—some of the more popular on the web—you'll see TABLE-based layouts and/or heavy table use: Amazon, Google, Yahoo, Excite, eBay, and the list goes on.

In addition to the big staff and budget that accompanies publishing one of the world's most popular sites, it's hard to change direction on those big ships and so it may be momentum that prevents them from changing to a pure CSS layout. Still, it stands to reason that if pure CSS layouts are such a good thing, more of those sites would use them.

Despite having about ten years of web development experience, I've been struggling for a few weeks to implement a relatively simple layout. I've read article after article, and I've spent long hours experimenting and testing, but I have been unable to achieve the elusive goal of getting acceptable results across multiple browsers. I rejected some solutions because they didn't produce predictable results as content varied from page to page. I rejected other solutions because they were too complex. In the end, the TABLE-based solution is a better choice for me.

Given my own experience, and the evidence provided by my View Source command, my conclusion is that TABLE-based layouts are common because pure CSS layouts are too hard to implement. In a lessor of two evils situation, most web developers have concluded that the problems of TABLE-based solutions are less daunting that the problems of pure CSS layouts.

To be fair, many sites are implemented using pure CSS layouts. Some of them are impressive and the layout structures are not overly complex. Zen Garden is a great example. The ability to change from Organica Creativa to 45 RPM is awesome.

Who's the Villain?

I think CSS is the villain. It's the reason why browsers are buggy and it's the reason why web developers choose TABLE-based solution over pure CSS.

Let's look at the issue from the point of view of the designer.

The layout features in CSS2 are fine for certain structures. For example, it's easy to float text around an image. Most developers trip over the issue of a floated element extending beyond the bottom of the containing element, but there is a reason for that behavior. It's unfortunate that it isn't easier to make the containing element expand to enclose the entire floated element.

The problem is overall page structure. Most sites subdivide page content into areas such as headers, footers, left and right sidebars, etc. Implementing those structures in CSS2 is unnecessarily difficult. The overall structure of the page is not explicitly defined: it's implicit in the way specific sub-elements are defined. The page designer has to set properties for half a dozen or more rules. The page structure is lost among those rules, and often further obscured by non-structural attribute values. As presently defined, the HTML is also sub-optimal as the designer has to nest div elements until the eyes glaze over. To my eye, the content-meaningless div statements are just as bad as using table, tr, and td elements.

The table, tr, and td elements have a big advantage over the div elements. The structure is more explicit, and the browsers do a better job of rendering the result.

Similarly, the dreaded frameset structures in HTML are much better at representing the overall structure of a page than the CSS2 method. There are lots of good reasons to avoid using frames—they introduce more problems than they solve—but in terms of representing overall page structure they are simpler and more effective.

Not surprisingly, the CSS2 shortcoming described above makes life difficult for browser implementers as well as page designers. The browser isn't told explicitly what the designer wants. It has been given a set of rules that dictate how it should respond to CSS attribute values, and some rules and guidance about how elements interact, but those only address near-relationships. Unfortunately, unrolling the near relationships into the broader definition of the page layout is a very fuzzy process.

If anyone reads this, and that's not assured, I am likely to get flamed for dissing CSS. That's fine. Read on.

What Does the Future Hold?

I am not the only one who thinks something is not right. They probably have a whole set of different opinions and motivations, but the CSS3 standards team is addressing this issue. See the CSS3 Advanced Layout Module. In my opinion, it validates my broad point that CSS is the villain. Whether or not it validates my conclusion isn't important—as long as they fix it.

I have read the 2005-12-15 version of the working draft and I had a mixed reaction. It's great that solutions are being discussed, but the declarative nature of the CSS language appears to be an obstacle to a clear, simple solution.

Keep your fingers crossed.

Of course, once a CSS3 solution is defined, it will take a long time for browsers to implement the new standard. And it will take even longer for people to stop using CSS2 browsers. <sigh>

Get Firefox!

There are two new additions to my home page, a feed for my blog and a Firefox button. The two are related, but you'll have to read on to discover why.

Firefox

Firefox has been my default browser since early 2005. The more I use it, the happier I am with it. The other day I realized how much I've customized it, and how much those customizations improve my browsing experience.

Internet Explorer

Meanwhile, Internet Explorer 6, the browser used by approximately 80% of web users, gets older and older. (See some browser usage statistics at Browser News.) IE7 is on the way, but as my Dad used to say, "So's Christmas." Even when it does arrive (Summer 2006?), it will be a case of too little, too late. IE7 is not going to fix all the IE6 compliance issues, it won't be available for all Microsoft operating systems, and it doesn't represent a major step forward in any meaningful way.

I think it's worth mentioning here that I am not a Microsoft basher. I try to be more pro-things than I am anti-other-things. It's possible, and actually relatively easy, to be pro-Firefox without being anti-Microsoft. In the late '90s Microsoft did something truly remarkable by recovering from their early strategic blunders in the Internet arena. They caught up to Netscape and by 1999 Internet Explorer was the better browser and became the market leader.

Competition

Since then, however, Microsoft has succumbed to the problems of being a market leader. They stopped innovating, and worse than that, they've stopped fixing bugs, basic security vulnerabilities still exist, and some of the security-related changes in Windows XP SP2 interfere with everyday use. I am sure there are lots of reasons for all that, but the root cause is a lack of competition.

The good news is, there are now several browsers that are technically superior to Internet Explorer and they have gained enough momentum that they can be used by everyone, not just the technical elite. In fact, for the good of the Intenet, it's important for people to use the other browsers. It's the only way to send a wake-up call to the powers-that-be at Microsoft. They can choose to answer the call, or not. If they answer, fine. Getting Internet Explorer back on the right track will provide a better product for Microsoft users, and will force the competitors to stay on their toes. If Microsoft doesn't react, those competitors can fight it out. The winner, in the end, will be browser users.

Why a Blog?

I feel strongly about this issue, and I wanted a place to express my opinion, so I created this blog. The main audience will probably be users of my genealogy tools, but I decided to keep the opinion-based content that is not strictly related to those tools separate from the home pages for Second Site or TMG Utility.

Why Firefox?

As I said before, my favorite browser, and the one I recommend, is Firefox. There are other good browsers, and in particular, Opera is a good alternative. I recommend Firefox because I think it has the best compliance with web standards. I use it for that reason, but also because it has the most customizable interface1. Specifically, some Firefox browser extensions have become a part of my browsing life and I depend on them. My browsing habits won't match yours, but there will be some overlap.

Extensions

Extensions are small add-ons that add new functionality to Firefox. You can browse the directory of Firefox extensions to see what's available. Here are some of the extensions I use.

Extension Description
Sage Sage adds a sidebar (a small panel on one side of your browser window) that has a list of feeds (blogs and other RSS feeds) and a list of articles for the currently selected feed. It's very easy to use, and for me, it's a lot better than using a separate feed reader.
Web Developer Web Developer adds a suite of web development tools to Firefox. According the Editors of the Firefox Add-ons site, Web Developer is "Indispensible ... An essential extension for any web developer/designer as it provides a raft of incredibly useful features all under one roof. You will wonder how you ever managed without it!" They're right.
ViewSourceWith With ViewSourceWith, you can view the source for any page using one of several external applications. I use TextPad to view and edit text, and so I configured ViewSourceWith to start TextPad when I view the HTML source of pages I visit. Viewing the source of pages developed by other people is an effective way to learn HTML and CSS, and ViewSourceWith makes that easy and convenient.
IE View IE View makes it easy to open a page in IE when you are using Firefox. It's handy when you encounter a page that only works in IE.

  1. Most Firefox extensions can be used with Mozilla.