H. G. Parra hparra

(So much information)

Generator

Perkins Coie Delaware Startup Forms Wizard

Resize

convert -resize 75% <2x source> <1.5x destination>
convert -resize 50% <2x source> <1x destination>

Add Padding

(I keep forgetting how to do this!)

* returns all files in a directory. It can also be used as a general wildcard:

*.jpg will return only JPG filenames
something* will return only filenames that start with something

for f in *; do mv $f $(echo $f | sed SED_SCRIPT); done

Micro Media Queries

Micro Media Queries (MMQs) provide a way to specify CSS media queries in a short format. They use descriptors specified in the srcset attribute with a grammar inspired by @media rules.

The idea of MMQs came about when attempting to consolidate the various methods for producing responsive images: @media, <img srcset>, image-set, and <picture>. A goal is to have 1-1 correspondence so that it easy to convert a query between any of these formats.

Since MMQs tend to be very short, they may be particulary helpful as folder names, within a filename, or as a snippet.

Examples for Use

On Carousels

TODO

On Responsive and Adaptive Images

There is quite a bit going on in both the HTML and CSS specifications regarding responsive and/or adaptive images. It can get a little overwhelming.

Specifications

The srcset attribute

Authorities

Path Nomenclature a la Node

The following is path nomenclature inferred by the node.js library:

path: /path/to/your/file.txt
dirname: /path/to/your/
basename: file.txt
extname txt

When writing code for node, it is preferable to use these terms for variables, etc.

Stop Calling it a Media Query!

Sometimes there is confusion regarding what a media query actually is. Let's review some CSS terminology with an example.

So what part is actually the media query?

/* Isn't this a media query? Nope. */
@media
only screen and (max-width: 320px) and (min-device-pixel-ratio: 2),

BrowserStack's Screenshots service lists Android devices by manufacturer, which isn't very helpful. They are ordered here by version.

BrowserStack has additional devices via their Live testing service, which does a better job of displaying the devices by OS version and type. It also lists device resolution. Listing the DPI would be a great addition.

An asterix (*) denotes a tablet.

Devices by Android Version

Android 2.2 Froyo

	#!/usr/bin/env bash

	#
	# backgroundimages.sh
	#
	# Reads directory for image files with @1x substring and
	# Creates retina-ready background-image LESS classes using Preboot's .retina-image mixin
	#
	# Requires ImageMagick
	#