View
Linked content

Caution: Carrierwave has your file three times (temporarily)

When storing a file with Carrierwave, it is always cached prior to actually storing it (to support form roundtrips).

Carrierwave by default 1) copies the file to the cache and then 2) copies it again to its final destination (deleting the cached file immediately after storing). This means there are 3 (three) instances of a file on the disk at some point in time, and still 2 instances after Carrierwave is done if you do not remove…

How to define height of a div as percentage of its variable width

This is useful if, for example, you want to use a background-image that has to scale with the width and the div should only have the height of the picture.

html:

<div class="outer">
  <div class="inner">
  </div>
</div>

css:

.outer {
  width: 100%;
  background-image: image-url('background.png');
  background-size: cover;
}
  
.inner {
  padding-top: 60%;
}

How does it work?

There are several CSS attributes that can handle values as percentage. But they use different other attributes as "reference value…

Quickly printing data in columns on your Ruby console

Dump this method into your Ruby console to quickly print data in columns. This is helpful for e.g. comparing attributes of a set of Rails records.

def tp(objects, *method_names)
  terminal_width = `tput cols`.to_i
  cols = objects.count + 1 # Label column
  col_width = (terminal_width / cols) - 1 # Column spacing

  Array(method_names).map do |method_name|
    cells = objects.map{ |o| o.send(method_name).inspect }
    cells.unshift(method_name)

    puts cells.map{ |cell| cell.to_s.ljust(col_width) }.join ' '
  end

  nil
end

Usag…

Linked contentRepeats

Ruby: Do not mix optional and keyword arguments

Writing ruby methods that accept both optional and keyword arguments is dangerous and should be avoided.

Consider the following method

def colored_p(object = nil, color: 'red')
  switch_color_to(color)
  puts object.inspect
end


colored_p(['an array'])                   # ['an array'] (in red)
colored_p({ a: 'hash' }, color: 'blue')   # {:a=>'hash'} (in blue)
colored_p({ a: 'hash' })                  # ArgumentError: unknown keyword: a

What happened?

Ruby does not know whether to interpret this as

colored_p({ a: 'hash' }, c...
Repeats

Manipulate color with Sass functions

Sass comes with many built-in functions to manipulate color. Some of the more interesting functions include:

adjust-hue($color, $degrees)
Changes the hue of a color.
lighten($color, $amount)
Makes a color lighter.
darken($color, $amount)
Makes a color darker.
saturate($color, $amount)
Makes a color more saturated.
desaturate($color, $amount)
Makes a color less saturated.
grayscale($color)
Converts a color to grayscale.
complement($color)
Return…

Rendering 404s for missing images via Rails routes

When you load a dump for development, records may reference images that are not available on your machine.

Requests to those images may end up on your application, e.g. if a catch-all route is defined that leads to a controller doing some heavy lifting. On pages with lots of missing images, this slows down development response times.

You can fix that by defining a Rails route like this:

if Rails.env.development?
  scope format: true, constraints: { format: /jpg|png|gif/ } do
    get '/*anything', to: proc { [404, {}, ['']] }  ...
Repeats

Whitelist Carrierwave attributes correctly

Say you have a User with a Carrierwave attribute #avatar:

class User < ActiveRecord::Base
  mount_uploader :avatar, AvatarUploader
end

When whitelisting the avatar field in the controller, you might do this:

  params[:user].slice(:avatar)

But you probably want this:

  params[:user].slice(:avatar, :avatar_cache, :remove_avatar)

In this example:

  • :avatar_cache allows a newly upload image to persist through form roundtrips in the case of validation errors (something that isn't possible with Papercl…
Linked content

image-to-DataURI converter: Duri.me

Small web application where you can upload an image (PNG, JPEG, GIF) and generate a base64-encoded version of it.

You can copy the result as
- HTML <img> tag with data URI,
- CSS rule with background-image and data URI,
- plain Base64-encoded data URI string.

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…

Linked content

Generating barcodes with the Barby gem

Barby is a great Ruby gem to generate barcodes of all different sorts.

It includes support for QR codes via rQRCode; if you need to render only QR codes, you may want to use that directly.

Example usage

Generating a barcode is simple:

>> Barby::Code128.new('Hello Universe').to_png
=> "\x89PNG\r\n\u001A..."

Configuration

Barby supports several barcode types and you must require all necessary files explicitly.

For the example a…

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…

Versatile Cucumber step regarding hovering above elements

Here's a pretty useful steps that hasn't made it into Spreewald yet.

It is best used with the auto-mapper for BEM classes in features/support/selectors.rb

When I hover above [selector] element

When /^I hover above (.*) element$/ do |selector|
  page.find(selector_for(selector)).hover
end

Example:

When I hover above the album's image element

→ triggers a hover event on .album--image

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…

Linked content

tesseract.js: Pure Javascript OCR for 62 Languages

This might be relevant for us since we're often managing customer documents in our apps.

I played around with the library and this is what I found:

  • A 200 DPI scan of an English letter (500 KB JPEG) was processed in ~6 seconds on my desktop PC. It does the heavy lifting in a Web worker so you're rendering thread isn't blocked.
  • It detected maybe 95% of the text flawlessly. It has difficulties with underlined text or tight table borders.
  • When you feed …

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…

Linked contentDeprecated

Creating icon fonts with Icomoon

Icomoon.io offers a free app to build custom icon webfonts. It offers downloads as webfont set (.eot, .ttf, .woff, .woff2) or as icon set of SVG and/or PNG and many more file types, or even SVG sprites.

From my experience, the frontend developer should create the font, and not the designer. There are many tweaks required during font development, and routing changes over the designer imposes just too much overhead.

On rare occasions, webfonts may be blocked by an entreprise's security policy. Be sure webfonts can be u…

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

What every coder should know about gamma

Good article about what "gamma correction" means for color processing, and what "sRGB" actually means.

You probably do not need to know this for web development, but it's an interesting read.

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