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.

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

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

Example: Menu with multiple opt...

A comprehensive introduction to sending HTML emails.

Intro:

HTML email: Two words that, when combined, brings tears to a developer’s eyes. If you’re a web developer, it’s inevitable that coding an email will be a task that gets dropped in your lap at some time in your career, whether you like it or not. Coding HTML email is old school. Think back to 1999, when we called ourselves “webmasters” and used Frontpage, WYSIWYG editors and tables to mark up our websites.

Table of Contents

• Introduction To Sending Email Link
• Email List B...

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.

• Plot graphs in Ruby
• WebGraphviz renders in your browser via JavaScript (to store the rendered graph, extract the SVG using your browser's DOM inspector)
• GraphViz with DOT: Online http://graphs.grevian.org/graph https://graphviz.christine.website/ or offline https://makandracards.com/makandra/1589-auto-generate-state_machine-graphs-as-png-images
• Balsamiq
• Draw.io
• [Excalidraw](https:...

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

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

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

AWstats is build to regularly run on webservers. If you want it to build a report once, here is the minimal configuration you need:

Put the following into the awstats config file (look into /etc/awstats/awstats.conf.local or look into /etc/awstats/awstats.conf how to do it on your system):

SiteDomain="yourdomain.de"
DirData="."
DNSLookup=0

Run the following to build a simple HTML page:

awstats -staticlinks -config="yourdomain.de"  -LogFile=your-logfile.log -output > report.html

This might take a second (it will take ...

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

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>

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

Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating data over the network every five minutes?

It's a good idea to pause this if the your document tab is not even visible to the user. This saves your user's battery and data plan.

You can ask document.visibilityState whether this tab is visible:

function pulse() {
  if (!document.visibilityState || document.visibilityState...

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

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:

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

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.

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

This card has become a blog post!

The linked site hosts a simple test. It shows two images with narrow vertical/horizontal lines. The more they resemble each other, the more Retina your display is.

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:

Further reading

• [PostgreSQL-FAQ: Why do my strings sort incorrectly?](h...