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.