screenshot of the jpegoptim help page

List of random snippets

The following is a random list of things I sometimes need and always forget. So I decided to write them down for quick reference.
All of these are based on Ubuntu, but they should work pretty much simular on any linux system.
Always be carefull though! Do not just copy, paste and execute any command if you are not sure that it is not going to damage your system.

- Resizing images in bulk.

This requires imagemagick.
resize images recusively with a max width of 1200px (in this example)

1
find . -iname \*.jpg -exec convert -verbose -quality 100 -resize x1200\> "{}" "{}" \;

This requires jpegoptim.
Optimise images recusively
optimise to 80% quality & 75% filessize & save them in './folder'

1
jpegoptim -m 80 -v --size=75% -t -d folder *.jpg

- Render .png's from .pdf pages

In the poppler-utils packages there is the utility pdftoppm capable of converting pages from a pdf file to ppm, png or jpeg format:

1
pdftoppm -png file.pdf prefix
will produce prefix-01.png etc. for each page. By default the resolution is 150dpi.
Increase the resolution (for higher quality output) as follows:
1
pdftoppm -rx 300 -ry 300 -png file.pdf prefix
To print only one page, use
1
pdftoppm -f N -singlefile -png file.pdf prefix
where N is the page number, beginning with 1.

- Copy files from local to remote, using scp

I am always confused when wanting to use scp. What was it again? Local - Remote? Remote - Local? Both are possible, depending on what you want to do. Basically it comes down to this:

1
scp <source> <destination>
Your source can be either the remote server or your local computer and vice versa.

EXAMPLE:
copy a local dir called 'archive' to a remote servers public folder.
1
scp -rp -P 1902 ./archive/ you@remote-server-ip:/var/www/htdocs/files
-r = recursive -p = preserve system metadata -P = provide portnumber 1902 = portnumber user@ip = username on the remote server (either by name or ip) :path/to/dir
see more variations on UNIX stackexchange.

- Recursively operate on all directories or files (in a specific directory)

To recursively give directories read&execute privileges:

1
find /path/to/base/dir -type d -exec chmod 755 {} +
To recursively give files read privileges:
1
find /path/to/base/dir -type f -exec chmod 644 {} +

- Sass: Background-image with retina mixin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);
 
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($file + '@2x.' + $type);
      -webkit-background-size: $width $height;
    }
  }
  /*this could be extended with other ratios* */
}
 
/* Example */
#foo {
  @include background-image-retina('foobar', 'png', 10px, 20px);
}

*see: screensiz.es for details on many different devices.

- CSS: Attribute selector

The attribute selector is any attribute that’s inside of an HTML element

1
2
3
4
5
6
7
8
9
10
11
a[href]{}                            /*all links with an hyperlink reference*/
a[name] {}                           /*all named links*/
a[href^="http"]{}                    /*all links that <em>start with (^)</em> 'http'*/
a[href^="#"]{}                       /*all anchor-links*/
a[href$=".pdf"]{}                    /*all links that <em>end with ($)</em> a specific filetype*/
div[class]{...}                      /*all divs with *any* class*/
img[src^="/images"]{}                /*all images from a specific source*/
img[alt~="word"]{}                   /*all image with the word "word" in the alt. The ~ is a whitespace selector*/
img[src|="-hyphened"]{}              /*all images with "-hyphened" in their src. The | is a hyphen selector.*/
[class*="partial"]{}                 /*any element with the word "partial" in its class: p.partial1, h3.partial-12*/
div[style*="border-color: red"]{}    /*any div with an <em>inline style</em> of border-color:red*/

see: this blog

- AudioSprite | Howler: Create an audio sprite

An audio sprite is, like an imagesprite, a single file with multiple sources combined, seperated by some 'whitespace'.
In this case 1 second of silence. It is usefull for working with audio in webprojects.
This example is based on Howler.js but it is pretty simular for other libraries like Lime.js or create.js This requires this audiosprite script.

1
audiosprite --output soundfx --format howler -c 2 *.mp3

Markup Quotes

screenshot quote
Quotes :before and :after

A simple and little known way to markup quotes.

1
2
3
blockquote { quotes: '\201c' '\201d'; }
blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

The \201c here is Unicode for a left curly double quote. You could also simply write the double quotes directly in the rule for blockquote:

1
blockquote { quotes: '“' '”'}

open-quote and close-quote are special values for the content property, which refer to the strings given as values for the quotes property.
The nicest thing is: this can be set for any element. So you can easily set different quotes symbols per context (like a different language or another type of page).