I hardly ever have time to stay in front of my computer and watch speeches about subjects that I’m interested in.

For example this speech given by John Resig: John Resig on Advanced Javascript to Improve your Web App.

So in order to solve my lack of time problem I prefer to listen these speeches in my mp3 player. I do that when I’m walking, when I’m waiting for the bus, when I’m doing workout, etc.

There are same steps that I follow to do that.

Downloading the video

The first think to do is download the video. To download the video I use a firefox plugin named “NetVideoHunter”.

You can have it installed by clicking here NetVideoHunter plugin.

It works for almost all the video-sharing site likeYoutube, MySpace Music, Google Video, Metacafe, Dailymotion, Break, Putfile, etc.

Installing the FFmpeg software

After you have the video downloaded you need to extract the audio of the video and convert it to mp3 format. So it will be able to be played in your mp3 player.

The software that I use to do it is the FFmpeg. It is a is a free software / open source andit can runs in Windows, Linux, Mac OS, etc). It does much more than just extract the videos sounds. Maybe someday I’ll write about this great software. But now I’ll just focus on its feature that is extract the sound.

To download and install the software you have some possibilities:

1. Download the source files and compile it.
2. Download the executable file to run it on Windows.
3. Install the package in your Linux.

You may need to install the Lame Encoder then follow the instructions that are in this page.

You have all that you need: the video and the ffmepeg and the lame encode installed.

Now lets extract the video sound

The extraction of the audio is easy. All we need to to is using this code bellow. By doing that you’ll extract the sound  in the mp3 format with a good quality:

ffmpeg -i video_file_name.flv -ab 160k -ar 44100 -ac 2 mp3_file_name.mp3"

If you are on Windows use the command.

ffmpeg.exe

*It works for a lot of video formats not just only to flv.

About the commands

Let’s talk about these options one by one in brief:

ffmpeg / ffmpeg.exe (windows) : the executable
-i filename orginal: -i indicates the the next expression’ll be the filename original
-ab bitrate: set audio bitrate (in kbit/s)
-ar rate: set audio sampling rate (in Hz)
filename destination: put the file destination

Now you know how to extract audios from videos.

Sometimes I have to download sequential files from websites, specially images, and unless you are a robot you’ll agree with me that this task could be a very very boring thing to do if there are many files to download. So I built a little python script that saves sequential files in your computer.

By sequential files I mean files that have a numerical sequence on their name.

For example: trip_photo_1.jpg, trip_photo_2.jpg, trip_photo_3.jpg … trip_photo_347.jpg.

The script is:

import urllib2
import webbrowser
import os
ini = 1
end = 100
while (ini <= end):
    url = "http://www.thesite.com/folder/subfolder/file" + str(i) + ".ext"
    opener = urllib2.build_opener()
    page = opener.open(url)
    file = page.read()
    filename = "file_" + str(i) + url[-4:]
    print filename
    fout = open(filename, "wb")
    fout.write(file)
    fout.close()
    i += 1

All you need to do is configure the the values of ini, end and url variables and run this script.

ini = initial number of the sequence
end = final number of the sequence
url = url pattern

Download the script.

However, this feature allows designers and developers to use any font family even if the user who is visiting their site does not have it installed on his/her computer.

In order to use this feature the first thing that you need to do is name the font and also put its path. For example:

@font-face {
    font-family: 'CalligraphyFLFRegular';
    src: url('CalligraphyFLF.eot');
    src: local('CalligraphyFLF'), local('CalligraphyFLF'),
         url('CalligraphyFLF.woff') format('woff'),
         url('CalligraphyFLF.ttf') format('truetype'),
         url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');
}

In the first line we start with @font-face. In the second line we put a name to our font, in this case we named it CalligraphyFLFRegular. The local means ‘first check if the font is already installed’ and finally if it is not installed we list the formats that are able and the path of each format.  As each browser needs a specific format the browser just get the format the it needs and renders it correctly.

It is very simple.

How to apply imported fonts with CSS selectors

Now we need to apply this font-face in our style:

h1 {
    font: 60px/68px 'CalligraphyFLFRegular', Arial, sans-serif;letter-spacing: 0
}

Did you realize that the fist name font-family name is the same that we defined at the @font-face?

That is it.

Compatibility

Take a look at the @font-face browser support.

@font-face kit

If you visit the Font Squirrel site you’ll see that each font has a button named “Download @font-face kit”.

If you download the kit you’ll have all the formats that you need to start to use real fonts on the web.

Even better, if you need you can upload your font family and this site will generate the ‘@font-face kit’ to you.

Embedding the font in CSS file

Almost all fonts are protected by copyright and very few of them allow for linking via CSS or redistribution on the web. It may be a problem to put the font file on line because if you use the @font-face { src url(…)} you allow your visitors to download the font.

There is a technique that allows you to embed the font in a CSS file. It is almost the same idea of embed the image in HTML file.

To do this example I had to convert the font with the woff extension to a base64 string.  In this example I converted the font Calligraphy by using the PHP function base_encode:

<?php echo base64_encode(file_get_contents("CalligraphyFLF.woff")); ?>

After that I put this base 64 string in my CSS file:

@font-face {
    font-family: "Calligraphy";
    src: url(data:font/woff;base64,THE_BASE64_STRING_HERE)
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

See a demo: @font-face – embedding the font in CSS file.

Unfortunately up until now this example works only in the Firefox browser.

But, don’t worried about it, there is a solution to fix that, the Typekit. The propose of this site is to serves the font that you need to make your site more beautiful. You just need to configure the font and paste a few lines of code in your web site.

Here you can see good explanation about how it works: Getting Started with Typekit.

If you have any doubt or suggestion, feel free to comment.

Options

The config is very very simples. It’s something like that:

/* You can change the highlighted informations: */
{
	domain: 'gmail',
	extension: 'com',
	country : '' /* like br, au, uk... */,
}

Calling the script

All you need to do is call the script.

$('span.mail').mailto({'domain':'gmail', 'extension':'com'});

Considering that you have this code your page

	<span class="mail">
		pererinha
	</span>

Demo, demo, demo…

jQuery maito plugin – demo.

You can download the code from jquery-mailto on github.com.

But the problem was that to customize this page the proxy settings just have a textarea field. It means that I couldn’t upload the HTML, CSS file nor images.

So the best solution that I founded was to embed the image in the HTML. I just have read about this technique but I’d never did it before.

I’ll describe the steps that I did.

Designing the page

First of all I designed the new ‘Access Denied’ page. I designed it using Photoshop.

PSD to HTML

After I’d designed the page I converted it to HTML.

I did it using my editor. I used the slice image technique due to by doing it I just needed only one image.

So I created a style class named .image and set its background with the image url.  After that I put this class in each element of my page that had a image than I just changed the background position to each one.

Converting image to base64

In order to embed the image I’d to convert it from binary to base64 string.

There are many ways to do it. I used a PHP function.

The PHP function that I used was:

<?php echo base64_encode(file_get_contents("myimage.png")) ?>

So this function returns a huge string.

Putting image string into CSS

I got the string that the PHP function returned and pasted it into my style class .image, it means I replaced the image url by the base64 string.

.images{background:url(data:image/gif;base64,THE_HUGE_STRING_HERE);}

That is it

That is it. After this simples steps I copied and pasted the HTML into the textarea field of the proxy settings. Now I have my ‘Access Denied’ page is customized.

You can see the page here: HTML file – Access Denied – Imagem embeded.

How does it works?

You can learn more about the gedit Snippets plugin by reading this page Gedit/Plugins/Snippets.

Documentation

If you want an overview of all jQuery and javascript snippets available, take a look into the documentation.

Install

You can download the snippet (js.xml) from github http://github.com/pererinha/gedit-snippet-jquery/tree/master and replace the one that is in the folder
~/.gnome2/gedit/snippets.

$ git clone git://github.com/pererinha/gedit-snippet-jquery.git

$ cp gedit-snippets/snippets/*.xml ~/.gnome2/gedit/snippets

More snippets

You can find Ruby, Rails, RHTML and Shoulda Snippets here.