Raible Designs

Very Fricken Cool!

Dave made some CSS improvements to Roller's Wiki - and I must say it looks very nice! Nice work Dave - I dig it! It's cool to see how the Roller Wiki has quickly become a great documentation engine for this project. Especially with Dave's recent screenshots and user guide enhancements.

Making your tables more accessible?

A question was asked on the display tag user list recently. Basically, the user wanted to add onmouseover and onmouseout events to the <tr>'s in a display-tag rendered table. Today, I decided to whip up a quick example of how to do this in a DOM-compliant browser. Just add an "id" attribute to your table, or use document.getElementsByTagName("table") (selecting the appropriate table in the array), and then put the following JavaScript block below your table. Of course, you must define a "tr.over" class in your CSS.

<script type="text/javascript">
    var table = document.getElementById("testTable");
    var rows = table.getElementsByTagName("tr");
    for (i=0; i < rows.length; i++) {
        rows[i].onmouseover = function() { this.className='over' };
        rows[i].onmouseout = function() { this.className='' };
    }
</script>

Now for an example:

Later: You can take this one step further and add an "onclick" event so that the user can edit the record the row is referring to. Let's pretend you have a link in the first <td> of the table. Inside this link is the recordId for that row. Adding an onclick to the row makes it easy to route the user to the details page for the record.

rows[i].onclick = function() {
    var cell = this.getElementsByTagName("td")[0];
    var link = cell.firstChild;
    var id = link.firstChild.nodeValue;
    location.href='URL to details page?recordId='+id;
    this.style.cursor="wait";
}

Cool idea - highlight entries by category with CSS

This sounds like a cool idea - and should be easy to get working with Roller. However, I'm stumped on making this work. Hopefully someone can help me out with the following macro:

#foreach( $entry in $entries )
#if ($entry.getCategory().startsWith("Java"))
<div style="border-left: 2px solid red">
#else
<div style="border-left: 2px solid blue">
#end

Once I get this working, making my category menu use the same colors will be a great way to indicate which categories I've posted to.

What I learned from this weekend's re-design

This past weekend, I re-designed the Content Viewer's interface I wrote for OnPoint Digital. The major motivation behind the mini-project was to make the CV compatible with IE 5.5 and Opera 6 on Linux. It was a nightmare because of the lack of DHTML support in Opera, and also because of IE. So I came to the conclusion that I hate IE, Opera and Safari. My main reason is because they do everything so different - why don't they adhere to standards (Mozilla does)?! It makes web development so much harder when you have to test 5 browsers on 3 platforms. Hopefully I'm a better developer from the experience, and here's a short list of things I learned.

• The CSS rule "position: fixed" doesn't work in IE, but works in all other browsers. This is a great rule, allowing you to pin an element to a location in a page. For instance, you can have a floating menu or footer using this. You can achieve similar functionality in IE using CSS Expressions (a non-standard extension). For instance, to keep a footer at the bottom of a page, you could use something like this:
  
  
  div#footer {
    position: absolute;
    top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight);
    left: expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
  }
  
  
• If you're using standards-compliant mode in IE 6, you have to use document.documentElement in place of document.body above.
• Using standards-compliant mode in IE with frames will just create headaches for you and you'll end up with a horizontal scrollbar unless you make the body's width 95%. An easier way is to remove the doctype and not go with standards-compliant mode.
• If you're supporting IE 6 and IE 5.5, remove the XHTML doctype (which makes IE 6 standards compliant) - this will make the two browser's behavior more consistent.
• Opera 6 doesn't recognize the "background: transparent" css rule for <button>'s.
• Opera 7 doesn't recognize the "width: 65px" css rule for buttons. Maybe this is only when you have an image on the button. I found that my buttons in Opera 7 were only as wide as the images on them.
• In Opera 6, you can't copy the contents of one <div> to another <div>. With all the other browsers, it's easy using document.getElementById('divId').innerHTML. This does not exist in Opera - I'm still hoping to find a similar way of doing this.
• Opera 7 and Safari have strange position bugs or maybe they're more standards-compliant than the other browsers, but I doubt it. In Opera 7, I have a buttons div that ends up at the top left corner of the header, when they should be aligned more in the middle and 100px from the left. In Safari, this same buttons <div> stacks the <button>'s on top of each other, rather than side-by-side, like you'd expect a row of buttons to look.

I'm glad I don't need to support Opera 7 or Safari for the app, but it's annoying that they behave so differently. Camino, of course, works great, and so does Mozilla. You write your JavaScript or CSS according to the standards, and it works in Mozilla, perfectly. What a beautiful browser.

Blogging from Starbucks

I finally finished the re-design for OnPoint Digital and now I'm at Starbuck's, uploading the release. My dad bought a subscription to T-Mobile's wireless network - and this is the first time he's had an opportunity to use it. He gets 24 hours free, and then $3/hour after that. Not a bad deal. It sucked that I had to put in 40 hours during my vacation, while my parents where in town - but oh well, it's good to be done. Our ISP is sending someone out on Thursday, so hopefully they'll fix everything at that time - and I can start blogging more - or maybe I'll be lucky enough to find satisfaction in being non-productive for awhile. ;-)

Pinning Elements to your pages with CSS

I found this great example of how to pin elements of a page so they stay fixed at a certain location in a browser window. The bad part? It doesn't work in IE 5.5/6.0 on Windows. Since this is the most popular browser, it kinda makes me lose hope. The reason I'm intrigued by this CSS is because I have a requirement right now that I need to keep the footer of my page "pinned" to the bottom of the browser window. I suppose I could use frames, but I'd rather not. A workaround for IE might be to use a floating layer, but all the scripts I found seemed to fail when I added an XHTML DOCENGINE. That is why I curse IE today.

Update: I recieved a solution for my Experts-Exchange posting on this topic. It looks like I'll be able to use CSS expressions in IE to make this happen. Sweet! My latest code works in IE 6, Mozilla and Opera 7 - I hope it works in IE 5.5 and Opera 6.

Some CSS Lovin'

Good ol' Zeldman hooks us up with some cool web stuff today. First, you gotta dig these W3C Validator buttons that are purely CSS and Text - no images. Might be a good way to reduce bandwidth. Secondly, adjacent sibling selectors are a neat way to create rules-based layouts in which elements are controlled according to their contexts.

For instance, you can make a general rule where images have no margin at the top; then make another rule that says margins have 15px of white space at the top if they are preceded by an h3 header.

Finally, he inspires us to checkout Fast Company's re-designed all XHTML and CSS site. Very cool! I especially dig the font-size switcher in the top right corner.

Then there's Russ. Could he be on to something here or just blowin' smoke?

Someday soon, people will be judged by the quality of their weblogs like the Greeks once judged a person by the quality of their oration, or in the middle ages a person was judged by their science and art and later in the 1800s by their letters.

I don't know that weblogs will ever the that popular. The problem is that computers aren't even that popular. Sure, there's a lot, but the household penetration is not where it needs to be - and how many of online users have weblogs. Not many. How many of those that have weblogs are interesting - not many. Maybe he's onto something here - and we're already doing it. We are already judging each other in this community - those that have shorter blogrolls are just judging a little more ;-)

Cool TagLib Document

I found this gem on the strut-user list tonight.

* TaglibDoc
    This is a JavaDoc-like set of html and css files for browsing the
    taglib documentation.  Here's what this target does (I ran this
    about 15 minutes ago):

      http://struts.sourceforge.net/struts-atlanta/taglibdoc/

* TaglibReport
    This target will generate a grid-like view of the taglibs and their
    attributes so that you can see every tag in a typical package side
    by side.  This helps when comparing which tags implement a certain
    attribute, by allowing you to view them side by side and not have to
    look up each tag by hand. (also about 15 minutes ago)

      http://struts.sourceforge.net/struts-atlanta/taglibreport/

Project by Mohan Kishore, posting by James Mitchell.

Frames and XHTML

I'm in the midst of a small redesign of an application's UI for a client. The previous (and current) design uses an <iframe> to display most of the content in the app (it's an e-learning app). The driving forces behind the re-design are to 1) make the UI fluid rather than fixed height/width, and 2) make the application work on Opera 6 on Linux.

The re-design began with them sending me some screenshots of proposed layouts, and I used that to formulate what you see today. Basically, what they (and I) was hoping to accomplish was a fixed header/footer height and a fluid center. I tried doing this with an iframe, but had inconsistence results. So I tried consulting the experts. No one seemed to have a solution - and it seems that a fixed header/footer, fluid center is not possible with XHTML. So I resorted to using frames, which is what you see now. The reason I'm writing this post is to express my frustration with frames and the current XHTML Standards. You basically start a framed page with a <frameset> right? Any of you that have worked with frames know that it's a headache to get framespacing correct between all the browsers you need to support. Throw Netscape 4 into the mix, and consistency is virtually impossible. The problem with a frameset in XHMTL is that there are no supporting attributes for eliminating a frameset's spacing or border. From looking at the XHTML DTD, you can see that our old friends frameborder (="0" needed for Mozilla) and border (="0" needed for Opera) are missing:

<!ATTLIST frameset
    %coreattrs; 
    rows %MultiLengths; #IMPLIED
    cols %MultiLengths; #IMPLIED
    onload %Script; #IMPLIED
    onunload %Script; #IMPLIED
>

So I ended up following Zeldman's advice and K10K's examples and adding these attributes in. Why? Because they work to achieve the results I want. It doesn't validate, but it does work, so I'm going with it. If anyone has any alternatives to achieve borderless frames with CSS, please let me know.

The cool part about this post is that I get to tell you that the device we're targeting with Opera 6/Linux is the FreePad - a type of Tablet PC, but more like a wireless browser. Looks cool, that's for sure - and it's possible I'll even get a demo machine to test the new layout on.

Which caching framework to use?

I discovered this afternoon (after I got everything working - thanks to Jason's comment) that the main process in the webapp I'm building (day job) takes 15 seconds to process. It could be have something to do with the fact that the HTML page itself is 1.5MB of data (view-source, save as). And it's a very lightweight page as we're using strict XHTML and mucho CSS. So now it's time to start looking into caching frameworks. For the web/JSP side, I'll probably use OSCache. It's seems to be more tried and true, and commons-cache is still in the sandbox. If any of your have experience, chime in so I don't pick the wrong one! Another method I'm going to try is using JCS with Hibernate. Since I'm using XDoclet already, all I have to do is add the following to the top of my persistable objects.

@hibernate.jcs-cache usage="read-write"