HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

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

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

icomoon.io

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

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.

blog.johnnovak.net

The Current State of Telephone Links | CSS-Tricks

The linked article shows what current browsers do when you click a link like this:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Spoiler: The current state is sad

It's still the case that most desktop browsers can't do something useful with tel: links. They will usually open a dialog confirming that an external application will be opened. If the user confirms, she will see an error, or nothing at all.

On mobile browsers on the other hand, these links just open...

css-tricks.com

Name that Color

This service gives you a kind-of standard color name for any hex code.

This is useful if you want to extract some colors into a Sass $variable and are looking for a proper variable name.

chir.ag

About the HTML and the BODY tag

The <html> and <body> tags both come with some non-default behavior that you know from other tags.
Do not try to style html or body for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.

Generally speaking:

Use the html tag to define your page's default background color (because on short pages or large screens, your body may not be as tall as the browser window).
Use the html tag to define a base font-size so you can use [rem units](https://www.sitepoint.com/underst...

phrogz.net

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.

object-fit polyfill by lazysizes

All new browsers support the new object-fit CSS property. It allows to specify how an element behaves within its parent element and is intended for images and videos. The most useful values are contain (fit-in) and cover (crop).

Unfortunately, IE does not support this yet. However, if you're already using lazysizes, you can use its object-fit polyfill!

Usage

In your Javascript manifest, require them like this:

#= require plugins/object-fit/ls.obj...

css-tricks.com

Lazysizes 2 is here

It claims to be even faster and brings a new plugin that polyfills object-fit and object-position. This allows for easy arrangement of e.g. images and videos inside containers.

As caniuse.com puts it, object-fit/object-position is a:

Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like backg...

github.com

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

image_loader.js.coffee

Preloading images with CSS

Sometimes you want to preload images that you will be using later. E.g. if hovering over a an area changes its background image, the new image should be preloaded. If you only load it once the user starts hovering, there will be a delay until the background image flips.

The attached article explains how to preload images with only CSS. No Javascript required.

The gist is:

.element:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none;
}

thecssninja.com

Official Color Codes for the World's Biggest Brands

brandcolors.net provides you with the colors of the world's biggest brands, easily searchable.

brandcolors.net

How to preview an image before uploading it

When building a form with a file select field, you may want to offer your users a live preview before they upload the file to the server.

HTML5 via jQuery

Luckily, HTML5 has simple support for this. Just create an object URL and set it on an <img> tag's src attribute:

$('img').attr('src', URL.createObjectURL(this.files[0]))

Unpoly Compiler

As an Unpoly compiler, it looks like this:

up.compiler '[image_p...

developer.mozilla.org

Install MySQL 5.6 in Ubuntu 16.04

Instead of using this hack you might want to use MariaDB 10.x which can work with both old and new apps.

An alternative could be to use the MySQL Docker image which is still updated for 5.6.

Ubuntu 16.04 only provides packages for MySQL 5.7 which has a range of backwards compatibility issues with code written against older MySQL versions.

Oracle maintains a list of official APT repositories for MySQL 5.6, but those repositories do...

Geordi 1.3 released

Changes:

Geordi is now (partially) tested with Cucumber. Yay!
geordi cucumber supports a new @solo tag. Scenarios tagged with @solo will be excluded from parallel runs, and run sequentially in a second run
Support for Capistrano 2 AND 3 (will deploy without :migrations on Capistrano 3)
Now requires a .firefox-version file to set up a test firefox. By default now uses the system Firefox/a test Chrome/whatever and doesn't print warnings any more.
geordi deploy --no-migrations (aliased -M): Deploy with `cap ...

Shrine - A file upload toolkit

Now that CarrierWave is no longer maintained, Shrine might be worth a look.

shrinerb.com

1 2 3 4 5 6 7 8 9 14