Automatic Backup of MySQL Databases

This is a trick that works on a Linux system, as most servers are hosted using Linux. So, you would have to figure out how to change it if you are using Windows (sorry).

What are we going to do?

We will just create a simple bash script that will backup all databases, and we will create a cron job to do it for us on automatic intervals.

The Bash Script

You may first ask me, why do this in a bash script? Why not put it straight into a cronjob? Well, I'm doing it just to make it easier if you want to run other commands, or do one file per database. So, here's the script:

#/bin/sh

mysqldump -h localhost -u mikesir87 -pPASSWORD --all-databases > database.sql
gzip database.sql
mv database.sql.gz BACKUPS/`date +mysql-BACKUP.sql-%y-%m-%d.gz`

The first command, mysqldump, does a simple dump on the database. Since we give it the --all-databases flag, it grabs all databases that user has access to. The -h flag is for the host, which will probably be localhost. The -u flag is the username for the connection and the -p flag is for the user's password. Note that there is space between the flag and the password. If you're not familiar with Unix command lines, the > is what is called an IO Redirect.

Protecting Images using PHP and htaccess

Sources to check

In this article, we're going to tackle a few different tactics to safeguard images. But, let's first think about what ways people can get images.

• Direct path - if a user knows the path to an image, they can simply go straight to it, and download the image.
• Drag and drop - in most browsers today, you can simply drag and drop an image right onto your desktop.
• Hotlinking - another website can link directly to your image
• Screenshot - a visitor can simply take a screenshot of your page and crop the image.

How to fix them

So, now that we've established where our problems are, how can we fix them?

A few SEO notes

Introduction

There are a lot of different tools and methods to use to help your site be noticed and found. Of course, I'm still working on some of these myself, but here's a few things I've learned so far. Post a comment about any other things you might have to offer!

Google Analytics

Google Analytics is a pretty powerful suite to help you understand the experience of your site's visitors. To get an account is free, and only requires you to add a Javascript file to your site pages. Most CMS's have plugins that make this easy.

Some of the features I look at are the sources of the visits. Google Analytics gives you a nice chart to help you get a quick glance of the source of the visits... such as this:

You can click on the graph to get it broken down. If you go into the Search Engine section, it'll even tell you what search terms were entered to get them to your page (helps having Google providing the software!).

CSS3: Drop Shadows

CSS3 is exciting stuff. I really like the drop shadow feature because I was tired of always having to create new PNG files just to get the effect. Also, it's a pain trying to get the bottom lined up, and the right side of a div to all look right with the shadow. What a relief it is to let the browser figure it all out!

So, what are the tags?

Just like the CSS3 rotating text, each browser has its own tag. I haven't figured it out for Opera yet, but I'm sure that's ok. Very few people are using it anyways, right? So...here's the tags.

	filter:progid:DXImageTransform.Microsoft.DropShadow(sProperties)
	-webkit-box-shadow: 10px 10px 25px #ccc;  
	-moz-box-shadow: 10px 10px 25px #ccc; 

The first one, the filter is for IE (details), the webkit tag is for Chrome and Safari (details), and the moz-box-shadow tag is for Firefox (details).

Properties

Webkit and Mozilla

The properties are pretty simple. They pretty much go as follows:

CSS3: Rotating Text

If you look at my home page, or on the Articles page, you'll see that the dates are rotated. How do we do that? Well, with a little bit of simple CSS styling, it's quite easy! The hard part is working with positioning... But, we'll try to go over that here!

The CSS Code

In case you're just here to see the CSS code, it's just below. Under it, I've got a very simple tutorial on how to use it.

    -moz-transform:rotate(270deg);
    -webkit-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

This code creates the rotation used on my site for the date elements. It rotates the text so the bottom is facing to the right.

Site Redesign!

First of all, I wanted to simplify and open up space, but yet make it more sophisticated.  Yes, that does sound like a contradiction.  But, it can be done.  After several weeks of sifting through "How to make a good portfolio" articles, making wireframes, mixing up color schemes, and testing, it's finally ready to go!  So... what did I do?  Here's some stuff...

New Design

Obviously, I started with a new design.  Some of the features of this design are subtle, and some are evident.  If you look at the headers with the light blue background, you'll notice a slight drop-shadow.  This is pure CSS3, not a .png file!  AND... it even works in IE!  Score!  The shadow also appears on the search box, and on the blockquotes seen throughout the site.

jQuery Wizadry

I got to try out some of jQuery knowledge in the Portfolio section.  Check out the Portfolio entries!  When you mouse over, it provides additional information.  When you go into the "More Info", there is a rotating selection of screenshots... all working with jQuery!

Putting links into jTip

First of all, you will need the jTip library, which can be found here. Now, I recognize that this tooltip plugin is no longer supported, but a lot of people are still using it. So, for those people this is for you. If you want to check out the newer one, look up clueTip.

The Additional Code

If you open the jtip.js file, you will see that when the document loads, it starts the JT_init() function. This function sets a hover function on any link that has the class jTip. We want to modify this just a tad-bit to allow a tooltip to be shown after you mouse off.

Of course, we don't want ALL tooltips to do this. We will add a new class called "extendedJtip" that will represent a tooltip that we want to stay open for an extended period of time.

Let's replace the JT_init() function with this:

Collapsible Fieldsets jQuery plugin - Drupal Style

Well, let's get started. First, let's make a simple HTML page to start with.

	
Collapsible Fieldset - jQuery plugin
	
 		
Cannot collapse me
 		
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in nisi magna. Pellentesque volutpat, enim et faucibus placerat, est lacus rutrum ante, sollicitudin lobortis massa sapien eget urna. Curabitur ac risus eget turpis blandit scelerisque. Nulla egestas mollis velit quis mattis. Morbi id dui venenatis nisi tincidunt tempor. Morbi libero erat, suscipit quis dictum nec, mattis quis lectus.
 	
	
 		
Can Collapse Me!
 		
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.."