Open source software is in need of your attention. You know that groan you emit when you want to try something that’s free, that sounds like it fixes your problem, but then you load it up and look at it. You know that laugh you give when you see such a terrible UI that it has to have been “designed by a developer.” That’s a problem.

You know what else is a problem? The design and writing communities withholding their expertise and skill from an open source project. Look, I get it, it’s not easy to break into a bunch of developers and say “Hey I’d like to improve the interface.” The relationship between a designer and a developer can be euphoric, but in general it can be a back-and-forth struggle. Plus, we’re not always the most open-minded crowd.

The Ruby community has design on its mind. Everything is a little better, a little more legible in the Ruby community. This is most likely because Rails, the project that kick started the language to 11, was released by a programmer who worked at a design company. Take a look at RubyGems. That’s a fine looking site: simple, elegant, concise. You know what you’re doing and how to use it.

I believe it’s partially the developer’s fault as well. Maybe, in this 20 years of engineering championing, we pushed too hard on the designer or the writer. It’s like at colleges where the liberal arts don’t hold as much weight as a bachelor of sciences. That sort of thinking has persisted through careers. Perhaps we’ve backed all of you into a corner and you’re pissed at us because Google has 47 blues tested. I get it.

However, the Python community really needs your help. Look at what happens when you load PyPi, the Python index. It’s awful. Is it meant to terrorize new developers? I’m not sure, but if you’re learning on a great learning language like Python, this crap, while clean, murders you with information overload. Information Architects: Why not donate some time to getting this layout right and helpful for newbies. Don’t even look at PECL it will burn your eyes. PHP desperately needs your help.

Plus, it could use some selling? Copywriters, where ye be? Probably curled up on your hemp-woven couch with James Joyce. Just so you know the books progression is circular. OK, that was a cruel stereotype. Without great writing, our apps all just automatons.

Where do we developers suck? Honestly, where do we suck at keeping you folks on board after or if you volunteer? Open source is generally maintained by committee and most all projects have a point man. I can understand not wanting to design-by-committee but you can agree to work for for the point man. Not only will this improve the quality of the project you’re working on but it will help it grow and in turn the community.

Developers give out lots of free stuff, you use it, I know you do! Why did WordPress have to hire a design company to help with their backend interface? Why doesn’t WordPress have a design team? I know lots of writers and designers who use WordPress. Where did we go wrong? Why are you afraid to design and write for us?

The Django admin panel has CSS and styles in it. You can design a better one. It could use some IA from an expert. Plus, think of what a significantly rewarding challenge it is to design for the abstract.

There are tons of README.txts that need a copywriter’s touch.

There is also a business case. Developers in open-source communities get a lot of work requests because, you know, they build it. If you can find a great open source project and begin working on it, chances are you’re going to make some connections. So when a client approaches the developer for some work, and design is involved, you may be the only designer that dev knows. It’s just networking by the work that you do.

So, why aren’t you all contributing? What did we do wrong?

Our work as developers benefits tremendously from your work. Please help.

Before you do anything else you should all read Jason’s excellent article A Real Web Design Application. It’s an eloquently worded plea for an application tailored specifically at screen design. Jason asserts that the current crop of tools doesn’t do a good job simulating the end result of designing for the screen. They’re plagued with font discrepancies (from typefaces to kerning to antialiasing) and layout issues.

The comments are filled with mostly intelligent (but some ridiculous) counter arguments. The one that stuck with me, though, was from Derek Jones:

…Look at Interface Builder for Xcode as an example – this is really the end game that I’d like to see. A tool with the front end chops that Jason describes for design and semantic markup, that intelligently hooks into server and client driven application architecture. One team of developers and designers using a single tool set to produce fabulous web sites and web applications.

If you haven’t used Xcode + Interface Builder before, Derek is right on the money, it’s a beautiful symphony of code and design. Design is done in Interface Builder, code is done in Xcode and all it takes is one click to connect the two. Intricate layouts can be created in a matter of minutes using simple drag and drop controls. Even the positioning of those elements can be controlled via a few clicks in the inspector. You set, based on one of the corners of the window, where your element should be anchored and you’re off and running.

In the following screenshot I’ve positioned an NSTableView based on the top left corner.

This is where it all breaks down. The web isn’t built according to the top left corner, it’s built around words. Words that grow, shrink and wrap. Jason’s own article is a great example of this difference:

If that image were 400px higher or 400px lower it wouldn’t make any sense, but besides the “CSS-esque styling” paragraph, it makes perfect sense. Interface Builder simply can not create this kind of layout. Sure it could get close, but resizing text, adding a paragraph or even changing the header style would cause the image to fall out of alignment.

So, no, unfortunately, I don’t believe that the current incarnation of Interface Builder is the silver bullet for web design. Might some mystical future version of Interface Builder for Web Design get closer? Possibly, but I wouldn’t bet on it.

So, where does that leave us? It leaves us hoping for an application that somehow incorporates the CSS layout paradigm into the app. For any editor to create Jason’s design the user must be aware that all the text is enclosed within some sort of container and that either that container has some white space on the left or that that container tells each child to have some whitespace on the left. Each image, then, must be told to move over to the left the negative amount of its width + ten or so pixels. Finally, if image has a caption that caption has to also be told to move over and take the width of its parent… Yuck.

Most of that last mess of a paragraph can be better summed up as:

#content p, #content h3 { margin-left: 230px; }
.illo.left { float: left; width: 210px; padding-right: 10px; }

Sure you can abstract out CSS and build inspectors and sliders for it, but in the end you’ll probably just end up with Dreamweaver.

From what I understand, the goal of starting a design in Photoshop is to free yourself from the constraints of thinking in margin-lefts and floats allowing you to focus on the design. Many of the commenters in Jason’s article took this too far and advocated a monolithic all in one web design+development app. I’d take the opposite approach: leverage what people love, Photoshop’s excellent pixel precise tools, while incorporating WebKit for rendering. Think Photoshop’s tools pallet with WebKit rendering the document view.

If you use Textmate and try to use its terrible search in project, you may find yourself waiting. Your research will then push you towards finding Ack in Project, a Textmate bundle which works really fast.

Then, as time passes, you’ll get annoyed with its quirks. Then you find AckMate.

Ackmate is a Cocoa interface for doing searches in your project. It’s fast, it’s bold, it’s beautiful.

AckMate, mate

All you have to do is download the bundle, install it and type ctrl + alt + cmd + f . The readme has more info.

I LOVE lists. To-do lists, unorganized lists, definitions lists. Love em. But to focus on the former today, I really like to-do lists for handling my day-to-day tasks from development assignments to groceries.

I downloaded The Hit List as part of a MacHeist bundle last year and it’s the only application I still use from the lot. I love it. The interface is easy to navigate, the keyboard shortcuts are totally logical, and it makes this super happy sound when you check off an item, which gets you pumped to complete more!

But there’s always a ‘but’. I’ve been using Hit List since I bought it in early April of 2009. That’s over a year ago. The product is still in beta and the update process is “throw up in the mouth” worthy. Every couple of months when I open the program I get this:

No automatic update. No letting me use the licensed, “expired” version. No taking me directly to the website to update. Not to mention, that when I do copy that URL, open a browser and visit the page, it’s not even the update/download page that I need, it’s their home page with all their products. ACK! This stinks. If you are forcing your users to upgrade, let them upgrade with ease. And this happens way more often than necessary. The updates that are being made aren’t critical. Check out the last two:

I could handle this frustration more if this was a free app, but it wasn’t. The top of my to-do lists have now become: update my to-do list! Lame! I’ve also emailed them about one of my issues with the program and never received a response. Their last site update was in September of 2009 and their Twitter account has gone darker than Jack Bauer when he was all mixed up in the dope. This stinks because they spent time making a great, easy to use application, with a crappy support side to accompany it.

So where does this leave us:

1. Developers please be nice to your paid users when they want to continue using your application and let them actually use it.
2. What do y’all use to organize your lists? Anyone have any recommendation for a more user friendly to-do list application? Preferably one that has fun sounds.

For the love of everything good in the world, please, please, please turn on invisible characters in your editor of choice. They all support it now and there’s really no reason not to. I can’t tell you how frustrating it is to open a file that looks like this:

function add_class(class)
{
  if (class.seats-class.enrolled > 0)
    {
      class.add(this);
    class.send_notification(this.email);
  }
}

when it should look like this:

function add_class(class)
{
    if (class.seats-class.enrolled > 0)
    {
        class.add(this);
        class.send_notification(this.email);
    }
}

So, what happened there? Well, I got code from a developer who uses 2 spaces per tab. On their computer everything looked fine because two spaces and tabs were interchangeable. However, on my 4 spaces per tab computer it all went to hell. So, please turn on invisible characters and take as much care writing them as you do the visible characters.

Update: I don’t really care if you use spaces or tabs, it’s really up to you, but don’t use both. Most of the time the only way to know for sure which you’re using (or inheriting) is to turn on invisible characters.