Anyhow, the other day I came across a situation when trying to compact a group of files. At first glance seemed really simple but proved to be a little more challenging.

Problem:
I wanted to tar all the .ini files from a certain folder. From anywhere. Without full paths.

tar -jcvf backup.tar.bz2 full_path/*.ini

NOPE! Full paths!

Lets try the -C option to switch to the relevant path before gobbling so that we only get the files without the path.

tar -jcvf backup.tar.bz2 -C full_path *.ini

NOPE! No files found!

Well, it seems that when you’re using -C, tar expects a list of files. And while pattern matching should be possible you’re not actually in the right path when trying to get the list of files. Get it? Tar is there expecting files from that path but the CLI is not.

Solution:
So after few too many tries to find a simple solution I arrived at this:

tar -jcvf backup.tar.bz2 -C full_path `(cd full_path; ls *.ini)`

Not so pretty but this way you might even apply other gobbling commands like find to better suit your needs. I bet sysadmins were already in on this issue but developers trying to code backup or conversion utilities might find it useful. Well, did you… punk?

Look no more, just use this in your code…

console.log('so easy...:', yourVarObjectWhatever);

Then, just open up your Firebug console (you’re using it right?) and marvel at the wondreous info you were looking for all along. In a way it’s similar to a var_dump from PHP.

Yep, I didn’t know either.

Here it is [google].

Slides HTML5 (Portuguese)

dig domain_name +short

Just type it in your linux/unix/os x console or exec from your script.

If this returns an IP address, then it’s taken.

If it comes out empty, then it’s most likely available.

Let’s say you need to have 2 nice boxes, side by side:

Crap. They are not side by side. This happens because I used a div, a block element, that always adds a new line to elements. Well, to avoid this you add the property display:inline to the boxes. This will tell the two elements that they should display in the same line.

Ok, they are in the same line now. But wait… those don’t look like the same boxes anymore. Yep, that’s because when you add display:inline you lose the ability to control margin, width and height. Nightmare ensues. You already want to go back to tables. But wait… there is the best of both worlds: display:inline-block

Done! It is this simple. No more fancy stuff required.

Some of you might go “Duh, that one was obvious.” but many others will say “Doh, never try that one before.”. That makes it worthwhile to mention, specially because not all browsers supported this correctly in the past. So, more excuses to use tables for formatting.

Problem:

Yet, I wanted to be able to change their background, dynamically, to adjust to themes being used on a web app. As you might know, images need to be contrasted accordingly to their background or they will end up jagged, blocky and you know… looking bad. And, with animated GIFs the problem is even worst. So, I created a preloader image with a transparent background (made from white) and went on to see how I could solve my problem.

Solution:

The first thing that comes to mind is, how do they do it? Since those websites already customize those images to your liking, what they’re using would solve my problem. Drawing from experience, I knew that they were using some kind of server side image manipulation library to achieve that outcome. So on I went to PHP and the old faithful GD graphic library.

ERROR. Well, a little delving into the docs and some quick searches later, I was getting nowhere. GD supports animated gifs but only after 2.0, still the bundled lib that comes with PHP is not the same. And still the solution using GD wasn’t elegant at all.

SUCESS. Finally giving up, I explored the other libraries. In its favor, PHP has support for many more. Highly recommend from the PERL world, comes ImageMagick. So I quickly set it up on my server and scrimmage the fix based on an example from the PHP docs, A couple of tries and here is the result:

$path = '/path/to/your/animated.gif';
$img = new Imagick($path);
$color = new ImagickPixel("#E2E1EE"); // your color
// resize and colorize all frames
foreach ($img as $frame)
{
   $frame->thumbnailImage(24, 22);
   $frame->setImagePage(24, 22, 0, 0);
   $frame->borderImage($color,1,1);
}
header("Content-Type: image/gif");
echo $img->getImagesBlob();
exit;

Bonus Tip:

You might ask why the resize? Well, if you get the preloader image in a larger size the resize algorithm will take care of adjusting the transition pixels to match the background color of your choice. Great, huh?