Hashes for select

In Ruby on Rails there’s a very easy way to create a select tag:

form.select("period", [["Month", 1], ["Year", 12]])

In my case I have the options in a hash, like:

periods = {
  1 => "Month",
  12 => "Year"
}

but when I did this:

form.select("period", periods)

I was surprised to find out that the keys of the hash are used as the content of the options, and the values as the keys, producing this code:

<select id="resource_period" name="resource[period]">
  <option value="Month">1</option>
  <option value="Year">12</option>
</select>

Definitely not what I wanted, so I wrote this method:

class ApplicationController < ActionController::Base
  helper_method :hash_for_select

  def hash_for_select(hash, sort_by = :value)
    sort_by = sort_by == :value ? 0 : 1
    options = hash.map { |k, v| [v, k] }.sort { |x, y| x[sort_by]  y[sort_by] }
  end

and now I can do

form.select("period", hash_for_select(periods))

if I want the options sorted by key value or

form.select("period", hash_for_select(periods, :key))

if I want them sorted by keys.

Redirecting on load

other-doorOf all the bad practices I see on the web this ranks as very bad and I believe it’s not mentioned enough. It’ll easily make it to my personal top 5.

I go to a web site, like example.com, and I immediately get redirected to an ugly URL beast, like example.com/news/today?date=2009-06-30&GUID=5584839592719193765662.Wha? Why? First, the site broke any chance I had of making a bookmark of it with just one click. I don’t want to bookmark yesterday’s news (look at the URL, it has a date), and what’s that GUID? Oh well, I go and make the bookmark, pointing to example.com, by hand, because I have no other way.

Even if it only redirected me to example.com/news/today it’d be pretty bad. That URL may not work tomorrow due to changing software. Or what can be even worse: the software and the content get revamped, the URLs changed and everything is cool again, and since the developers are smart people they leave old URLs working. So my bookmark works, but shows obsolete information.

With my crazy browsing habits (open a trillion tabs, fast, fast, faster) I go to a page, leave it loading, and when I go back and see a weird URL I end up wondering whether I accidentally clicked on something or something weird happened. I have to go back and check.

It gets even worse when the URL is rather obscure. My e-banking site has this issue. I go to the bank home page where I can find the e-banking link. I click it and it opens the e-banking page, which sells you the service and in a small corner has a link to the real e-banking application where you can log in and see the big red numbers. I’d say they have a deeper problem than redirecting. They see the bank as a company with its useless propaganda home page and e-banking as a product with its useless propaganda home page and then, the actual e-banking site, somewhere else. They should just have the log in on their home page, like any other on-line service. But I digress.

Back to redirecting. I click log in and it opens, in another window, a web site with a URL that is measured in meters. Long, ugly and scary. I never even thought of bookmarking that because I’m sure it won’t work the second time. So my bookmark is to the previous page. Just today, after a year of using it, I discovered that there’s a nice short well-formed URL for the log in page, something like: bank.com/ebanking/login which immediately redirects to the ugly one. Thanks to the amazing speeds of Switzerland internet connection and today’s browsers I never noticed.

If the bank had just been serving the content through that URL, they would have saved more time over a year than it took me to write this post. Literally. I can’t understand why they don’t do it properly. If they are passing session information, they should use session state on the server side and a cookie. If they have a modular structure where the app is located elsewhere, instead of redirecting you they should use a reverse proxy. It takes a day to configure Apache for such a thing if you don’t know what you are doing.

I’ve been using it for ages to serve Plone sites that are in a subdirectory in a Zope web server which runs in an alternate port, yet the front end is Apache and you are never redirected anywhere. You go to example.com which hits my Apache server and inside makes a request to zope.example.com:8080/example.com and serves you the result, you never leave example.com. Even if you go to the secure version, the SSL part is handled by Apache since Zope is not that good (or wasn’t) at it.

There are cases to redirect someone on a web site. When the content is no longer available or temporarily unavailable. When the user just submitted a form, you redirect if the form was successfully processed to another page that shows the result of the form (the record created or whatever). There are many reasons to do that but that’s for another post.

There’s no reason to redirect on load. Please, don’t do it.

Reviewed by Daniel Magliola. Thank you! Use Other Door picture by cobalt123.

Proper linking ettiquete

This has been mentioned thousands of times on the interwebs, but in case there’s at least one person reading this that didn’t know it, I’m explaining it again. Using hyperlinks in a piece of text doesn’t mean it has to stop being proper, readable English (or any other language). For example, imagine the phrase:

It was a nice movie, click here to read more about it.

Read it again. Now close your eyes and imagine someone reading it out loud. It doesn’t make any sense, does it?

Hyperlinks already carry the meaning that there’s more information behind them. No need to repeat it with “to read about it”. And they also carry the information about being clicked, so no need to say “click here”. And in some interfaces you don’t click, and I can think of already two cases:

  • People using the keyboard and only the keyboard to navigate. They are more than you think. I myself would be doing it much more if it wasn’t so hard on so many broken web sites.
  • People using a phone, like the iPhone. You don’t click, nothing clicks. It’s called tapping.

For computers “click here” doesn’t provide any proper meta-data. There are services that extract a lot of information about links. Google being one example. Let’s analyze what would happen to Google if you do it correctly, like:

It was a nice movie.

That was short, wasn’t it? Half the size and no-nonsense, but I digress. Google would index that link as a “nice movie” and that’s good because you are adding information to the web, you are expressing your opinion and when people search for “nice movie” they are more likely to find the movie you pointed to. Maybe you are the only one believing that’s a nice movie, but when lots of people link to it as a “nice movie”, Google will catch that.

Also, imagine that your page gets turned into plain text, or printed, or spoken, or whatever:

  • It was a nice movie, click here to read more about it.
  • It was a nice movie.

Which one makes more sense?

Now, we can take it a step further. Something else you can do to make your text more readable, more robust and nicer overall is to do more or less proper attribution. I’m not talking about academic proper attribution, I’m taking about simple things. I’ve recently found this sentence in the Stack Overflow article Advice for Computer Science College Students:

I’ve read an article from Joelonsoftware.com a few years agohttp://www.joelonsoftware.com/articles/CollegeAdvice.html

which I promptly edited, thanks to my karma earnings, to be:

I’ve read the article Advice for Computer Science College Students from Joel on Software a few years ago.

Aside from the proper period at the end of a sentence, do you see how and why my version is more readable, contains much more information (while being shorter on text on the screen) and can resist being turned into text, speech or braille? So, next time you write something, please, remember that even if you are using a computer, you are still writing a proper language.

Sometimes the links are so important that you want them to get to a text or spoken version. In that case, imagine how you would write it if you were speaking or writing with a pen on paper:

I really like Joel on Software, which you can read on http://joelonsoftware.com.

which you can then later enhance for the web:

I really like Joel on Software, which you can read on http://joelonsoftware.com.

Now there’s extra information in there. The URL is there three times, one in text, two in hyperlinks. But the text is not longer and it’s not harder to read (unless you pick up hyperlink colors badly) and it gives the user more places to link, machines that look for context information more to pick up from. It’s a win-win.

Reviewed by Daniel Magliola. Thank you!