Archive for December, 2009

ffmpeg Cheat Sheet

ffmpeg is a video encoder for linux. This tool is very versatile and can do pretty much any kind of video processing all from the console.

As with any linux tool, there a tons of bells and whistles. This makes the learning curve kind of steep, but with a bit of determination anyone can make sense of it. Without further ado, here’s the cheat sheet:

Mencoder Cheat Sheet

Mencoder is a video encoder for linux. It is part of the mplayer package which also includes a video player. This tool is quite versatile and can do pretty much any kind of video processing all from the console.

As with any linux tool, there a tons of bells and whistles. This makes the learning curve kind of steep, but with a bit of determination anyone can make sense of it. Without further ado, here’s the cheat sheet:

Using Subversion for Server Backups

Last month, I lost the template for Barry Bakes. I was ultimately to blame for it for 2 reasons:

1. I had altered the default template without copying everything to a new folder.
2. I had no server backups running.

After a few iterations, I came up with an ingenious way to use subversion and rsync to handle my backups and not waste megabytes every day from duplication. Also, this method doesn’t leave you with a folder full of backup folders. There are 2 folders, the svn repository and the rsync folder.

To do this, you must generate dsa  or rsa keys for passwordless logins.

To set it up svn, you must do the following:

svn create /path/to/svn/repository
rsync -azvv --progress server:/path/ /local/path/
cd /parent/of/local/path/
svn import folder file:///path/to/svn/repository -m 'Initial Import'
rm folder -rf
svn co file:///path/to/svn/repository

Note that everything in bold must be replaced with your specific values. Once that is done, run this shell script once a day to commit changes to subversion:

#/bin/sh

/usr/bin/rsync -azvv --delete --progress server:/path/ /local/path/
cd /parent/of/local/path/
/usr/bin/svn status |
	/bin/grep '^?' |
	/bin/sed 's/^?       /svn add "/g' |
	/bin/sed 's/$/"/g' |
	/bin/bash
/usr/bin/svn status |
	/bin/grep '^!' |
	/bin/sed 's/^?       /svn delete "/g' |
	/bin/sed 's/$/"/g' |
	/bin/bash
/usr/bin/svn commit -m '`date +%Y-%m-%d`'
/usr/bin/svn update

That will update and commit the changes to subversion. It comments the date in yyyy-mm-dd format for each commit. Plus, now you can checkout any date (revision) you want!

Happy Backups!

SSH Without a Password

You can ssh from one box to another without typing in your password. This is done using a key pair. One key sits on the computer A, the other on computer B. Starting logged into computer A, here’s how you do it:

ssh-keygen -t dsa
ssh B mkdir ~/.ssh/
cat .ssh/id_dsa.pub | ssh B 'cat >> .ssh/authorized_keys'

When you run ssh-keygen, do not use a passphrase, just press enter. Also, change the bold B to the name or IP of computer B. If you were successful, you should be able to `ssh B` without a password.

To repeat for another computer, do not repeat ssh-keygen, just repeat line 2 & 3. If you run ssh-keygen again, your key will be overwritten and you’ll need to copy it again via line 3.

Using keys is an excellent security measure. You can even setup sshd to only allow keyed logins. No passwords allowed. If you do set this up, make sure you have physical access or a rescue/remote console or you’ll be locked out if you lose your key.

Laptop Fn Keys

On a laptop, there are a few keys that have a blue icon on them. These are function keys. They work when you hold down the blue “Fn” key, which is normally next to the Ctrl key.

There are tons of Fn keys. Not all will have the same icons on them. If you want to know what yours do exactly, there should be an easy to read table in your manual. If you don’t have the manual or can’t find it, check the manufacturer’s website.

Standard Fn Keys

There are volume and mute keys . Look for a speaker. One will be crossed through or X’ed out, that’s mute. Volume up will have a lot of sound waves coming out. Volume down will have small sound waves.

Also, there are two brightness keys. These look like a small computer screen with an icon in the middle. To brighten the screen, hold down Fn and press the one with the larger icon. Use the smaller icon to make it darker.

Another key will control the monitor. It should have two screens on it with a slash between. This will flip back and forth between the laptop screen and the monitor.

There’s usually a Number Lock. Sometimes, you’ll get a Scroll Lock or System Request, even though neither of those keys is really used today.

Bonus Fn Keys

There are a few keys that aren’t on all laptops. One is the wifi key. This will look like an antenna with waves coming off either side. It turns the wifi on and off.

You may have a bluetooth key. It will have that trademark bluetooth icon. You can guess what that one does.

Another key is the sleep key. The icon varies greatly. It may be some Z’s on it, but it will definitely remind you of sleep.

HTML Post #7: CSS & Browsers

In closing up the HTML series, we’re gonna cover stylesheets and differences between browsers.

Stylesheets

This is just a text document that holds all your style information. It is stored in a separate file so the webpages are smaller and keep traffic down on the webserver and the internet.

To set the style of all p tags, you would say:

p {
    color: green;
    text-align: center;
    background: red;
}

That would make everything inside a p tag green, centered, and have a red background. You could do the same with a div tag, table tag, img tag, or any other tag. You can also use a class name:

.christmas {
    color: green;
    text-align: center;
    background: red;
}

Any tag that has class=”christmas” would have those styles. You can combine the two:

p.christmas {
    color: green;
    text-align: center;
    background: red;
}

Now, any p tag that has class=”christmas” will have the style.

The “p.christmas” in that last example is called the selector. There are plenty more types of selectors, including “ancestor descendant” and “parent > child”. Here is more information about selectors and style properties.

Linking

Putting this in the head section will link the page with a stylesheet at http://www.example.com/style.css:

<link rel="stylesheet" href="http://www.example.com/style.css" type="text/css" />

You can even set a print css, only used when printing the page:

<link rel="stylesheet" href="http://www.example.com/print.css" type="text/css"
 media="print" />

A document can have multiple stylesheets. The second one will supercede the first if there’s any duplication. There is one exception. If the first file says this:

p.error {
    color: red !important;
}

Then the second file will have to use “!important” if it is to supercede the color.

Browser Differences

From time to time, you’ll run across something that looks fine in one browser and totally funky in another. If you run into this, do a quick search or two. Odds are that someone else has run into it too.

Many times, the answer will be an IE conditional statement or some sort of CSS Hack. The IE conditional works like this:

<!--[if IE]>
<p>According to the conditional comment this is Internet Explorer</p>
<![endif]-->

It’s really one big html comment! IE will show it. Firefox and the rest will ignore it. You can even say:

<link rel="stylesheet" href="http://example.com/overall.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="http://example.com/ie6.css" type="text/css" />
<![endif]-->

That will tell only IE 6 to use an additional stylesheet.

<link rel="stylesheet" href="http://example.com/ie.css" type="text/css" />Linking

HTML Post #6: Forms

An HTML form is pretty much anything that requests the user for information. They can be used for just about anything from leaving a comment on a blog to uploading a picture to facebook. Even logins are very simple HTML forms.

Here’s an example login, in html:

<p>Please log in.</p>
<form action="http://example.com/login.php" method="post">
Username: <input name="username" /><br />
Password: <input name="password" type="password" /><br />
<input type="submit" value="Log In" />
</form>

The form tag is where the magic happens. It has an action attribute which is where the form sends the information. The form can use one of two methods to send the information: post or get. Post is more secure, and prefered when doing logins.

There are three inputs. The name attribute of the input is sent back to the web server as the name of the data. The type is the type of input, text being the default. You can also use “password”, “submit”, “file”, “checkbox”, “hidden”, or “radio”.

Also, note that all inputs for the form are contained in the form element.

The previous code makes this form:

Please log in.

Get Vs. Post

The main difference between Get and Post is how the data is sent. Get data is encoded into the URL. For example, http://www.google.com/search?q=compguyaug is the URL when searching for “compguyaug” on google. This makes get form results bookmarkable, in most cases. Therefore, get works great for searches and data lookups.

Post sends the data separate from the URL. This makes it more secure and should be used for logins and adding/editing/updating any data. That way, the end user can’t bookmark adding a certain customer and keep opening that bookmark and unintentionally adding that customer.

Note on Files

When creating a form for file uploads, make sure you use post. Also, a special encoding type must be specified:

<form enctype="multipart/form-data" method="post"
 action="http://example.com/uploader.php">
...

Also, some servers have a limit as to how large of a file can be uploaded.

HTML Post #5: Tables & Whitespace

Tables  are one of the fundamentals of html. At one point in time, everyone’s site was built inside a table. It was really easy to do this. Also, whitespace, including spaces, tabs, and new lines, don’t matter much in html, but there are ways to get the whitespace you desire.

Tables

Here’s a 2×2 basic table:

<table border="1">
 <tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
 </tr>
 <tr>
  <td>Row 2, Cell 1</td>
  <td>Row 2, Cell 2</td>
 </tr>
</table>

Which looks like this:

Note that I put border=”1″. If I put border=”0″, no border would be added, like this:

Spanning

Each cell in the table can span across, down, or both directions. This is very similar to the merge cell function in Excel. There are a few points to keep in mind. When you span several columns, the next cell in the html code will be the next cell on the screen. Likewise, when you span several rows, you have to skip that cell on the following row(s). Here’s an example:

<table border="1">
 <tr>
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

Whitespace

Did you notice that the table in the last example could use some text alignment? Maybe vertically align the rowspan cell to the top? Maybe center the colspan cell? How about making the rowspan cell into two lines? Let’s take a look.

Here’s how to vertically align to the top:

<table border="1">
 <tr>
  <td rowspan="2" style="vertical-align: top">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

You could also set vertical-align: bottom for the bottom or middle for the middle.

Centering the colspan cell:

<table border="1">
 <tr>
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2" style="text-align: center">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

Other possibilities are “left”, “right”, and “justify”.

And finally, inserting a line break:

<table border="1">
 <tr>
  <td rowspan="2">I span<br />2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>