Monday, 13 February 2017
Rails asset pipeline: Why things break in production and what precompilation does to your assets
Rails asset pipeline: Why things break in production and what precompilation does to your assets
When you work with a Rails 3.1+ application, you will be working with the asset pipeline. The asset pipeline is awesome until you deploy. Then it will be less so if you haven't done everything as the pipeline expected it from you.
The problem
When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside
app:
With the asset pipeline, you can use the full power of Ruby to generate assets. E.g. you can have ERB tags in your Javascript. Or you can have an ERB template which generates Haml which generates HTML. You can chain as many preprocessors as you want.
When you deploy, Rails runs
assets:precompile which precompiles all assets into static files that live in public/assets. This way you have all the performance of static files with all the expressiveness of Ruby.
Unfortunately, the path of every single file changes during precompilation. This means that you have to be a bit careful how you reference assets.
won't work any longer, because there is no
public/assets/images. foo.png now lives directly in public/assets.Example
This precompiles into this (fingerprinted and compressed files removed for clarity):
What has happened?
- All asset folders (
app/assets/images,app/assets/stylesheets,app/assets/fonts, etc.) are merged into one folder:public/assets. - Subfolders are also merged into
public/assets. That means bothapp/assets/javascripts/subfolder/*andapp/assets/stylesheets/subfolder/*now live inpublic/assets/subfolder/* - All CSS files are concatenated into one file (
public/assets/application.css). With the default manifest inapp/assets/stylesheets/application.css, stylesheets inapp/assets/stylesheets/**/*.cssare concatenated. Sopublic/application.csshas the following content: - All Javascript files are concatenated into one file in root (
public/assets/appliction.js). With the default manifest inapp/assets/javascripts/application.js, Javascripts inapp/assets/javascripts/**/*.jsare concatenated. Sopublic/application.jshas the following content:
What will break after precompilation?
- Stylesheets, that used
url(../images/foo.png)-style tags - @font-face definitions that used
url('fonts/bar.ttf')-style tags
How can I fix my stylesheets?
- Do not use
url(../images/foo.png).
This is plainly wrong, since from your browser's point of view, your stylesheet lives at/assets/application.cssand your image at/assets/foo.png. I have no idea why it works in development in the first place. Simply use the SASS helper:
How can I fix my font definitions?
- With the Asset-Pipeline fonts are stored in
app/assets/fonts.
Depending on your rails version, you may need to addto your config/application.rb - Do not use
src: url(...)in your @font-face definitions.
Again instead use a sass-helper:src: font-url(...) - Maybe the referenced paths need adjustment. If before it was
src: url(fonts/...)now the leadingfonts/directory needs to be removed, because the fonts are compiled to the assets folder by the asset-pipeline.
https://makandracards.com/makandra/8951-rails-asset-pipeline-why-things-break-in-production-and-what-precompilation-does-to-your-assets
Ruby How to use Haml in your helpers
How to use Haml in your helpers
You know those helper methods that just render some HTML but look weird because of
content_tags all over the place? You could also use Haml instead.Example
Consider the following helper.
That looks clumsy and is hard to read.
Wouldn't it be nicer to say something like this?
It would be, and you can have it, too. You simply need to define
render_haml as a helper method:
Note how we pass the helper method's view context (
self). This means that all of your other helper methods will be available to your Haml fragment.
Also note that you can pass locals to your Haml templates as usual:
E
Sunday, 12 February 2017
RubyMine tricks
1) pressing
2)
Shift twice
Have you tried the Search everywhere dialog? You can open it by pressing
Shift twice.2)
RubyMine: Set specific Ruby version per project
If your project uses another version than your default Ruby, RubyMine will give you incorrect inspections, for example.\
Here is how to switch which Ruby you use in RubyMine.
Here is how to switch which Ruby you use in RubyMine.
- File → Settings (Or press
Ctrl+Alt+S) - Select "Ruby SDK and Gems" from the left pane
- Switch your "Ruby interpreter".
Though it may seem you are changing a global setting here, this is in fact a per-project setting, as are all things you change in the "Project Settings [your_project_name]" area of the global settings dialog.
When you switch to another project, RubyMine will give you inspections and alike using that project's Ruby settings.
jQuery: When to use $(document).ready() and when $(window).load()
Summary
jQuery offers two methods to execute code and attach event handlers: $(document).ready and $(window).load.
$(document).ready()
The document ready event fired when the HTML document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.
Code:
$(document).ready(function() {
// document is loaded and DOM is ready
alert("document is ready");
});$(window).load()
The window load event fired a bit later, when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.
Code:
$(window).load(function() {
// page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
Subscribe to:
Posts (Atom)