Useful Linux commands for a blogger

Sometimes you make screenshots for your posts, then you cut them at best, then you want the same size for all of them.

Nothing could be simpler with linux, open a terminal, go in the folder with the screenshots and launch this command:
mogrify -resize 550 *.png                                                                                     

All the images in the dir will be resized at 550px width.

NB: you must have installed before the suite imagemagick (just write in the terminal  sudo apt-get install imagemagick).

Sometimes you want to publish a flyer, but you have only the pdf, so you can convert it in a *.png image with a simple command:

convert my_flyer.pdf new_flyer.png                                                                    

Linux is simple!

Polaroid Gallery effect: tutorials and demos

I've always loved Polaroid photos, in the web there are several tutorials and demos to repeat their format and add some nice effects. Here's a small overview about the most interesting, for me:

Web Symbols typeface & CSS3

Web Symbols typeface is a font library that collects "all frequently used iconographics and symbols" in website developing.

It's vector based and html compliant so is a faster and more flexible alternative to graphic icons.

Useful Tools

Here some useful tools and sites about: Clip art, Tutorials, html5, jQuery.

A "Read more/Hide" link with jQuery

Sometimes you have long text and few space to show it, with jQuery and CSS is very simple to hide part of the text and create a "Read more" link.

jQuery: .hover()

The function .hover() resumes the methods mouseenter and mouseleave. Let's assume that we have an hidden div in our CSS:

#effect{display:none;}

jQuery: .clone()

The .clone() function is useful to copy a portion of code somewhere in a page.

CSS3: transform:rotate

With CSS3 we can rotate images, let's see this pic:

jQuery: .load()

The load () function of jquery allows us to load a page (or a part of it) in an element.

Let's make an example with a link and an empty div:

hello!!

By clicking on the link we want to load a page in # description, simply call the load () function in this way:

$(function(){
  $('.itemlink').click(function() {
   $('#description').load('loaded.html');  
  });
});

Demo: