Quick Site Backup (files and database) Via the Command Line

If you do any sort of web development, it is more than likely that CPANEL and phpMyAdmin are good friends of yours…and you depend on them. Even though those are extremely handy to create/modify databases and create backups, it is extremely helpful to know how to do the same thing by using only SSH and command line utilities.

To backup (export) a database using the command line interface (CLI):

mysqldump -p --user=username --add-drop-table database > backup.sql

You will then need to provide your database password and the exported data will go into a file called “backup.sql” which is located in the directory that you are currently in. (more mysqldump documentation

To backup your files:

tar -cvzf backup.tgz directoryname

The command will create an archive of all your files so you can easily move or store one file (the archive). More tar documentation.

Add a "Pseudo" Pseudo Class Hover in Inline CSS.

I have been busy this week with a few really cool projects – one of them to create a widget for any site that will show the latest news items from a RSS feed – while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style…until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

<a href="file.html">Title&lt;/a

Nano Tip

I have been doing a lot of work recently on a remote server and have needed to use a text editor – so I decided to use the ever-so-easy nano. Problem is – the files I am working on are very long and editing them is not fun. I finally decided to look through the man pages (I am an emacs person myself) and found something that ended up saving me tons of time…”go to line number”. If you are editing a file and know you need to edit something on line 1245, you would type in:

nano +1245 master.css

and it would open the file to line 1245 so you do not need to scroll down. Thank you man pages!

CSS Containers: Fancier, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the second of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I created this code from scratch and use this for any fancier fix width boxes I might need for sites I create. Height is not fixed. (Also see css containers: simple, fixed width, rounded corners.)

The container:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url(“/downloads/rounded-corners/top-rounded.gif”) no-repeat bottom;}
.roundedBoxMiddle{background: url(“/downloads/rounded-corners/middle-rounded.gif”) repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url(“/downloads/rounded-corners/bottom-rounded.gif”) no-repeat top;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}


<div class="roundedBox">
<div class="roundedBoxTop"></div>
<div class="roundedBoxMiddle">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<div class="roundedBoxBottom"></div>
</div>

General Information:
This is based on a simple graphic I created in Photoshop using the rounded corner box tool, a drop shadow, a stroke, and a left to right gradient. I then cut it up into three pieces: top, middle, bottom. *The .roundedBoxMiddle p {margin:0; padding:0;} is specific to my layout and is not needed if you want to use this.

CSS Containers: Simple, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the first of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I did not create this code from scratch – but I will use it if I need something really simple and really quick. Height is not fixed.

The container:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent{margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent {margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

<div class="jzcontainer">
<b><b></b><b></b><b></b><b></b></b>
<div class="jzcontent">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<b><b></b><b></b><b></b><b></b></b>
</div>

General Information:
Although it is very simple, I am not a fan of the code at all. My next example in this series will look at a fancier and more elegant solution for rounded corner containers. *The .jzcontainer p{margin:0;} is specific to my layout and is not needed if you want to use this.

Page Shift Fix for Safari and Firefox

Ever have a site that when clicking through pages would slightly shift to the left or right? This was driving me crazy and finally after doing some research I found a hack that will do until I can find the solution:

/*this is to keep page from shifting to left on load in safari and firefox*/
html { min-height: 100%; margin-bottom: 1px; }
html { overflow: -moz-scrollbars-vertical !important; }

Find Your Location

If you ever are not sure of the path to one of your scripts of files (.htpasswd), you can easily find out by creating a new PHP file, and then copying the following code into the file:

After you save the file, view it in your browser and you will see the location of your file. No more guessing if it is /home/username/public_html/ or some other naming convention that your host might use.

Get Serious About Backups

If there is one thing I cannot stand more than anything when it comes to computer support – it is failure to have a backup strategy. If you have pictures, email, documents, music, videos, etc that you consider valuable – do something about it. There are many ways to easily backup your personal data and I wanted to throw out another option if you are not using a remote backup system: Jungle Disk.

With Jungle Disk, you can easily, cheaply (15¢ per gigabyte), and securely transfer and store your data using Amazon.com’s S3 â„¢ Storage Service. I have all my data backed up to a 500 gigabyte FireWire external drive every night, but if something were to happen to my house, or my computer/drive was stolen – I am left with nothing. Knowing all my pictures, documents, music, and anything else I really need or want is available off site makes me sleep easier – and it will for you too.

Never had a drive failure or any data loss? You will – so you might as well prepare now.

CSS Tips and HOWTOs From W3C

I have been very busy working on CSS for a big up and coming web site and I have spent the last few nights doing some research on best practices and came across a W3C site I used when I first started coding with CSS that is very useful. There are a number of tips and howtos for the very things you think should be “easy” when laying out a page…and that your clients always want like:

If you are just starting out with CSS or are looking for some help with something you *think* should be simple, spend some time at the W3C Web Style Sheets CSS tips & tricks web site.

CSS and z-index.

I have been busy working on an excited project that uses some pretty complicated layouts. I was originally hired to optimize and clean up the XHTML/CSS so it would work in IE 6, IE 7, Safari, and Firefox, but now am busy working on producing the clean XHTML/CSS from the start. I needed to brush up on my understanding of how z-indexes work, and I found an excellent tutorial that I wanted to share: Understanding CSS z-index.