Raible Designs

Ekit Certificate?

In response to Dave's question - How much is it?

Good Advice from Aaron

at youngpup.net - How to Create Pop-Up Windows. It's basically a way to create javascript pop-up windows that are friendly to both web-savvy surfers and beginners alike.

Favelets to ease UI Development.

I forgot to post these last week - but for you Web UI developers - favelets (a.k.a. bookmarklets) can sure make your development life a lot easier.

A bookmarklet is a simply a javascript script masquerading as a URL. The pseudo-protocol javascript: tells the browser to have javascript interpret what follows. Otherwise they can be treated just like any other url, by inserting into a link, pasting directly into the location bar, or bookmarked or added to your favourites. Like many people I have the ones I use most often added to my links bar, where they become handy extensions to the browser's functionality.

Here are some good links for some cool favelets. Most of them seem to be targeting IE on Windows/Mac - and I found that some didn't work on XP/IE6 SP1. But still, they're great for validation and showing table/div borders.

• Sam-I-Am.com's Bookmarklets
• Favelets
• Liorean's bookmarklets page
• Show Tables (shows table borders)
• Show Divs (shows div borders)

In my search of these resources, I found www.web-graphics.com which appears to be a good blog on cutting edge web-ui technologies. Cool - I'll add it to my daily reads list. BTW, I've added a feature to Roller where you can make your Bookmark and Newsfeed folders collapsible/expandable in modern browsers. When I upgrade this site, it might be cool to split up my "Blogrolling" links into Java, Web UI and Good Reads - we'll see. Most of you are probably like me and are using Mozilla bookmark tabs feature to get your daily reads.

IFRAME not valid XHTML?

That's what the XHTML validator says. Dammit - I like iframes! I'm leaving it in, this site will not validate as XHTML 1.0 until today leaves the front page - oh well. :-(

Using another stylesheet switcher.

I've seen this stylesheet switcher before, but now I've found a good explanation about it. The problem I see with it is that it won't work in Opera, and probably not Konquerer either. The current one on this site works on all browsers, but doesn't allow me to validate my css.

To use ALA's stylesheet switcher, I'd have to change my stylesheet references from using @import url(...) to <link rel="stylesheet> src="...". The problem with this is that I use the @import syntax so Netscape 4 doesn't apply a stylesheet, and this site is still readable. Turn off the stylesheet to see what a NN4 user sees. If I use <link rel="stylesheet> src="...", then NN4 will apply the stylesheet.

The solution, as I learned at the conference last week, is to split up my stylesheets into a simple version and a sophisticated version - as explained by Zeldman. I might do this, but it seems like it might be waste to even care about NN4 users since no one visiting this site has used NN4 this month.

Scope Creep.

Have we run out of strategies for fighting this evil scourge? Is it hopeless? Maybe not. Hal Helms commits a little heresy at A List Apart.

Web-based WYSIWYG HTML Editors.

I think that WYSIWYG are great. However, when I switched to writing standards-compliant XHTML - I found that it became more difficult to rely on an editor. Both Dreamweaver and Homesite are pretty slick in that they give you "standards-compliant" markup when you have an XHTML DOCENGINE at the top of your document.

The reason I bring this up is because I have been advocating a WYSIWYG HTML editor for Roller - and now there is one! However, after looking at the code generated, I noticed <font color="#ac5454"> - yikes font tags! I pray that this editor has a "smart HTML" feature - but I doubt it will. Nor do I care - I love the feature and will use it often - I just have to remember to edit the HTML or this site will fail validation.

Struts vs. Java Server Faces.

From www.theserverside.com:

Many have have wondered at what the future holds for Struts, now that an early access release of JavaServer Faces is available. Craig McClanahan, JSF Spec Lead and Lead Architect for Struts has recently commented on the subject. Craig is working on an integration library for JSF and Struts 1.1 that will allow migration to JSF without major code changes to existing struts apps. [ Craig's email on Struts + JSF integration ]

I'm smack dab in the middle of a major time crunch on my current project, or I'd review the above article and post my opinion. Maybe in the next few days.

Mozilla Fix from Porter.

I received the following message from Porter just a few minutes ago:

Hey Matt,

Just a quick FYI: your latest style switcher worked fine for me in
WinMoz 1.2a. I get the full sunset style after clicking the link.

- Porter


I downloaded the latest Mozilla (1.2a) and whalla - now it works great. Quite a delimna now though - especially since I'm using similar code on a client's app I'm building write now. So I guess this validates that my code is correct and now I have to find a workaround for Mozilla 1.1.

Working with the DOM.

After working with the DOM trying to get my new theme switcher to work, I find that M$ has done a nice job of making it easier for me. IE on both Windows and Mac support document.styleSheets[0].imports and document.styleSheets[0].addImport(url). These have made it very easy for me to replace the @import statement in a <style> declaration. However, Mozilla is a different story. I have created a new switchTheme method that is as follows:

<script type="text/javascript">
<!--
    function switchTheme(themeName) {
        var docSheet = document.styleSheets[0];
        var nextTheme = "/skins/" + themeName + "/styles/colors-n-fonts.css";
        if (document.all) {
            docSheet.removeRule[0];
            docSheet.addImport(nextTheme);
        } else {                                             
            docSheet.deleteRule(0);
            docSheet.insertRule('@import url(' + nextTheme + ');',0);                    
        }
        var nextTitle = "/skins/" + themeName + "/images/title-rd.gif";
        document.getElementById("title").src = nextTitle;
    }
// -->
</script>

In Mozilla, this appears to work - as the mouseover colors on my links do change to use the 'sunset' theme. Unfortunately, that's all that changes. As usual, any suggestions are appreciated. Also, did you know IE/Mac supports document.all? I didn't think it did... until today!

Try this code in your browser by clicking here.

While developing this script, I received many tips and hints from this site.