Creating a Twitter Clone in Rails – Part 5

by Charles Max Wood on November 14, 2009

The saga continues. Here we learn how to add the friends list to your application and we use AJAX to add/remove friends.
Download 251.4
Download (iphone & ipod) 111.4

Tagged as: jquery, rails, ruby, twitter

{ 13 comments }

Thomas November 14, 2009 at 10:56 am: Does anyone know of a tool similar to the one used in the screencast that measures the dimensions in pixels.

Also, my applications :defaults in the javascript_include_tag does not include jquery. How do I set it up? I am on a windows machine and I'd like to get it on my server too.

Thank you
Stephen Murdoch November 14, 2009 at 1:38 pm: @Thomas – you need to install jrails for that.

just do:

script/plugin install git://github.com/aaronchi/jrails.git

that's all you have to do. javascript_include_tag :defaults now adds the jquery files to your app instead of the prototype and scriptaculous libraries.

NB – you might need to put a '.' (period) before the script/plugin install line if you are on mac or whatever…

another nice screencast – I'm waiting eagerly for the last one as I REALLY want to know how you manage to color the side column and make it equal in height to the left one.
firecall November 14, 2009 at 9:53 pm: Thanks for the video. But you should really at least make a bit of an effort to check the usage rights for images you use.
Eric Berry November 15, 2009 at 2:02 am: You're right. I guess I get a little careless when screencasting. I agree that usage rights should be checked. I'll make sure I clarify that next time. I was just throwing it together
Stephen Murdoch November 16, 2009 at 6:15 pm: After reading their code, I've noticed that Twitter actually use a table for creating the equal height columns.

Just in-case anyone else was wondering…
conradwt November 17, 2009 at 6:38 am: If you're using a Mac, you can simply do the following:

Command-Shift-4

You'll need hit the 'esc' key to not capture the selection into a PNG file.

Next, if you're working from the git repository, it should work without
any issues. Also, is Javascript enabled within your browser? If all else
fails, then you can try :all option to get things going.

Good luck,

-Conrad
Thomas November 17, 2009 at 7:01 am: I am using Windows 7 Ultimate. There is a snipping tool that seems to be similar to the one used in the screen cast, but it doesn't show the measurements like the one on the mac.

To use both prototype and jQuery is there a certain order I should include them?

edit: i figured it out. I have to separate the files and include my file with prototype functions in one file after prototype.js and a js file with my jquery functions in another file after jquery.js.
conradwt November 17, 2009 at 9:00 am: If you're using Firefox, you can use something like MeasureIt plugin if you're looking to get in browser element dimensions.

If you're wanting to work with both jQuery and Prototype, then I would
recommend taking a look at the following:

http://docs.jquery.com/Using_jQuery_with_Other_...

Good luck,

-Conrad
Thomas November 17, 2009 at 9:07 am: Thank you, the MeasureIt plugin is exactly what I was looking for.

I did look at that website and followed the instructions, but it didn't tell me to keep jQuery stuff in one file and prototype functions in another and include them directly after the given library like I finally figured out.

Thanks for your help.
Dom January 20, 2010 at 6:26 pm: Part 6 doesnt work :s great screencast!
Eric Berry January 20, 2010 at 6:54 pm: I double checked the rights on this screencast, but it should work. Does anyone else have problems viewing this? You can also download the screencasts directly if you prefer. Thanks for the heads up!
Greg February 8, 2010 at 9:21 pm: The 6 movie is here
http://www.teachmetocode.com/screencasts/creati...

Great job, This was a great project to learn the fundimentals of rails

on the git the scr did not work the first time friends_of.count bombed the the include/_side_contents.html.erb
replaced with friends_of.length and page worked out of the box.
arzvi April 12, 2010 at 12:38 pm: thanks for the link, but the page is not opening. Loved the screenshots, need more from the author