The fade effect, as its name denotes, is an animation used to fade an element off of a page. You can find a demo of it in the jQuery documentation.

To begin, let’s create a fade function that accepts a DOM element and a time as parameters:

function fade( elem, time )

To achieve the fade effect, we can use the CSS opacity property, which determines the transparency of an element. Setting the opacity to 1 means the object is fully visible. As the value lowers, so too does the transparency. Consequently, 0 represents a completely invisible element.

Our logic will roughly abide by the following outline:

1. Find the starting opacity of elem, the given element. This is the value we have to reduce to 0 in time, the given number of milliseconds.
2. Begin an asynchronous recursion loop that runs every 100 milliseconds.
3. In the loop, decrement the opacity by the correct fraction to ensure that in time milliseconds, elem has an opacity of 0.

The correct fraction noted in step 3 will be equal to the starting opacity divided by time / 100. This is because the loop will go through time / 100 iterations in time milliseconds. In each iteration, the opacity must be decremented by the starting opacity / ( time / 100 ) to ensure that it will end up as 0 (the total decrement will equal the starting opacity) after the loop finishes its execution.

Let’s write some preliminary code based off this outline:

function fade( elem, time )
{
	var startOpacity = elem.style.opacity || 1;
	elem.style.opacity = startOpacity;

	(function go() {
		elem.style.opacity -= startOpacity / ( time / 100 );
		setTimeout( go, 100 );
	})();
}

Note that startOpacity is assigned to 1 if elem.style.opacity is not explicitly set. This explains why we have to set elem.style.opacity in the following line, as it may not be defined.

After finding the opacity, the go function is recursively called as per our specifications. In the code’s current state, however, it does not stop. To determine when it should finish executing, we have to check whether the element has faded. This can be done by monitoring its opacity in relation to the target value, or 0:

if( elem.style.opacity > 0 )
	setTimeout( go, 100 );
else
	elem.style.display = 'none';

Not only do we stop calling go when we’re done, but we also set the display to none so that other elements are repositioned; elem should not continue to take up page space after it has faded. This is the typical functionality of JavaScript libraries and applies to our code as well.

To ice our cake by making the code compatible with IE, we can use the filter property:

elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

The final code is included below:

function fade( elem, time )
{
	var startOpacity = elem.style.opacity || 1;
	elem.style.opacity = startOpacity;

	(function go() {
		elem.style.opacity -= startOpacity / ( time / 100 );

		// for IE
		elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

		if( elem.style.opacity > 0 )
			setTimeout( go, 100 );
		else
			elem.style.display = 'none';
	})();
}

And that’s it! See you next time.

Write helper functions

Before we start working on the main program, we first need to create two helper functions which will be used later on:

function query( $mysql ) {
	$result = mysql_query( $mysql ) or die( mysql_error() );
	return $result;
}

This first function runs a MySQL query and returns the result. It will also exit if the query fails to execute.

function clean( $input ) {
	if( get_magic_quotes_gpc() )
		$input = stripslashes( $input );
	return mysql_real_escape_string( $input );
}

User input is never guaranteed to be safe. This function cleans input and prevents malicious attacks.

Now we’re ready to start the main program.

Create the function prototype

To begin, we will create a function that requires two parameters: a table name and an associative array (map) of MySQL field names and their respective values.

function insertInto( $table, $info )

After the function finishes executing, a new row of the database will be created with values corresponding to those in $info.

Find the columns in the MySQL table

In order to run an insert query, we must know what columns are in the given MySQL table. This can be done using the following query:

$cols = query( "SHOW COLUMNS FROM $table" );

Loop through the columns and store the necessary information

For each column that is found, we need to store the value in the $info map that corresponds to the its name:

$fields = array();
while( ( $row = mysql_fetch_assoc( $cols ) ) !== false ) {
	// ignore primary keys, which are often times auto-incremented ids
	if( $row[ 'Key' ] === 'PRI' )
		continue;

	$name = $row[ 'Field' ];
	$fields[ $name ] = clean( $info[ $name ] );
	if( strpos(  $row[ 'Type' ], 'int' ) === false )
		$fields[ $name ] = "'" . $fields[ $name ] . "'";
}

Notice how the value is cleaned before being stored inside the $fields array. In addition, if the type of the MySQL field is some sort of string, the value must be enclosed in single quotes for the query to work properly.

Construct the query and run it

Now that we have all the information, we just need to construct a query based off of the keys (which are MySQL field names) and values (the corresponding information stored in each field) of the $fields array:

$keys = array_keys( $fields );
$values = array_values( $fields );

$str = "INSERT INTO $table(" . implode( $keys, ', ' )  . " ) VALUES( " . implode( $values, ', ' ) . " )";
query( $str );

PHP’s implode function is perfect in this situation, as it places all array elements into a string separated by a given delimiter. By using a comma and space as the delimiter, the MySQL query is easily formed.

Conclusion

The function is now complete. It can be used in a form handler by simply passing in the $_POST or $_GET array as a parameter:

// post data
insertInto( 'tableName', $_POST );

// get data
insertInto( 'tableName', $_GET );

And that’s really all there is to it. The full function along with the helpers can be found below:

function insertInto( $table, $info ) {
	$cols = query( "SHOW COLUMNS FROM $table" );

	$fields = array();
	while( ( $row = mysql_fetch_assoc( $cols ) ) !== false ) {
		if( $row[ 'Key' ] === 'PRI' )
			continue;

		$name = $row[ 'Field' ];
		$fields[ $name ] = clean( $info[ $name ] );
		if( strpos(  $row[ 'Type' ], 'int' ) === false )
			$fields[ $name ] = "'" . $fields[ $name ] . "'";
	}

	$keys = array_keys( $fields );
	$values = array_values( $fields );

	$str = "INSERT INTO $table(" . implode( $keys, ', ' )  . " ) VALUES( " . implode( $values, ', ' ) . " )";
	query( $str );
}

function query( $mysql ) {
	$result = mysql_query( $mysql ) or die( mysql_error() );
	return $result;
}

function clean( $input ) {
	if( get_magic_quotes_gpc() )
		$input = stripslashes( $input );
	return mysql_real_escape_string( $input );
}

For those of you who prefer something more MySQLi-related (MySQL Improved), take a look at my active records database class on GitHub, which can streamline your select, insert, update, and delete queries. It supports where clauses, joins, ordering, limits, and more.

Thanks for reading!

In case you don’t have multiple browsers, here’s a screenshot of a side-by-side comparison of Firefox and Safari:

So how is it possible that this PNG file can magically detect what browser you’re using? Read on to find out.

Well the answer is that it actually can’t. It’s exploiting a feature that some browsers support but others do not.

The image is an APNG, or Animated Portable Network Graphics, file. The APNG standard was developed as a possible replacement to animated GIFs, with the intention of using the advantages of PNGs.

APNG isn’t an official standard, though. In fact, only Opera, Firefox, and Firefox derivatives currently support it. Safari, Chrome, Internet Explorer, and other browsers do not.

The APNG file mentioned at the beginning of this post has two frames. Browsers that do not support the animation only display the first, grey frame, whereas browsers that do switch to the second, indigo frame.

Interesting concept, eh? If you’re interested in the technicalities of it, you can read the APNG Specification at Mozilla.

Pagination? How?

Unfortunately, changing the posts per page option under your WordPress reading settings does not automatically create pagination; rather, you have two options:

1. Use WordPress’ in-built functions (posts_nav_link, previous_posts_link and/or next_posts_link) to allow the user to navigate between pages.
2. Create your own pagination system.

The main problem with the first option is that WordPress only allows the user to go to the next or previous page; there is no way to jump a set of pages without having to visit everything in-between. Consequently, the bottleneck is in the user-experience.

With the second option, the burden is on the developer. Even though it requires more coding, the user experience is not compromised. As a result, today’s article will focus on how to write your own custom WordPress pagination system. To view a demo, see Lateral Code’s pagination.

Specifications

Before we begin coding, let’s lay out our specifications. Our pagination system will ensure that the user can visit the first and last page. It will also provide links to pages within a certain range of the current page. We will call this the scope.

For example, if we have twenty pages, our scope is set to two, and the user is currently on page 5, our pagination would look like this:

1	...	3	4	5	6	7	...	20

Note that the ellipses (…) are just used as visual indicators of a jump in page number.

Since three, four, six, and seven are two of less numbers away from five, they are displayed. In like manner, if we had our scope to set to one, the pagination would be:

1	...	4	5	6	...	20

In this example, three and seven are removed because their range from our current page number, five, is two. This is greater than the scope of one.

Although this system seems to work, what if the scope is two and the current page number is one? No previous page exists to link to. As a result, we can just add more pages to the other side:

1	2	3	4	5	...	20

Since we missed two pages to the left of one, we added them to the right. That’s why pages four and five are visible. Using the same principal, if our current page is twenty, the pagination would be:

1	...	16	17	18	19	20

In this case, the pages are added to the left since they can’t be placed to the right.

Code

Now that our specification is complete, let’s begin coding. We will create a pagination function in functions.php which will be later used in our index.php template. The scope, or range, will have a default value of two:

function pagination( $scope = 2 )

Our first task is to find the number of pages and the current page:

global $wp, $posts_per_page;

$numPages = (int) ( wp_count_posts()->publish / $posts_per_page );
if( $numPages < = 1 )
	return; // no need for pagination with one page

$queryVars = $wp->query_vars;
$curPage = isset( $queryVars[ 'paged' ] ) ? (int) $queryVars[ 'paged' ] : 1;

wp_count_posts()->publish represents the total number of published posts. $posts_per_page is the posts per page setting under the reading area of the WordPress dashboard. Dividing the former by the latter will give us the number of pages.

To find the current page, we can use the $wp->query_vars array. If the paged key exists, its value will be the page. Otherwise, the user is on page one.

After finding the statistics, we need to create the pagination. Although we know that the first and last page will be included, the middle has yet to be found:

// page bounds
$start = $curPage - $scope;
$end = $curPage + $scope;

// if we can't satisfy the scope (add enough pages) on one side,
// add pages to the other side
if( $start < = 1 ) {
	$end += ( 1 - $start );
	$start = 2;
}
else if( $end >= $numPages ) {
	$start -= ( $end - $numPages );
	$end = $numPages - 1;
}

// limit the start and end to their extreme values
$start = max( $start, 2 );
$end = min( $end, $numPages - 1 );

$start and $end correspond the left-most and right-most page value, respectively. The if block is used to display more pages on one side if they cannot be added to the other, as per the last two examples of the specification. Finally, $start and $end are capped at their boundary values to ensure they are within range.

Now that we have the pages, we can aggregate them into an array:

$pagesToLinkTo = array( 1 );
for( $page = $start; $page < = $end; $page++ )
	$pagesToLinkTo[] = $page;
$pagesToLinkTo[] = $numPages;

Finally, we have to process the array and output list elements corresponding to each page number:

$prevPage = $pagesToLinkTo[0];
foreach( $pagesToLinkTo as $page ) {
	if( $page - $prevPage > 1 ) // skipped a few pages
		echo '<li>...</li>'; // add a spacer

	// echo the link
	echo '<li><a href="' . get_bloginfo( 'home' ) . '/page/' . $page . '">' . $page . '</a></li>';
	$prevPage = $page;
}

The URL of each page is http://example.com/page/number, where http://example.com is the home of the WordPress site and number is the page number. We link to this URL for each page that we output.

To determine whether we need to add ellipses, we compare the current page with the previous page. If the difference is greater than one, we skipped a few pages and have to add the spacer.

Here is the pagination function as a whole:

function pagination( $scope = 2 ) {
   	global $wp, $posts_per_page;

	$numPages = (int) ( wp_count_posts()->publish / $posts_per_page );
	if( $numPages < = 1 )
		return; // no need for pagination

	$queryVars = $wp->query_vars;
	$curPage = isset( $queryVars[ 'paged' ] ) ? (int) $queryVars[ 'paged' ] : 1;

	// page bounds
	$start = $curPage - $scope;
	$end = $curPage + $scope;

	// if we can't satisfy the scope (add enough pages) on one side,
	// add pages to the other side
	if( $start < = 1 ) {
		$end += ( 1 - $start );
		$start = 2;
	}
	else if( $end >= $numPages ) {
		$start -= ( $end - $numPages );
		$end = $numPages - 1;
	}

	// limit the start and end to their extreme values
	$start = max( $start, 2 );
	$end = min( $end, $numPages - 1 );

	$pagesToLinkTo = array( 1 );
	for( $page = $start; $page < = $end; $page++ )
		$pagesToLinkTo[] = $page;
	$pagesToLinkTo[] = $numPages;

	$prevPage = $pagesToLinkTo[0];
	foreach( $pagesToLinkTo as $page ) {
		if( $page - $prevPage > 1 ) // skipped a few pages
		echo '<li>...</li>'; // add a spacer

		// echo the link
		echo '<li><a href="' . get_bloginfo( 'home' ) . '/page/' . $page . '">' . $page . '</a></li>';
		$prevPage = $page;
	}
}

Wrapping Up

To finalize our system, we’ll have to call this function in our index.php template:

<ul id="pagination">
	<?php pagination(); ?>
</ul>

Well, that was easy, eh? Remember to style the pagination in accordance to your site’s design. To view a demo, see the bottom of Lateral Code’s home page.

Thanks for reading!

• A web server other that that on which the website is hosted
• Cron (if you do not have this, you can use an online service)
• PHP with libcurl support
• PHP with mail support (optional)

Setting up PHP and libcurl

In case you don’t know, libcurl (and its cousin cURL) are tools for working with URLs and web pages. Provided that you have libcurl support and PHP, you can check if a site is active by using the following function:

function checkURL($url) {
	$return = array();
	$curl = curl_init(); // Initialize libcurl
	// set options:
	curl_setopt ($curl, CURLOPT_URL, $url ); // URL to visit
	curl_setopt ($curl, CURLOPT_RETURNTRANSFER, TRUE); // returns a string instead of echoing to screen
	curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE); // follows redirects (recursive)
	curl_setopt($curl, CURLOPT_NOBODY, TRUE); // Only get headers, not content (saves on time)
	$result = curl_exec($curl);
	$errno = curl_errno($curl);
	if ( $errno != 0 ) { // curl_errno returns 0 if no error, otherwise returns the error code
		$return['message'] = "An error occurred while trying to $url! ".curl_err($curl); // If there was an error, return the error message
		$return['success'] = false;
	} else {
		$http = curl_getinfo($curl, CURLINFO_HTTP_CODE); // Get the HTTP return code
		$return['code'] = $http;
		if ( $http >= 200 && $http < 300 ) { // An HTTP code greater than 200 and less than 300 means a successful load
			$return['message'] = "$url is up! ($http)";
			$return['success'] = true;
		} else {
			$return['message'] = "$url is down! ($http)";
			$return['success'] = false;
		}
	}
	curl_close($curl);
        return $return;
}

This function returns an array containing a success boolean (true, your site is up or false, your site is down) and a corresponding message string. Now that our checking works as specified, let’s move on to the notifications.

Notifications

In this section, we will present two ways to receive notifications.

Notification by E-mail/SMS

After checking the URL, you can use the PHP mail function to send the status to your e-mail account. On the other hand, you can find out the address for your SMS by sending a text to your own e-mail. For example, Verizon phones have the e-mail address <phone number>@vtext.com

The code:

$result = checkURL($your_url);
if ( $result['success'] == true; )
	$subject = "Your site is still up!";
else
	$subject = "Oh no! Your site is down."
mail($your_email, $subject, $result['message']);

As you can see, this is a fairly easy method with minimal code.

Push notifications for your iDevice

If you have an iDevice, such as an iPhone or iPod Touch, you can use push notifications as an alternative to e-mail or SMS.

First, download the app pushme.to and make and account. Take note of your username. This app will allow you to send pushed messages to your iDevice.

Then, you will need the following function:

function pushmeto($username, $message) {
	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, "http://pushme.to/$username/");
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
	curl_setopt($curl, CURLOPT_POST, TRUE);
	curl_setopt($curl, CURLOPT_POSTFIELDS, "message=".urlencode($message);
	curl_exec($ch);
	curl_close($ch);
}

Usage is simple:

$result = checkURL($your_url);
pushmeto($your_username, $result['message']);

Automation

Cron can be used to automate the checking uptime process. If you don’t have cron on your server (which is rare), you can use an online service such as Online Cron Jobs.

Cron jobs are set using the following format:

[min] [hour] [date] [month] [day_of_week] [command]

A cron job set to run at 7am every Tuesday would look like this:

0 7 * * 2 [command]

For more information on how to use cron, see this quick reference.

As for the command, you can use the following (which assumes you saved the uptime verification code to a file called uptime.php):

php /path/to/uptime.php > /dev/null 2>&1

Remember, of course, to change the path.

Once activated by the automated command, the code in the PHP file will check if your site is up and notify you. You can set this to occur as often as you want.

Conclusion

Do you have any other ways to monitor uptime? If so, please join the discussion below!

View the Demo Download the Files

To begin our mad science, we’ll first need to include the API itself (note the HTML 5 that omits the type attribute of the script tag):

<!-- sensor=false tells google images we aren't trying to sense the user's location -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Moving forward, we’ll create a function which, when given an address, will display a dynamic map centered on it. Dutifully called setMapAddress, the function will have the following container:

function setMapAddress( address )
{
	// code goes here
}

To specify a location, Google Maps requires a latitude and longitude. As a result, our first task will be to convert the given address into the necessary format. Of course, this process has it’s own scientific term: geocoding. Being both scientifically and technologically-savvy, Google does the work for us in their Geocoder object. All we need to do is instantiate one and subsequently call its geocode method:

var geocoder = new google.maps.Geocoder();

geocoder.geocode( { address : address }, function( results, status ) {

} );

The geocode method requires, as arguments, an object as well as a callback function. Looking at the first parameter, { address : address }, may strike initial confusion. The first use of the word address refers to a property of the object. On the contrary, the second use refers to the variable passed into the setMapAddress function, which we are trying to geocode.

Once the geocoding finishes, the callback function is invoked with a results array and status that is used to determine success. If the status notes a successful geocode, we’ll have to get the location (latitude/longitude) from the results array, setup options (similar to the options for the static images in the previous article), and finally construct the map. In its completed form, the callback function is:

if( status == google.maps.GeocoderStatus.OK ) {
	var latlng = results[0].geometry.location;
	var options = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	new google.maps.Map( document.getElementById( 'map' ), options );
}

The options object specifies the zoom, center, and type of the resultant map. In this case, these have been set to 8, the given address converted to a latitude/longitude, and road map respectively.

In addition, note that the constructor requires a DOM element and the aforementioned options. This means we’ll have to create the element, which has an id of map.

<div id="map"></div>

#map also needs a defined width and height:

#map {
	width: 512px;
	height: 512px;
}

Last, but certainly not least, we have to call the setMapAddress function we recently finished:

setMapAddress( "Chicago, IL" );

Voila! That’s all we need for a functioning dynamic map. You can view the demo or download the files.

With the new technology age, maps have moved from tangible paper to the virtual world, allowing anyone to access them with a simple visit to Google Maps. More importantly, with the new Google Maps API Version 3, it’s simple to integrate these maps into any website.

In the following article, I’ll be explaining how to get started with the new API and embrace the technology from the folks at Google.

Focus

We’re going to focus on creating a static map, which is just an image of a location. This is in contrast to a dynamic map, which enables the user to move and zoom. In a follow-up article, which will be posted later this week, we’ll tackle a dynamic map using JavaScript.

Static Map

The static map only requires an image tag and a few configuration options:

<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false" alt="Static Map of Chicago, Illinois"></img>

It looks a bit daunting at first, but, when broken down, it’s much easier to understand. Note that all the magic happens in the src attribute:

• http://maps.google.com/maps/api/staticmap? – the base URL which we pass configuration options to.
• center=Chicago,IL – the center of the map, which, in this case, is Chicago, Illinois. Note that this can be any address.
• zoom=8 – the amount to zoom in. This value was determined purely by experimentation.
• size=512x512 – the size of the map in pixels. In this case, it’s 512px by 512px.
• maptype=roadmap – the type of the map. Possible values are roadmap, terrain, satellite, and hybrid.
• sensor=false – tells Google Maps whether we are trying to sense the user’s location. In this case, we aren’t.

The above code produces the following image:

We can play around with the options a bit to produce a much different map:

<img alt="Static Map of New York City, New York" src="http://maps.google.com/maps/api/staticmap?center=New+York+City,NY&zoom=4&size=512x512&maptype=hybrid&sensor=false"></img>

These new configuration options yield the following map:

When creating maps, it’s also necessary to mark important locations, whether they be destinations or areas to avoid. To do so, we can use the markers parameter:

<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false&markers=Chicago,IL" alt="Static, Marked Map of Chicago, Illinois"></img>

Notice the new parameter:

markers=Chicago,IL

This will create the following marked map:

We can add in more configuration options to the marker parameter, including a color and a label. For example:

markers=color:blue|Chicago,IL

Notice the pipe operator (|) which separates the color from the location. This change will edit the marker color, yielding the following map:

As you can see, the blue marker still has a dot representing the location. When working with multiple locations, you might want to change this dot to a number or letter in order to differentiate between locations:

markers=color:blue|label:A|Chicago,IL

Instead of the dot, the image now has the letter A:

To add multiple markers, just add in another markers parameter:

<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false&markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN" alt="Static, Marked Map of Chicago, Illinois and Hammond, Indiana"></img>

Now there are two markers: one for Chicago, Illinois and another for Hammond, Indiana:

This is accomplished using the following marker code:

markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN

Finally, when specifying the markers attribute, note that the center and zoom parameters are no longer required. If we omit these, we get the following code:

<img src="http://maps.google.com/maps/api/staticmap?size=512x512&maptype=roadmap&sensor=false&markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN" alt="Static, Marked Map of Chicago, Illinois and Hammond, Indiana with no Center and Zoom"></img>

And the corresponding map:

As shown in the image, Google Maps will automatically use a fitting center and zoom in order to display the two locations.

Conclusion

As you can see, we’ve created multiple static maps all through the new Google Maps API. With no needed API key (which was previously required) and some simple URL manipulation, Google makes it near effortless to integrate a map into any website.

Are you interested in the Google Maps API? Do you have any questions or comments? Did you stumble upon more useful features for static maps? Leave a comment below and a share your thoughts!

Don’t forget that we’ll be creating dynamic maps with the JavaScript API later this week!

Slider – The easiest known way to showcase your images and photos on the web in style.

Who can deny it? This is the generation of web 2.0 sliders. A few JavaScript files, some CSS, and a bit of markup is all you need to generate an elegant showcase of your images. Best part? 99% of it is done for you.

Well, that’s the ideal situation. Unfortunately, it’s often times much more complicated. That’s why I created Lateral Slider.

View the DemoPurchase it from CodeCanyon

Lateral Slider is a jQuery slideshow plugin that I recently released on CodeCanyon. How does it work? Simple.

1. Include the CSS/JavaScript

CSS:

<link rel="stylesheet" href="slider.css" type="text/css" media="screen" />

JavaScript:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Lateral Slider -->
<script src="slider.jquery.js"></script>

2. Write the Markup

All you’ll need is a div and a few images:

<div id="slider">
	<img src="image1.jpg" alt="Image 1" />
	<img src="image2.jpg" alt="Image 2" />
	<img src="image3.jpg" alt="Image 3" />
</div>

3. Activate Lateral Slider

<!-- no need for type="text/javascript" in HTML 5 -->
<script>$( '#slider' ).lateralSlider();</script>

4. Celebrate

Lateral Slider is ready to be displayed.

5. Oops, was there supposed to be a fifth step?

Nope. You’re done.

Features

Simple setup is great, but I’m sure you’re also looking for features. Fear not:

• 13 different transitions
• Support for all major browsers (including IE6)
• Image linking
• Many configurable options
• Controls (forward, back, pick a slide)
• Comprehensive documentation
• Much more…

Want to know more? Check out the description at CodeCanyon. Better yet, why don’t you take a look at the live preview and see Lateral Slider for yourself.

Purchase It!

Interested? It’s only $10. Why not purchase it from CodeCanyon?

Do you use the DZone button on your website? If not, you should definitely consider it. Unfortunately, each one of these buttons requires the inclusion of a JavaScript file, which adds an HTTP request (and thus slows down the page). With some quick studying of the included JavaScript, it’s possible (not to mention quite easy) to generate this same button with only PHP, thus saving a request.

Here’s the function to do so:

function dzone_button( $style, $url, $title, $description = false )
{
	$html = '<iframe src="http://widgets.dzone.com/links/widgets/zoneit.html?t=' . $style;
	$html .= '&url=' . urlencode( $url ) . '&title=' . urlencode( $title );

	if( $description !== false )
		$html .= '&description=' . $description;

	if( $style == 1 )
		$html .= '" height="70" width="50" scrolling="no" frameborder="0"></iframe>';
	else
		$html .= '" height="25" width="155" scrolling="no" frameborder="0"></iframe>';

	return $html;
}

It requires the same parameters are the JavaScript file: the type of button (1 for tall, 2 for wide), URL, title, and description (optional).

To use it, just plug, chug, and echo:

echo dzone_button( 1, 'http://example.com', 'Example', 'Example description' );

If you’re using WordPress, consider the following snippet:

echo dzone_button( 1, get_permalink(), get_the_title() );

If you want a description, use get_the_excerpt:

echo dzone_button( 1, get_permalink(), get_the_title(), get_the_excerpt() );

That’s all there is to it; you’ve generated the same button without the JavaScript. The only real difference is that you’ll have an iframe directly in the HTML page rather than one generated by JavaScript. Happy DZoning!

Have you ever lost important files? If you have, you know the importance of keeping backups.

Backups could mean the difference between life and death for your site. It’s vital to constantly generate backups and even store them on a remote machine in order to ensure full protection. All it takes is a determined attacker to possibly corrupt all of your files. As a result, this simple snippet is focused on getting you started with the backup process.

Generating backups through secure-shell (SSH) can be quite a simple task. The tar command is all you’ll need:

$ tar czvf backup.tar.gz path/to/directory

Let’s break down this snippet into it’s constituents:

tar - the command to create a tar file

c - the option that creates a tar ball
z - add gzip compression
v - verbose option to display files that are added to the tar ball
f - used to specify the archive file (in this case backup.tar.gz)

backup.tar.gz - the name of the archive file for the f option
path/to/directory - recursively search this directory for files to place in the tar ball

After running this command on the directory of your choice (generally the public or public_html directory for a full backup), you should have an archive of files which you can easily download to your own computer (or keep on your web server).

You can read more about the tar command here.