Creating a Twitter Clone in Rails – Part 5

by Eric Berry 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

  • Thomas

    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

    • Anonymous

      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

        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.

        • Anonymous

          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_Libraries

          Good luck,

          -Conrad

          • Thomas

            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.

  • http://www.alivefrommaryhill.net Stephen Murdoch

    @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.

    • http://www.alivefrommaryhill.net Stephen Murdoch

      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…

  • Thomas

    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

  • http://www.alivefrommaryhill.net Stephen Murdoch

    @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

    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.

    • http://www.solidcoresolutions.com Eric Berry

      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 :D

  • firecall

    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.

  • http://www.teachmetocode.com Eric Berry

    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 :D

  • http://www.alivefrommaryhill.net Stephen Murdoch

    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

    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

    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

    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

    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

    Part 6 doesnt work :s great screencast!

    • http://www.solidcoresolutions.com Eric Berry

      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!

  • Dom

    Part 6 doesnt work :s great screencast!

  • http://www.teachmetocode.com Eric Berry

    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

    The 6 movie is here
    http://www.teachmetocode.com/screencasts/creating-a-twitter-clone-in-rails-part-6-of-6.m4v

    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.

  • Greg

    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.

  • Anonymous

    thanks for the link, but the page is not opening. Loved the screenshots, need more from the author

  • arzvi

    thanks for the link, but the page is not opening. Loved the screenshots, need more from the author

  • Pingback: Grabbing the Bird by the Horns « Moreover Technologies – Company Blog

Previous post:

Next post: