XEWeb

Pure CSS coke can spin

Jason — Sat, 20 Feb 2010 10:40:51 +0000

This just goes to show what you can do with CSS these days as Román Cortés demonstrates with his awesome spinning coke can example.

I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a background image).

With displacement maps lots of cool effects could be done, but thinking that the complexity of the displacement map would directly affect the CSS and markup size, choosing a good example took me some time. I thought in sea waves reflections, underwater distortions, magnifying glass, a rotating Earth… but the final thing I did was just right in my desktop: a Coke can – my favourite drink.

Due the cilindrical shape of a can, the displacement map is very simple with the parallel projection I did, so the code is very little – below 5kb – and easy to understand I hope.

Even if this effect is mainly CSS1 and some bits of CSS2 – for the scrolling div, overflow: auto property -, it is not going to work in IE6, because it doesn’t support background-attachment: fixed. I’ve tested it and it works in IE8, Firefox 3.5, Chrome 3, Safari 4 and Opera 10. Also, the code validates.

Check it out at http://www.romancortes.com/blog/pure-css-coke-can/

3D carousel using jQuery

Jason — Tue, 02 Feb 2010 16:47:12 +0000

Inspired by Andrew Sellick’s Simple 3D Carousel using Mootools I needed a jQuery version of the script, source code of which is below (tested with jQuery 1.4).

Please refer to the original tutorial for instructions and a working demo.

var count =0;
var baseSpeed =0.05;
var radiusX =190;
var radiusY =40;
var centerX =300;
var centerY =190;
var speed =0.3;
var imageDivs ='';
var numberOfElements =0;
var carousel ='';
var speedTest ='';
$(document).ready(function(){

 carousel = $('#carousel');

 imageDivs = $('#carousel div');

 numberOfElements = imageDivs.length; 
 setInterval('startCarousel()', 40);

 carousel.mousemove(function(event) {

  tempX = event.clientX;

  speed = (tempX - centerX) / 2500;

 });

});
function startCarousel(){

 for(i=0; i < numberOfElements; i++){
  angle = i * ( Math.PI * 2 ) / numberOfElements;

  posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );

  posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );

  imageDivWidth = posY/3;

  imageDivZIndex = Math.round(imageDivWidth)+100;

  $('#carousel div').eq(i).css({'position': 'absolute', 'left': posX + 'px', 'top': posY + 'px', 'width': imageDivWidth + 'px', 'zIndex': imageDivZIndex});
  angle += speed;

 }

 count++;

}

Tweet the Tube – Live train updates on twitter

Jason — Fri, 22 Jan 2010 12:56:38 +0000

I find it frustrating getting into London these days as there are always problems on the tube that causes delays.

To take action we have launched a new service dubbed “Tweet the Tube” which provides live updates whenever a tube service changes status, pulled straight from the Transport for London website and checked every 5 minutes.

All you have to do is follow “tweetthetube” on twitter: http://twitter.com/tweetthetube

Feel free to leave comments/suggestions on this page.

Simple PHP caching

Jason — Fri, 15 Jan 2010 15:29:11 +0000

There are many tools around that will help cache your website to increase speed and performance, such as eAccelerator and APC. However these usually require installation on your web server, thus rendering them useless for people who use shared hosting and don’t have access to the server.

Using some simple PHP code we can quite effectively cache a webpage, useful for sites that are database driven and have a large amount of queries or high volumes of traffic.

First we need to setup the folder where the cached files are stored, making sure it has read/write permissions (CHMOD to 0777 – see your FTP client documentation on how to do this).

Next create a file called cache.php which contains the following code:

// Number of seconds a page should remain cached for
$cache_expires=3600;
// Path to the cache folder

$cache_folder = "/home/usr/www/cache/";
// Checks whether the page has been cached or not

function is_cached($file) {

 global $cache_folder, $cache_expires;

 $cachefile = $cache_folder . $file;

 $cachefile_created = (file_exists($cachefile)) ? @filemtime($cachefile) : 0;

 return ((time() - $cache_expires) < $cachefile_created);

}
// Reads from a cached file

function read_cache($file) {

 global $cache_folder;

 $cachefile = $cache_folder . $file;

 return file_get_contents($cachefile);

}
// Writes to a cached file

function write_cache($file, $out) {

 global $cache_folder;

 $cachefile = $cache_folder . $file;

 $fp = fopen($cachefile, 'w');

 fwrite($fp, $out);

 fclose($fp);

}
// Let's begin, first work out the cached filename

$cache_file = md5($_SERVER['REQUEST_URI']) . ".html";
// Check if it has already been cached and not expired

// If true then we output the cached file contents and finish

if (is_cached($cache_file)) {

 echo read_cache($cache_file);

 exit();

}
// Ok so the page needs to be cached

// Turn on output buffering

ob_start();

Now in your page you would include cache.php on the first line before you do anything else. This is because if the page is cached we don’t want it to do anything else other than output the cache to the page. If you are still including other files or connecting to databases before checking for the cache you are putting additional load on the server, making this exercise pointless.

Finally create a file called cache_footer.php which contains the following code:

// Grab the uncached page contents
$cache_contents=ob_get_contents();
// Save it to the cache for next time

write_cache($cache_file, $cache_contents);

?>

You would include this file on the last line of your page, which saves the page in the cache if required.

Putting it altogether a typical page would look like this:

// Load the cache process
include("cache.php");
// Connect to database

include("config.php");

mysql_connect($db_host, $db_username, $db_password) or die(mysql_error());

mysql_select_db($db_name) or die(mysql_error());

?>

<html>

<body>

<h1>Articlesh1>

<ul>

// Some query

$q = mysql_query("SELECT * FROM articles ORDER BY id");

while ($r = mysql_fetch_array($q)) {

  echo '
.$r['id'].'">'.$r['title'].'
';

}

?>

ul>

body>

html>

// Save the cache

include("cache_footer.php");

?>

GoLinks – PHP/MySQL Links Directory Script

Jason — Thu, 14 Jan 2010 13:07:47 +0000

Here at XEWeb we are cracking open a bottle of champagne as we announce the new version of GoLinks.

GoLinks is a simple yet powerful and efficient links directory script with many features including unlimited categories, link submission, search engine friendly URL’s, multiple themes and language support with completely customizable templates.

Take a look at http://www.golinks-script.com to download, order and view a demo online.

A simple and lightweight Javascript calendar

Jason — Thu, 07 Jan 2010 12:35:30 +0000

This Javascript code will display a calendar in a table, useful for date picking…

// these are labels for the days of the week

cal_days_labels =['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
// these are human-readable month name labels, in order

cal_months_labels = ['January', 'February', 'March', 'April',

                     'May', 'June', 'July', 'August', 'September',

                     'October', 'November', 'December'];
// these are the days of the week for each month, in order

cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// this is the current date

var cal_current_date = new Date();
function Calendar(month, year) {

  this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;

  this.year  = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;

}
Calendar.prototype.generateHTML = function(){
  // get first day of month

  var firstDay = new Date(this.year, this.month, 1);

  var startingDay = firstDay.getDay();

  // find number of days in month

  var monthLength = cal_days_in_month[this.month];

  // compensate for leap year

  if (this.month == 1) { // February only!

    if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){

      monthLength = 29;

    }

  }
  // get todays date

  var cal_today_date = new Date();

  checkDay = (cal_today_date.getMonth() == this.month && cal_today_date.getFullYear() == this.year) ? true : false;

  // do the header

  var monthName = cal_months_labels[this.month]

  var html = '
';

  html +='';

  html +='';
for(var i =0; i <=6; i++){

    html +='';
}

  html +='';
  // fill in the days

  var day = 1;

  // this loop is for is weeks (rows)

  for (var i = 0; i < 9; i++) {

    // this loop is for weekdays (cells)

    for (var j = 0; j <= 6; j++) { 

      html += '
';
}
// stop making rows if we've run out of days
if(day > monthLength){
break;
}else{

      html +='';
}
}

  html +=' «';

  html +=  monthName + " " + this.year;

  html += '»
    ';

    html += cal_days_labels[i];

    html += ' 

';

      if (day <= monthLength && (i > 0 || j >= startingDay)) {

        ts = this.generateTimestamp(day);

        if (checkDay == true && day == cal_today_date.getDate())

          html += '' + day + '';

        else

          html += '' + day + '';

        day++;

      }

      html += '     
 
';

  document.getElementById('calendar-holder').innerHTML= html;
}
Calendar.prototype.generateTimestamp = function(day) {

  month = this.month + 1;

  return "'" + day + "','" + month + "','" + this.year + "'";

}
Calendar.prototype.prevMonth = function() {

  if (this.month == 0) {

    this.month = 12;

    this.year = (this.year - 1);

  }

  this.month = (this.month - 1);

  this.generateHTML();

}
Calendar.prototype.nextMonth = function() {

  if (this.month == 11) {

    this.month = -1;

    this.year = (this.year + 1);

  }

  this.month = (this.month + 1);

  this.generateHTML();

}

«	'; html += monthName + " " + this.year; html += '	»
'; html += cal_days_labels[i]; html += '
'; if (day <= monthLength && (i > 0 \|\| j >= startingDay)) { ts = this.generateTimestamp(day); if (checkDay == true && day == cal_today_date.getDate()) html += '' + day + ''; else html += '' + day + ''; day++; } html += '

To display the calendar for example…

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>

    <title>Select date</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="css/calendar.css" />

    <script type="text/javascript" src="scripts/calendar.js"></script>

</head>

<body>

<div id="calendar-holder">

<script type="text/javascript">

// [CDATA[

  var cal = new Calendar();

  cal.generateHTML();

// ]]>

</script>

</div>

</body>

</html>

Convert plain text to clickable links in PHP

Jason — Tue, 05 Jan 2010 10:53:15 +0000

A useful function if you want to convert a link in plain text into a clickable link…

function clickable_links($text) {

  $text = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_+.~#?&//=]+)', '\1', $text);

  $text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_+.~#?&//=]+)', '\1\2', $text);

  return $text;

}

How to setup one time download of your files securely

Jason — Sun, 03 Jan 2010 13:11:00 +0000

If you are selling a digital product and want to offer it for download but are concerned that people will share the URL to the file, you could use a solution like ClickBank. However the advantage of setting up one time downloads from your server instead is that you have more control over what you are selling and you don’t have to pay any fee’s.

Let us assume that you have setup and integrated a payment solution (such as PayPal using the IPN, post coming soon on this) and you have a database setup that holds the payment information.

CREATE TABLE `transactions` (

`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,

`transaction_id` VARCHAR( 50 ) NOT NULL ,

`file_downloaded` TINYINT( 1 ) NOT NULL

) ;

Now we will create download.php which will be the link sent to the user after they have paid to download your files.

To keep it secure you would include the transaction ID (which would be unique to each payment) as part of the query string, so the link would be:

http://www.site.com/download.php?transaction_id=XX

Now you do need the files to be uploaded somewhere on your web server, however the location will never be revealed. The best way is to put them in a folder outside of the web root so that they cant be accessed via HTTP. However if this is not possible then put them in a folder name that cannot be guessed (use a random password generator if you don’t have any ideas).

// Path to the files to be downloaded
$file='/home/usr/files/blah.zip';
// Transaction ID

$transaction_id = $_GET['transaction_id'];
// Connect to database

mysql_connect('localhost', 'user', 'pass');

mysql_select_db('dbname');
// Lookup the transaction ID in the database

$query = sprintf("SELECT * FROM transactions WHERE transaction_id='%s'",

mysql_real_escape_string($transaction_id));

$query = mysql_query($query);

$row = mysql_fetch_array($query);
// Valid transaction ID?

if (!$row) {

  die('Invalid transaction ID!');

}
// File already been downloaded?

elseif ($row['file_downloaded'] == 1) {

  die('File has already been downloaded, please contact us if you have any problems');

}
else {
  // It's a valid transaction, update the database so that we know the file has been downloaded for next time

  $query = sprintf("UPDATE transactions SET file_downloaded = 1 WHERE transaction_id='%s'",

  mysql_real_escape_string($transaction_id));

  $query = mysql_query($query);
  // Now force the file to be downloaded

  header('Content-Description: File Transfer');

  header('Content-Type: application/octet-stream');

  header('Content-Disposition: attachment; filename='.basename($file));

  header('Content-Transfer-Encoding: binary');

  header('Expires: 0');

  header('Cache-Control: must-revalidate, post-check=0, pre-check=0');

  header('Pragma: public');

  header('Content-Length: ' . filesize($file));

  ob_clean();

  flush();

  readfile($file);

  exit();
}

?>

Using reCAPTCHA to stop spam in PHP

Jason — Fri, 01 Jan 2010 13:11:57 +0000

reCAPTCHA helps prevent automated abuse of your site (such as comment spam or bogus registrations) by using a CAPTCHA to ensure that only humans perform certain actions.

You may have seen reCAPTCHA in use on many websites (including our forum) as it’s completely free and comes with an excellent web service which we are going to implement in this article.

The first thing to do is sign up to reCAPTCHA to receive your public and private key. These keys are used to authorize your account.

Next you need to download the reCAPTCHA library in PHP which can be found on this page. Once you have this you are ready to go.

First we are going to store the public and private key in variables, this would usually go in something like config.php.

include('recaptchalib.php');
$publickey="…";
$privatekey="…";
// Rest of your config goes here…

?>

Now on the page you want to display the CAPTCHA (e.g. register.php) you would include this at the top:

// Include the config file
include('config.php');
// If the form has been submitted

if (!empty($_POST)) {
  // Send the CAPTCHA results to reCAPTCHA

  $resp = recaptcha_check_answer ($privatekey, $_SERVER['REMOTE_ADDR'], $_POST['recaptcha_challenge_field'], $_POST['recaptcha_response_field']);
  // Incorrect CAPTCHA?

  if (!$resp->is_valid) {

    $error = 'The reCAPTCHA was not entered correctly!';

  }
  else {

    // Otherwise continue with further validation etc

  }

}

?>

Now on the same page we display the actual CAPTCHA which is generated by the library so we don’t have to worry about any HTML or Javascript.

<form action="" method="post">

<p>($publickey); ?></p>

<p><input type="submit" name="submit" value="Complete Sign Up" /></p>

</form>

Sending emails the right way – using PHPMailer and email templates

Jason — Thu, 31 Dec 2009 19:08:29 +0000

When sending mail in PHP its always best to use an SMTP server rather than the mail() function, and the ideal candidate for the job is PHPMailer.

Assuming you have an SMTP server (usually mail.yourdomain.com) and a username and password (to authenticate as some servers won’t allow you to send via SMTP without it) sending mail with PHPMailer is easy as pie.

For websites that send lots of emails with different information it’s a good idea to setup some email templates.

In this example we will create a folder called “email_templates” and will create a file called “register.html” which will contain the login information when someone registers to our site:

<html>

<body>

<h1>Account Details</h1>

<p>Thank you for registering on our site, your account details are as follows:<br>

Username: %username%<br>

Password: %password%

</p>

</body>

</html>

Now here is the code to send this as an email, assuming you have the username and password of the user signed up.

// Include the PHPMailer class
include('PHPMailer/class.phpmailer.php');
// Retrieve the email template required

$message = file_get_contents('email_templates/register.html');
// Replace the % with the actual information

$message = str_replace('%username%', $username, $message);

$message = str_replace('%password%', $password, $message);
// Setup PHPMailer

$mail = new PHPMailer();

$mail->IsSMTP();
// This is the SMTP mail server

$mail->Host = 'mail.yourdomain.com';
// Remove these next 3 lines if you dont need SMTP authentication

$mail->SMTPAuth = true;

$mail->Username = 'admin@yourdomain.com';

$mail->Password = 'blah';
// Set who the email is coming from

$mail->SetFrom('admin@yourdomain.com', 'Website Admin');
// Set who the email is sending to

$mail->AddAddress('user@gmail.com');
// Set the subject

$mail->Subject = 'Your account information';
//Set the message

$mail->MsgHTML($message);

$mail->AltBody(strip_tags($message));
// Send the email

if(!$mail->Send()) {

 echo "Mailer Error: " . $mail->ErrorInfo;

}

?>

«	'; html += monthName + " " + this.year; html += '					»
'; html += cal_days_labels[i]; html += '
'; if (day <= monthLength && (i > 0 \|\| j >= startingDay)) { ts = this.generateTimestamp(day); if (checkDay == true && day == cal_today_date.getDate()) html += '' + day + ''; else html += '' + day + ''; day++; } html += '