jimleo.com is back up... some how-to.

Well kiddies, it's true. After WAY TOO LONG(in dog years no less!), I've finally updated my "main" website, jimleo.com.
Now that I'm using Blogger and delicious for blogging and links respectively, jimleo.com has a new mission in life. That mission is to be the "Jim portal." ATOM and RSS feeds from the various SN sites I'm involved on will be aggregated there so you can see what I'm blogging and what I've been recently keeping as reading and reference in one shot.

Dealing with Feeds

The under the hood bits involve a bit of ASP.NET to create an RSS/ATOM reader control and the ServiceModel.Syndication namespace to deal with the entry bits. This is certainly a lot easier in Visual Studio 2008/.NET 3.5. No more XPath, DOM, or other parsing magic to work with. Now you can do everything with some simple objects. The main magic is in the following:

XmlReader reader = XmlReader.Create(feedUriString);
SyndicationFeed feed = SyndicationFeed.Load(reader);

Of course, there should be some try{}catch{} magic surrounding that!

From there, it's a matter of just looping through feed.Items to render out each item.

foreach (SyndicationItem item in feed.Items)
{
//your code for rendering each item
}
The rest of it's just the various bits on what types of elements or user controls you want the items laid out into. I'm sure there's much more that you can think that can be done, but I kept it pretty simple. A heading (h4 to be precise) is created for each title with a link to the item. I then display the summary and/or the content for each item. If either is more than 275 characters, I cut it off at 250 and show "...more..." with a link to the actual item in the "...more..."

Now you may be asking yourself "Why is it 275 and 250? Why not 250 and 250 or 275 and 275?" The reason is simple... I didn't want to cut off the text and show a more link if there was only a few more words to show. The other bit of magic was that I strip out any HTML or other markup in the text. There's two reasons: 1) I don't want it screwing up my own layout and 2) Cross Site Scripting (XSS) attacks. While currently all feeds come from me, it's conceivable that I might want to use someone else's feeds. They could do something unexpected or malicious and I wouldn't want you to suffer dear reader. If you want the code for the user control, or the whole site (all one page), please let me know!

On to the WebPage (default.aspx)

Visually, the KISS princple rules the web page. Basically there's a completely non-inventive header, a main section with three "lists"... one what I call the "intro" and then beneath that two columns. The left has the links to blogger and the right has the delicious links. A footer with ye olde copyright lies underneath.

Now, from there, the simplicity takes a minor nose dive. Beyond the layout, there's a couple of requirements I had for myself:

1. The header should always appear on the top of the screen.
2. The footer should always appear on the bottom of the screen. Meaning: It should always be visible at the bottom regardless of length of any other content on screen.
   
3. The main section should scroll if the content can't fit between the header and footer.
4. Tables can't be used.

Why no Tables? They are not XHTML compliant when the usage is only for laying out a page. There's no legit reason to use a table on this page as I'm not showing tabular data anywhere.

Now #1 and #3 are relatively easily accomplished with HTML div elements with the right settings... making both the header and main section divs and setting main's style to include overflow: auto and position:fixed takes care of both of those.

The trick is #2. This would have been easy with tables, but with divs, it's not as simple as a setting and if anyone can figure out a pure CSS / style way to do it, please do tell! I ended up creating a bit of javascript to do this... it comes down to this following code called on window.resize (defined in the javascript file) and the onload for the body.

var footerHeight = document.getElementById('footer').offsetHeight;
var headerHeight = document.getElementById('header').offsetHeight;
document.getElementById('content').style.height = (getWindowHeight()-(headerHeight + 10) - (footerHeight + 10)) +'px';

Make sure to set the following style on the footer along with any other visual bits you want:

bottom: 0;
display: block;
height: auto;
position: fixed;

The rest of the CSS styling is pretty straightforward.

To download the javascript... click here.

To download the CSS... click here.

All in all, most of this CSS/JS magic was already done for smellyoldgamer.com, so I wasn't reinventing anything tonight. I think jimleo.com looks a little nicer though. SOG wasn't supposed to look nice. No one would believe I was a smelly old gamer if it did!

Testing/Known Issues

I've tested in both IE7 and Firefox 3.0.6, so it should render out on most browsers although I know it gets goofy if you make your window really narrow. This really shouldn't be much of a problem as you pretty much need to get it down to about 4 characters wide before the goofiness asserts itself. A larger problem is that once you get shorter than header + footer, the main section disappears. I'm still debating on what to do about that...maybe resize the header and footer?

Conclusion

This was much simplified in VS 2008/.NET 3.5 thanks to the Syndication namespace. I'd dealt with both RSS and ATOM at an XML level in the past and I'd always wonder if there's some scenario I'd missed. With the navigation of the feeds made simple, I was able to focus on how the site would be laid out and fiddling with the CSS. Given most of that had been done already on SOG, I was able to put it all together quickly. Reuse beats doing it by hand any day. Reuse also promotes fixing known issues as you know you can address more than one spot with one fix. My next enhancement will probably be to make the javascript a little more flexible or make it use the script.aculo.us library. If you have any ideas, please do comment!