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.
I think I may need to start categorising them...for now it just this list.

- Wget: Mirroring a site for offline usage or archiving

There are good reasons to decide to turn your cms-driven site into a bunch of static html-pages. It speeds up the page load, it is safe, it is maintenance-free and often a lot smaller too.

There are several methods to do this effectively. The best two options are using Httrack or using Wget. Although Httrack may be more advanced I prefer using Wget --mirror. It is very simpel and fast! This works best with some additional flags.
--adjust-extension and --convert-links work together. --adjust-extension changes the file extensions (like .php or .asp etc.) to .html .
--convert-links changes any links found in the files to the new filenames created by wget.
The --restrict-file-names=windows turn the query questionmark into an @-symbol. This helps making the files work offline (without any server).

So the final command looks like this:

wget --mirror --convert-links --adjust-extension --page-requisites --no-parent --restrict-file-names=windows

It is good to realise that some things still require manual work. Forms for example won't work, search driven pages will not display correctly. Those things need to be dealt with seperately.

- Drupal console: Export the configuration for an entity

The following command will get you yml files inside your module config/install directory.

drupal config:export:entity [arguments] [options]

for example:

drupal config:export:entity node_type page --module="demo" --optional-config --remove-uuid  --remove-config-hash

Notice the "--optional-config" flag! This will put the files inside of the optional directory instead of install. This will make it a soft requirement and it will be installed only when all dependencies are met, else it will simply install the module without it.

More tips and tricks here:

- Resizing images in bulk.

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

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'

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

- Get all images from a domain into the current directory.

wget -nd -H -r -P ./ -A jpeg,jpg,bmp,gif,png -e robots=off

  • -nd prevents the creation of a directory hierarchy (i.e. no directories).
  • -H: span hosts (wget doesn't download files from different domains or subdomains by default)
  • -r enables recursive retrieval. See Recursive Download for more information.
  • -P sets the directory prefix where all files and directories are saved to.
  • -A sets a whitelist for retrieving only certain file types.
see more:

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

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:
pdftoppm -rx 300 -ry 300 -png file.pdf prefix
To print only one page, use
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.

pdfimages original.pdf ./myimages
This will get you a bunch of .ppm-files. You can convert those to png with:
mogrify -format png ./myimages*.ppm
and finally to remove the ppm-files use:
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:

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

copy a local dir called 'archive' to a remote servers public folder.
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:

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

- Sass: Background-image with retina mixin

@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: for details on many different devices.

- CSS: Attribute selector

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

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.

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.

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:

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


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

or a url:

- 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
  • "this phrase on"
  • simular sites to
  • 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:


on a command line and find the keycode for the key (UK its keycode 49) then run
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

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