Heroku’s Adam Wiggins on how to scale a development team

Not much to say here; I think this is an excellent template for growing a software company and this is my way or preserving copy for when I need it.

Adam Wiggins – How To Scale a Development Team

As hackers, we’re familiar with the need to scale web servers, databases, and other software systems. An equally important challenge in a growing business is scaling your development team.

Most technology companies hit a wall with dev team scalability somewhere around ten developers. Having navigated this process fairly successfully over the last few years at Heroku, this post will present what I see as the stages of life in a development team, and the problems and potential solutions at each stage.

Stage 1: Homebrewing

In the beginning, your company is 2 – 4 guys/gals working in someone’s living room, a cafe, or a coworking space. Communication and coordination is easy: with just a few people sitting right next to each other, everyone knows what everyone else is working on. Founders and early employees tend to be very self-directed so the need for management is nearly non-existent. Everyone is a generalist and works on a little bit of everything. You have a single group chat channel and a single all@yourcompany.com mailing list. There’s no real need to track any tasks or even bugs. A full copy of the state of the entire company and your product is easily contained within everyone’s brain.

At this stage, you’re trying to create and vet your minimum viable product, which is a fancy way of saying that you’re trying to figure out what you’re even doing here. Any kind of structure or process at this point will be extremely detrimental. Everyone has to be a generalist and able to work on any kind of problem – specialists will be (at best) somewhat bored and (at worst) highly distracting because they want to steer product development into whatever realm they specialize in.

Read More

Soliciting browser type, version, OS and cookie settings from your users

I lost track of this site and happily re-found it – tell your website customers to open http://supportdetails.com/ in a new tab when they have issues with your website and to use the form built in to e-mail you their information. Super handy.

A Terms Of Service page done right (or at least better)

The 500px Terms of Service page strikes a great balance (a 50/50 balance, to be precise) between necessary legalese and something the layman can understand.

Very basic JSONP

JSONP allows you to make HTTP requests outside of your own domain due to the SCRIPT tag not having the same-domain limitation XMLHttpRequest does. The basic form of this workaround is as follows:

var scr = document.createElement('script');
scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency';

function formatCurrency(data) {
	// Do stuff with the data that's been returned.

Lines 1 – 3 of the above create a SCRIPT tag in the DOM, defines the URL to retrieve data from and in line 3 makes the request. To continue the execution cycle, the script at openexchangerates.org must wrap its data in a function:

formatCurrency({ "hello" : "Hi, I'm JSON. Who are you?"})

This calls the locally defined function formatCurrency(), which does whatever it needs to do with the returned data. A quick hack to make your API (assuming you control it) work with JSONP would be as follows:

// assume $json holds the JSON response
if ($GET['callback'] != '') $json = $GET['callback']."( $json )";
return $json;

I have yet to test this, but I imagine you could also be much more daring and avoid having to get the following code uploaded to your API of choice. To do this, execute the first bit of JavaScript on this page, and then execute an eval() statement on the data in the manner of the below:

eval('formatCurrency(' + returned_data + ')');

How to center text within a DIV element

This is one of those things I’m blogging about strictly so I can search it later and find the answer. Below, we use a DIV contained within a DIV to center text/images/anything on a page, which we’ve arbitrarily decided is 1024px in width.

<div style="width: 1024px;">
	<div style="width: 50%; margin: 0 auto;">
		Everything within this DIV element will be centered within the 1024px outer DIV element!

Reference: StackOverflow – How to center DIV in DIV?

Referring to a PHP object property using a variable

This is one of those really simple things that I use infrequently enough that I tend to forget: If you’ve tried using $object->$field_name to address a property of a PHP object, you’ll know that PHP isn’t happy with that syntax. Instead, use:

return $object->{$field_name};

UX Movement – Why headlines attract more user attention than images

I feel obligated to repost this invaluable bit of knowledge from the excellent UX Movement website.

UX Movement – Why Headlines Attract More User Attention Than Images

When websites show content, they’ll usually use a headline and image. Headline and image quality is important in getting the user’s attention. However, the headline will always get the most attention no matter what. Here’s why.

Look at this image. How relevant is it to you? What is the context behind the image? One could make guesses all day, but the fact is that nobody knows for sure.

Now look at this headline. How relevant is it to you? What is the context behind the headline? You know what the context is immediately after reading it.

You can easily visualize the image with the headline alone. But you can’t make out the headline with the image alone. Users won’t understand the image without the headline. But users will still understand the headline without the image.

With the headline and image put together, users get the full picture. They get both the story context and the emotion.

When users see both together, they will naturally pay more attention to the headline because it has the context and details of a story that they can relate to. Users are looking for information, and a headline gives them more information than an image. However, the image can appeal to users’ emotions more. And that can reinforce the headline and give users the extra boost to click-through. Both are important, but the headline is most important.

Placement & Visual Weight

How can you apply this newfound insight to the way you design content? Since headlines attract more attention than images, you’ll want to place your headline before your image. This way users can immediately get to the headline without having to go through the image.

Putting the image first wastes an extra visual fixation that doesn’t give users any useful information.

The image is more meaningful to users after they understand the context from the headline first.

Another thing is to make sure that your image doesn’t have more visual weight than your headline. When an image is too large, users can easily get distracted. This slows them down from their task of getting information. To avoid this, balance the weight between your headlines and images, and let your headline do most of the talking.

When your image is louder than your headline, users waste their time staring at the image.

Replicated Research

If you’re still not convinced of the claim through objective reasoning, take a look at Jakob Nielson and the Poynter Institute’s research. Their studies “used different methodologies, tested different users and different sites, had different goals, and were conducted at very different stages of the growth of the Web” and they all concluded the same results. In Jakob’s own words:

When different people keep finding the same results year by year, it is time to take the findings seriously and to base Web design on the data and not on wishful thinking.

The results are in and the time to treat headlines with more respect is now. You may love looking at your image, but the user is looking at your headline.

Outputting MySQL results to a CSV file without OUTFILE access

The MySQL client’s -e (or –execute=) flag allows you to specify a query to be run at the command line, which can then be output back to a local file:

$ mysql -h server.com -u username -p -D database -e "SELECT user_id FROM users ORDER BY user_id" > output.tsv

Note that by default this will output a tab-separated value file (TSV), not a comma-separated value (CSV) file.

Points (pt) to pixels (px) conversion chart

Chart courtesy of Suresh Kumar. I don’t believe the relationship to em is correct in all cases, but the rest is quite useful.

Deploying a BlackBerry WebWorks app to the PlayBook from Windows

Back in 2007 I wrote a BlackBerry OS application to perform a simple e-mail routing health check procedure. It turned out to be a hellish process, and not just for the fact that I’m not much of a Java developer (I don’t include Java in my list of skills on my resume). That was a minor problem compared to the overly involved process that had to be undertaken in order to simply compile the damn app and deploy it to a handheld for testing. On top of all that, Research In Motion at that time required that any developer who wished to use certain parts of their API, even just to test on their own device, to register at the cost of $200 USD. My employer paid this fee on my behalf, but it capped off an unpleasant process.

Times have changed and RIM has learned a few lessons. Developers no longer have to pay RIM merely for the pleasure of developing an app, but they do still face an unclear process for deploying to a test device. For both my own sake and for other developers, I’ve attempted to do a comprehensive write up of the process of deploying a BlackBerry WebWorks app to a PlayBook tablet. It consists of ten rather involved steps, but after the first time you do it once the process shrinks down to just the two last steps.

All right – let’s both take a deep breath and get started.

Read More