Named Routes: Anchor

If you're using named routes and want to add an anchor to your automatically generated URL, there's a very simple way to do it:

products_path(:anchor => 'my_anchor')

It's that simple!


W

Textarea: Preserving Whitespace

A lot of the times when you let users post things using textareas, it becomes frustrating to lose whitespace when you display their posts (especially carriage returns).

Well, enter <pre>. This nifty little tag preserves any whitespace within the tags. However, there is one caveat. It preserves whitespace so well that it doesn't know how to word wrap. This is troublesome when your user continues to type in the textarea without hitting the carriage return. When displayed with the pre tags, the words are all on one long line.

Well, here's a nice little hack:

http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/


W

Comma Separated Numbers

I found a neat little function that will separate large numbers by thousands using a comma or any specified delimiter:

http://api.rubyonrails.org/classes/ActionView/Helpers/NumberHelper.html#M000997

Gotta love RoR... they simplify everything!


W

Time Ago

Ever wanted to show the user that something happened so many minutes/hours/days/etc ago? Apparently, RoR makes it super simple to do this. There is a method called:

time_ago_in_words

Simply include the time (from now) that you want to calculate - perhaps a created_at/updated_at field.

Easy!


W

Alternating Table Row Colours

When listing data out in a table, it's always nice to have alternating row colours. This makes it infinitely easier to scan the table and much more enjoyable.

RoR makes it really simple to alternate row colours. A cycle function is given to aid in this task, and it simply cycles between the values given. By using this, you can specify your alternating class names here.

If you have more than one table, remember to call the reset_cycle function to reset the cycle.

Easy!


W

Favicon

You know those websites that are able to have a little icon in the address bar? That's pretty cool huh? I thought so too, so I decided to add one.

Apparently, IE seems to have managed to screw it up... surprise surprise.

According to W3C, it's very simple to add one:

http://www.w3.org/2005/10/howto-favicon

Works like a charm in better browsers. However, in IE, they seem to mess everything up. Funny how IE is the one that first introduced this too! Anyways, to get around the IE problem, just create a favicon.ico in your root directory. This will definitely not look as nice as the PNG... but for compatibility, too bad! :P

IE is really screwing their users over... sigh...


W

CSS: z-index

I ran into this problem with stacking order. It seems pretty simple to me, but Internet Explorer has managed to screw it up... again! I don't blame them if IE6 has problems, but for goodness sakes, fix it in IE7!! But alas, that's not to be and I'm stuck here with some crappy options. Actually, I don't mind... my users will though.

Basically, I have a few divs, and they're going to overlap. With proper z-index, everything is fine. However, without it, I can't implement what I want to do. So in the end, it's the users who suffer... that is if they use IE. I ended up using conditional comments (awesome stuff!) to do what I want to do if the user is not on IE.

Apparently, they say that IE8 fixes this and that it will be completely standards compliant, but my question is when will that be released and when will all the users no longer be using anything earlier than IE8... it's definitely going to be a long wait...

Damn IE sucks!


W

Pluralize

Have you ever had to write some sort of if/else condition to display a sentence involving an object count? Something like 1 person, 2 people, etc.

Well, RoR has a nifty little method called pluralize. All you do is feed it the number and a string, and it will attempt to figure out exactly what you want.

For example:

pluralize(1, 'person') # '1 person'
pluralize(2, 'person') # '2 people'

I thought this was pretty neat and wanted to share with you guys. There are a lot of little methods tucked away in the RoR API, and I encourage you to look through them to help minimize your development time on mundane things like this. Enjoy!


W

Relatively Absolute Positioning

So I came across a bug in our layout that was driving me nuts. I was trying to lay a div ontop of another div, so I was using relative positioning. Seems reasonable. However, when using relative positioning, it leaves a white gap where the div used to be.

I finally came across this nice little CSS tutorial about positioning and I learned something new. Apparently, you can have an outer div with relative positioning, and have the inner div absolutely positioned inside: a relatively absolute positioned div! Amazing! Since absolute positioning removes the div from the flow completely, no white gap is left behind!

One problem in IE though (as usual), is that anything with relative positioning inside the absolute div is covered up (doesn't show). FF is perfectly fine though (go figure...). I got around this problem by using margins instead.

You may probably know this, but for those that didn't... enjoy!


W

attachment_fu - Controller and View

Upload Image - after all the hard work trying configuring the damn thing, this is where it pays dividends. To create an upload form, all we need are three lines:

<% form_for(:photo, @photo, :url => some_path,
:html => { :multipart => true }) do |f| %>

<%= f.file_field :uploaded_data %> <%= submit_tag "Upload" %>

<% end %>

make sure multipart is set to true, or else it won't work.
Over to the controller side, you just do what you normally do with other create actions

def create

@photo = Photo.new params[:photo]
if @photo.save ... yayaya

and the rest will be handled by attachment_fu

Listing Images - once again, three lines

<% for pic in @photo %>
<%= link_to image_tag(pic.public_filename(:thumb)), pic.public_filename %>
<% end %>

sticking in the :thumb will grab all the thumbnails, leaving it out will grab the bigger version

example:

photo.public_filename #=> /photo/2/file.jpg
photo.public_filename(:thumb) #=> /photo/2/file_thumb.jpg

Delete Image - it's just like any other objects

@photo = Photo.find(id)
@photo.destroy


J

IE 6 Hidden Inputs

There are often times when you need to use hidden inputs, whatever the reason is. As the name suggests, these are hidden inputs, and should NOT be displayed.

However, as usual, IE 6 decides to go against common sense and do something strange. In this case, IE 6 seems to reserve some space for hidden inputs. You end up with odd blank spaces here and there, depending where you put your hidden inputs.

It took me a while to figure out it was the hidden inputs (after pulling out my hair several times). I used a very simple hack to get rid of them afterwards:

position: absolute;
left: 9999px;

That zips the hidden inputs off the page and out of sight, even in IE 6!


W

IE 6 Minimum Height

IE is such a wonderful browser... *cough* Anyways, I found a slight display problem with divs in IE 6. Apparently, the div will only shrink to a certain height before it stops shrinking. From experimenting, I found the height to be around 20px.

Anything larger than 20px, IE 6 will display properly. However, anything below 20px, such as 15px, IE 6 will continue to display as 20px. Frustrating huh?

I found a hack to get around this, which is to set the div to:

overflow: hidden;

This will allow the div to shrink to any height, and hide the content inside the div that goes over the specified height.

Annoying.


W

12 Hour Time

RoR comes with many fantastic helpers for the view. However, there is one helper that is definitely lacking some features. Perhaps it is purposely missing features because of its complexity and range of customization. What I'm referring to is the DateHelper.

Firstly, when selecting a date, having selects as inputs just outright sucks! It's very hard for the user to visualize such a layout. We are used to seeing calendars. In what real world situation do you ever look at dates in a select box format... none that I can think of. But calendars, that's another story. Calendars are so normal to users that without them, we're lost! Unfortunately, RoR does not come prepackaged with a calendar format for dates. But luckily, RoR is extendable through plugins! We're currently testing out which one works best for us, and we'll let you know when we've come to a decision.

The second problem with the prepackaged helper is the fact that when selecting times, we're forced to take the inputs based on a 24 hour clock... EWWW!!! No body works on a 24 hour clock (except if you're in the military...) The usual person just isn't used to seeing a 24 hour clock. That's where plugins come in again!

I found a plugin that worked very well and required very little modifications:

12_hour_time

This plugin allows you to add an option to your current time selects to make them based on a 12 hour clock:

:twelve_hour => true

The rest (frontend and backend) are automatically handled for you!

Brilliant!


W

Lighbox modification

A few posts ago, I mentioned modal pop-ups and using the Lightbox Gone Wild implementation. Everything was going well, until I tested it out in IE6 for compatibility.

Well... to no surprise, there was a slight problem. Every so often when leaving the page, a JavaScript error would appear, complaining that some 'handler' was null or not an object. However, in Firefox, I was not having any problems.

I finally narrowed it down to a line with this call:

Event.observe(window, 'unload', Event.unloadCache, false);

I quickly checked the Prototype API and found out that this call was no longer necessary in version 1.6. I removed this line, and everything is now working fine once again (even on IE6!)


W

Modal Pop-ups

Ever seen those really neat pages where you click on a link, and instead of an actual pop-up in another window, you get a "pop-up" that sits on top of your existing page. And even better, it's modal and anything not in the "pop-up" becomes darker.

Well, I wanted to implement something like that. My first initial thought was to create a new div, center it, make it transparent (slightly), then lay another div on top of this. The first div would block everything underneath it, while the second div would display what I needed. I saw two immediate problems. The first was that IE 6 doesn't support transparent png files very well (of course... considering IE 6 doesn't support many things very well), and the second was that IE 6 (again!) doesn't honour the z-index on selects. Wow.... how did IE 6 ever get so popular... (M$). Anyways... long story short, it requires a number of hacks to get everything working it seems.

So... instead of tackling the problem myself, I naturally assumed that I wasn't the only one with this problem. Lo and behold, I found a very good implementation for this already that fits hand-in-hand with RoR:

Lightbox Gone Wild!

This wonderfully written code includes only 2 files. A javascript file and a CSS file. It is, however, based on Prototype and Script.aculo.us, which RoR already automatically includes in it's javascript folder. Calling it is even simpler. You create a link to the HTML file you want to have in your "pop-up" and label it with the class as "lbOn". That's it! You get the whole package deal with this simple modification! Don't believe me? Try it!

If you want it to call a controller to have dynamic information displayed (unlike the examples given on the website), instead of the link URL being something like "text.html", just change it to the path of a controller action. What will happen is an AJAX call to that controller action, whereby you can treat it as any other AJAX call, such as when you use link_to_remote or remote_form_for.

Simple as 1-2-3!


W

ActiveForm

Suppose you're doing a search form. This search form can be using fields from many different ActiveRecord models and probably doesn't correspond to any table in your database.

What's nice about being an ActiveRecord model is that in the view, you can do wonderful things like a form_for helper or error_messages_for helper. Furthermore, ActiveRecord provides you a collection of wonderful validation functions.

However, without ActiveRecord, your solution would be to do it all by hand. How very sad T.T

This is where ActiveForm is a time saver! Basically, you create an ActiveForm model exactly the way you would an ActiveRecord model. It even supports validation! Furthermore, it is supported in the view, so all those helpers will still work! Just wonderful!

You can grab it as a plugin from here:

http://www.realityforge.org/svn/code/active-form/trunk

Enjoy!


W

Radio Buttons

RoR is lovely when it comes to supplying frontend helpers. For example, if you want to create a form for a particular object, it's very simple:

<% form_for :user, :url => new_user_path do |f| %>
...
<% end %>

Inside "...", you can add all your fields, such as:

First name: <%= f.text_field :first_name %>
Last name: <%= f.text_field :last_name %>
...
<%= submit_tag 'Update' %>

This creates a form using the user object. It fills in the first and last names using the data found in the user object. If the user object is new, then the text fields are empty. If the user object is from database, then that information is displayed. Pressing the submit button submits the form to the specified url. It's very simple! There are helpers do to all sorts of things, such as text areas, selects, date selects, time selects, checkboxes, etc. Check the API for more helpers.

However, our topic for today is actually radio buttons. Many times, we want to use radio buttons to select some sort of true/false field. It is possible to do this with checkboxes, andRoR is wonderful with this. However, sometimes, 2 radio buttons are better. This is where I ran into some problems. Reading the API, I came up with 2 radio buttons as follows:

<%= f.radio_button :is_good, true %>
<%= f.radio_button :is_good, false %>

I thought that this would generate two radio buttons with values true/false respectively. However, it didn't! The first generated one that had a value of "true" and was checked. But the second generated a radio button with no value! I then changed the given values from booleans to strings:

<%= f.radio_button :is_good, 'true' %>
<%= f.radio_button :is_good, 'false' %>

Everything worked fine now, but given a model that held data, neither radio buttons were checked! This is due to the fact that the model holds boolean values, whereas the radio buttons use string literals. Saving was fine because we were using prepared statements, which automatically convert the string literals to boolean. I was completely stumped on the displaying of data though. I came up with a quick hack using virtual attributes, but it's ugly:

def is_good_temp=(is_good_temp)
@is_good_temp = is_good_temp
if @is_good_temp == 'true'
self.is_good = true
else
self.is_good = false
end
end

def is_good_temp
@is_good_temp.nil? ? 'true' : @is_good_temp
end

def is_good
@is_good.nil? ? true : @is_good
end

def is_good=(is_good)
@is_good = is_good
end

and changed the radio buttons to:

<%= f.radio_button :is_good_temp, 'true' %>
<%= f.radio_button :is_good_temp, 'false' %>

So basically what I did was create a virtual attribute to deal with the radio buttons using string literals, and have that convert the string literals to booleans and assign it to the actual variable. To be noted is that there is no nice function object#to_b to convert a string literal to boolean. There are nice functions like object#to_s and object#to_i, but not to boolean.

This is one disappointment from RoR. I have searched around and could find no solution to this. Perhaps I am doing this wrong, but for now, it works.

Any ideas would be appreciated, and I'll update if I find a better solution.


W

Another Introduction

Hello, this is J, I'm W's imaginary friend, hidden within the right side of his brain which he seldom uses. That's why I don't speak very often :) Currently my main focus is on the front-end of the website which includes graphic and user interface designs, generating CSS and RHTML files.

For my designs, I try to follow the principle of parsimony (less is better) It is my goal to keep everything as simple and direct as possible, eliminating any unnecessary feature.

Based on past observations, a complex design often leads to a lot of confusion (doesn't matter how impressive it looks). Moreover, the main purpose of UI is not to impress but connect users with business logics behind the scene. (the ugly stuff) Hence the more simple and direct the design, the easier it'll be to understand, and the more effective it becomes.

Enough words said, I think it's time for me to start doodling, I will keep you all updated with my work, so stay tuned!

J

Views

Finally... Views! RoR has done many neat things on the frontend to make development life much easier. There are lots of nice methods that are provided so that you don't have to write pure HTML code. These methods can be found in the API.

Your views also have access to variables found in the controller. As RoR works a lot on implicitness, the view corresponds to the controller action with the same name. For example, if you have edit.rhtml, then the corresponding controller action is named edit. Any variables using @var is accessible in the view. This allows you to separate out all the logic to the controller, and the view is truly used only for displaying purposes! Awesome!

Another wonderful thing about RoR Views, is that there are a bunch of helpers. What do I mean by this? For instance, if you have an object, say @user representing a User model, which usually has a profile, the view can use helpers that automatically link up a form with your @user object. A nice little manual describes this:

http://railsmanual.com/module/ActionView::Helpers::FormHelper/form_for

I've noticed that this makes development a lot more efficient! Just wonderful!

W