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.
The non-browser/web ones of these are based on Ubuntu, but they should work pretty much simular on any linux 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.


- Extract original images from a PDF

Another thing that can be very usefull is the abillty to extract all the original images used in the PDF and save them as PNG.

First extract them. They will be named and numbered, e.g: myimages-000, myimages-001. You can ofcourse name them anything you want.

1
pdfimages original.pdf ./myimages
This will get you a bunch of .ppm-files. You can convert those to png with:
1
mogrify -format png ./myimages*.ppm
and finally to remove the ppm-files use:
1
rm ./myimages*.ppm

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

- Sublime select specific elements with regex

screenshot regex search
Find variable phrases between fixed strings

Using the following regex it is possible to manipulate many recurring strings with slight differences (like urls for example).

1
([\w\W]+?)

Anything before and after this expression are constants in the strings you want to select, wrapped around anything that is not simular in those strings.
So this makes it very usefull for selecting things like ids or names, making it easy to change the markup or copy only specific parts of your file (like all image-urls in a document for example).

This would select any href

1
href="([\w\W]+?)"
or a url:
1
(http)([\w\W]+?)(?=")
1
(http)(.+?)(?=")

- Google query manipulators

Within google you can use specific terms and symbols to limit or extend your query.

  • " ""find this entire string"
  • -find this but -not -this
  • ORfind this OR this
  • intext:any of these within the pagetext
  • allintext:all these words (somewhere) within pagetext
  • allintitle:all words within pagetitle
  • allinurl:all words within pageurl
  • site:nu.nl "this phrase on nu.nl"
  • related:nu.nl simular sites to nu.nl
  • location:Rotterdam
  • filetype:Rotterdam
  • ~simular
  • *wildcard

- Change what a key does (Ubuntu)

My key for <\tab> has been used too many times!. It broke. This is really annoying!

Luckily it is quite easy to asign another key to work as <\tab>. Here is how:

run

1
xev
on a command line and find the keycode for the key (UK its keycode 49) then run
1
xmodmap -e "keycode 49 = Tab"
replacing the keycode from xev when you press that key. You should now have a remapped key !

to save these you need to run

1
xmodmap -pke >~/.Xmodmap
update you need a modifier too
1
xmodmap -e "keycode 49 = Tab asciitilde"
should work