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.
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
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).
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.
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.
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
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...
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.
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 ;)
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.
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 ?
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.
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.
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.
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?
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?
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.
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.
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)
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?
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...
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.
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.
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.
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
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 ;-)
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!
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!
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.
*= depend_on "backend/projects"
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
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 :)
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!
*= depend_on "projects"
without s
Cheers, almost imploded my f5 key over this bug...
Is using the method @ryanb uses in body better than just calling controller_name ?
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
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!
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
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.
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
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...
Use Compass Sass Framework Files With The Rails 3.1 Asset Pipeline
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!
Putting this in an initializer:
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 ;)
I do it like this: https://gist.github.com/998563
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.
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
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.
Thanks so much for this. I didn't watch the video but used the ASCIIcast. Precisely what I needed!
Thanks for posting this; saved me the trouble of doing research. :-)
Thank you so much for this!
Awesome. Thank you!
Exactly what I was looking for, easy to understand, and fast to watch!
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.
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.
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?
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?
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.
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)
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?
Hi. How can I access variables in controller from .coffee file?
url: "#{sort_admin_product_images_path(@product}"
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...You can use Google's jQuery like this.
I'm sure there will be even easier ways popping up soon.
Thanks for the view_context tip! Was looking for a solution for that problem!
It will never work with the form_tag. Sorry.
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.
Can you open an issue on Github? https://github.com/bcardarella/client_side_validations/issues
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.
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.
Has anybody had any luck testing Faye with Cucumber?
Touche :)
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
Thank you, Ryan! It's great episode!
I only said it WILL
Well you could always use Node.js ;)
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!
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!
Thx!
Great railscast as usual.