Linked content

pgAdmin has a "graphical EXPLAIN" feature

When working with PostgreSQL, you can use pgAdmin as a GUI.
While you can do most things just like on an SQL console, you can use it to display EXPLAIN results in a more human-readable way.

(image from the Postgres manual)

  1. Open up pgAdmin, connect to your server
  2. Pick a database from the left pane
  3. Click the "SQL" icon in the toolbar, or press Ctrl+E to open the query tool.
  4. Paste any queries that you'd like to explain.
  5. Go to "Query" → "Explain analyze", or ...
Linked content

Retina revolution

Looking for a way to embed raster images for both low- and high-DPI displays, this developer had some good results with using a high resolution with more JPEG compression than you would use normally.

He argues that the image looked great on both low- and high-DPI displays. Also the compression artifacts were now so small that they are not as noticable then when an 1:1 image is highly compressed.

Openstack: nova resize

To change RAM size, VDISK size or VCPU count of an openstack instance you have to use nova resize. You can't change for e.g. just the RAM size with a parameter, you have to assign a new/other flavor. If there is no suitable flavor for the new properties of the VM, create a new one.

nova resize [--poll] <server> <flavor>

The resize could take a while, after it is finished, the VM boots up with the new specifications. SSH into the VM and check if everything is alright...

Linked content

Material icons - Google Design

Surprisingly exhaustive new icon set by Google.

Available as PNG, SVG and as a icon font.

Comment from Henning

I tried using the icon set in a project. I found the quality, selection and handling far worse than what we are used to in FontAwesome.

Add an alternative image source for broken images

Awesome hack by Tim VanFosson:

<img src="some.jpg" onerror="this.src='alternative.jpg'" />

Multiline comments in indented Sass syntax

Write a // and indent every subsequent line by two spaces.

This is great for documenting BEM blocks!

  An action button
  Basic usage
      <a href="/path" class="action">New booking</a>
      <button class="action">Save</a>
      <input type="submit" class="action">Save</a>
      <a href="/path" class="action is-red">Primary</a>
      <a href="/path" class="action is-grey">Secondary</a>
  Small inline buttons
Linked content

Fixing jerky CSS3 animations

When a CSS3 animation makes the animated element flicker, it may well be due to pixel fragments being handled differently during animation. You can force the browser into rendering the element on the GPU by adding certain properties. In Chrome, the combination of the following properties has the best effect.

box-shadow: 0 0 0 #000
transform: translate3d(0,0,0) # remember to add vendor prefixes

Depending on your markup, you might need to set these properties on several elements (presumably all those that have height or width in %)...

Carrierwave: Efficiently converting images

When uploading images, adding more than one process to a version can cause MiniMagick to run multiple commands. In order to have all processing done in one mogrify system call, you'll need to define only one process that combines all options you'd like to pass in.

An auto-mapper for BEM classes in Cucumber selectors

When you are using the #selector_for helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding BEM class.

For a variation on this idea, see An auto-mapper for ARIA labels and BEM classes in Cucumber selectors.


"the main menu" -> '.main-menu'
"the item box's header" -> '.item-box--header'

Here are some examples of steps (using Spreewald, too):

Linked content

Refile: Ruby file uploads, take 3

Jonas Nicklas, the author of Carrierwave and Capybara, has released Refile, a gem for handling file uploads in Rails. It handles direct uploads (also direct uploads to Amazon S3) better than Carrierwave.

The story and reasoning behind some of the decisions in Refile, and how it's different from Carrierwave, by the author himself, is a good read before deciding which way you'll go.

Big Caveat: Refile only stores the original image and r...

ImageMagick: Cropping images

ImageMagick takes a string with several options when cropping an image. See the command line options for how to provide the expected image geometry for details.

Note that ImageMagick tends to preserve the original aspect ratio of the source image automatically.


  • crop 200x200 means Maximum values of height and width given, aspect ratio preserved.
  • crop 200x200! means Width and height emphatically given, original aspect ratio ignored.
Linked content


A set of javascript tools for working with files.

It offers different kinds of things:

  • A cross-browser JS API to work with File objects.
  • Image helper methods, like rotating images, or generating thumbnails in the browser (because you don't want your browser to scale tons of 20MB-JPEGs just for an upload preview)
  • Webcam access
  • Uploads

When HTML5 support is unavailable, it uses Flash polyfills.

Check out the documentation and demos at their GitHub page.

To install via bower, simply add the `...

LibreOffice Writer prints text frames as black areas

To fix this:

  • Right-click on the frame
  • Select Frame...
  • Open Background
  • Set As to "Color"
  • Set the background color to "No fill"

Resolving Angular not updating an image src when ng-src is empty

The Angular ngSrc directive serves to properly set an image src via Angular. As anything in Angular, it updates the image as soon as the contained Angular expression changes. However, when the ng-src attribute is empty, Angular will not empty the src attribute. To overcome this, use the trick below.

<img ng-src="{{ element.image || '//:0' }}" />


The ngSrc directive explicitly returns when the attribute value is falsy. As a workaround, set a "blank" image src when the image is empty. As [somebody ...

Linked content

RaphaelJS: A Javascript vector graphics library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Linked content

Eager-loading polymorphic associations

To avoid n+1 queries, you want to eager-load associated records if you know you need to access them later on.

The Rails docs say:

Eager loading is supported with polymorphic associations.

This is true, but has some caveats.


Consider the following models:

class Image < ActiveRecord::Base

class Video < ActiveRecord::Base
class PageVersion < ActiveRecord::Base
belongs_to :primary_medium, polymorphic: true # may be Image or Video
class Page < ActiveRecord::Base

Linked content

Paperdragon: Explicit Image Processing

It's like Paperclip or CarrierWave, but without any automagic integration.

This website uses cookies to improve usability and analyze traffic.
Accept or learn more