Linux: rename or change extension of multiple files

When you need to bulk rename files you can not call "mv *.foo *.bar" to change the extension of all .foo files to bar (because bash resolves wildcards and replaces them with the list of matched files).

This works on linuxes who use the Perl version of the rename command (like Ubuntu):

rename 's/\.foo$/\.bar/' *

You can also use this to rename other parts of the file, e.g. from flag_en.png, flag_de.png etc. to just en.png or de.png:

rename 's/^flag_//' *

Note that we used $ and ^ to explicitly look at the ...

Speed up file downloads with Rails, Apache and X-Sendfile

When you use the send_file method to send a local file to the browser, you can save resources on the application server by setting the :x_sendfile option to true. This option is activated by default for Rails 3, so you need to understand this.

What this option does is not to send any data at all, but rather set the local file path as a new response header:

X-Sendfile: /opt/www/awesome-project/shared/downloads/image.png

When the response comes back from Rails to...

Proper cross-browser CSS styling for buttons

Styling button tags across all major browsers is not easy.

Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span tag inside them as assigning a background to both button and span) it will look different on each browser.

Use this Sass snippet as a base style:

button
  border: 0
  padding: 0
  cursor: pointer
  overflow: visible // removes padding in IE
  &::-moz-focu...

Generate a strong secret from the shell

A good tool to generate strong passwords and secrets is "apg". You can get it with

sudo apt-get install apg

To create a strong secret for sessions, hashed Paperclip paths, etc. say

apg -m128 -a1 -E\'\"

Arguments explained:

  • The -m parameter defines the secret length
  • -a1 makes apg choose from all 7-bit ASCII characters instead of just the alphabet
  • -E\'\" excludes quote characters so you can easily paste the secret into a Ru...

Install the Paperclip gem on Ubuntu servers

You need to install the following packages before you can build the Paperclip gem:

sudo apt-get install imagemagick librmagick-ruby

Copying validation errors from one attribute to another

When using virtual attributes, the attached trait can be useful to automatically copy errors from one attribute to another.

Here is a typical use case where Paperclip creates a virtual attribute :attachment, but there are validations on both :attachment and :attachment_file_name. If the form has a file picker on :attachment, you would like to highlight it with errors from any attribute:

class Note < ActiveRecord::Base
  has_attached_file :attachment
  validates_attachment_presence :a...

Deliver Paperclip attachments to authorized users only

When Paperclip attachments should only be downloadable for selected users, there are three ways to go.
The same applies to files in Carrierwave.

Variant: Deliver attachments through Rails

The first way is to store Paperclip attachments not in the default public/system, but in a private path like storage inside the current release. You should prefer this method when dealing with sensitive data.
...

JQuery CSS Emoticons Plugin

The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).

Use the new Google Images as a German user

In july Google announced a new version of their image serach tool Google Images. But you won't find it on the German google.de site. To reach the new - as I may say, very much better - tool from germany, you have to surf to images.google.com. Et voilà!

jQuery Captify (v1.1.3) / Simple Animated Image Captions

Captify is a plugin for jQuery written by Brian Reavis (@brianreavis) to display simple, pretty image captions that appear on rollover

Make box shadows look the same in IE and other browsers

The box shadows created rendered in IE by CSS3PIE look darker and are blurred differently than in browsers that render box-shadow natively.

If possible, try to be OK with this. If not, make an IE-only stylesheet that uses a different color and blur radius:

// Real browsers:
+box_shadow("0 4px 10px #bbb")

// IE with PIE:
+box_shadow("0 5px 15px #888")

We should try to package this solution in a neat way so we don't need different stylesheets.

See also this [cross-browser box-shadow comparison]...

Recursively remove unnecessary executable-flags

Sometimes files attain executable-flags that they do not need, e.g. when your Windows VM copies them over a Samba share onto your machine.

From inside your Rails project directory call regularly:

geordi remove-executable-flags

Runs chmod -x on Ruby, HTML, CSS, image, Rake and similar files.


This script is part of our geordi gem on github.

Setting expiry dates for images, JavaScript and CSS

When deploying Rails applications you might have noticed that JS and CSS are not cached by all browsers.

In order to force Apache to add expiry dates to its response, add the attached .htaccess to the public directory. This will add a header such as Expires: Thu, 07 Oct 2010 07:21:45 GMT to the httpd response.

Configuring Apache

Check that you have mod_expires enabled. You need it for the attached .htaccess to work:

sudo a2enmod expires

Configuring Nginx

You can add this:

Vadikom » Poshy Tip - jQuery Plugin for Stylish Tooltips

With this plugin, you can create a scalable tooltip by just using a single background image for the tooltip body.

Regular Expressions - Cheat Sheet

You can write regular expressions some different ways, e.g. /regex/ and %r{regex}. For examples, look here.

Remember that it is always a good idea to match a regex visually first.

Characters

Literal Characters

[ ] \ ^ $ . | ? * + ( )

Character Classes

[ae]            matches a and e, e.g. gr[ae]y => grey or gray => but NOT graay or graey
[0-9]  ...

Change Paperclip secrets the hard way

So you screwed up and copied Paperclip secrets from one project to another. Here is a semi-automatic, painful way to migrate your existing attachment files to new locations.

You need to follow this step by step, do not just copy the whole thing into the console!

# 1. Get old paths by doing something like this on the console:
old_paths = ModelWithAttachment.all.collect { |m| [m.id, File.dirname(m.image.path(:original)).gsub(/original$/, '') ] if m.image.file? }.compact.uniq

# 2. Now change the Paperclip secret on the co...

Change the color of a <hr> in all browsers

The following Sass will do it:

hr
  color: #ddd
  background-color: #ddd
  border: none
  height: 1px

mezzoblue's PaintbrushJS at master - GitHub

PaintbrushJS is a lightweight, browser-based image processing library that can apply various visual filters to images within a web page.

Only allow pictures as Paperclip attachments

validates_attachment_content_type :image, :content_type => /^image\/(jpg|jpeg|pjpeg|png|x-png|gif)$/, :message => 'file type is not allowed (only jpeg/png/gif images)'

Fix PNG colors in IE, old Safaris and new Firefoxes

Some browsers render PNG images with color profiles and other shenanigans, some do not.

The cleanest way to have consistent colors across browsers is to convert all your images to a standard color profile, strip the image's original profile and attach the standard profile.

If you can't be bothered to convert color profiles, a quicker (but less effective) method is to remove some PNG chunks from your files.

With Geordi

[Geordi](https://gi...

Reprocess only missing images with Paperclip

When a paperclip attachment gains a new style and you have many attachments, reprocessing can take ages. This is because all styles are being recomputed.

To create only missing images, patch Paperclip like this in your script that does the reprocessing:

Paperclip <2.3.2

class Paperclip::Attachment
  private

  def post_process_styles_with_extreme_lazyness
    @old_styles = @styles

    @styles = @styles.reject do |name, _|
      exists?(name)
    end

    post_process_styles_without_extreme_...

Convert colorspace of images attached with Paperclip

has_attached_file(
  :avatar,
  :styles => { :large => "300x300", :small => "100x100" },
  :convert_options => { all => "-colorspace RGB" }
)

Reprocess Paperclip attachments in one line

script/runner -e development 'Article.all.each { |a| a.image.reprocess! if a.image.exists? }; "done"'

Basic styles for flash notifications

.notice,
.error,
.information,
.warning {
    font-weight: bold;
}

.notice {
    color: #11bb00;
}

.error {
    color: #F53A31;
}

.information {
    color: #557;
}

.warning {
    color: #d07d2d;
}