My rails app is in production mode and assets are compiled and i can see it in /public/assets/
In my layouts i use something like that :
<%= stylesheet_link_tag "application", media: "all" %>
<%=> javascript_include_tag "application" %>
my javascript use the //require directive,
my css is in "css.scss" ans i use the #import sass directive to load css.scss files.
The assets are well compiled.
When i use chrome, my css and js file are cached :
application-***********.js and css are loaded one time then it is well cached in chrome. I can navigate quickly between my pages ...
When i use firefox, each time it download the js and css concatenated files ... browing is slow ....
Have any idea about this behavior?
Thanks!
Solved : I don't know why but from the moment i start firebug, my application.js and css are each time reloaded (cache miss).
But if i restart firefox and i browse my website without launching at least one time firebug, everything goes well and i can naviguate "quickly" because the browser cache works !!!
Strange, but solved.
Related
I'm attempting to try out Ruby on Rails (version 5) for a project.
When I add stylesheet_link_tag 'application' to my layout, the application.js file is loaded.
The application.js file by default includes jquery which isn't available in my project currently, so an exception is thrown.
I could change the js file to stop the error.
Why is the stylesheet helper loading the js file?
Is this not the job of javascript_include_tag?
Update
-- 30/07/2016 20:37 --
Solution
Ok it seems this happens due to all app/assets being processed when the stylesheet and/or javascript helper is used, so they both must be valid. However only the relevant files are included in the page.
When you include the javascript_include_tag, stylesheet_link_tag the app/assets are all processed, so all must be valid.
The end result will still be that only the files you expect to be included in the webpage will be.
I'm playing with a rails 4.2 application and it seems like it loads all of my stylesheets for each and every page.
Is that true? How is it better than loading for each page only the relevant stylesheets?
On one hand, I know they'll all be minified when going to production, and it will reduce the total size and cache one CSS for the whole website.
On the other hand, page I might have some thin pages that will need no more than a few css lines to be rendered correctly that will get tones of files for no reason. It will also require me to be super strict and safe when choosing class names in order to have no collisions and unwanted overrides.
What about JS assets? It acts the same way?
(I guess the answer for image assets is "hell no!")
Yes, in development you'll see a lot of files (all of them) and in production they will be compiled and minified to a single file.
Once this file has been downloaded by the client it will be cached and wont need to make any further requests to load other stylesheet files on concurrent request (unless caching and turbolinks has been disabled). The downside is that the file size will be larger and make the initial load time slightly longer.
One problem as you point out is scoping. In my experience it's way better to always apply proper scopes when developing. And in rails using sass it's really easy to have nice and tidy css.
The same goes for javascript, but not for images as you pointed out.
That said. There are ways to work around this if desired, but more often than not I've realized that there are more pros than cons with a single file.
Edit:
Oh, and if you're new to rails, beware that turbolinks might cause you some headaches in the beginning messing with page ready in js-files before you get the hang of it. But it's worth it in the end.
The advantage and rationale for this is to reduce the amount of data that is sent to the client after the first page load. The first page load pulls down all the js/css (compiled into single files), but then this can be cached and reduces the amount on each subsequent page load.
The following is purely theoretical, if at all possible, try and work with the defaults of one css/jss file
If you absolutely do want to trim it down, then you can. Your application.css manifest file (or js) probably includes a line such as:
//= require_tree .
which says, require everything in this directory. you could then split this down so application.css only requires everything in the application folder (absolutely need to know):
//=require_tree ./application
Then add additional manifest files, for example for an admin section, so that the admin styles/JS can be loaded only when needed in admin.js
//=require_tree ./admin
Then in your layout file you can do
= stylesheet_link_tag "application", media: "all"
= yield :additional_stylesheets
And where you want those additional styles you can add them.
- content_for :additional_stylesheets do
= stylesheet_link_tag "admin", media: "all"
end
Note: this will cause issues if you're using turbolinks.
Note II: You may need to add these to the precompile list in application.rb:
config.assets.precompile += ['additional_manifests.css']
You could modify this workflow to not include any CSS at all to start with and only load what you need.
I have a ruby on rails app that uses highcharts.
Locally it works like a charm, however when I push the app to Heroku, Highcharts stops working and the div tag that is supposed to contain the chart appears empty.
I even tested it with one of the Highcharts examples (which has only hardcoded data), and still nothing.
Figured it out: The problem was in the precompiling of assets. Turned out that highcharts was not precompiled
Added :
config.assets.precompile += ['rollover.js', 'highcharts.js']
to production.rb (i suppose application.rb should work as well)
and
to layout file.
(since i expected all javascript files gets compiled in application.jss i only had <%= javascript_include_tag "application" %> in my layout file)
Sounds like Highcharts is not loading - either because it isn't being pushed to Heroku or because it isn't being served properly. Go to the URL where highcharts.js should be and see if you get the JavaScript or a 404.
If you can reach highcharts.js without issue then the problem is most likely in the setup code. Check and see if the appropriate variables are loaded onto the page (using the web developer tools for the browser you are testing in) and if there are any JavaScript errors showing up when the page is loaded.
Using lazy highcharts gem. Googled for an hour Nothing worked out for me.
Finally I've copied highcharts.js from Vendor directory and pasted it to assets.
Viola!
I'm using Rails 3.1. I'm starting to have a problem -- any time I update my application.css it doesn't update the CSS of the webpage I'm working on. The server seems to be fetching an old version of the CSS instead of keeping up with the changes I make in my application. What are some possible reasons and solutions for this? Does it perhaps have to do with precompilation? (By the way I'm of course doing this all on my local machine.)
I'm sorry but I can't really tell when this started happening - which would be useful. I had been working on other parts and came back to this a few weeks later to find out that the application.css file wasn't affecting any changes.
By the way, I haven't changed
<%= stylesheet_link_tag "application" %>
... it's still there in my application. Also, in-line CSS still works, which is why I know it's a problem with the application.css.
Go into your public folder and delete the assets folder. When you deployed (or did a push) it precompiled your assets.
Show as your Source Page or Log.
Try:
<%= stylesheet_link_tag :application %>
And tell where you have application.sass or application.scss
Go to tmp > cache
Delete assets folder
Only solution that worked for me
I am using Ruby on Rails 3.0.10 and I would like to auto-build and load different CSS stylesheet files depending on if I am running my application in the development or in the production mode.
I would like to auto-"minimize" CSS files for performance reasons and to load those related "minimized" files because I do not want to show to the "public audience" the content of my comments present in my CSS file (note: users can access theme, for example, by using the FireBug plugin for the Mozilla Firefox browser). I would like to do that also for javascript files.
How can I do that?
P.S.: I am planning to switch to the Ruby on Rails v3.1...
In your layout you probably have something like:
<%= stylesheet_link_tag "production.css" %>
Just add another stylesheet there but wrap it in a conditional that checks the rails environment.
<%= stylesheet_link_tag "development.css" if Rails.env.production? %>
For Rails 3.0 there are many plugins to minify your css and javascript.
I use smurf.
gem "smurf"
Part of the process of minification is that it removes comments.
In Rails 3.1 production will uglify your javascript, so comments should be removed by default.
But if you insist on using a different stylesheet, take a look at the other answer.