How to view Image Metadata on the Linux Command Line with ImageMagick

ImageMagick has a command line tool called identify which can read image metadata:

>identify -verbose DSC00136.JPG
Image: DSC00136.JPG
  Format: JPEG (Joint Photographic Experts Group JFIF format)
  Class: DirectClass
  Geometry: 5472x3648+0+0
  Resolution: 350x350
  Print size: 15.6343x10.4229
  Units: PixelsPerInch
  Type: TrueColor
  Endianess: Undefined
  Colorspace: sRGB
  Depth: 8-bit
  Channel depth:
    red: 8-bit
    green: 8-bit
    blue: 8-bit
  Channel statistics:
    Red:
      min: 0 (0)
      max: 255 (1)
      mean: 11...

Open dialogs from shell scripts

Using the dialog command you can launch ASCII-art dialogs from your shell scripts.

Check out man dialog for a list of supported dialog types. Aside from simple text boxes or choice dialogs, it supports more advanced interactions like file pickers or progress bars.

Example: Yes/no choice

dialog --yesno "Erase the world?" 0 0

yesno.png

Example: Menu with multiple opt...

CarrierWave: When your uploader generates filenames dynamically, use model.save! instead of uploader.recreate_versions!

If your Carrierwave uploader dynamically generates the filename (e.g. by incorporating a user's name), you must call model.save! after recreating versions.

uploader.recreate_versions! does not update the model with the stored filename.

A collection of graph and diagram tools

Howto: Free disk space when /boot is full

Easy mode

This method will remove automatically installed packages that no other packages depend on any more. This, of course, includes obsolete kernel versions, with the explicit exception of the currently running kernel, the kernel version that was installed on the system before that and, of course, the latest updated version of the kernel. However, it will also remove any and all other packages that have been marked as installed automatically but have no other packages depending on them. This could lead to unexpected removal of package...

Styling SVGs with CSS only works in certain conditions

SVG is an acronym for "scalable vector graphics". SVGs should be used whenever an image can be described with vector instructions like "draw a line there" or "fill that space" (they're not suited for photographs and the like). Benefits are the MUCH smaller file size and the crisp and sharp rendering at any scale.

It's a simple, old concept brought to the web – half-heartedly. While actually all browsers pretend to support SVG, some barely complex use cases get you beyond common browser support.

In the bas...

Sass: How to convert an RGBA color to its RGB look-alike

Say you have an RGBA color that you need as a non-transparent color because of reasons.

Basically, this is possible. Just understand that you will convert your RGBA color for exactly one base background color as you are giving up transparency.
Most likely, your background is white, so you'll use #fff as that for examples below.

Simple approach

When your know the RGBA color's base RGB color (e.g. your brand color that you RGBA'd for some hover effect), you can simply use the mix function instead of rgba.

Before:

backgroun...

Building web applications: Beyond the happy path

When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.

Different screen sizes and browsers

Desktops, tablets and mobile devices have all different screen resolutions. Does your design work on each of them?

  • Choose which browsers to support. Make sure the page looks OK, is usable and working in these browsers.
  • Use @media queries to build a responsive design
    • If you do not suppo...

You can implement basic object-fit behavior with background images

So you want to use object-fit, but you also need to support Internet Explorer.

One option is to use lazysizes as a kinda-polyfill. Another option is to implement the requirement with background-size: contain, and background-size: cover, which is supported in IE9+.

E.g. to make an image cover a 100x100 px² area, cropping the image when nece...

Images darken when getting converted with ImageMagick

When using ImageMagick to manipulate images, you might see that images get darker when beeing modified by newer versions of ImageMagick.

This usually happens with CMYK images beeing converted to RGB by IM.

Solution

At least in our version of ImageMagick (6.7.7) you can solve this by passing this parameter to ImageMagick -colorspace sRGB.
The RGB colorspace was okay for ImageMagick until version 6.6.9. RGB and sRGB switched obviously.

PostgreSQL and its way of sorting strings

PostgreSQL uses the C library's locale facilities for sorting strings:

  • First, all the letters are compared, ignoring spaces and punctuation.
  • It sorts upper and lower case letters together. So the order will be something like a A b B c C
  • Then, spaces and punctuation are compared to break ties.

Example:

Ruby PostgreSQL
IMAGE3.jpg image2.jpg
image.jpg image3.jpg
image2.jpg IMAGE3.jpg
image3.jpg image.jpg

[PostgreSQL-FAQ: Why_do_my_strings_sort_incorrectly](https://wiki.postgresql.org/w...

How to organize monkey patches in Ruby on Rails projects

As your Rails project grows, you will accumulate a number of small patches. These will usually fix a bug in a gem, or add a method to core classes.

Instead of putting many files into config/initializers, I recommend to group them by gem in lib/ext:

lib/
  ext/
    factory_girl/
      mixin.rb
    carrierwave/
      change_storage.rb
      fix_cache_ids.rb
      sanitize_filename_characters.rb
    ruby/
      range/
        covers_range.rb
      array/
        dump_to_excel.rb
        xss_aware_join.rb
      enumerable/
    ...

Dynamically uploading files to Rails with jQuery File Upload

Say we want …

  • to create a Gallery that has a name and has_many :images, which in turn have a caption
  • to offer the user a single form to create a gallery with any number of images
  • immediate uploads with a progress bar per image
  • a snappy UI

Enter jQuery File Upload. It's a mature library that can do the job frontend-wise. On the server, we'll use Carrierwave, because it's capable of caching images.

(FYI, [here's how to do the u...

Javascript: Wait until an image has finished loading

The attached ImageLoader helper will start fetching an image and return an image that is resolved once the image is loaded:

ImageLoader.load('/my/image.png').then(function(image) {
  ...
});

The image argument that is yielded to the promise callback is an HTMLImageElement. This is the kind of object you get when you call new Image().