Wednesday, May 21, 2014

Quick tip: CSS for Hanging indentation


Sometimes you need to achieve a fancy effect on the first line of a paragraph, so that just the first line is indented to the left and the other lines be displayed a little bit to the right. Even, I discovered that it has a name 'Hanging Indent':

This is the first line of a very very very very very
    very very very very very very very very very very
    long paragraph. And there is more than one sentence.

    In fact we could reach almost a dozen.


Just apply a combination of a negative text-indent and padding-left (or margin-left). Ex:

p {
  text-align: left;
  text-indent: -25px;
  padding-left: 25px;
}


There is a 'first-letter' property in css that gives you more customization @see this

Monday, May 19, 2014

Quick tip: optimize images from command line

I use this trick for quickly optimize images. Note, I use ubuntu:

just install these tools

sudo apt-get install optipng jpegoptim

and now you can do (beware: input is overwritten)

optipng file.png 
jpegoptim file.jpg

both tools work in the same way

jpegoptim [ options ] filenames
optipng [options] files



to convert between formats, you can use imageMagick

sudo apt-get install imagemagick

and now

convert input.png output.jpg
convert input.jpg output.png 

Profit!