As a user of many web applications, I often find myself noticing little things that slow me down. One such thing is the use of checkboxes in web forms. It’s not the problem of checkboxes itself, it’s the face that checkboxes require the user to really focus their attention to a fairly small box on the page and perform a click inside. If you’re filling out a form really quickly, it’s almost guaranteed that you’ll take advantage of you your tab key to get through each field quickly. Sometimes there are select boxes, which require the user to make selections with their mouse. Checkboxes drive me crazy because it requires more time to position the cursor and move on.

So, when I see a form like this, I don’t see it being very quick to interact with.

While I’m not in love with the date selection interface here, my bigger pain has been the checkbox in the form. Why? Because they forgot to use the <label for=""> HTML tag.

What’s the problem? Well, I don’t have the convenience of clicking on the label text, which would toggle the corresponding checkbox.

I know, many of you know all about this… but I run into this problem everywhere. This is an accessibility issue for people and really just increases the chances for a frustrating user experience. When you use the label tag properly… it will provide a larger amount of the screen for people to click, which reduces the chance of not clicking in the right spot. The label tag was designed with this in mind so that people could click close enough to trigger the desired action.

Here is an example of where it becomes really useful.

So, the lesson? Please remember to use the label for tag. :-)

There was a post the other day on Signal vs Noise about the pain of opting out of mailing lists titled, Redonkulous unsubscribe delays, which I was reminded of after the following experience.

Earlier today, I got an email notification from my old Friendster account, which ended up being spam. I hadn’t logged into the account in ages and looked around at my profile and others. No meaningful interaction between my friends in a few years. It’s felt like a ghost town. So, I thought… “should I just delete my account?” I was thinking about doing the same thing with my Facebook account as well, because I’m getting tired of being invited to applications a few times a day due to a friend leaving my name checked when they sign up for a game. (this is getting old…)

So, I decided to kill the Friendster account, which I’ve had since February 2003. Oh… the good ole days of social-networking sites.

Upon filling out a form I got the following error with the notification, “Please list the other social networking site you switched to.”

::: thumbnail
Uploaded with Skitch!{style=”font-family: Lucida Grande, Trebuchet, sans-serif, Helvetica, Arial; font-size: 10px; color: #808080”} :::

The tone of this error message is very rude and helped support my decision to leave the site.

While I appreciate that they’re looking for feedback, they shouldn’t demand it out of me. As a result, my response was…

::: thumbnail
Uploaded with Skitch!{style=”font-family: Lucida Grande, Trebuchet, sans-serif, Helvetica, Arial; font-size: 10px; color: #808080”} :::

Wait a minute. You’re demanding that I list the sites that I’m switching to… in 20 characters or less? Thanks for giving me the opportunity to LOLBUG you. Sigh. Who makes these interaction decisions there?

If they really wanted to get some useful feedback, perhaps they could have asked me nicer.

So, I decided to head over to Facebook and compare their process.

At first glance, this looks very much like the form that I was presented with on Friendster. Except that I can only select one reason why I am leaving and I can think of a few. However, when I made a selection… something surprised me.

Okay, so maybe I’ll leave my Facebook account around for the time being. Perhaps there is a Facebook application out there that will be get my attention.. but to date, this has yet to happen.

[This post is dedicated to the memory of Robby Russell’s Friendster Profile. Feb. 2003 - Dec. 2007. R.I.P.]{.small}

It’s been about a year and a half since I wrote about my wrist pains that would often occur at work, which was being caused by something I bet many of us deal with from time to time… Repetitive Strain Injury. So, I’ve been wearing these gloves when I’m at work on my normal Apple keyboard. I knew that they helped to some degree because on the days that I forgot them, my wrists would begin to hurt after a hour or two of coding/writing emails. Not much fun.

A few months ago, I attempted to start typing with Dvorak, which started off with requiring myself to do it for about three hours each morning to start the day and then switching back. After about a week and a half, I forgot to continue doing it. The Dvorak keyboard sits next to my desk… whispering to me, “play with me”… but I haven’t had time to get back into it.

So, the strain continues from time to time. Over the course of a few months, I began to notice that most of the strain seemed to be in my right wrist and I started to wonder if the mouse movements were a bigger culprit than the keyboard itself. So, I spoke to a guy at Macforce (a cool and local Apple dealer) about the mouse pad that he was using. He said that it really helped him out and so I bought myself one.

It’s a Belkin WaveRest™ Gel Mouse Pad and cost me less than $30 USD. It’s been a few weeks and I’ve noticed that I can go almost the entire day without the gloves that I wore before. So, I think that there is still some strain occurring, but a lot less than before. So, I’m hoping to give Dvorak another shot and hope that combo helps alleviate a lot of pain that I’ve been experiencing at work.

If you’re experiencing wrist pains and it’s focused on the hand that you use your mouse with, you might consider something like this to help out.

I’m sure that I’m not the only one that has/is experienced motion strain at the computer.. so, what has been your experience and have you had any success making improvements to your work space to help?

One of the reasons why I’ve been too busy to write on my blog lately is that we recently moved into to a new studio. We had a lot of preparation to do before we moved in and are finally getting settled in the new space.

We took the space from…

{width=”450”}

To this…

{width=”450”}

As you can see.. we have lots of natural light for the entire team…

{width=”450”}

{width=”450”}

I think that Chris Griffin shares the same excitement that I do about the new space. ;-)

{width=”450”}

We’ll be posting more photos on the Planet Argon flickr stream over the coming weeks as we get the studio organized. :-)

In a new article on A List Apart, Jeffrey Zeldman writes:

“Some who don’t understand web design nevertheless have the job of creating websites or supervising web designers and developers. Others who don’t understand web design are nevertheless professionally charged with evaluating it on behalf of the rest of us. Those who understand the least make the most noise. They are the ones leading charges, slamming doors, and throwing money—at all the wrong people and things.”

He goes on to describe Web Design as, “as the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.”

Read the rest of the article, Understanding Web Design on alistapart.com.

It just occurred to me that my first Skitch was on July 7th, 2007. 7/7/7. I’ve been meaning to post an article about how Skitch has changed the way our team approaches reporting bugs and communicating ideas visually.

First of all, the Skitch web site advertises it (see video) as a fun tool for playing with photos and sharing stuff with friends/family. While this is true, I think their bigger market could be those of us who work in the web design and development community. It took a less than a week for Skitch to become a tool that I rely on the most during my day to day work and since it keeps surprising me that people aren’t using it and/or haven’t heard about it… I thought that I’d share how we’re using it at Planet Argon.

Introducing “LOLBUGZ”

Our team is currently using Lighthouse for managing bugs/tickets for internal and client projects. If there is one way to slow down bug fixing cycle.. .it’s the ticket submission process. It takes a lot of time and commitment to try and communicate some problems that you’ll find in a web application. This is why screenshots can be so useful to helping speed up the process. Skitch allows us to not only provide a screenshot really quickly, but it gives us the ability to focus our attention with shapes and text, which provides more context when viewing an image.

For example, here are a few real-world Skitches that I’ve used to report some problems.

What happened to this drop down?

This pagination needs some CSS-Love!

Oh no! Tags are getting grouped together…

Styling has gone crazy…

I mastered an unordered list! (hooray!!)

This list isn’t scaling anymore…

Side note: LOL BUGZ was a term coined by Rick Olson at Active Reload to describe the tickets that I post for Lighthouse. ;-)

Trying out 15 during the initial releases for the iPhone… bug report sent via twitter to Erik Kastner.

As you can see, using Skitch helps communicate some very specific things without needing to type a huge description. Of course, we do try our best to add more context with our tickets. For example, here is a real-world example of a ticket that I posted on Lighthouse. As you’ll see, there are a few skitches embedded in the tickets, which works much better than attaching screenshots to tickets.

One of the best features of Skitch is it’s work-flow. Within a few seconds, I can do the following tasks.

• Take a screenshot of a specific region of my screen
• Add some arrows and text
• Click on Webpost, which will upload directly to myskitch.com
• Click on Share to navigate to the new upload
• Click on the embed textfield and it uses JS to copy the embed

html into my paste buffer

• Paste the html snippet directly into the ticket that I’m reporting
• Submit my LOL BUG

Side note: it also allows you to upload to Flickr, a ftp account, etc.

Over the past four months, Skitch has become one of my favorite OS X tools. The interface is lightweight and the workflow is almost perfect (feature request: providing the embed code in my paste buffer without needing to go to myskitch would be A+)

I’ve also used Jing, which works on Windows and OS X and does video. I’ve not found it to be as intuitive for working in this manner. In fact, the work-flow leaves a lot to be desired. However! It does do video and this has come in handy a few times for showing people some “live” interaction-type bugs that can’t be communicated as easily through text/images.

If you’re not using Skitch yet and are on OS X… I highly recommend that you try it out for a few weeks during a bug fixing sprint. We’ve gotten our clients and almost everybody on the team using it in this fashion. The productivity increases haven’t gone unnoticed.

That’s not to say that it’s not fun for point out things that aren’t related to your project bugs. ;-)

Happy Skitching!

UPDATE

Plasq liked the writeup and gave me 50 extra invites to pass out for Skitch. So, if you’re in need of one… ask me via email. Thanks Plasq team!

Not terribly long ago, I announced Active Delegate, which was a really lightweight plugin that I developed to allow models to talk to multiple databases for specific methods. The plugin worked great for really simple situations, like individual models.. but when it came time to test with associations it fell apart. I haven’t had a chance to work on any updates and knew that it was going to take more work to get it going.

Earlier this week, we helped one of our bigger clients launch their new web site¹. For the deployment, we needed to send all writes to a master database and a reads to slaves (initial deployment is talking to almost 10 slaves spread around the globe!). We needed something to get integrated quickly and decided to ditch Active Delegate for the time being and began looking at the following options.

I spoke with Rick Olsonv² and he pointed me to a new plugin that he hasn’t really released yet. So, I’m going to do him a favor and announce it for him. Of course… I got his permission first… ;-)

Announcing Masochism!

Masochism³ is a new plugin for Ruby on Rails that allows you to delegate all writes to a master database and reads to a slave database. The configuration process is just a few lines in your environment file and the plugin takes care of the rest.

Installing Masochism

With piston, you can import Masochism with:

If you previously followed my article, Installing Ruby on Rails and PostgreSQL on OS X, second edition and are now upgrading to OS X Leopard, you’ll want to make a few adjustments to your setup.

First of all, it’s great that Apple has decided to provide Ruby on Rails out of the box.

If you upgraded to OS X Leopard and are running MySQL from the MySQL.com installer[^1^](#fn1){#fnref1 .footnote-ref role=”doc-noteref”}, you might be having some problems with starting it from the GUI interface. There isn’t a fix from MySQL yet, so to get around that… you can run it from the command-line.

Start MySQL from the command line

cd /usr/local/mysql; ./bin/mysqld_safe &

This should get MySQL up and running for you. If someone wants to share a tip on how to get this to start automatically on reboot, please post a comment and I’ll help get the word out.

1. ::: {#fn1}

I didn't have this problem as I [installed MySQL via
MacPorts](http://www.robbyonrails.com/articles/2007/06/19/installing-ruby-on-rails-and-postgresql-on-os-x-second-edition..).
but this came up for a few members of [PLANET
ARGON](http://planetargon.com) after they upgraded to
Leopard.[↩︎](#fnref1){.footnote-back role="doc-backlink"}
:::

If you’re using Skitch and the new Spaces in OS X Leopard, I would encourage you to set the following up.

::: thumbnail
Uploaded with Skitch!{style=”font-family: Lucida Grande, Trebuchet, sans-serif, Helvetica, Arial; font-size: 10px; color: #808080”} :::

This will allow you to use Skitch on any Space without needing to move it around. Took me a few minutes to figure out that I could set it up like this.

As you can see… I’m on Leopard now… only took three tries.

Earlier, I came across a post by Garry Dolley, which he shows how to acheive colorized grep matches in bash. I recall having color matches when I used to use Linux on a daily basis as my primary work environment, but haven’t gotten around to setting this up on my MacBook, which is where I do almost all of my development work.

Before

If you don’t already have colors, a grep in your terminal might look something like the following screenshot.

While, I have a very small output here, this gets much crazier when you’re using egrep across an entire project. It’s hard to scan through all of the results for the inline pattern matches.

So, taking Garry’s suggestion (for bash), I did something similar with my favorite shell, Z shell.

Add the following to your ~/.zshrc file to begin experimenting with the colors.

I saw this photo of the Microsoft team from 1978 on Anselm’s flickr and thought, “Hmm, that looks like Chad Fowler!”

Could this be Chad Fowler’s dirty little secret?..

Happy Saturday!