Nick Rowe

At lunch a coworker mentioned a problem to write a method to make change.  I have trouble resisting a problem so while my database was rebuilding this afternoon I coded this up.  It’s too small for Github but it was fun and easy:

def change_maker(cents, coin_denominations = [25, 10, 5, 1])
  [].tap do |coin_bag|
    coin_denominations.sort_by {|denomination| -denomination}.each do |coin|
      (cents / coin).times {  coin_bag << coin }
      cents = cents % coin
      break if cents == 0
    end
  end
end

I have trouble resisting a problem.

Recently Caroline Moore (my long time girlfriend) and I have been working on her resume. Here’s what it looks like right now (and I’m sure it isn’t done):

After you have found the story that you want to tell with your resume it’s time to start getting it on the page.

Here’s the conventional wisdom on resume design: portrait, Times New Roman, black, 12pt, single spaced, bold the company names. You must include sections for your contact information (with full street address), your job history, your education, your skills, and a list of references with complete contact information. Your resume should be very uniform.

Here’s what I say: your resume is a document communicating something about you. It’s a page from one human to another. If you’ve started with your story then your resume already says a lot about you so why would you take all of that and throw it away?

Your resume should also optimize those first 15 seconds that you have with someone. It’s quite likely that you won’t make it through those 15 seconds and onto a first interview so there’s a lot of incentive to make it count.

Ok, first a couple of things. Don’t put your full contact information on your resume. It’s a document that’s going to be widely circulated. If you’re applying to a big company it will probably be handed from someone in HR to someone else in HR then to someone else in the department you’re interviewing with and so on. What everyone really needs is how they can get in touch with you. Today that’s phone and email. Those things matter. As far as location what matters the most is your general location. This answers the question: are you relocation.

The first contact someone will probably have with your resume is on a computer. On a computer portrait doesn’t make sense. We have way more pixels to play with in landscape. This is why I recommend that you design your resume in landscape. If someone has very little time with you make it count.

As a document designed for humans your resume doesn’t have to fit a standard form. I think there’s a lot of fear, uncertainty, and doubt about stepping outside of standard resume formats. What if the company refuses to look at it? What if it isn’t what they’re looking for?

Here’s my thinking on that. If a company won’t look at your resume because it isn’t the standard format is that the kind of company you want to work for? If it’s not Times New Roman, black, 12pt single spaced and that’s what disqualifies you, you probably didn’t want that job to begin with.

So what should a resume look like? It should communicate something about the applicant. I hope Caroline’s resume communicate’s a sense of boldness, confidence, and transparency. I hope the colors, the fonts, the spacing, everything contributes to this feeling.

One more time, here’s the resume as it is today:

The font sizes have been optimized so that the more important information is bigger. Caroline’s name is the biggest thing on the page. Next, category headers, then job headlines and finally job details and quick summary. The size indicates something about the importance.

The colors too are optimized. Darker grey information pops off the page more, it’s more important.

A resume is a document for humans communicating with other humans. Make your resume something your proud of, something that says something about you.

I’m sure Caroline’s resume isn’t done yet, but I’m really proud of how it’s shaping up.

One more thing, if you’re looking at Caroline’s resume and thinking that she sounds like the right person for something you’re doing, get in touch with her with the address on the resume. I know that she would love to talk.

Let’s talk about selectable text and the web. And here’s the big point I want to make, not everything on the page should be selectable. Ask this question: “Would a user want to paste this into an email?”

The Problem with Selectable Elements

Selectable text is an important of the web of information. Anyone who doubts that needs only to remember back to the pre-copy and paste days on the iPhone. People were really excited about that feature. In describing his guesses for iOS 3 Jon Gruber outlined his hopes and then concluded with “pretty please, Mr. Forstall, with sugar on top — copy and paste.”.

Today we aren’t just building websites, though. We are building web tools and applications. It’s really exciting. I use tools like Github, GMail, and Pandora everyday. These aren’t websites, they’re applications. I think all of these sites could do a little bit better on user experience and it’s all about text select.

The point is that all UI elements should not be selectable. Working backwards here, let’s think about why users want to copy from a webpage. Some users are copying because they want to share the text on the page. Other users, Sharon Newman who wrote an entry about IE’s selection behavior use text highlighting to have a place that they are tracking on the page. Other users are grabbing images.

With this in mind, what isn’t the user trying to select. Certainly not your buttons, and other UI elements. And that’s the point. UI elements should not be selectable, it’s a confusing user interface. In fact, the W3C agree’s with this recommendation:

Note that although the initial value of ‘user-select’ … [allows only the selection of text Browsers] … typically do not allow selection of the contents of a BUTTON element. E.g. BUTTON { user-select: none }

- from the user-select documentation

Ask yourself this question: “Would a user want to paste this into an email?”. Then always air on the side of allowing them to select more than you think they would want to. Let’s take a look at Github’s user interface:

The sections in green are things that I would definitely like to select, in orange perhaps, and in red not at all. With the idea that you should always allow the user to select more of the page, rather than less I would allow the orange regions to be selectable. This small change makes the website more professional: you are treating UI elements like UI elements.

This starts to matter even more when you’re designing UIs using HTML and CSS and then packaging them for distribution as apps. TileMill is packaged as a native mac app. However it’s not a native map app, it’s a node js project that renders to an embedded browser. This creates weird problems were UI elements are selectable. It’s a dead give away that it’s not a “real” mac app. Take a look at this:

This also matters with phone gap apps on iPhone and Android. You want those apps to feel like real apps, not HTML imitations. One more place text selection really matters is on charts and graphs. Take a look at this example graph from Morris.js:

It’s a better user experience to have these labels not be selectable.

The Solution

What’s a developer to do? Here’s the quick code solution:

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;

user-select is a draft CSS3 property. You should know that user select is not inherited but does affect children; it works like ‘display: none’

When apple announced the iBookstore for textbooks we were both really excited. My fiancee is a knitting pattern designer and we’ve been looking for ways to get her increased exposure. We started playing with the tool the day it launched. Today we’re live on the iBookstore. Here’s what we’ve learned:

1. You need an ISBN to get on the store – Yikes! ISBN numbers are really expensive. The only official place to get a ISBN with your name as the publisher is ISBN.org. They cost $125. However if you search around you can purchase an ISBN from other places for much less. The only downside is that if someone looks up that ISBN it’s not going to list you (or your publishing company) as the publisher. This is not a big deal for the iBookstore.

2. The templates are very generic in iBooks Author - We found the templates to be incredibly boring. They look like textbooks. It seems like Apple isn’t ready for other kinds of publishing just yet. I think that this is going to change. I hope that apple opens this up to all kinds of publishing (like knitted patterns)!

3. Getting on the iBookstore is a process -  There’s a lot of paperwork that needs to get filled out, proof of identity, banking information, and then the book needs to be reviewed by Apple. None of it is hard, it’s just time consuming.  Press through it and you’ll be published in no time.

4. Users don’t understand the defaults, yet - We put the iBook in front of friends and family. What we found is that users don’t know how the books work. For example, you can pinch to close any chapter. That takes you back to the table of contents. Also books *can* but don’t have to be portait and landscape.

5. You have to design (re-design) your book for both orientation -  The iBookstore supports both landscape and portrait. However they’re different. The landscape view is for your beautiful, interactive, graphical iBook. The portrait view is for the simplified view. I think this is a great default, when users understand it.

6.  Videos help build excitement - Not everyone has an iPad.  It’s pretty quick and easy to shoot a video using anything from an SLR to your camera phone.  Creative commons licensed music is also abundant.  We shot the video at the top of this post in about 45 minutes and then I edited it down using iMovie in about 20 more.  It’s a good investment to show your users (especially when they don’t yet understand the behavior) how your book works.

Winter’s Howl Cowl by Caroline Moore is available now on the iBookstore

The underscore gives back the last value on the rails console. This is an incredibly useful:

=> #<EngineModel id: 347, name: "IO-360-B1F">
>> engine = _
=> #<EngineModel id: 347, name: "IO-360-B1F">
>> engine.name
=> "IO-360-B1F"
>> engine.name = "a new name"
=> "a new name"
>> engine.save
=> true

Check it out, we found an engine. Then saved that engine to a variable and then did some work on the variable. I’ve been using this trick for the last couple of weeks and now wonder how I got so far without it.