RailsCasts Pro episodes are now free!

Learn more or hide this

Recent Comments

Avatar

Hey Ryan,

It always amazes me on how every screen cast that you create always has a bit more info and expertise than expected. I love how you shared the way to do controller specific styles and also the text mate color picker.

Rails wouldn't be the same without you!

Avatar

HAHA I was like Matthew until I came back here and read this thread TY Geoff.

On another small note I have different backend/frontend folders for my style sheets so I had to do.

ruby
*= depend_on "backend/projects"
Avatar

i have a problem any time i refresh my browser it does not render my stylesheet unless i refresh again and my server log says undefined method >= does any one no how to fix this. im using a windows machine for my rails 3.1 app

Avatar

They are working on it, so I guess it won't take long before the default setup will work.

It's the most commented issue on the compass github-tracker, people really seem to want it :)

Avatar

Hey Ryan! Great job with your videos. I'm helping a friend learn rails and your stuff has been excellent for some of the more advanced topics. Thanks!

Avatar
ruby
*= depend_on "projects"

without s

Avatar

Cheers, almost imploded my f5 key over this bug...

Avatar

Is using the method @ryanb uses in body better than just calling controller_name ?

Avatar

I've been adhering to the "Object Oriented CSS" pattern when writing CSS lately. One of the guiding principles in that is that you never style anything based on its container. Another principle is never style anything based on ids (ids can be used for javascript logic but for styling you use classes for reusability etc).

In effect the example you give of styling based on an id in body is pretty much the most extreme way of breaking the pattern (one thing I've noticed out of experience is that the "further away" the container definition is the more complicated it becomes to make sense of the css logic).

Theres a good video outlining some of the reasons (basically CSS anti patterns) behind OOCSS here:
http://www.youtube.com/watch?v=j6sAm7CLoCQ

Avatar

Great screencast Ryan,

I've been having a bit of a struggle with import order using the default (css comments).
This way i can now easily pass on home made mixins and variables where they are needed.

Thanks!

Avatar

Very nice screencast, I like the suggestion of using SCSS to handle the importing of additional SCSS files. Its worth noting though that Sprockets won't detect changes to the dependent stylesheets when you're using @import so you will probably want to add

*= depends_on "projects"

to your application.css.scss so that changes to that file will rebuild the application.css file. Hopefully once things have landed properly an SCSS @import will handle this.

Avatar

Nice screencast, as always. Hope you tell us about the image referencing gotcha in a later episode. If you reference your images from css without erb, it'll break in production. See

https://github.com/rails/rails/issues/1209

Avatar

Thanks for the railscasts!

It is great to see SASS being more integrated into rails 3.1. We have been using sass for all our projects for over a year now. The variables and mixins are such a time saver and clean up the resulting CSS code considerably. We prefer to use compass and sass files though as compass gives up great automated mixins and SASS is as nice as HAML is for views. But that is personal preference I guess...

Avatar

Hey Ryan,

Thanks a lot for the episode. Do you know how to use Compass in Rails 3.1? Since the regular usage is relying on the older public/stylesheets directory i cant figure how to configure it to work with the newer 3.1 and the 960 Compass plugin.

Thanks anyway!

Avatar

Putting this in an initializer:

ruby
require 'sass'
require 'sass/plugin'

Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
    load_paths << "#{Rails.root}/my/import/path"
end

is supposed to work, according to many comments found on the net. Yet it doesn't - I still get an error when trying to import some external stylesheet, which incidentally outputs the SASS path, which is, indeed, app/assets/stylesheets.

I converted some Rails 3.0 application to 3.1 ; it might explain why this solution doesn't work for me.

I find it unfortunate that the Rails guys didn't think this out more thoroughly. Or may be they did, in which case I'm eagerly waiting for some detailed documentation ;)

Avatar

Good question. The import path seems to be the app/assets/stylesheets directory, but I don't know how to change it in 3.1. Maybe someone else will be able to enlighten us.

Avatar

Hi Ryan,

Nice screencast, as always. I can't say I learned much, as I've been using SASS for years now, but it's nice to have some user-friendly reference to point Rails newbies to.

What I really wanted to know though, is this: how do you set the SASS import path in Rails 3.1 ? Been trying for days, nothing seems to work.

Do you happen to know if this is possible at all ?

Thanks again

Avatar

Thanks for the video.

Has anyone experienced a problem with re-cyclic references?

For example: A has a child B. But later on you update A and change it's parent to B. Then it becomes A has B; B has A...

I wrote a validation to prevent it but although unit test works; it seems it goes into an infinite loop when I do this from frontend. Check here if you want to see the validation I tried.

Avatar

Thanks so much for this. I didn't watch the video but used the ASCIIcast. Precisely what I needed!

Avatar

Thanks for posting this; saved me the trouble of doing research. :-)

Avatar

Awesome. Thank you!

Exactly what I was looking for, easy to understand, and fast to watch!

Avatar

I totally agree with you.
I think there should be another railscast to emphasize the real advantages of coffeescript :-)

IMHO a lot of the code that is written in the server side could have been written in the client side, but js can get so ugly and disorganized, that developers (my self included) prefer to write the logic in the server side.
with coffeescript - I believe things can and will be different.

not saying that business logic should be on the client side, but moving more code and calculations to the client side can make your application much more responsive and scalable.

Avatar

Thanks for the awesome explanation ryan. Are there other solutions out there that will let the user add a new entry if it doesn't exist in the token fields. Meaning, if the auto completion does not bring the entry, the user will be able to add it on the fly.

Avatar

I have the same concern. I really prefer the CoffeeScript syntax to Javascript but it seems I won't be able to escape Javascript entirely when it comes time to debug. What are people using for this? Is there any way to see CoffeeScript in firebug?

Avatar

Thanks Bart for your post. I've googled on my own also and I came up with couple of tools / frameworks that can help in x-browser compatibility:
1. PIE http://css3pie.com/about/
2. 960 and Adapt.js http://adapt.960.gs/

and of course Compass

Does anyone have any other tools helpful in x-browser compatibility?

Avatar

In my opinion there is one huge advantage to Coffeescript that hasn't been discussed at all in the comments, and that is that Coffeescript introduces OOP to Javascript.

O.k. Yes, you can do the exact same things you do in Coffeescript just natively in Javascript, but unlike some of Coffeescript's other 'improvements' that just remove a few brackets or parenthesis here and there, Coffeescript's OOP model turns what would otherwise be incomprehensible and arcane code into beautiful, readable, understandable code.

http://jashkenas.github.com/coffee-script/#classes

Once I started taking advantage of Coffeescript classes, I found myself writing Javascript in a totally new innovative way that I had never done before. It isn't just about what can or cannot be done with or without Coffeescript, but more about what Coffeescript inspires you to do through its easy classes and extension framework. You start thinking differently.

Avatar

Great post Ryan!

While this is very exciting, I can see that people are unsure just when and where this technique should be applied, and if it should now take precedence over other performance best practices.

My advice would be to make sure you are doing all of the 'other' performance tuning things first, as they are generally easier to implement, easier to understand, and more battle tested. (gzip, combine/minify, leverage browser cache, optimize images, defer loading js, use ajax where it makes sense ... etc)

I would focus on all the stuff recommended by yslow, page speed, dynatrace, et al, first, as that stuff can be implemented right now, on any server, regardless of browser/mobile, proxy, whatever.

So when DOES it make sense to use streaming?
When you can give the user something to look at quickly and defer expensive processing for a bit later. Maybe you have a certain amount of 'chrome' at the top of your site, and you want to get it in front of your user quickly so they can orient themselves to the task at hand (google, yahoo, amazon, walmart, etc). Combined with browser caching, the page will load all of the stuff it has very quickly.

This functionality has been in php for awhile, and performance expert
Steve Souders notes on his site that while the gains can be quite significant, there are many issues that people run into when trying to 'Flush the document early'. (he even created a series of test pages to show how it works, and the problems related to gzip, parallel downloads, etc)

You can see a bit more of his chapter from the book 'Even Faster Websites' on google books but I recommend buying both of Steve's books, as well as High Performance javascript by Nicholas Zakas. (of all the programming books i buy that instantly become stale..books on performance do not)

Avatar

I do not fully understand how Redis has better performance than active record? Are they both not essentially accessing data that is in RAM, just in two separate ways? Are there more layers to go through when accessing data via ActiveRecord?

Avatar

Hi. How can I access variables in controller from .coffee file?
url: "#{sort_admin_product_images_path(@product}"

Avatar

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 to application.rb. Maybe I can jog it loose if I keep playing...

Avatar

You can use Google's jQuery like this.

I'm sure there will be even easier ways popping up soon.

Avatar

Thanks for the view_context tip! Was looking for a solution for that problem!

Avatar

It will never work with the form_tag. Sorry.

Avatar

Rails 2.x is not supported in the new client_side_validations gem. The reason is because ActiveRecord 2.x does not allow reflection upon the validators. I solved this in DNC version of the gem by using a hack (validation-reflection gem) but supporting both Rails 2 & Rails 3 is very difficult so I decided to only support Rails 3.

Avatar

The only thing about CoffeeScript that I am wary of is that the code you write is not the code that will appear in firebug when you have to debug a problem.

I am not a JS developer (Thank deity for jquery) but I did have to write 300 lines of JQuery/DOM JS recently for a horrendously complicated set of form manipulation functions.

It had 24 test scenarios (Thank deity for Cucumber & Akephalos ) and whenever a problem arose debugging it was a total total pain in the arse.

I honestly doubt I would have been able to debug it if I had to look through compiled JS.

Avatar

The only thing about CoffeeScript that I am wary of is that the code you write is not the code that will appear in firebug when you have to debug a problem.

I am not a JS developer (Thank deity for jquery) but I did have to write 300 lines of JQuery/DOM JS recently for a horrendously complicated set of form manipulation functions.

It had 24 test scenarios (Thank deity for Cucumber & Akephalos ) and whenever a problem arose debugging it was a total total pain in the arse.

I honestly doubt I would have been able to debug it if I had to look through compiled JS.

Avatar

Has anybody had any luck testing Faye with Cucumber?

Avatar

You should try using compass for sass. It really made my life easier in terms of x-browser compatibility.
I would also recommend using slim instead of haml. It's just so much pleasure when you save this couple of clicks - and apparently it is faster than haml to compile

Avatar

Thank you, Ryan! It's great episode!

Avatar

Seems like this would have been a big win - write your entire web app in one language!

Well you could always use Node.js ;)

Avatar

Great railscast as usual! Thanks Ryan!!!

Does anyone know if writing the view using haml and scss/sass is cross-browser compatible. do I still need to use hacks and tricks to make the view look the same in all browsers?

I know this is a stupid question cause it would tooooo beautiful if it was true ;-)

'dash rockets' RoCK!

Avatar

Coffeescript looks great! One thing I don't understand: - it appears they were modeling it after ruby. So I wonder why they didn't go all the way, and use def/end, class definitions, same ternary operators etc.

Seems like this would have been a big win - write your entire web app in one language!