Raible Designs

Ajax on Struts with Patrick Lightbody

I'm sitting in Patrick Lightbody's presentation on Leveraging AJAX in modern web frameworks. The point of this presentation is to give a preview of what's coming in Struts Action 2.0. There are a number of other good sessions I'd like to go to, particularly Intro to Dojo, but I figured it's better to attend this talk since AppFuse will be moving to SAF as part of 2.0. We're in a fairly small room, and there's about 20-30 people in attendance. With 400+ people at this conference, the other sessions are likely packed.

Ajax is more of a technique, rather than a technology. Commons Ajax techniques include:

• Tabbed pane
• Validation
• Polling
• Tree widget
• Voting

For SAF, there are three core building blocks/tags: <saf:div/>, <saf:a/> (results evaluated as JavaScript) and <saf:submit/>. Divs are where things "happen" and links/submit buttons can trigger events. There are two frameworks used is SAF:

• DWR: Remote invocation service for Java <-> JavaScript
• Dojo: Language/server-agnostic JavaScript framework

There are two styles of Ajax: DOM manipulation (DWR) and partial pages (Dojo). SAF provides three Dojo widgets: BindDiv, BindAnchor and BindButton. The div tag supports the following attributes: href, updateFreq, delay, loadingText, errorText, showErrorTransportText, listenTopics and afterLoading. A simple example is polling - where the remote action returns HTML:

<saf:div href="mailbox.action?id=%{id}" updateFreq="2000"/>

Advanced usage of this tag includes adding a <script> block to the returned HTML. It will be executed when rendered, just like normal JavaScript is.

Tabbed pane is another component that's made up of two tags: <saf:tabbedPanel/> and <saf:panel/>. Rather than specifying content/tags within an <saf:panel>, to use the Ajax version, you simply add remote="true" and href="remoteUrl" to <saf:panel>. I asked about remote="true" being redundant and Patrick agreed it should be implied when an "href" attribute is defined.

SAF also includes the ability to have topic-based events. Dojo supports an event system, which was originally donated by the WebWork developers. Any element, such as a div, may listen to multiple topics. Any element, such as an href or tab header, may notify a topic.

The last thing that Patrick is demonstrating is Validation using DWR. To use it, you will need to use SAF's Ajax theme, as well as have DWR installed and configured. The remote calls to SAF's validation engine return serialized objects rather than HTML "partials". By default, it uses onBlur events to do the validation and all that's required on the client-side is validate="true" on your <saf:form>. Another cool Ajax feature that SAF has is an OGNL Console that gives you a command-line interface to evaluate OGNL expressions.

Patrick's lessons learned from implementing Ajax into WebWork/SAF:

• Simple combinations of the basics can create powerful features, such as the tabbed pane or the tree widget.
• JavaScript inside an HTML block (<saf:div>) or as returned from an action (<saf:a>) can provide valuable glue code.
• The <saf:div/> and <saf:action/> tag have a close and important relationship.
• Understand the important differences b/w Ajax styles (DOM-based vs. snippet-based). Both have their places.

Pitfalls:

• Remember: there is no silver bullet
• At the end of the day, your application is still a web site - don't forget that
• Excessive polling can lead to extreme load and/or thread starvation
• Common functionality, such as the back button and printing, can become difficult or confusing for the user (Dojo can help solve this problem)
• Browser incompatibility can lead to two versions of the same application (see GMail)

The Struts Team hopes to release a preview release of Struts Action 2.0 this week or next, with a final release targeted for August.

Roller Comments

The default comment form in Roller is pretty ugly. Not only does it use a <table> to layout the form, but it has invalid XHTML and JavaScript as well. With the new theme on this site, I re-worked much of the comments.vm macro and created a much prettier form. I was hoping to contribute a variation of this theme to Roller for 2.3, but it looks like it'll have to wait until 2.4. Rather than adding new macros for this theme, I'll be fixing all the themes to have a prettier comment form. You can track my progress on this issue using ROL-1131.

As far as this theme, I've named it "andreas08" after its designer. I hope to contribute something similar to what's on virtuastravels.com as part of 2.4. If you'd like to use this theme in your own Roller installation (before 2.4), let me know and I'll try to package up a download.

Better client-side validation with Prototype

I'd love to see something like Really easy field validation with Prototype integrated into Commons Validator and other web frameworks' validation engine. The only hard part would be looping through form elements and adding classes with the validation information. Other than that, it doesn't seem like it'd be too hard to implement. Hat tip to Ajaxian.com.

New Colors (again)

I've just completed another round of re-working the colors and header images on this site. If you click on the different category headings (i.e. Java, Mac OS X or Open Source), you can see the other color schemes. If you like one of the category theme's better than the default one, let me know.

I also did some tweaks to get everything working in IE. What a pain in the ass that browser is. For some reason, if anything in the "main" part of the website (where the blog entries are) is too wide - IE shoves everything down the page, including the top nav bar and the right sidebar. It's so bad that a simple paragraph with "margin-left: 10px" doesn't work. With Firefox and Safari, it moves over properly and overlays the sidebar if that's what it takes. Because of this, there's a potential that wide posts in this site will make the sidebar drop to the bottom of the page. For the nav bar, I changed it to be absolutely positioned, so it should always be present.

Other IE issues include: 1) the calendar icon is a transparent .png (I'll probably have to change it to a .gif) and 2) the nav bar's "selected" items are up a pixel or two and contain a bottom border. While these are minor issues, I would like to figure out how to make IE more tolerant of item width's in the #main section. Let me know if you have any tips or tricks.

CSS Framework Design Contest - only one week left!

It's time for another CSS Framework Design Contest Update. The contest will officially end this weekend (Sunday night), but hopefully people will continue to contribute designs after that. After the initial deadline passes, I'll send out a vote to the AppFuse CSS Mailing List. If you have a better idea of how to handle voting, I'm all ears. Maybe we should use JIRA?

I spent a few late nights last week converting some of Andreas Viklund's Templates to use the CSS Framework. All the ones I converted, along with many other contest entries, can be seen at http://css.appfuse.org/themes. For many of these, I've replaced the default forms.css with one that has CSS from Wufoo.com. If you'd like to include a similar form in your entry, just copy the <form>s from form.html into your own page.

I've also looked at incorporating the CSS Table Gallery, but found many of the designs to be pretty ugly. Nevertheless, most of them work with the displaytag, so I might include some of them in the future. In the meantime, if you want to see what they look like, go to css.appfuse.org/users.html (user/pass: mraible/tomcat). Change the "css" parameter in the URL to match a table's stylesheet, and you should see what it looks like.

To answer a few questions I received earlier today:

Does an entry have to contain all possibilities/layouts?

No. I've come to realize that it's easier to only accomodate one layout. If users really like your design, hopefully they'll morph it to a different layout sometime in the future. If you look at the Andreas themes I converted, they only have a main page and a form. They'll likely be enhanced in the future for form elements, calendars, tables, etc. - but that should be pretty easy (and I'm willing to do that work).

Am I "allowed" to overwrite some settings in the different layout CSS for different settings, depending on which layout css is used beside the layout according stuff? For example settings (appearance, design) for the main navigation and so on?

Yes. You can change any of the CSS files you like. The only thing that needs to remain constant is the HTML - and then only the ids and order of <div>s, etc. needs to be the same. The general idea we're hoping for is to put your "theme" in a directory and then refer to it dynamically as part of the showcase. We're in the process of enhancing the showcase site to use the same HTML pages for all themes.

Don't forget about the prizes: an iPod (60GB), an iPod (30GB) and a 2GB Nano. In addition, you could use your cool new design for the CSS Reboot.

CSS Framework Design Contest Update

Entries for the CSS Framework Design Contest are continuing to roll in. However, I don't know if the contest will finish at the end of this month. We've only received 5 submissions so far (1 being my own) and I'd like to get at least 10 good ones for folks to choose from.

My first attempt to show off the entries didn't do any justice to the submitted themes, so I've created a new showcase application. The new CSS Framework Themes application is available at http://css.appfuse.org/themes. It allows you to view the current submissions in the raw form that they were submitted. I've come to realize that a good design is tought to make flexible (where you can use all 6 layouts), so it's probably best to just have a single layout for each. Then again, juisefuse allows you to use all the layouts, so I guess it's up to each designer.

When I first started this contest, I envisioned people using the CSS Framework as a base, and overriding classes and styles in their own stylesheets. However, most of the entries contain modifications to the core CSS files - so it's probably best to allow free-form modifications of the CSS. Last night, I created my own entry based on Andreas Viklund's andreas01 theme. I did this to see what pain points there are in creating these themes. Although the experience wasn't too bad, I did find myself having to make one exception and break the "don't modify the HTML" rule. I had to move the top image out of the header div in order to get things positioned correctly. Oh well. I hope to convert some more of Andreas's themes this week. I also hope to incorporate some of the CSS from Wufoo's forms into these designs. After that, I'll start trying to figure out how these can fit into AppFuse and maintain their look and feel.

What's my pipe dream for css.appfuse.org? I'd like to make it possible for users to download and use these themes quickly and easily. Furthermore, it'd be pretty cool to develop an XSLT transformer that converts the main HTML page from each theme into decorators for AppFuse, Drupal and Roller. I don't know if this will be possible, but it certainly sounds cool.

Update: I added a new Deliciously Blue theme, which includes a form example based on CSS from Wufoo.com.

Update 2: I've converted three more of Andreas's themes: andreas03, andreas08 and andreas09. They're not pixel perfect, but they're pretty darn close. All of the themes in this contest (including the "showcase" application itself) are available in Subversion from the AppFuse CSS Project on java.net.

Tips for Productivity and Happiness at Work

Every so often, I get asked what my strategy is for "getting things done". This morning, I had a short session of mass productivity, and on my ride into work, got inspired to jot down a few tips productivity tips. Keep in mind that I grew up in the back woods of Montana with no electricity and I'm mostly Irish.

• Write stuff down. The first and most important means to getting things done is to keep a todo list. I keep mine on Ta-da List and update it daily, if not hourly. My two most important lists are "When I have time" and "This Week". I regularly re-order "This Week" for the current day.
• Quit reading e-mail and blogs. One of the ways I can tell I'm in uber-productive mode is my unread (or starred) mail piles up and I haven't read any blog posts (or blogged myself) in a couple days. I like GMail because I can easily star an e-mail after briefly skimming it. For some reason, flagging e-mail in Thunderbird or Mail.app doesn't work for me - I rarely go back and find those e-mails. With GMail, I'm always conscious I need to revisit starred messages.
• Work on open source late at night, with a beer on your desk. While I do get the opportunity to work on open source at my day job, I still find that I'm most productive at night. Maybe this is because no one bugs me via e-mail or IM, or maybe it's just because the world is asleep. The strange thing is I often find myself motivated at 3 p.m. for my 11 p.m. workload. However, when I get to 11 p.m., I'm not motivated to work on anything. I've found that cracking open a beer at 11 when I start helps me focus and quit worrying about all the other computer-related tasks I need to do. Also, on beer #2 or 3, you'll start to forget what time it is and really start getting things done. NOTE: this isn't for rookies. If you're a lightweight and get hammered on two beers - just go to bed when you start coding with one eye shut. It helps to sleep in the next day after doing this. If you finish off a six-pack before going to bed, it's probably best not to check your code in - you're probably going to spend the next day fixing it anyway. Regardless, this is a great way to get started on a new feature because you're less concerned about the details and more concerned about the big picture. I've also found that "bug fixing juice" can be great for fixing bugs - it gives you a different perspective on the problem. I told you I was Irish didn't I? ;-)
• Work disconnected. To further facilitate not checking e-mail or reading blogs, I've found that going to a coffee shop w/o connectivity is my most productive environment. They have liquid motivation in the form of coffee, and you can feed your brain with breakfast/lunch or some kind of snack. My most productive days are the ones where I show up at my local Einstein's (bagel shop) at 6 a.m., have two cups of coffee, and work with my headphones on. After the coffee and uber-productivity, I often have an awesome ride to work and barely notice the miles. NOTE: I've found that I'm more productive writing code late at night and authoring articles/books in the early morning.
• Listen to music while you work. Some noise-cancelling headphones and your favorite music can do wonders for your productivity. Of course, earbuds work just as well - whatever makes the music sound good. Good music can really help you "get into the groove" of what you're working on, regardless of whether it's writing or coding.
• Work long hours on Monday and Tuesday. This especially applies if you're a contractor. If you can only bill 40 hours per week, working 12-14 hours on Monday can get you an early-departure on Friday. Furthermore, by staying late early in the week, you'll get your productivity ball-rolling early. I've often heard the most productive work-day in a week is Wednesday.
• Avoid meetings at all costs. Find a way to walk out of meetings that are unproductive, don't concern you, or spiral into two co-workers bitching at each other. While meetings in general are a waste of time, some are worse than others. Establish your policy of walking out early on and folks will respect you have stuff to do. Of course, if you aren't a noticeably productive individual, walking out of a meeting can be perceived as simply "not a team player", which isn't a good idea.
• Sleep. While working late nights can be productive in the short term, doing it consecutively will burn you out quickly. Getting a good night's sleep can often lead to greater productivity because you're refreshed and ready to go.
• Work on something you're passionate about. If you don't like what you're doing for a living, quit. Find a new job as soon as possible. It's not about the money, it's all about happiness. Of course, the best balance is both. It's unlikely you'll ever realize this until you have a job that sucks, but pays well.

To follow up on that last point, I think one of the most important catalysts for productivity is to be happy at your job. If you're not happy at work, it's unlikely you're going to be inspired to be a more efficient person. Furthermore, if you like what you do, it's not really "work" is it?

Here is some general advice I give to folks about jobs and careers. I realize that I'm biased here because I have a good job and I've been fairly successful in my career. However, I also grew up with virtually nothing, and learned all my computer skills on my own. Therefore, I believe that anyone can be successful (meaning: happy with that they do, and financially stable at the same time) if they put their mind to it.

• If you're not happy at work, quit. I got into contracting early-on in my career (6 months out of college), so I got spoiled with good rates early on. It was also the late 90s, so you could easily switch jobs if you didn't like the one you were in. However, I've always had the policy that if you hate your job for more than 2 weeks, quit. It's just not worth it. Some people enjoy bitching about their jobs and complaining about their co-workers, so this doesn't apply to everyone. However, if you're truly miserable - quit. I've done this a couple times, and it's always led to better opportunities (even if I had to wait 3 months). Julie's done it once or twice and it's always worked out for the better. Once she even got a 20% raise by quitting her traveling-consultant gig with KPMG and going back to her old company, Qwest.
• Always try to be a contractor before a full-time employee. This especially applies to younger folks who don't need the security of insurance for the family, stock plans, etc. Contractors typically make 50% more than full-time employees and tend to be excluded from company politics that might make the workplace difficult to deal with. While you won't get billable vacation time, you will get the freedom to take however much vacation you want - as long as you get your stuff done. The higher rates can generally make up for the unbillable time while on vacation. However, if you travel too much for fun (or conferences, etc.), it's likely your year-end salary will equal that of a full-time employee. If you make good money as a contractor, you'll also get the opportunity to start your own company (to save money on taxes). This can be a great learning experience. The biggest fear that folks have about "going independent" is they'll have a hard time finding their next gig. If you're productive and blog about what you're doing, this shouldn't be a problem. I haven't had an "interview" since 2002 and haven't updated my resume since then either. Networking at your local JUG and conferences is key.
• Don't work at a company with a two-week vacation policy. I've never worked at a company with a two-week vacation policy, and I hope I never will. The two full-time gigs I've had in my career have had no vacation policy. This is usually only found in startups - but it generally amounts to "get your shit done, and you can take off all the time you want". My parents both work for the BLM (government agency) and they get 6 weeks off a year. Furthermore, they can earn "comp time" (more days off) by simply working overtime. If you have the ability to take time off whenever you want, it'll likely lead to you being more motivated to work long and hard - b/c you know when you finish that project, you're heading to Cancun for a week.
• Don't travel if you have kids. If you're single, traveling for work is pretty cool. New places, new people to meet - and seeing the world can be very cool. If you have a spouse, it's likely your desire to travel will decrease, but it's still not that bad. If it helps your career, it's probably a good move. It also helps to save money since everything you do is generally expensible. When Julie and I first met, she traveled 100% and made $20K more per year b/c of it. When you have kids, everything changes and traveling sucks. You miss their first steps, and when they get to toddler-age, they'll want to go with you. Hearing your daughter say "Daddy, can I go with you?" can be heart wrenching when you're leaving on a Sunday afternoon to spend a week with people you've never met before.
• Ask for more responsibility. If your job sucks, but the company is pretty cool - you may want to ask for a shift in responsibilities. I was once an HTML Developer at a .com. It sucked because we were constantly waiting on the Java Developers to fix bugs we found in their code. Finally, I got tired of waiting and asked my boss to show me how to fix the Java bugs. Granted, I wrote some pretty horrendous code at first, but my boss and co-workers helped a lot and w/in a year I was doing 80% of the Java Development.
• Most things can be learned by reading. If you want to learn something new (for your current or next career), the best thing to do is read. The world's knowledge resides in books and you can learn a lot. Of course, the best way to retain that knowledge is by doing, but reading is a great first step.

Those are my tips, many of them off the top of my head. I may add more as time goes on - but hopefully this helps in the meantime. Please share yours if you have any.

Tapestry 4.0 support in AppFuse's CVS

I spent the last couple of days upgrading AppFuse from Tapestry 3.0.3 to Tapestry 4.0.1. While the integration isn't as clean as I'd like it to be, everything works and all tests pass, so that's good. I did post a few remaining issues to the Tapestry mailing list, but there's nothing major. While the upgrade was frustrating (it took me 4 hours to figure out I needed "validators" instead of "validator"), I feel I know a fair bit more about Tapestry now. Furthermore, my experience on the Tapestry user mailing list was incredible. Yesterday, for every question I'd send, I'd get 2-3 replies in a matter of minutes. It was like having my own personal Tapestry consultant by my side. It goes to show that Tapestry is a thriving community, with a lot of folks willing to help out. Thanks guys - I really appreciate the help.

Update: You can view the FishEye Changelog to see what the upgrade entailed.

Carpal Tunnel

Every month or so, after working a long-ass week, my left arm usually starts hurting as if I have carpal tunnel. Usually, I go get a massage and it feels better the next day, or a few days shortly after. The Massage Therapist always asks me if I've been diagnosed with carpal tunnel, to which I reply "No." They also ask me if I have tingling in my hands or forearms, and I always tell them "No, I just get a dull pain in my forearms when I work a long week." So I've never really had carpal tunnel AFAIK, just symptoms every month or so.

That all changed this week. I started noticing the dull pain in my left forearm at TSSJS, and I started noticing the tingling in my left hand yesterday. I've never had tingling before. Furthermore, last week was a pretty light typing week (but I might've played cards too much ). So now I'm worried; I'll probably get a massage this week and I have a chiropractor appointment next week. The only think I can think of that might be causing the tingling is: 1) riding my bike to work, or 2) the cheap-ass crappy keyboard I have at work.

I went to the Apple Store and CompUSA to get an ergonomic keyboard tonight, but had no luck. The Apple Store only sell the standard Apple keyboard and CompUSA only sells black Microsoft keyboards. The M$ keyboard's will work, but it seems wrong to hookup a Microsoft keyboard to a MacBook Pro with a cinema display. I have a meeting in South Denver tomorrow morning, so I'm going to stop by Micro Center. Hopefully they'll have something good.

Carpal Tunnel is a scary thing as a programming professional. It's one of the few things that can put you out of commission as a programmer. It looks like I'd better start taking it seriously if I want to keep slingin' code for the next 10 years.

Related: Carpal Tunnel in May 2004.

A Week Later: I went to a repetitive motion specialist yesterday. They said that hand surgeons hate them b/c they can solve most issues. They worked my left arm and hand, and expect everything to be better with a couple more treatments. It already feels a lot better, but I'm also doing stretches every hour - which helps a lot too.

css.appfuse.org

It's almost the end of March and we've only received a couple entries for the CSS Framework Design Contest. In an effort to show what contest entries look like, I've developed and deployed an application to http://css.appfuse.org (login as an administrator with mraible/tomcat). This application utilizes the CSS Framework and has a few themes packaged with it. In addition, you can set it to use an external stylesheet to make development easier. The default theme and selectable themes are pretty ugly right now, so don't get your hopes up. The good news is this is a work-in-progress, so hopefully it'll get better soon.

The theme setup I'd like to use in AppFuse relies on loading a default.css from styles/themes/<theme name>. I've designated styles/default.css as a place to import the css-framework files, as well as specify rules for all themes. I'm open to alternative suggestions, but I think this is a good start.

I hope to evolve this application, along with the CSS Framework Design submissions to show what's possible with CSS in web applications - as well as provide a repository of downloadable themes. It's likely we won't ship the "CSS Selector" logic with AppFuse, but it should be easy to install one of these themes in your AppFuse-based application.

You'll notice that the themes currently available aren't working that well. I'm working with the authors to see what I need to fix. It's probably related to how I have things setup in the application. One of the things I discovered in this exercise is that CoolMenus isn't very CSS-friendly. It requires you modify JavaScript to change its positioning. I've left the menu in place for now, but I hope to replace it in the next few weeks with a more CSS-friendly version.

Since we've only received two theme submissions for the CSS Design Contest, I'm going to extend it to the end of April. Hopefully css.appfuse.org will encourage more participation. Any thoughts, comments or bug reports are most welcome.