Raible Designs

Photoshop 7 Shortcuts

Zeldman gives a link to Photoshop 7 Keyboard shortcuts for Windows. On the Mac, substitute COMMAND (the Apple key) for CTRL and OPTION for ALT.

I'd probably know a lot more of these if I was still continuing my quest for a Photoshop Certification. I still want to get it, but the Java/Struts/XDoclet realm is more inspiring and more fun right now. I haven't touched the Photoshop 7 Bible in about a month! Maybe I'll get back into it, but I probably won't finish it this year.

Most Common 508 Issues

I found this great link on the Most Common 508 Accessiblity Errors. It also has some great examples on using the <label> and <fieldset> tags for marking up your forms.

IE 5.x and Roller's Calendar

I've gotten a few complaints in the last week from users that they weren't able to read my site because of a "calendar overlay" issue. Basically, they said that they couldn't read the content on this site because the calendar was too big and was hiding my blog entries. The two browsers it happened on were IE 5.5/Win95 Tonight, someone sent me a screenshot (150K) and now I know what they're talking about. I don't know if your roller site has the same issue, but the following might help if you do. Basically, I just had to define a font-size for the table that surrounds the calendar. If this doesn't work, I'll define the table and the <td>'s inside the table. Here's the fix so far:

.hCalendarTable {
    font-size: 1em;
}

I also found that I had to do this for Opera 7 to render the calendar properly. And, Opera 7 doesn't seem to understand font-size: x-small, so I used 10px instead.

Of course, the easiest way to avoid any issues such as these is to use a standards-compliant browser. I recommend IE6, Mozilla, Phoenix (Windows only) or Chimera (Mac only). Nevertheless, I'd like to make this site available to everyone, so if you do experience issues, please do let me know and include a screenshot for clarity. Thanks!

Later: It's getting better and I've managed to fix the font-size problem, but the font color inside my calendar is still the wrong color, as illustrated in this screenshot (138K). Oh well, at least everything is readable now.

Generating a table's HTML with the DOM

WebGraphics provides us with a nice url to some performance tests for writing tables with the DOM. There are 5 different methods listed, and you can execute each one in your browser and see how long each takes to execute. Nice!

Load Testing Software and Controlling QuickTime with Javascript

From my work "To Do List":

1. Research controlling Flash movies with Javascript - is it possible? (I believe so)
2. Research controlling QuickTime movies with Javascript - is it possible? (I believe it's only possible in Netscape/Mozilla)
3. Research Load Testing Software for web apps - basically to test how many concurrent users can be handled. (I'm guessing JMeter is a good one)

Please leave comments if you'd like to assist in my research. Thanks!

Apache Conference in Vegas

I read Henri's post about the Apache Conference in Vegas, and then the associated weblogs. Reading Andrew's and Pete's blogs takes me back to my trip to Vegas in September. I highly recommend going to conferences in Vegas - it really is a good time. If you can, talk your spouse or a fellow techno-enthusiast to go and have twice the fun!

JSTL and Cookies

Something I learned today about JSTL - you can use {cookie.cookieName.value}* to get the String value of a cookie. Cool stuff, I found it by looking in the JSTL In Action book I bought about a month ago. BTW, if you're going to buy the book, you can get if for $12 cheaper from Amazon.

Here's an example of how I used this new-found syntax in my project.

<c:if test="{cookie.style.value == 'widescreen'}">
  body {
    background-image: url(/images/bg-wide.gif);
  }
</c:if>*

I also implemented the stylesheet switcher from A List Apart today. Very cool stuff - although I did have to add an extra line in the setActiveStyleSheet function to create a cookie for title. The following code block is supposed to do this for me, but didn't seem to work on XP with the latest browsers.

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

Oh well, at least I got it to work and learned some more JSTL in the process!

* I tried using the real syntax with a preceeding $, but that didn't work too well, and Velocity puked with:

[VELOCITY ERROR: parsing weblog entry] 
  org.apache.velocity.exception.ParseErrorException: 
  Encountered ".cookieName.value}

Any ideas why? It brings up another question I've been meaning to ask - is it possible to use Velocity syntax that's similar to JSP to get parameters and such in my roller templates?

Missing Valid CSS Icon

The W3C's Valid CSS icon (and server) seemed to disappear over the weekend - forcing me to install a local copy of the image, and to quit relying on their servers. If any of you are having a similar issue, feel free to download it (right click -> Save Image As...) from here, and change your img's src attribute to reference a local copy.

Use Labels in your Forms

You should use the <label> tag in your forms because it'll increase the accessibility and usability of your web interface. Consider this, when you add a label to a checkbox, the user can click on the label (or the checkbox) to select/deselect. When you add a label to an input element or textarea, clicking on the label sets the focus on the field. It just makes it easier, so spend the extra 5 seconds to add one next time you're developing a form, you'll be glad you did.

My Journey into Accessibility

I got a wild itch tonight and decided to make this site Section 508 Approved. All I really needed to do what do a little code alteration within the forms (search and theme switcher) in the menu. I had to add <label> tags around the search box and the theme drop down. I then used the labels.js javascript file from this demo to put the search's label inside the <input> tag. The labels.js script doesn's seem to work on IE5/Mac. Also, since I didn't really want to see the "Theme" label for the drop-down, I added style="display:none" - and that worked in all browsers except Chimera. Maybe I could just have a blank label, but what good is that? The validators also didn't like the onchange event for the theme drop-down and so I opted to add a go button as a workaround.

As for validators, I found that Bobby works pretty well, but only allows a certain number of requests per hour. What kind of validation site is that?! That's not very accessible in my book. You can try to validate this site using Bobby, and you might see this inaccessible error yourself. Rick Salsa pointed out a much better validator last week on the roller-dev mailing list. You can validate this site using it if you'd like.

I went ahead and created a new icon similar to Antipixel's icons. Boy, can the 508 badges get any uglier?! Now I have to find a good place to put it on this site, maybe down in the bottom right by the java.blog icon.