Modern cameras often produce JPEGs that have a "I should be rotated 90° to the left" flag. If you process such pictures using Carrierwave this will be ignored and you'll end up with a wrongly rotated image.

Fortunately, this is easy to fix:

In your Uploader, add

process :auto_orient # this should go before all other "process" steps

def auto_orient
  manipulate! do |image|
    image.tap(&:auto_orient)
  end
end

Note: You can add the process :auto_orient outside of all your version blocks and it will apply...

Ever wanted to preview a pattern from Subtle Patterns on your site without the hassle of swapping out images and modifying CSS?

Subtle Patterns Preview provides a simpler way to do it.

Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a modern look.

However, icon fonts can be very awkward to use compared to raster icons. Elements are given icons by giving them a special class like icon-plus or icon-home:

<span class="icon-plus">Create</span>

The icon font's stylesheet will then recognize this class and insert the icon as the element's :before style.

In practic...

Why is this useful?

• You can have a background image on the same element, overlaying it with a transparent gradient.
• Since you are probably using gradients to give an element a glossy or three-dimensional feel, box shadows work much better for this. This is because linear gradients always stretch to the full size of the element (which can grow with user input), while a natural shine or shadow only highlights a fixed size on the top or bottom.
• Browser support for linear gradients is a mess. I avoid using them. In part...

There is no reason to leave trailing whitespace characters in your project's files, so don't add any.

A git diff --check will tell you if there are any and you should not commit when you see them. So go ahead and switch your editor/IDE to automatically remove them for you.
Below are a few instructions on how to get them removed by your favorite IDE or editor.

Note that except for RubyMine, the following changes will remove trailing white-space on all lines, not only those that you changed.
While this should not be a problem if your proje...

to_file has been removed in Paperclip 3.0.1.

Instead of using File to access Paperclip storage objects (like this: File.read(file.to_file.path)) you can use

Paperclip.io_adapters.for(file).read

simple_format ignores Rails' XSS protection. Even when called with an unsafe string, HTML characters will not be escaped or stripped!

Instead simple_format calls sanitize on each of the generated paragraphs.

ActionView::Base.sanitized_allowed_tags
# => #<Set: {"small", "dfn", "sup", "sub", "pre", "blockquote", "ins", "ul", "var", "samp", "del", "h6", "h5", "h4", "h3", "h2", "h1", "span", "br", "hr", "em", "address", "img", "kbd", "tt", "a", "acrony...

Given you store files on Amazon S3 and you need to stream those files out to people while you don't want them to be able to distribute the content simply by sharing the S3 URL.

You could either mark the bucket as private and fetch the appropriate files from S3 to your application server and stream them to the client finally. While this is possible, I'd recommend to use what AWS calls "Query String Authentication".

If you're using Paperclip you can chose between two sto...

This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.

Trick: Do not use convert but mogrify:

mogrify -resize 50% *

This overwrites the original image file.

In contrast, convert writes to a different image file. Here is an example if you need this:

cd /path/to/image/directory
for i in `ls -1 *jpg`; do convert -resize 50% $i "thumb_$i"; done

Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.

Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on every request. There is no magic in Rails that gives you automatic caching for assets. In fact, if you haven't been paying attention to this, your application is probabl...

We frequently use the handy Paperclip Gem to manage file attachments.

If you need to move the files from local storage (i.e., your servers' harddisk) to Amazon S3, you can simply change settings for Paperclip to use the S3 storage adapter and use this script to migrate to S3. Put the snippet into a chore if you don't want to run that in the console.
YOUR_LOCAL_STORAGE_MODEL_DIRECTORY should be something like 'storage/your_model'.

Dir.glob(YOUR_LOCAL_STORAGE_MODEL_DIRECTORY**/*).each do |path|...

If a customer calls and tells you that she cannot see some content of her website beware of the following before starting tcpdump or other forensic debugging tools.

Some ad blockers like Adblock are shipped with filters that remove (amongst others)

• divs named 'sponsor'
• images with a class "banner" or the filename "banner.png"
• images from directories named 'sponsor*'
• Image names or class names that begin with adv_....

Renaming the div to something more specific to your site and renaming...

A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if their change breaks the print stylesheet.

This card describes how to write a simple Cucumber feature that tests some aspects of a print stylesheets. This way, the requirement of having a print stylesheet is manifested in your tests and cannot be inadvertedly removed from the code. Note that you can...

There are many fun Unicode characters like ▲ or ☯. You might be tempted to use them for graphical elements in lieu for an image. After all they are so much easier to style and scale than a raster image!

Unfortunately you will discover that these symbols render very differently on Linux, Windows and MacOS. The reason for this is that the font you are using will probably not contain any characters outside the standard Latin-1 set. When browsers encounter a character not included in the current font, they use a fallback font for this one cha...

If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can fix that. Usually this should not happen, as it's not a default setting:

1. Open up the Preferences.
2. Switch to "Content".
3. In the "Fonts & Colors" section, click the "Advanced..." button.
4. Tick "Allow pages to choose their own fonts, instead of my selection above".
5. Confirm by pressing "OK".

![Screenshot](https://makandracards.com/makandra/10913-how-to-fix-firefox-uses-incorrect-fonts-on-all-webpages-regardless-of-their-c...

Look Ma, no images!

Generated animations are free to use without backlink obligations...

... WITH THE EXCEPTION of any other animated images generator applications

Haha :)

The problem

When using the asset pipeline your assets (images, javascripts, stylesheets, fonts) live in folders inside app:

app/assets/fonts
app/assets/images
app/assets/javascripts
app/assets/stylesheets

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...

Geoffrey Grosenbach has created Gruff for easily plotting graphs. It is written in pure Ruby and integrates with Rails applications.

It provides features as automatic sizing of dots and lines (the more values, the thinner the graph's elements), custom or predefined themes, different styles (bar, line, dot and many more) and multiple graphs in one chart.

Installation

In your Gemfile:

gem 'rmagick', :require => false
gem 'gruff'

Then run bundle install (and don't forget to restart your development server.)

Usage

This i...

Consider the following HTML & CSS:

<div><img src='http://makandra.com/images/makandra-ruby-on-rails.png' /></div>

^
img {
background-color: red;
}
div {
border: 1px solid black;
}

This will leave a margin of about 5px between the lower edge of the image and the containing div, although there are no paddings or margins set, and there's no whitespace. The reason is, the image will vertically align baseline, and the space below the image is just kept for descenders (the part of letters below the basel...