Year: 2008

2 great GUI prototyping tools

December 4, 2008 /

I’ve had a special interest in GUI design, usability, hci, … for quite some time.

The last few years, when I started working on a new feature I tried to forget everything I know about programming and fully concentrate on the user interface first: who will use it, how should it integrate into their workflow, how often will they use it, etc. Just ban any data model or database thoughts, pick up pen and paper and draw the user interface.

As a programmer you tend to focus on the data first. This is the way we fit the problem into our programmer’s mind, this is also the part that might contain pitfalls and when you ‘solved’ it you’re usually pretty sure that it’s solved in a good (enough) manner (development = left side o/t brain?).

The user interface on the other hand is usually an afterthought: you know you can do it, there’s no challenge here and it gets rushed together because there’s a deadline you need to consider. For most developers, there’s also a lack of that reassuring feeling that you’re on the right track or a big sense of accomplishment when it’s finished (UI design = more right side o/t brain?).

This is obviously not the right way to go about this: for the user, the user interface IS the program. It’s all he or she sees, and even if it doesn’t look like a rushed afterthought, it often feels like one. Most UI’s still are just a way to interact with the data instead of being a handy, useful tool. They are an interface between the keyboard, mouse, monitor and data instead of being an interface between the user and the task.

Although I’m a firm believer in ‘paper prototyping’ and designing the UI with a clear mind away from the machine, I also often miss digital tools like copy/paste and being able to email my mock-up to someone right away. (but still tend to stick to pen and paper, and not only because it’s got a better carbon footprint 😉

However… these 2 quite recent tools could fill that gap:

  • Balsamiq Mockups not free but I guess you can’t afford not to buy it when working in a pro team
  • The Pencil Project which comes as a Firefox plugin and is totally free

So far, no-one I mentioned these to had heard about them. Maybe I talk to the wrong people.

Balsamiq Mockups keeps the sketchy feeling by for example not using 100% straight lines. This might seem a bit backwards but it keeps you from trying to make your design pixel-perfect and gives the impression that your design is still very open to change and suggestions from others. Although it doesn’t feel right in a programmer’s mind, it is ideal in this GUI-prototyping context.

Do I hear someone say ‘Visio’ ? It’s probably just me but the few times I tried it took me ages to design a GUI with Visio. I’ve seen my share of Visio UI mockups, and I often got the impression that they were made by people who only use MS Office products and design an interface to the data instead of a User Interface. Doesn’t mean Visio is bad though, I guess I’m just Pavloved not to like it.

Enjoy!

Ruby crc16 implementation

April 17, 2008 /

I needed a crc16 in order to feed some data to a dinosaur.
Google couldn’t help me this time so I rolled my own. The pre-calc table was borrowed from a python implementation.

Hope this saves someone else the hassle…


CCITT_16 = [
0x0000, 0x1021, 0x2042, 0x3063, 0x4084, 0x50A5, 0x60C6, 0x70E7,
0x8108, 0x9129, 0xA14A, 0xB16B, 0xC18C, 0xD1AD, 0xE1CE, 0xF1EF,
0x1231, 0x0210, 0x3273, 0x2252, 0x52B5, 0x4294, 0x72F7, 0x62D6,
0x9339, 0x8318, 0xB37B, 0xA35A, 0xD3BD, 0xC39C, 0xF3FF, 0xE3DE,
0x2462, 0x3443, 0x0420, 0x1401, 0x64E6, 0x74C7, 0x44A4, 0x5485,
0xA56A, 0xB54B, 0x8528, 0x9509, 0xE5EE, 0xF5CF, 0xC5AC, 0xD58D,
0x3653, 0x2672, 0x1611, 0x0630, 0x76D7, 0x66F6, 0x5695, 0x46B4,
0xB75B, 0xA77A, 0x9719, 0x8738, 0xF7DF, 0xE7FE, 0xD79D, 0xC7BC,
0x48C4, 0x58E5, 0x6886, 0x78A7, 0x0840, 0x1861, 0x2802, 0x3823,
0xC9CC, 0xD9ED, 0xE98E, 0xF9AF, 0x8948, 0x9969, 0xA90A, 0xB92B,
0x5AF5, 0x4AD4, 0x7AB7, 0x6A96, 0x1A71, 0x0A50, 0x3A33, 0x2A12,
0xDBFD, 0xCBDC, 0xFBBF, 0xEB9E, 0x9B79, 0x8B58, 0xBB3B, 0xAB1A,
0x6CA6, 0x7C87, 0x4CE4, 0x5CC5, 0x2C22, 0x3C03, 0x0C60, 0x1C41,
0xEDAE, 0xFD8F, 0xCDEC, 0xDDCD, 0xAD2A, 0xBD0B, 0x8D68, 0x9D49,
0x7E97, 0x6EB6, 0x5ED5, 0x4EF4, 0x3E13, 0x2E32, 0x1E51, 0x0E70,
0xFF9F, 0xEFBE, 0xDFDD, 0xCFFC, 0xBF1B, 0xAF3A, 0x9F59, 0x8F78,
0x9188, 0x81A9, 0xB1CA, 0xA1EB, 0xD10C, 0xC12D, 0xF14E, 0xE16F,
0x1080, 0x00A1, 0x30C2, 0x20E3, 0x5004, 0x4025, 0x7046, 0x6067,
0x83B9, 0x9398, 0xA3FB, 0xB3DA, 0xC33D, 0xD31C, 0xE37F, 0xF35E,
0x02B1, 0x1290, 0x22F3, 0x32D2, 0x4235, 0x5214, 0x6277, 0x7256,
0xB5EA, 0xA5CB, 0x95A8, 0x8589, 0xF56E, 0xE54F, 0xD52C, 0xC50D,
0x34E2, 0x24C3, 0x14A0, 0x0481, 0x7466, 0x6447, 0x5424, 0x4405,
0xA7DB, 0xB7FA, 0x8799, 0x97B8, 0xE75F, 0xF77E, 0xC71D, 0xD73C,
0x26D3, 0x36F2, 0x0691, 0x16B0, 0x6657, 0x7676, 0x4615, 0x5634,
0xD94C, 0xC96D, 0xF90E, 0xE92F, 0x99C8, 0x89E9, 0xB98A, 0xA9AB,
0x5844, 0x4865, 0x7806, 0x6827, 0x18C0, 0x08E1, 0x3882, 0x28A3,
0xCB7D, 0xDB5C, 0xEB3F, 0xFB1E, 0x8BF9, 0x9BD8, 0xABBB, 0xBB9A,
0x4A75, 0x5A54, 0x6A37, 0x7A16, 0x0AF1, 0x1AD0, 0x2AB3, 0x3A92,
0xFD2E, 0xED0F, 0xDD6C, 0xCD4D, 0xBDAA, 0xAD8B, 0x9DE8, 0x8DC9,
0x7C26, 0x6C07, 0x5C64, 0x4C45, 0x3CA2, 0x2C83, 0x1CE0, 0x0CC1,
0xEF1F, 0xFF3E, 0xCF5D, 0xDF7C, 0xAF9B, 0xBFBA, 0x8FD9, 0x9FF8,
0x6E17, 0x7E36, 0x4E55, 0x5E74, 0x2E93, 0x3EB2, 0x0ED1, 0x1EF0
]

def crc16(buf, crc=0)
buf.each_byte{|x| crc = ((crc< <8) ^ CCITT_16[(crc>>8) ^ x])&0xffff}
crc
end

mod_rails – first impressions

April 13, 2008 /
  • Installing was easy as pie. I was missing the Apache development headers and the installer told me which ‘yum’ command I should use to install them. Nice.
  • When you don’t have heaps of memory, remember setting RailsMaxPoolSize to a lower value to avoid swapping. I’d experiment with RailsMaxPoolSize and saturating the number of concurrent requests using ApacheBench in any case. More concurrent threads is only better until a certain point.
  • Apache/HAProxy/Mongrel was a bit slower than Apache/mod_rails, which was a bit slower than HAProxy/mongrel (without Apache). The difference was nothing to loose sleep over. RailsMaxPoolSize was set the same as the nr of mongrels.
  • While ApacheBench testing, touching tmp/restart.txt to force a restart could cause a hang. Only restart of Apache helped.
  • I would get an occasional time-out and ab stopped (heavy testing, large nr of concurrent requests). BUT this also happened with Apache/HAProxy/mongrel (NOT when using HAProxy/mongrel ‘direct’) so I’d guess this is rather an Apache issue.

Mod_rails seems to be a surprising stable and finished product, and this for a first public release! I’m anxious to check out their Ruby Enterprise Edition.

The occasional hang when touching tmp/restart.txt makes me a bit weary, but this only seems to happen under heavy ApacheBench testing with a high number of concurrent threads. The hangs of Apache under heavy load on my test system, even when no mod_rails is involved might indicate this isn’t even a mod_rails problem. I don’t see this being an immediate issue under normal circumstances.

Thank you Phusion! (I don’t like the logo though)

mod_rails

April 12, 2008 /

I’ve been planning on checking out nginx for a while. Mainly as an alternative for apache in my currently preferred apache/haproxy/mongrel Rails install.

I guess I’ll have to hold on to apache a little while longer and check this one first: http://www.modrails.com/

From where I’m standing this is the most interesting thing to happen to Ruby on Rails deployment since mongrel.

Update your rails application without downtime

March 28, 2008 /

It’s often not possible or wanted to take down your rails application for updates. Even if it is, I still regard downtime as something that should be avoided if possible.

When using the absolutely fantastic HAProxy to load-balance between your mongrels, you can take down a mongrel process without any adverse effects. When a mongrel process is not answering anymore, HAProxy just forwards the request to the next available mongrel and no harm is done.

So all you need is a way to stop and restart each mongrel, one after the other. I cooked up a bash script to do this. It’s not perfect, but I’ve been using it on several projects. The script stops each mongrel, waits until it’s really stopped, then restarts and checks if it’s really running.

Why a bash script ? I wanted to sharpen my (limited) bash scripting skills (so if you have any tips: feel free to comment).

Customize where needed. (properly indented version here)

If you are running monit, remember to ‘unmonitor’ before and ‘monitor’ after.


#!/usr/bin/env bash

#rails project home dir
#!!Change acc to your needs
cd /home/rails/le_test/current

#Ports mongrels are running on
#!!Change acc to your needs
for PORT in 8000 8001 8002
do
#the location of our pid-files
#!!Change acc to your needs
PF=/var/run/mongrel/mongrel.$PORT.pid

#pidfile exists ?
if [ -e $PF ]; then
PR=$(cat $PF)

#process still running ?
if ps $PR > /dev/null 2>&1; then
echo "$PF $PR Running - killing"
kill $PR
while ps $PR > /dev/null 2>&1; do
echo "$PR still running"
sleep 1
done
echo "$PR killed"
else
echo "$PF $PR Not Running - deleting pidfile"
rm -f $PF
fi
else
echo "$PF does not exist"
fi

#check if a command containing $PORT.pid is still running
#in case process is still active but pidfile was not found
if ps ax|grep $PORT.[p]id > /dev/null 2>&1; then
echo "!!! But process containing $PORT.pid running !!!"
echo "!!! NOT auto-restarting, Manual intervention necessary !!!"
else
echo "Restarting port $PORT"
#mongrel start cmd
#!!Change acc to your needs
mongrel_rails start -d -e production -p $PORT -P $PF
sleep 1
#check if process is actually running now (could also be done by pidfile based check)
while ! ps ax|grep $PORT.[p]id > /dev/null 2>&1; do
echo "Not Running"
done
fi

done

This should work with other load-balancers too, but since HAProxy had all features I expected to find and is very resource friendly and has a tiny footprint (and irons a shirt in 2 mins), I didn’t look any further (after looking at Pound, which only advantage is that it’s easy to install/configure and cisco css switches which are just a tiny bit expensive for my needs)

Quiet 2007

March 10, 2008 /

Ok, 2007 was a bit quiet on the blogging side. Been squeezing the max out of every minute of spare time and been working/learning as hell. Maybe more about what I’ve been upto later.

The layout started looking a bit stale so I modded a layout I like (credits: see bottom of page) to something I like even more (gustibus and stuff) and gave WP the much needed update. So there, giving a reason to unsubscribe to the 3 people that had forgotten that they were following my feed!

CSSVista: Internet Explorer Live CSS Editing

March 10, 2008 /

This tool has been around for quite some time, but it often surprises me how few people (also ‘professional’ ones) seem to have heard about it. Since it’s the only FREE live CSS IE editing tool I know, and since (added bonus!) it actually offers split-view Firefox/Internet Explorer editing, there’s no harm in spreading the word a bit.

Get it at: http://litmusapp.com/labs. DL link is sent to email address provided. However, I’m pretty sure they honour their no-spam policy.

Oh yes… it only runs on windows. But since there’s no escape having to consider IE users browsing your site, it’s almost worth keeping a windows installation for (that, and homebanking).

Tip: If your site requires a login and you have problems logging in using CSSVista: save the page you want to edit using Firefox and open it in CSSVista for editing.

And just in case you’ve been hiding under a rock, for day-to-day live CSS editing use (running fine under Linux!) there’s the webdev swiss army knife: Chris Pederick Web Developer Extension.