Category Archives: Development

Web pages with small fonts, 12px/0.9em at the very least please

So an interesting thing happened the other day. I was reading a popular site that deals with creating web content and I caught myself doing one of the tell-tale things that users do when the fonts on a web page are too small: they lean inward. Now, I know that I’m not exactly in my early 20s anymore and it is true that I do wear glasses almost all of the time now, but my eyesight really isn’t that bad. And I’ve read this site off and on for a while and I don’t remember having to have this lean-in problem before. Then I remembered one thing: I have a new laptop.

Yes, if you’ve read previous posts you know how I used to rave about my old 2008-edition MacBook Air. So light, so powerful, so fast, yada yada. And then I switched up to a 2010 edition at the end of last year. Bigger SSD, higher resolution, dual USB ports, yada yad—wait. Higher resolution? Yes, in fact I now have a 13″ display that has almost 128 dots per inch compared to the old 113 dots per inch. So how much of a difference does that make? Apparently a lot.

For comparison, let me put up this image:

Previously I had a 1280px-wide display that has about 11.26″ horizontal length. Now I have a 1440px display. That means those web sites with tiny fonts just got a heckuva lot tinier. I mean, you would think that 12% smaller might not be a great big deal, but I really do think it does.

I went around the web this morning looking at other examples of font sizing. It seems the smallest comfortable font size for me now is 12px high. The website which has the tiny fonts above works out to about 11px high. But if they just increased it a smidge …

We’re clearly into a time where LCD display technology has gotten so good that we now have displays *AT* (not “approaching”) print resolution. Case in point: Apple’s Retina Display technology gives us 300 ppi. A couple of years ago I had been looking at a Sony ultraportable that was at 220 ppi. We’ve reached the point where small definitely means small.

I don’t exactly know what the solution is here. We could ask browser manufacturers to set their default browser font sizes at a certain ppi. There are some web pages that depend on fonts being only a certain height. Maybe the new tablet era of computing with it’s pinch-zoom mitigates all of this because users just expand the text content until it looks comfortable.

In the meanwhile I’m recommending that anyone making web UIs not use a font smaller than 12px high or 0.90em high.

Rails forms automatically insert a hidden utf8 field? (a.k.a. what’s with the checkmark/snowman?)

Yes, apparently this is true according to a response on StackOverflow. Let’s say you have a simple form from a model:

  <%= form_for @some_model do |f| %>
   ...
  <% end %>

You might see the following output in the generated HTML:

  <div style="margin:0;padding:0;display:inline">
  <input name="utf8" type="hidden" value="&#x2713;" />
  ...other stuff...
  </div>

Apparently in order to force browsers to submit the form in UTF-8 encoding mode this UTF-8 value (✓) does the trick. If you peer into the code you can see inside the actionpack form_tag_helper.rb that this is called the “snowman_tag”. A little Googling reveals this post on http://railssnowman.info:

What’s with the _utf8/_e/_snowman tag in Rails 3?

The _utf8 input tag forces Internet Explorer to properly respect your form’s character encoding.

Rails uses the accept-charset attribute in your form element to let the server know that it should be able to deal with unicode characters (think of a user searching for café).

But it looks like old snowman value &#9731; (☃) has been since replaced with the simple check mark &#x2713; (✓). 🙂

Making your bash prompt Git-aware (a.k.a. the superprompt)

I recently started on a project where I’m doing some pair programming and someone yesterday brought up the Pivotal Git scripts that help modify your Git local.name via a single command: git-pair [person1] [person2]. Then it was the case that another person said that they learned a trick of modifying their shell prompt to show the current local.name so you’d be reminded who you were working with—so you wouldn’t accidentally give attribution to someone you’re not pairing with. This turns out to be really helpful if you’re a freelancer like me who hops around different projects.

Later a nice addition was to show the current branch you’ve checked out. This is critical for me because I never remember and I’ve more than once created a new branch and forgotten to check it out.

And … today I was talking to some more devs and the request came up: “it’d be nice to know if I have modified files in my repo.”

So, I present to you a bunch of commands to add to your .bash_profile that do all of this:

function current_uname {
    uname -a | cut -d' ' -f2 | sed -e 's/..*$//'
}

function current_git_user {
    git config --get user.name
}

function current_git_branch {
    git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* (.*)/; 1/'
}

function git_repo_has_modified_files {
    git status 2> /dev/null | sed -e 's/^#.*modified:.*$/*/' -e '/^#/d' -e '/^[^*]/d' | uniq
}

export PS1='$(current_uname) [$(current_git_user)$(current_git_branch)$(git_repo_has_modified_files)] A w > '
export PS2='  > '

Reinstalling an older Macbook Air via Remote Install Mac OS X

I have an older MacBook Air that I want to get back to its factory-fresh state. The trouble is that the Air doesn’t have a DVD drive and the older Airs came with a couple of DVDs. So, Remote Installing to the rescue. See the exact instructions on this older blog post: http://www.seqmedia.com/?p=103

After the long setup, wouldn’t it also be nice if you installed all the iLife software that came with the Mac too? Well, you can! You’ll need to:

  1. Create a test user with a short test password. (You MUST create a password.)
  2. Skip through the registration process just to get by the prompts.
  3. When you’re back at your desktop, use the Remote Disc to get back to your other computer and pop in the Applications Install DVD. Install all the apps.
  4. Now to erase that test account and bring back the fun startup video, thanks to MacWorld:
    1. Restart the computer.
    2. Hold down Command+S during boot to enter single-user mode.
    3. Set the mounted root disk back into write mode: mount -uw /

      Note: You might note that the instructions printed on the screen say you should fsck. You probably should. I haven’t and it has still worked fine.

    4. Remove the system configuration (leaving the iLife apps plist files alone): rm -rf /Library/Preferences/SystemConfiguration
    5. Remove your test user account: rm -rf /Users/TESTUSER
    6. Remove the usernames plist: rm /var/db/dslocal/nodes/Default/users/TESTUSER.plist
    7. Remove the setup info plist: rm /var/db/.AppleSetupDone
    8. Restart the system with a command: reboot

(If you don’t want to bother installing the iApps you can just Command+Q at the welcome screen. See Hivelogic’s article.)

flash[] vs. flash.now[]

I’m really used to putting error messages in the flash[] Hash and displaying that to the user in a big error box. Until recently my usual way of coding up the workflow was to have a page submitting to a specific action, e.g.

class PasswordController < ApplicationController
  def password
  end

  def password_submit
    ... validate here ...
  end
end

Here the user’s password form is shown on the password action, but the form action points to password_submit. The password_submit does the validation and sends the user back to password. Here password_submit was putting both success and error messages into the flash Hash. According to the Rails FlashHash documentat this is correct. Because I’m doing redirects from the password_submit to another action (“password”) the error and success messages get cleared out after being displayed.

However, in a more recent project I decided to do the validation right inside the password action itself, more like:

class PasswordController < ApplicationController
  def password
    if request.method == :post then
      ... validate here ...
    end
  end
end

What started happening is if the user makes and error and then successfully changes their password, the flash error message AND the success kept showing up! I scratched my head for a while and did some Googling. Turns out that there is a big difference between flash[] and flash.now[]. Because the FlashHash is only cleared out on the next action the error message was on the “next” action and the success was on the “current” action—it is possible to have both in there.

By changing things to flash.now[] everything is working fine.

SF Ruby presentation on Haml

So I recently presented an introduction to Haml. Here’s the slides if you’re interested (6 MB, .pptx):

haml_slide1.jpg haml_slide2.jpg

And the links…

Haml – Main page
http://haml-lang.com/

Haml – Tutorial
http://haml-lang.com/tutorial.html

Haml – Google Group
http://groups.google.com/group/haml

Haml – Performance
http://nex-3.com/posts/87-haml-benchmark-numbers-for-2-2

Hampton Catlin’s homepage:
http://www.hamptoncatlin.com

Hampton talks about Haml at RailsConf Europe 2006 (Explicit):
http://www.ror-exchange.com/railsconf-europe-2006

Nathan Weizenbaum
http://nex-3.com/

Nathan Weizenbaum and Chris Eppstein interviewed about Sass + Compass
http://thechangelog.com/post/254788034/episode-0-0-1-haml-sass-and-compass

Compass
http://wiki.github.com/chriseppstein/compass/

Rendera
http://rendera.heroku.com/

Haml + Sinatra
http://ruby.about.com/od/sinatra/ss/sinatra4.htm

Locking the Mac OS X dock

Ever accidentally drag an item off the dock? Ever forget what that was and now it’s killing you that you know you might be missing something important? You would think that you can lock your Dock so that things don’t accidentally get removed. It’s such a simple feature—even Windows has had it forever.

Thanks to a quick article on Brighthub, http://www.brighthub.com/computing/mac-platform/articles/43080.aspx, there’s a couple of commands you can type into Terminal to lock it. I took it a step further and just made them into a couple of aliases for my .bash_profile:

alias docklock='defaults write com.apple.dock contents-immutable -bool true;killall Dock'
alias dockunlock='defaults write com.apple.dock contents-immutable -bool false;killall Dock'

So, to lock your Dock now just open the Terminal application and type: docklock

To unlock, type instead: dockunlock

Simple!

Ticket tracking and SCM, even for a team of one

On one of my newer projects I’m a development and project management team of one. Still, I use a ticket tracking system like Redmine and Git for many reasons.

I like being able to enter a feature or a bug into the ticket tracker to make sure I get back to those issues later. I could use a spreadsheet, a notepad, or something like Remember The Milk but Redmine has the big advantage of integrating with SCM systems.

And I definitely use SCM all of the time. I’ve run into way too many cases where I’ve made a change I regret or I just need to group changes together. Something like Git works perfectly for this. And when I commit code it also reflects in Redmine what I’ve done, when I’ve done it.

Plus there’s a more important thing: what if my development team grows from one person to more than just me? If I’ve been using these systems all the time then adding a new code author or a project manager is really easy. I’m ready to scale!