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...
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.
Generating a barcode is simple:
>> Barby::Code128.new('Hello Universe').to_png
=> "\x89PNG\r\n\u001A..."
Barby supports several barcode types and you must require all necessary files explicitly.
For the example a...
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.
dialog --yesno "Erase the world?" 0 0
Example: Menu with multiple opt...
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.
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...
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:
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...
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...
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.
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...
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.
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>
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...
When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.
Desktops, tablets and mobile devices have all different screen resolutions. Does your design work on each of them?
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.
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:
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).html
tag to define a base font-size
so you can use [rem
units](https://www.sitepoint.com/underst...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...
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.
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.
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!
In your Javascript manifest, require them like this:
#= require plugins/object-fit/ls.obj...
PostgreSQL uses the C library's locale facilities for sorting strings:
a A b B c C
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...
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...
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/
...
Say we want …
Gallery
that has a name and has_many :images
, which in turn have a captionEnter 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...
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()
.
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;
}