Raible Designs

Google and Small Screen bookmarklets.

I found some new bookmarklets today. I've tested them on Mac OS X (10.2) and they work on Mozilla 1.2b, Chimera 0.5 and Internet Explorer 5.2.2. I'll test them on Windows and Linux when I finish this post. To use these, simply drag the link to your toolbar. The first is a google bookmarklet, found via MacMegasite. This bookmarklet opens a dialog with a text box, where you can type in your search query and eliminates the initial page load from google. The second is a small screen bookmarklet, found via blogzilla and glazblog. This bookmarklet shows you what a site might look like on a small screen.

Update: These bookmarklets seem to work best on Mozilla 1.2b, Win/Mac. The google one will work in IE/Mac, but not IE/Win.

My New Editor?

The Mozilla Composite Editor is a LOT better than I originally thought - check this out. On your Mozilla browser, go to Preferences -> Composer and check the box at the bottom that says Use CSS styles instead of HTMLelements and attributes. Yeah baby! If you look at the source for this post (written with the Editor), you can see that there's a bunch of CSS to mark everything up rather than <b> and <i> tags. Install it here. NOTE: You will have to close your browser and re-start if you change this setting.

On second thought (after cleaning up the HTML in this post) it does enter <br> tags at the end of every line and screws up the spacing a bit. But it's definitely still very cool - it'll be great when it evolves into my full time Roller editor. Of course, that might take a few more releases.

Weblog publishing software.

When I read Matt's post earlier today, I assumed that TopStyle is an HTML editor that now has weblog publishing features. On closer inspection, it appears that is not the case? #

As Dave realized, TopStyle is an HTML editor - although it was born into existence as a kick-ass CSS editor. Personally, I'd rather use a good HTML editor such as Dreamweaver or TopStyle over w:bloggar to create/edit my posts. Of course, it'd be much easier for the average internet user to use one client to do everything, but I prefer Edit -> make XHTML compliant (the good editors help me with this) -> copy/paste into the Roller Editor UI -> click "Post to Weblog". As with w:bloggar, it saves me from browser crashes. Then again, I've typed this whole entry into the <textarea> in the editor ui...

Who Am I?

Russ says:

Raible - you need an "about" page. I have no idea if Raible is your first name or your last name or a nick name or what. Your contact page is a bit generic... I wasn't really sure if you were going to get the email right away since it goes to "info"... Also a comments feature would be very nice. Are you using Roller? Dave! Get on it! ;-)

I do have an about page, but it's more company specific than me-specific. I'll change it a bit to mention this site is mostly tech thoughts of mine. This is my company site and I try to keep it somewhat PC and professional in case a potential client ever looks at it. I have to say, it's a big improvement (in both content and design) over my last site. Currently, I'm developing an eLearning web application for OnPoint Digital, Inc. out of my home office, where I rarely get to talk to another person (I love reading everyone blogs because it gives me that water-cooler feeling). I'm writing it using Struts (including Tiles and Validator) and DAO's/JDBC on the backend - and has heavy Javascript and CSS on the front end. The app runs on Tomcat/MySQL and all OS's we can think that a customer might want (gotta love Java). Here is a screenshot of the main interface. It's not my design, I just took it from a Photoshop image to a working application.

My name? It's something I've lived with all my life - funny that it's even happened here on the 'Net. My full name is Matt Raible - my friends call me "Raible" and I actually prefer that over "Matt." Through high school, college and now the "real world," many people actually think my first name is Raible because that's what everyone calls me. So, to answer your question, it's all of the above ;)

I'll change my contact page to be [email protected] and see how much spam I get - I haven't been getting too much from [email protected], so why not?

Also, I tried the Eclipse thing on Windows (works fine), but on the Mac, the title bars don't appear to be draggable.

Tame your lists.

In Issue No. 151 of A List Apart: CSS Design: Taming Lists. This article will show you how to do cool lists like the one below with CSS.

• Item 1
• Item 2
• Item 3

For you impatient readers, here's the code used to render the list above:

ul.glassList {
    list-style: url(../images/aquadot.jpg) disc outside;
    line-height: 1.5;
    vertical-align: top;
}
...
<ul class="glassList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Have a great Saturday!

Cool Roller Theme.

I spotted a new Roller theme this morning at PSQuad's Corner. I found this via Dave's post, whic mentions that some people are not happy with Roller. For not liking Roller, it seems that Pat has put some time into customizing it - or is this a theme that freeroller.net provides? The CSS even validates! Too bad the html doesn't.

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.

He's back!

Scott Andrew has returned to blogging and shows us how to turn off stylesheets.

If you have a modern browser (IE5.x, IE6.x or Moz 1.x) you can turn off the stylesheet and see what this page looks like without CSS.

I've spent the last few days traveling back from Las Vegas via the Grand Canyon, Lake Powell, and Mesa Verde. My mind was cleared nicely after attending the conference last week. It didn't take long to clutter it up again. I've gotten some tips from folks to make my style-switcher work on Mac/IE - don't know when I'll get a chance to test. Thanks though!

Is your website obsolete?

In case you need more motivation to convert your site to XHTML and CSS, Zeldman rants that "99.9% of Websites are Obsolete."

Peel the skin of any major site, from Amazon to Microsoft.com, from Sony to ZDNet. Examine their tortuous non-standard markup, their proprietary ActiveX and JavaScript (often including broken detection scripts), and ill-conceived use of Cascading Style Sheets - when they use CSS at all. It's a wonder such sites work in any browser.

Eclipse plug-in for Cactus?

It's on it's way! Vincent Massol sent a message to the cactus-user mailing list today asking for ideas and help. If you're an Eclipse plug-in developer, or use Cactus and want to "get involved" - see Vincent's initial thoughts. Personally, I love Cactus, StrutsTestCase, and JUnit. They've all made my development life a lot easier (when they work). I'm constantly on the bleeding edge of Struts development, and StrutsTestCase seems to always break when I download a nightly build. Now if I could only convince myself to write more HttpUnit tests (or maybe use Solex), so I don't spend so much time trying to get my UI to load and look right. Anyone know of a CSS and Layout Testing framework that tells you that your colors need tweeking or your layout won't work in IE5/Mac? I could use that framework!