#265 Rails 3.1 Overview
This is the first episode in a series covering Rails 3.1. Here I show how to install the beta and show some of the new features.
- Download:
- mp4Full Size H.264 Video (33 MB)
- m4vSmaller H.264 Video (16.4 MB)
- webmFull Size VP8 Video (20.1 MB)
- ogvFull Size Theora Video (42 MB)
whoa, the new design, and the new version of Rails. cool!
Yikes! Ryan I am a huge fan of RailsCasts, but I have to say the old design was SO much cleaner and beautiful. From the comments it looks like other people like the new design - I am really surprised. The new logo is just....wow.
I think the new design is superior is terms of usability, navigation and a number of other ways.
On the purely aesthetic and artistic level, it's poorer than the previous one and could be so much better.
What would be needed is to keep the same organization and structure but have a pure designer changing the overall look, logo, etc.
BTW I'm also a huge fan of Ryan and his Railscasts so please take it as a constructive criticism.
Thanks for the feedback guys. For the logo I went with an arcade style design to give it a techno and fun feel. I realize it's not everyone's kind of style but I encourage you to give it some time and it may grow on you.
I'm open to other design ideas throughout the site, so if you have specific suggestions on how the design can be improved please let me know.
Hi ryan, it would be nice if you set focus on the search input, on the main page.
no please don't auto focus on input boxes - for people who use the backspace/delete key to 'go back' this is a killer. I've got nothing against auto focus to a text box for a signup page or login page. maybe a short cut key alt+s or something for the search box?
the site does look great!
@house9 if you like this shortcut, you can always try to use alt + left or alt + right, it should works on most browsers, anyway focus could be alt+s or just "s" like on the github
Nice update, although to save you bandwidth and client load time, the AJAX loading could be cached upon first load.
Example: If you click the 'Comments' tab, then 'Similar Videos', then back to 'Comments', it sends a second AJAX call for the comments view.
Also, the Profile pages have bugged headings.
Ryan - first 2 layouts don't work at all of for me. divs are layered on top of each other, and it's impossible to use.
Also everything is aligned to the left ( but according to your video it should be centered). Doesn't matter how I resize my browser.
Here are screenshots of how it looks on my screen:
Skewed Layout 1
Skewed Layout 2
Skewed Layout 3
I'm using FireFox 4 on Windows XP sp3, on a 23 in monitor using 1980 x 1080 resolution.
Other than that I like new design - it's even more convenient than before.
EDIT:
Everything looks fine in latest Chrome & Safari. IE 8 seems to be ok too.
Beautiful looking site, Ryan. Nice job :) Content awesome as usual.
Great one!! For one second thought that I was at the wrong place! I Like the new design but will miss the old.
The new video format is great on my iPad!
Love the new design. Keep up the great work. Also, I see "Edit", "Hide", and "Destroy" links on Carlos' comment. Not sure if that was suppose to happen.
That should be fixed now. Ryan pushed the fix for it, and seeing as those buttons for me are gone now, he must have deployed the fix too.
Thanks. They have disappeared for me as well.
Greate new interface!
I think the video area can be smaller and get larger after I click to play! :)
And want to know how you encode the video?
Thanks for the feedback, I am considering adding this feature. For encoding I used a combination of HandBrake, ffmpeg, and ffmpeg2theora. I plan to script my workflow and put it on GitHub soon.
I did not 'Show Notes', 'Comments', 'Similar Episodes' tabs to do a full page reload. The page reload obviously stop and looses your place of the video that was playing.
It uses ajax if your browser supports the new Javascript History APIs, that way the URL changes to match in the most beautiful and semantically sensible possible way, instead of using a hash (I'm now at '?view=comments', not '#comments').
Learn more about this in Episode 246 and this excellent blogpost from a front-end engineer at Twitter.
And get thee to a modern browser!
Thanks for the feedback, I'll work on fixing this problem soon.
Fantastic work Ryan! Been loving your Railscasts since 2008
When I saw your tweet this morning I knew there was a redesign coming! Awesome job!
Nice redesign, Ryan! Thanks for taking a dive into the latest build. I guess now is a good time to start playing around with Coffeescript and SASS.
Loving the new site Ryan, great job. And 3.1 looks awesome, I'm so glad Sass has been added but now I need to go learn CoffeeScript.
Just a note, you may want to move your KeyCastr more to the right. As of now, it's just over from being centered.
Good point. I had forgotten to move it since switching to the new resolution. I'll try to remember!
Interface looks very cool!!!.
I started my journey with Rails 3.1.
Another excellent cast. Can't wait for the final 3.1 release!
Why don't you use the ProjectPlus plugin? I read Missing Drawer is currently discontinued.
I didn't realize that ProjectPlus was considered more up to date. I didn't see a GitHub repo for it and assumed it was equally dead. Hmm.
Love the new look Ryan! Very clean and gives me a tron feel to the logo a little bit. I'd recommend changing the "destroy" button's text to "delete" in comments as it just seems a bit more semantically acceptable in the interwebz.
Also super excited about Rails 3.1 now. I was hesitant about the inclusion of coffee script but I'm starting to see the light of CS after digging into it deeper. I prefer sass over scss so hopefully there is a switch for it. Also glad they added jQuery as the default.
Rails 3.1 is shaping up to be awesome. Thanks for the overview.
Good point about destroy/delete. I get caught up in the destroy convention in the Rails world and forget it's not standard everywhere.
Nicely done! I really like the new sublime player and the new view styles.... also nice to have the search on all pages now :)
And as usual, a great screen cast too!
Nice layout! Rails 3.1 rocks!
Great job! Thanks for this episode!
Great new Design. Only, if I'm honest, I liked the first intro, that def railscast typing, best :)
That one will always have a special place in my heart too. :)
Amazing episode, maybe someone like me had a:
Could not find a JavaScript runtime. (error)
Doing some google, i found the solution at:
http://tinyurl.com/443eqjk
What it work for me in Ubuntu 11.04 was installing nodejs:
sudo apt-get install nodejs
Thank you Ryan for this amazing episode and the new site rocks!
Interesting. I didn't know nodejs was required on Ubuntu but I guess it needs something to compile CoffeeScript. Thanks for reporting this.
Nice layout!! Great episode as usual.
Argh ... new layout ... changes ... must ... adapt ...
Seriously, gz on the redesign!
The logo and intro music remind me somehow of retro style car racing games. Something like "Racing on Rails with Ryan".
Like the new design and I am very much looking forward to rails 3.1 as well as your episodes to let us know what it can do!
I also noticed that the ogv version shows a play duration of 1:37:58 (vlc on ubuntu 64). The mp4 version displays the correct duration. Otherwise the video runs fine.
Just my box or a general strangeness?
Really looking forward to more of rails 3.1!
Hmm, that is strange. I used pretty much the default settings of
ffmpeg2theora
to make the ogv format. Maybe it doesn't like the variable frame rate movie it is given to start off with. Time to do some testing.hi ryan if you click the rely link twice the form shows up twice. could this be fixed
Great job, Ryan. The best just got even better.
Haha, glad to see the code formatting is working. Thanks! :)
Brilliant! Bravo!
I really love how they handle roles in Rails 3.1. I can think of many times where this would have been useful.
And thanks for posting the changelog!
I like the new design, but the new HTML5 player made my 2011 macbook pro 13" sweat.
it is really CPU intensive. Can we still access the low quality video ?
Hmm, the H.264 video should be passed to the GPU in recent hardware. Are you using FireFox maybe? You can access a low-res version by clicking the
m4v
download link or subscribe to the iPod version of the feed on iTunes.I'm using the latest stable chrome.
it also happens with chrome angry birds btw
I think I found a bug.
1. click on comments
2. click back in the browser
3. click forward
Instead of the page I see some javascript.
Same here, I had a similar problem with my AJAX-heavy Rails app. For some reason it doesn't think it's an XHR request, prrretty sure it has something to do with the Javascript History pushstate, as it doesn't appear to happen in browsers not supporting it, Opera for example
Awesome stuff Ryan! Love the ease of including subdomains in 3.1!
Nice I'm really exited to see the next rails 3.1 new feat.
Change for migration look awesome.
the new design is cool to ( a centred culum will great for my big screen
#episode margin: auto
:p
thank's for your great job.
Done! Thanks for the suggestion.
Hi Ryan, thought it about time I posted a comment.
Thank you for the hard work on Railscasts over the years they have been an invaluable source of information for me.
I'm liking the new site and it's nice to see that the new github login authorisation integration is going to stop all that horrible spam. Only one minor aesthetic suggestion to make and that is the link from the Railscast index page to the specific railscast implies that you are going to watch the video. On first visit that threw me a little.
I also want to say a huge thank you for the change logs for 3.1 - A massive help and exactly what the Rails community needs. I'm going to add a link to those to my signature on the Rails Forum.
At last I see that there is view inheritance in Rails 3.1, something I've been desperate to have for a couple of years now and Rails seems to be finally turning into a much friendlier and consistent environment to work with.. Big hats off to the Rails development teams :)
Thanks for a superb job on this cast, the new site and the change logs.
James
Thanks for the feedback James. Others have mentioned this as well. I plan to change the Watch Episode button so it starts playing the episode immediately. Let me know if you have any other suggestions.
Well, that makes sense but if you do that you should make a more obvious/additional link to this area. The title link isn't that obvious. Maybe place a second button to the right of the watch button to get to the show notes, comments etc... ?
On second thoughts, make the button to this area the first button and the watch button the second button. I think new visitors might take a long time to find this area if it were the other way round.
Awesome episode, really excited about these changes, especially the asset stuff. I love the idea of CoffeeScript and Sass included right in there! Brilliant work from the Rails team!
AMAZING WORK!
Congratulations for the new Railscasts -and for the Rails 3.1 beta release.
And am just wondring, should I convert to
ruby 1.9.2
instead ofree
for the production environment? what about performance, memory, cpu usage?Thanks Ryan and All!
I haven't used
ree
much so I'm not certain how the performance compares with Ruby 1.9.2. I've been very happy with 1.9.2 though.Great Design and great episode - love both.
One suggestion to improve usability:
when the user clicks on the video to start playing, you could scroll the page so that the video fits into the users vieport
Well job, very good episode. I am looking forward to see more Rails 3.1 episodes, people really need it.
but the bad thing is that I'm "Hubert ??picki" now :/
Hmm, not sure what's up with the name problem. Sorry about that. I'll look into it.
Great overview of Rails 3.1!
Would prefer Flash being the default and HTML5 video being the fallback for playback though. Fullscreen is kind of crippled in HTML5 (possible with Chromes fullscreen mode activated but noticed that screen dimming and screensaver will still activate).
You can easily switch to the flash version of SublimeVideo with a right-click on the video more info here
Hmm I'm not noticing this on Chrome 11 OSX?
Ryan, thanks for a highest quality screencasts I have ever seen.
Great job on redesign, I will miss the old intro soundtrack though :)
Beautiful looking site, Ryan. Nice job :)
I like the new intro!
The design looks better, and playing the video from the browser is nice.
Just a criticism: I don't like the tabs for comments and show notes.
Sometimes I'd like to see the show notes while I'm writing a comment (maybe I'm commenting something about them). Now, I lose the contents of my comment if I click the "show notes" tab.
Another thing I use a lot is using the browser-search to look for a word in both the comments and the show notes. Now it doesn't work.
Looking forward for more Rails 3.1 episodes. Thanks!
Thanks for the feedback Javi. In the past there were complaints about the episode page being too heavy because there were so many comments. Once I get the comments cleaned up I will consider bringing them back to the main episode page.
Wow!! great work ryan!
this new design is awesome!
great work!
Everything is Nice Ryan!
Thanks :)
Wow! Rails 3.1 a huge step forward for Rails. Thanks for starting this.
Awesome new look! Looking forward to the next rails, too!
Thanks for another informative screencast and for the new design. I watch your screencasts on my iPad it works great.
Great episode!
Thanks again!
Very impressive Ryan. Haven't watched the episode yet, but I'm sure it's great like all the rest. Thank you very much for keeping up with this every week. The new design looks really nice.
By the way, when facebook comes out with a new design, everyone hates it and complains, when you come out with one, I see nothing but praise. Thanks man!
Just watched, very excited to upgrade.
@Ryan this is a flow layout for the site? an episode explaining how to do this kind of web design using sass for example could be really useful
@Ryan thanks for you amazing screencasts. I have some questions related to Rails 3.1:
1) Is the 'images' folder in rails 3.1 still in the 'public' folder or did this also change?
2) How can i convert my rails 3.0 apps to a rails 3.1 app? Do i need to do it manually (if yes, how?) or is there maybe an automatic conversation tool like we had for rails 2.x to 3.x?
Ryan, love the casts. You are a stellar teacher.
Hadis, I'm a bit confused about this point as well. I can see that an images folder is generated in the assets folder, from which I inferred was now the default directory for images, but image_tag helpers don't seem to connect properly, though when I substitute image_path, the directory structure seems to work. It's a bit odd. Even more strange is the fact that when images are routed through css (or scss) files, they do seem to default to the 'assets/images' folder. Temporarily, I've fixed it by appending the entire path starting from root, but it is very un-rubylike and sorta annoying.
you can also manually create an images folder in the public folder (which i've tried) but again, that seems to defeat the point.
oh and, Ryan, like the new design, but i just realized that my newer comments appear above my older ones when i post to a comment twice which may be sort of confusing. may be worth looking into?
Thanks for reporting this. I'll look into fixing this problem.
it's sort of a fascinating bug, actually. because it only seems to happen if you comment twice in a row, in which case, the second comment appears above the first, but when looking later, it seems that my later comments appear below my initial one, so it may be a javascript thing.
The 'images' folder is in the
/app/assets
directory. One thing to note though is that when Sprockets compiles, everything is then in a flat directory. From your stylesheets, you just need to call theurl('image.jpg')
and noturl('../images/image.jpg')
. If you have subdirectories in your images folder, you would dourl('subdirectory/image.jpg')
instead ofurl('../images/subdirectory/image.jpg')
.Hope this helps anyone who is confused why their images aren't showing.
i appreciate the reply but my problems haven't been that i have been unable to access images from css(or scss) files, but rather, using image_tag helpers in my views. for some reason, the image tag helpers don't seem to function properly on the beta apps i've been playing around with. but that could be because i am running off of windows. i have no idea why this is the case, to be honest.
Fantastic site and episode! it's a pity that dreamhost doesn't support ruby 1.9.2 & c.
i suggest a topic for an episode handlebars-rails. a cool way to have html partials which work server and client side
I am wondering how Compass framework will stack up with the new SASS.
The most handy thing about compass I use now is:
compass .
which compiles all the SCSS files and places them under
public/stylesheets
Simple.
Tell Compass config file where your assets are, after copying your
scss
files toapp/assets/stylesheets
I must say, as much as I love the new design, I think I'm going to miss the old one :(
Anyway, I can't wait for Rails 3.1, and it looks like it might come out just in time for my next project!
Yeah the old look kind of grows on you. This new one will be much more engaging though and helpful. So many new formats to download the videos in, plus this excellent comment thread for helping one another without getting confused as to who is replying to who.
Very excited to try it out. Thanks for the great episode!
Thanks for compiling all the changelog info into one comprehensive list -- very helpful!
As for the new design:
I'll miss the old intro / music :) -- people already
associate it with "RailsCasts" ... I wouldn't change that.
Everything is easily accessible -- great job!
Could you add the category tags for each episode into the "snippet" overview? Perhaps to the right of the "Watch Episode" button?
Thanks for the great screencast as usual, Ryan!
One question about 3.1, does anybody know how the new asset directory structure and workflow operates in a read-only environment like Heroku? I'm currently using jammit and jammit-s3 to package and minify all my assets and send them to S3 on deploy. Is there a better solution with 3.1?
great new site Ryan
Yeah! design is good and all works pretty seems like a mantra (which is ok) but... The old one was much clearer! This new brand one looks like a huge-machine which may gobble you and all your code... :) But still thank you for your work. We rally appreciate that!
hi Rayn the rvm you mentioned first for my windows command promt does not work for rails installer on windows. Checked your new railscast source code to see how you did your tree comment system via ajax and tried mine but my "link_to :remote => true" does not work via ajax and im using jquery-rails. pls any hint would be great
Great rails cast!
Wanted to try it out for the deep nesting, but ran into some trouble with a lack of a JavaScript runtime (ExecJS::RuntimeError). Any recommendations on a runtime for Ubuntu Linux?
I figured it out. Using Ubuntu 11.04, do the following:
Install scons:
sudo apt-get install scons
Add mustang to your Gemfile:
gem 'mustang'
Run bundle.
Since Rails 3.1 comes with CoffeeScript installed we get the gem ExecJs Execj that "lets you run JavaScript code from Ruby" but you need to have a Javascript Runtime installed. ExecJs chooses the best runtime that we have.
You can install any of these runtimes:
I recommend to install TheRubyRacer or Johnson because are easy to install, You can install them with gems.
I'm having the same problem as @gaaady where you make an AJAX call (click on Comments), then hit browsers' back then hit forward (or vice versa), it just shows the JS. I have the exact same problem with my AJAX-heavy site, and I'm clueless, it can't differ between XHR and HTTP requests. Doesn't appear to happen in browsers that don't support history pushstate
So if you do find a fix for this.. it would be awesome to put this in a railscast or a gist! Thanks for all you do Ryan!
I was wondering: to load all the "controller specific" javascripts in the app.js file is really a good idea? I mean, if you have a large application you'll be probably overloading your page with useless traversing, events or conditionals to check wether a script must be executed on this page. I think this is a high price to pay, don't you? You can cache JS files, but you can't cache the execution.
Usually I keep all my libs and global scripts in the app.js file, and if I need any extra JS for a specific request I load a custom file containing just the action's JS. This last file is usually really small, simple and as a side-effect my code gets less prone to conflicts because this script is somewhat isolated from the rest of the application.
I think a "per action" js loading approach would be welcome!
Completely agree with this, I hope there is a supported way to not have to load a single large file.
I am really unhappy with coffee script. At least they left the opportunity to write JavaScript manually as is.
Love the new design!
A couple of tweaks to the show notes. Lemme preface this with I'm on rvm 1.6.9 and ruby 1.9.2-p180.
The first show note command makes use of an "undocumented feature" of rvm by switching to the gemset after it gets created. It might be better to get into the habit of using the documented way, with the "use" command:
Next, I was getting rails-3.0.7.rc2 instead of rails-3.1.0.beta1 (can anyone explain why?). I tried explicitly asking for the 3.1.0.beta1 version with the -v option but that got me 3.0.0.beta2. However, I fixed that by updating the gems with the --pre option:
Of course, this is overkill. Not sure why that worked but the
gem install rails --pre
didn't.Excellent work on your new site's look and feel, Ryan.
Nice job with the new design!
Not to sound picky but, any plans to have mkv format as well?
For anyone reading this thread controller inheritance in Rails 3.0.3 has totally stuffed OO development principles for controllers.
I've raised a ticket here https://rails.lighthouseapp.com/projects/8994-ruby-on-rails/tickets/6783-rails-303-controller-inheritance-is-broken.
I'm checking out 3.1 to see if this is still an issue and I'll post back here if it is.
Please ignore the above! I had some file corruption causing this
I get the following error after I've set up the rails pre RVM, installed rails --pre and then try to run rails / rails -v:
If I do ruby -v it outputs ruby 1.9.2p180, but there looks like there is a linking error or something, any ideas?
Are these new roles going to phase out CanCan?
I think, that cancan affords a more convenient way to describe roles.
Great design, Ryan. I also like the Github authentication. Is that new too?
So all assets get packaged together and sent in one file? I really hope that I didn't understand that correctly.
Let's say they all pages share the jQuery library, linked directly from Google. Normally the jQuery library would be cached and not downloaded on each page. In fact, if downloaded from Google for another site, it wouldn't be pulled for my site at all. And for any one page, only the JS necessary for that page would be downloaded (never all of it at once). Plus with separate asset files, aren't they downloaded in parallel? And if I update JS on one page, only that updated JS would get downloaded when viewing that page in Rails 3.0, but in 3.1 it seems like ALL of my JS gets pulled down again when any one JS file gets updated.
You can use Google's jQuery like this.
I'm sure there will be even easier ways popping up soon.
Playing around with Rails 3.1.rc1 and it seems as though identity_map has been removed?!? Can't seem to play around with it as ryan does in the beta1 railscast...even after adding
config.active_record.identity_map = true
toapplication.rb
. Maybe I can jog it loose if I keep playing...It appears rails --pre is broken at the moment. If you get an error along the lines of
Try this
See this stackoverflow question for more details:
Or
It appears rails --pre is broken at the moment. If you get an error along the lines of
Try this
See this stackoverflow question for more details:
;-)
Does anyone know how Ryan gets SQL highlighting in the rails console? I have Wirble, but I only have that colorizing returned values (so if I do
some_method.to_sql
, I see the highlighting, but not when I do something likeModel.find_all
and Rails 3.1 shows the actual SQL right there in the console).Anyone know the .irbrc trick here? Muchas gracias!
Awesome as usual! Thx. Have you tried deploying your app in production mode under RC4 ? Everything worked exactly the same for me under development but when I switched to production I got this error with web brick:
Processing by ProjectsController#index as HTML
Rendered projects/index.html.erb within layouts/application (24.4ms)
Compiled app/assets/stylesheets/application.css (1ms) (pid 45323)
...
Compiled app/assets/javascripts/projects.js.coffee (116ms) (pid 45323)
Completed 500 Internal Server Error in 377ms
and finally:
ActionView::Template::Error (uninitialized constant JSON::ParserError
(in /opt/nginx/apps/todo/app/assets/javascripts/application.js)):
3:
4: Todo
5: <%= stylesheet_link_tag "application" %>
6: <%= javascript_include_tag "application" %>
7: <%= csrf_meta_tags %>
8:
9:
app/views/layouts/application.html.erb:6:in
_app_views_layouts_application_html_erb__2079688217135001494_17202399760'
index'app/controllers/projects_controller.rb:7:in
I just installed the Rails 3.1.0.rc5 version and I found that the line:
config.active_record.identify_map = true
on application.rb has been removed, this must be cause that intruction was not working at all
Rails framework was structured perfectly. Why did they move js css under assets? What is the main reason?
I get the error, file "lin" not found
any ideas?
Hey Ryan I am follower of railscasts it has helped me out of trouble and understanding the way things work thanks alot. The new layout looks awesome.
I have a bit of a problem with coffiescript:
My gem file:
In the application layout:
In my application.js:
In my games.js.coffie:
My application runs but as soon as I go to the browser I get the following error:
unexpected token at '"ok","\n alert(\"I knew it!\");\n"]
If I take out the //= require_tree . the application works.
Can you help me if you want more info on the application here is the link to it https://github.com/Gerhardk/Battleships its a game which I am writing to get the feel of the new Rails 3.1.1 way of doing things
Thanks Gerhard