In this post I’m setting up a secure password management system which is accesible from anywhere with Windows and Mac (any OS will do).

When my Macbook Pro was stolen I succesfully changed all my account passwords whitin a day. I had backup copies of my passwords stored in my dropbox account. All I needed was another computer and access to my account. Here are the steps to keep your passwords safe and in the cloud.

I use a free Dropbox account to sync files that I access from multiple locations, using their secure web storage. It is incredibly convenient to develop something on my laptop, save it in my Dropbox folder, and access the files from my desktop or phone. Before, I would have emailed the files to myself.

Signup for a Dropbox account and download the client

• Create a dropbox account

Create an account first, then run the Dropbox Installer. From your browser’s Downloads window, double click the .dmg/.exe file that just downloaded. After downloading the client, follow the steps to install the client. Double click the Dropbox icon in your Applications folder or desktop to get all set up, and you’re good to go.

Download and Configure Keepass(X)

• KeepassX for Mac OS X / Keepass for Windows for storing passwords crossplatform, check here for more platforms

Start Keepass(X). The very first step is creating a new password database. To create one, click ‘File – New…’ in the main menu. A window will appear, which prompts you for a master password and/or key file. The database will be encrypted with the password you enter here. The password you enter here will be the only password you’ll ever have to remember from on now. It should be long and built up of mixed characters. Keep in mind that when someone gets your database file and guesses the password, he could access all passwords you stored in the database.

Adding an entry

Time to store your passwords in the database! Right-click and choose ‘Add Entry…’. In this window you can now edit your entry: enter some title for it, an username, an URL, the actual password, etc. If you don’t need some of the fields, just leave them empty. When you’re done, click [OK].

You’ll see your new entry in the password list on the right now.

Putting it al together

When dropbox is installing the program creates a shared folder which is synced to internet (the cloud). This is default your public folder.

The final thing to do is move your Keepass(X) database and keyfile to your shared folder and it is synced automatically.

For a recent project I had to create a bunch of icons. Instead of slicing every icon by hand I am using CSS sprites. Which is essetially a big optimized image with a lot of smaller images in it. Sprites are frequently used for performance optimisation, together with caching and minifying css, javascript and html.

In this tutorial I’m creating the icons used for this top navigation bar.

I got the icons from http://www.freeiconsdownload.com/Free_Downloads.asp?id=265.

Step 1

Get the icons open photoshop, select the ones you like and put them behind each other. When finished save them as sprite.png without a background to keep ‘m transparent. Here is mine:

Step 2

Fire up your favourite editor and maybe use zen-coding to quickly generate the markup for the icons.

/*
 Zen coding style
*/
div#icon-holder>span.icon.home+span.icon.articles+span.icon.tools+span.icon.tutorials

<div id="icon-holder">
    <span class="icon home"></span>
    <span class="icon articles"></span>
    <span class="icon tools"></span>
    <span class="icon tutorials"></span>
</div>

Step 3

Then create the css for the icon class:

/*
	CSS for generic .icon
*/
.icon {
	background: url('images/sprite.png') no-repeat scroll 0 0 transparent;
	width:60px;
	height:65px;
}

/*
	Then for specific .home etc.
*/
.home {
	background-position: 0 0;
}
.articles {
	background-position:-250px 0px;
}
.tools {
	background-position: -220px 0;
}
.tutorials {
	background-position: -90px 0;
}

That’s it! You can also use it for list items etc.

Here are some links to handy resources on the web:

• CSS spriting tips from mozilla
• CSS Sprites Tutorial
• CSS Sprite Generator