Quick overview of humans.txt for SEO

humans.txt is a TXT file that contains information about the different people who have contributed to building the website. Click here to access an example from humans.txt. The file is picked up by search engines.
Add a humans.txt to your site and reference it using the tag
<link type="text/plain" rel="author" href="humans.txt" />

Dynamic progress bar for Twitter Bootstrap using PHP

Twitter Bootstrap offers some very useful progress bars. See http://getbootstrap.com/components/#progress
They are based on percentages, so you need to get the length of the shaded bar as a percentage of the whole bar for them to be accurate.

Below is a small example of how to do this with PHP.

<?php
$currentVal = 10;
$maxVal = 20;
$percentageVal = ($currentVal/$maxVal)*100;
?>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $currentVal ?>" aria-valuemin="0" aria-valuemax="<?php echo $maxVal ?>"  style="width:<?php echo $percentageVal ?>%;">
    <span class="sr-only"><?php echo $percentageVal ?> Complete</span>
  </div>
</div>

Recursive delete for blogs and forums

Let's say, you've developed a blog or forum and you need to delete some entries. You will also want to delete the responses to those entries. In this example we'll use a table structure like this, where 'refid' is a field used to associate a response with it's referer :
`id`
`refid`
`userid`
`title`
`content`
`tags`
`created`
In our PHP we want to go through each blog entry which we'd like to delete and ascertain it's responses identified by 'refid' before deleting it. Thus :
function deleterecursiveblog($id)
  {
    $q = "SELECT * FROM `blog` WHERE `refid`='{$id}'";  
    $result = mysqli_query($con,$q);
    if(isset($result))
    {
      foreach($result as $key)
      {
        deleterecursiveblog($key['id']);  
      }
    }
    $q = "DELETE FROM `blog` WHERE `id`='{$id}'";  
    $result = mysqli_query($con,$q);
  }

Bash techniques

I've been doing a lot of work in bash lately. I've been speeding up the time taken to create the website basics. Right now I can create a Twitter Bootstrap/Modernizr website with blogs etc within a couple of seconds by calling my bash script. So, below are some techniques I've learned along the way:
Prep-end all slashes in a web address with backslashes
webdir=`echo $webdir | sed s,/,\\\\\\\\\\/,g`
Get the last substring from a string separated by slashes
dbn=${longstring##*/}
Put the contents of a .sql into a database
mysql -u root -p password $dbn < $workingdir"/users.sql"
Change a line within a .ini file
sed -i -e '/DB_NAME =/ s/= .*/= '$dbn'/' config.ini
Hope they help!

Error reporting in PHP

I've seen quite a few blogs which go into great depth about error reporting in PHP. What I and almost everyone else wants when something is going wrong is... Tell me everything. So, here are the lines to put at the top of your .php file
<?php
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);
?>
Job done.

OOP Series : Interfaces

An interface is a template of mthods. Not properties. An interface is usually accompanied by an 'implements' clause. Classes which implement an interface must contain the declared methods. There is no defined means of declaring a JavaScript interface/implments combination.
PHP : template.class.php
<?php
interface template
{
function setWidth($width);
function setHeight($height);
}
?>
PHP : document.class.php
<?php
require_once 'template.class.php';
class document implements template
{
public $width, $height;
function setWidth($width)
{
$this->width = $width;
}

function setHeight($height)
{
$this->height = $height;
}
}
?>
Now a file (index.php) which creates a document object.
<?php
require_once 'document.class.php';
$doc = new document;
$doc->setWidth(10);
$doc->setHeight(10);
echo $doc->width.' '.$doc->height;
?>

OOP Series : Abstraction

Abstract classes are particularly useful if you are working in a team and on a large project. They allow the architect to specify what needs to be available in child classes without saying how. They can also be used to specify methods which must be available to all child classes. Abstract classes should't really be called, just referenced. In the example below I have an abstract class of book and a child class of childrensbook. The good news for me in writing the blog post is that there is no abstract class implementation in JavaScript.
PHP : book.class.php
<?php
/* You may only have child classes of this class */
abstract class book
{
function cover()
{
/* All child classes must have this function */
return 'Nice bright cover';
}

/* Must exists in a child class, but you can implement it as you see fit */
abstract function pages();
}
?>
PHP : childrensbook.class.php
<?php
require_once 'book.class.php';
class childrensbook extends book
{
function pages()
{
return 20;
}
}
?>
Now a file (index.php) which creates a childrensbook object.
<?php
require_once 'childrensbook.class.php';
$achildrensbook = new childrensbook;
echo $achildrensbook->cover().'<br />';
echo $achildrensbook->pages().'<br />';
?>

OOP Series : Encapsulation

One of OOP's strengths is that it provides control over access to properties and methods. This becomes particularly useful when developers are working together and extending classes.It is also often referred to as data hiding. It achieves this through public, private and protected properties and methods. How these are implemented in different languages can vary significantly as you see in the code examples below.
Public usually means anything which makes use of the class can access it.
Private usually means only the class can access it.
Protected usually means either it can access private properties and methods whose values can then be passed back, or can be used only by extended classes.
Given the more complex nature of protected, I tend to use it only when necessary.
PHP : car.class.php
<?php
class car
{
public $mypublicvariable;
private $myprivatevariable;
protected $myprotectedvariable;
function __construct()
{
$this->mypublicvariable = 'guitar';
$this->myprivatevariable = 'beer';
$this->myprotectedvariable = 'chocolate';
}
}
?>
PHP : extendedcar.class.php
<?php
require_once 'car.class.php';
class extendedcar extends car
{
function __construct()
{
parent::__construct();
}

function showprotected()
{
return $this->myprotectedvariable;
}
}
?>
JavaScript : car.class.js
car = function()
{
this.mypublicvariable = 'guitar';
var myprivatevariable = 'beer';

this.myprivilegedmethod = function()
{
return myprivatevariable;
}
}
Now a file (index.php) which creates 2 PHP objects. One from the parent class and one from the extended class. Then 1 JavaScript object.
<?php
require_once 'car.class.php';
require_once 'extendedcar.class.php';
$mycar = new car;
$myextendedcar = new extendedcar;
echo $mycar->mypublicvariable.'<br />';
echo $myextendedcar->showprotected().'<br />';
?>
<script src="car.class.js"></script>
<script>
var mycar = new car();
document.write(mycar.mypublicvariable+'<br />');
document.write(mycar.myprivilegedmethod()+'<br />');
</script>

OOP Series : Inheritance

One of OOP's strengths is that it provides the concept of inheritance. This becomes particularly useful when developers are working together and extending classes. In this first example I'm not going to focus on controlling the visibility of properties and methods. Everything will be public. Visibility will be covered in another blog entry.
PHP:car.class.php
<?php
class car
{
public $mypublicvariable;
function __construct()
{
$this->mypublicvariable = 'guitar';
}
function changevalue()
{
$this->mypublicvariable = 'beer';
}
}
?>
PHP:extendedcar.class.php
<?php
require_once 'car.class.php';
class extendedcar extends car
{
function __construct()
{
parent::__construct();
}
function changevalue()
{
$this->mypublicvariable = 'chocolate';
}
}
?>
JavaScript:car.class.js
car = function()
{
this.mypublicvariable = 'guitar';
}
car.prototype.changevalue = function()
{
this.mypublicvariable = 'beer';
}
JavaScript:extendedcar.class.js
extendedcar = function()
{
car.call(this);
}
extendedcar.prototype = new car();
extendedcar.prototype.constructor = car;
extendedcar.prototype.changevalue = function()
{
this.mypublicvariable = 'chocolate';
}
Now a file (index.php) which creates an object from both.
<?php
require_once 'car.class.php';
require_once 'extendedcar.class.php';
$mycar = new car;
$myextendedcar = new extendedcar;
echo $mycar->mypublicvariable.'<br />';
$mycar->changevalue();
echo $mycar->mypublicvariable.'<br />';
echo $myextendedcar->mypublicvariable.'<br />';
$myextendedcar->changevalue();
echo $myextendedcar->mypublicvariable.'<br />';
?>
<script src="car.class.js"></script>
<script src="extendedcar.class.js"></script>
<script>
var mycar = new car();
var myextendedcar = new extendedcar();
document.write(mycar.mypublicvariable+'<br />');
mycar.changevalue();
document.write(mycar.mypublicvariable+'<br />');
document.write(myextendedcar.mypublicvariable+'<br />');
myextendedcar.changevalue();
document.write(myextendedcar.mypublicvariable+'<br />');
</script>

OOP Series : Constructors and destructors

In OOP, constructors are initialisers and destructors are clean up operations.
In the case of PHP you declare a constructor of your class. It will be run when an object is created from the class. You can also declare a destructor which will be "called as soon as there are no other references to a particular object, or in any order during the shutdown sequence."
In the case of JavaScript, you don't have a specific method, but just make all your declarations.
In JavaScript, it's best to rely upn the garbage collector.
PHP:familyphoto.class.php
<?php
class familyphoto
{
public $mywidth, $myheight;
function __construct($mywidth = NULL, $myheight = NULL)
{
$this->mywidth = $mywidth;
$this->myheight = $myheight;
}

function __destruct()
{
$this->mywidth = NULL;
$this->myheight = NULL;
}
}
?>
JavaScript:familyphoto.class.js
familyphoto = function(mywidth, myheight)
{
this.mywidth = typeof mywidth !== 'undefined' ? mywidth : null;
this.myheight = typeof myheight !== 'undefined' ? myheight : null;
}
Now a file (index.php) which creates 2 objects from both. In one, passing no values, and in another, passing 2 required values.
<?php
require_once 'familyphoto.class.php';
$familyphoto1 = new familyphoto;
echo $familyphoto1->mywidth.'<br />';
echo $familyphoto1->myheight.'<br />';
$familyphoto2 = new familyphoto(4,3);
echo $familyphoto2->mywidth.'<br />';
echo $familyphoto2->myheight.'<br />';

?>
<script src="familyphoto.class.js"></script>
<script>
var familyphoto1 = new familyphoto();
document.write(familyphoto1.mywidth+'<br />');
document.write(familyphoto1.myheight+'<br />');
var familyphoto2 = new familyphoto(4,3);
document.write(familyphoto2.mywidth+'<br />');
document.write(familyphoto2.myheight+'<br />');
familyphoto1.destruct();
familyphoto2.destruct();
</script>

OOP Series : Properties and methods

Why? I don't know, but the creators of OOP decided to rename variables and functions as properties and methods respectively. The crazy thing is, that in the code, you will see references to things like 'var' and 'function'. Hey ho! Here are 2 simple examples of how they are declared and used in my example of the desk lamp which lights up my keyboard on this dull day.
PHP : desklamp.class.php
<?php
class desklamp
{
public $power = 'OFF';
function onoffswitch()
{
$this->power = $this->power == 'OFF' ? 'ON' : 'OFF';
}
}
?>
JavaScript : desklamp.class.js
desklamp = function()
{
this.power = 'OFF';

this.onoffswitch = function()
{
this.power = this.power == 'OFF' ? 'ON' : 'OFF';
};
};
Now a file (index.php) which creates objects from both and makes the switch.
<?php
require_once 'desklamp.class.php';
$mydesklamp = new desklamp;
echo 'PHP desk lamp power = '.$mydesklamp->power.'<br />';
$mydesklamp->onoffswitch();
echo 'PHP desk lamp power = '.$mydesklamp->power.'<br />';
?>

<script src="desklamp.class.js"></script>
<script>
var mydesklamp = new desklamp;
document.write('JS desk lamp power = '+mydesklamp.power+'<br />');
mydesklamp.onoffswitch();
document.write('JS desk lamp power = '+mydesklamp.power);
</script>

A short series on OOP (Object Orient(at)ed Programming)

I'm going to do a short series of blog entries on OOP. I'll be using 2 languages in order to emphasise that the concepts are not language specific. All then entries will have simple code to demonstrate the point and be short in text.

Why OOP?

Good question Mick. Funnily enough, when you begin learning a language, it's rare to dive into OOP. It's possible that just grapsing this first concept would be enough to put any newbie off. Unfortunately, this also presents it's own problem. The newbie was doing perfectly well, creating useful code, only to be held up by a new concept (OOP) which slows them down. So the first question on their mind is why do I have to learn OOP? What is it going to give me.

Enough Mick. Give me the answer. Here I probably attack the problem from a different point of view than many of my programming friends.

Suppose I asked you to explain something. The mug of tea I'm drinking from. You might say, It's a cylindrical object, just big enough to hold, with a handle. It's yellow. They don't always look like that. Some are small for espresso, some are blue etc.

This would be an OOP way of looking at a mug of tea. Something which actually comes naturally to us. Strangely, if you were to use the concept we come into programming with (procedural), you'd describe the cup of tea as, 'It is the thing I am drinking from'.

First concept - classes and objects

So, here is the first concept. What is a class, and what is an object?
A class is a description of the thing. An object is a version of the thing.
Using our cup of tea example, we create a class called 'cup of tea', and in order to have a cup of tea, we need to create an object (my cup of tea).

Time to start coding I think. We are going to do this with 2 languages; PHP and JavaScript. First the classes.
PHP : cupoftea.class.php
<?php
class cupoftea
{
public $height, $diameter, $colour;
}
?>

JavaScript : cupoftea.class.js
cupoftea = function()
{
var height, diameter, colour;
};

Now a file (index.php) which creates objects from both.
<?php
require_once 'cupoftea.class.php';
$mycupoftea = new cupoftea;
$mycupoftea->height = 20;
echo $mycupoftea->height;
?>

<script src="cupoftea.class.js"></script>
<script>
var mycupoftea = new cupoftea;
mycupoftea.height = 30;
document.write(mycupoftea.height);
</script>

Start building your OOP JavaScript objects

Let's face it. Sometimes jQuery doesn't cut it. Either you don't want the user to download the library or it seems to be a sledgehammer to crack a nut. JavaScript has also matured into a great server-side language. Think of node.js. My example below uses OOP JavaScript for web interaction, but consider the concept on the server-side too.
Let's start with the HTML page:
<html>
<script src="alertster.class.js"></script>
<script>
var myalertster = new alertster('hello');
myalertster.sendit('goodbye');
</script>
</html>
Not too big is it? Essentially we are creating a new object called myalertster from a class called alertster which lies within a file called alertster.class.js. I am passing a couple of parameters here, but as you'll see from the contents of alertster.class.js (below), I've stuck a little error trapping in there too.
Now for alertster.class.js:
function alertster(message)
{
message = typeof message !== 'undefined' ? message : 'Default message';
this.m = message;
this.sendit = function(additional)
{
additional = typeof additional !== 'undefined' ? additional : 'Default additional message';
alert(this.m+"\n"+additional);
};
};
Easy!

htaccess and HTML5 lines to force downloads

Here are a couple of tips to make life a little easier for your users with download links.
If you are running a Apache as your web server you can add the following line to your htaccess file:

AddType application/octet-stream .pdf

and/or ad a line like this within your HTML page:

<a href="document.pdf" download="document.pdf">Download the document</a>

In this case the pdf will automatically be downloaded when the user clicks on the link, rather than presenting them with a dialogue box asking them what to do.

Automatically log users into your website using HTML5 Local Storage

So your users has been registered. They have gone through the pain of logging in on a mobile phone and you want them to authenticate more easily next time round, so that they don't give up on using your web app.

The solution : HTML5 Local Storage. In the code below, I take the username and password, and put them in localstorage variables. When the (login) page is visited again, I check to see if those localstorage variables exist. If they do, I add them as values to the username and password field, and perform a submit.

Enjoy!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HTML5 Save Password</title>
<!--[if IE]>
<script src="html5.js"></script>
<![endif]-->
<script src="jquery.min.js"></script>
</head>
<body>
<form method="POST" action="set.php">
<label for"username">Username</label>
<input name="username" type="email" />
<label for"password">Password</label>
<input name="password" type="password" />
<input type="submit" />
</form>
<script>
(function()
{
u = false;
p = false;
if(localStorage.getItem('username') != null)
{
$('form input[name=username]').val(localStorage.getItem('username'));
u = true;
}
if(localStorage.getItem('password') != null)
{
$('form input[name=password]').val(localStorage.getItem('password'));
p = true;
}
if((u == true) && (p == true))
{
$('form').submit();
}
$('form').submit(function()
{
localStorage.username = $('form input[name=username]').val();
localStorage.password = $('form input[name=password]').val();
});
})();
</script>
</body>
</html>

HTML5 contenteditable save, re-save and save again

The HTML5 contenteditable attribute is really useful, but when you've got my typing skills, you'd really like to keep saving as you go. In the example below I'm writing to a text file for simplicity. I've got a few things going on.

• If the text file exists or has data in there, I use it. Otherwise, the editable paragraph holds a default string.
• I use a form submit to kick off a jQuery event.
• The jQuery function calls a PHP script to write the contents of my editable paragraph to the file.

This way I can keep pressing the submit button as I go, which will just update the text file with the current editable paragraph contents.

Here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Editable jQuery save</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<p id="content" contenteditable="true">
<?php
$text = file_get_contents('test.txt');
if(!empty($text))
{
echo $text;
}
else
{
echo 'Put some text here.';
}
?>
</p>
<form>
<input type="submit" />
</form>
<script>
(function()
{
$('form').submit(function()
    {
        $.post('set.php',
        {
            content:$('#content').text()
        }, function(data)
        {
        if(data)
        {
        console.log(data)
        }    
        });
        return false;
    });
})();
</script>
</body>
</html>

And set.php

<?php
if(isset($_POST['content']))
{
file_put_contents('test.txt', $_POST['content']);
}
else
{
echo 'write was not successful';
}
?>

Heredoc in PHP to reduce a lot of echo calls

Heredoc is a way of building strings for output. Funnily enough I found there was a mistake in some of the coding on the Wikipedia page, but I won't hold that against them. Also, in some of the examples I've come across on the web, they don't seem to recognise an important feature of heredoc. That is, it also provides HTML output.

Below is some example PHP code with the correct syntax, use of variables and HTML. That should speed things up a bit.

<?php
$recipient = 'Mick';
$sender = 'Johnnie';
$x = <<<EOF
Dear $recipient,
I wish you to leave Sunnydale and never return.<br />
Not Quite Love,
$sender
EOF;
echo $x;
?>

HTML5 Data methods

Here are various ways you can use data through HTML5. The code is larger than usual, that's because I've provided code for 8 different methods of storing and using data. I have tried to highlight the related code and method using colours. To run this, you'll need 3 files:

• index.php
• twittieserver.php
• webworker.plugin.js

The code for all of these files is below. So, let's start with index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Localstorage</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:0.9em/1.1em Sans-serif;
color:#808080;
}
.column
{
float:left;
width:440px;
}
form, section
{
margin:10px;
padding:10px;
width:400px;
border:2px solid #808080;
}
p.description, section article ul
{
margin:4px 4px 8px 0px;
padding:4px;
}
section article ul
{
background:#F5DA55;
}
p.description
{
background:#F5F555;
}
h1, h2
{
font:1.4em/1.5em Georgia, Serif;
}
h1
{
margin:14px 0 10px 10px;
}
strong
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<h1>HTML5 Data Options</h1>
<div class="column">
<form>
<h2>Input</h2>
<p class="description">This form will be used to add content to the sessionStorage, localStorage and Web SQL Objects.</p>
<input type="text" id="one" /><br />
<button>Save</button>
</form>
<section id="customdataattribute">
<h2>Custom Data attributes</h2>
<p class="description">Allows you to hold data values within a selector.<p>
<p class="description">E.g &lt;li data-no="20"&gt;<br />Can therefore be called through jQuery as $('li').data('no');<p>
<article>
<ul>
<li data-no="22">This value is 22<li>
<li data-no="33">This value is 33<li>
</ul>
</article>
</section>
<section id="sessionstorage">
<h2>sessionStorage</h2>
<p class="description">This data will be lost when the browser is closed.<p>
<article></article>
</section>
<section id="localstorage">
<h2>localStorage</h2>
<p class="description">This data will be retained after the browser is closed. It persists until deleted by user through browser settings or by this application.<p>
<article></article>
</section>
</div>
<div class="column">
<section id="cachemanifest">
<h2>cache-manifest</h2>
<p class="description">A file which tells the browser what to cache, and not cache. <br /><strong>CACHE MANIFEST</strong> entries will be cached after they are downloaded for the first time.
<br /><strong>NETWORK</strong> entries require a connection to the server, and will not be cached.
<br /><strong>FALLBACK</strong> are fallback pages, if a page is unavailable.
<br />Instructions below:</p>
<article>
<p>First create a .htaccess file for your site (if you are using a proper web server) and add to it the following line:</p>
<p>AddType text/cache-manifest    .manifest</p>
<p>Next, create a file called cache.manifest. In this file, add the lines:</p>
<p><strong>CACHE MANIFEST</strong></p>
<p>index.html</p>
<p><strong>NETWORK</strong>:</p>
<p>login.html</p>
<p><strong>FALLBACK</strong>:</p>
<p>/html/ /offline.html</p>
</article>
</section>
<section id="sse">
<h2>Server-Sent Events</h2>
<p class="description">Allows this application to get data updates from a server. In this example I've simulated a twittie server using a PHP script called twittieserver.php. This data will be lost when the browser is closed.</p>
<article>
<ul>
</ul>
</article>
</section>
<section id="webworker">
<h2>Web Worker</h2>
<p class="description">A piece of JavaScript or jQuery running in the background, without affecting the performance of this application.</p>
<article></article>
</section>
<section id="websql">
<h2>Web SQL</h2>
<p class="description">Allows an application such as this to build a SQL database at the client end. It is also possible to synchronise this data at the server end. This supports applications which ahve both and online and offline state. It persists until deleted by user through browser settings or by this application.</p>
<article>
<ul>
</ul>
</article>
</section>
</div>
<script>
/* Calculates the custom data attributes and appends them to the result of a selector */
$.fn.calculatecustomattributes = function()
{
lis = $(this).children('li');
res = 0;
ve = 0;
$(lis).each(function()
{
ve = parseInt($(this).data('no'));
if(!isNaN(ve))
{
res += ve;
}
});
$(this).append('<li>Result is '+res+'</li>');
};

/* Sets the form contents which were stored in the sessionStorage object to the calling selector */
$.fn.displaysessionstorage = function()
{
$(this).html('<p>Content is '+sessionStorage.getItem('one')+'</p>');
};

/* Sets the form contents which were stored in the localStorage object to the calling selector */
$.fn.displaylocalstorage = function()
{
$(this).html('<p>Content is '+localStorage.one+'</p>');
};

/* Lists contents of the Web SQL object in the calling selector */
$.fn.displaywebsql = function(db)
{
container = $(this);
db.transaction(function(tx)
{
tx.executeSql('SELECT * FROM jimmy', [], function(tx, results)
{
  var len = results.rows.length, i;
for (i = 0; i < len; i++)
{
$(container).append('<li>'+results.rows.item(i).text+'</li>');
}
});
});
};

/* This function is called when the 'Save' button is clicked */
$.fn.saveit = function(db)
{
/* Put the value of the form input in a variable */
one = $('form #one').val();

/* Create an item in the sessionStorage object and apply the value of our variable */
sessionStorage.setItem('one', one);

/* Create an item in the localStorage object and apply the value of our variable */
localStorage.one = one;

/* Insert the value of our variable into the Web SQL object */
db.transaction(function(tx)
{
tx.executeSql('INSERT INTO jimmy (text) VALUES (?)',[one]);
});

/* Refresh the contents of our containers */
$('#sessionstorage article').displaysessionstorage();
$('#localstorage article').displaylocalstorage();
$('#websql article ul').displaywebsql(db);
};

(function()
{
/* Check to see if web storage is supported */
if(typeof(Storage) == 'undefined')
        {
            alert('Sorry! No web storage support..');
        };

        /* Check to see if web workers are supported */
        if(typeof(Worker) == 'undefined')
{
    alert('Sorry! No web worker support..');
}

/* Check to see if Server-Sent Events are supported */
if(typeof(EventSource) =='undefined')
{
alert('Sorry! No server-sent events support..');
}

/* Calculate custom attibutes */
$('#customdataattribute article ul').calculatecustomattributes();

/* Create a Web SQL object */
var db = openDatabase('mydb', '1.0', 'jimmy database', 2 * 1024 * 1024);
db.transaction(function(tx)
{
tx.executeSql('CREATE TABLE jimmy (id unique, text)');
});

/* Refresh the contents of our containers */
$('#sessionstorage article').displaysessionstorage();
$('#localstorage article').displaylocalstorage();
$('#websql article ul').displaywebsql(db);

/* Call the saveit function when the button is clicked */
$('button').click(function()
{
$(document).saveit(db);
});

/* Get updates for a server, here I've simulated the server with a PHP script */
var feed = new EventSource('twittieserver.php');
feed.onmessage = function(event)
{
/* Add new articles to the top of the list and limit the list to 4, thus removing the fourth item from the list */
$('#sse article ul').prepend(event.data);
if($('#sse article ul > li').size() == 4)
{
$('#sse article ul li:last-child').remove();
}
};

/* Get updates from a JavaScript, simply replacing the contents of the container with each new value returned */
w = new Worker("webworker.plugin.js");
w.onmessage = function(event)
{
$('#webworker article').html(event.data);
};
})();
</script>
</body>
</html>

Now twittieserve.php
<?php
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
$seconds = date('s');
echo 'data:<li>Item '.$seconds.'</li>'.PHP_EOL.PHP_EOL;
flush();
?>

And finally, webworker.plugin.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();

Enjoy!

Form changer jQuery plugin

Websites I work on often include the need to add a login, password reset and self-registration form. This requirement can either take up too much space on the page, or require a refresh to load each form. They could all easily be put in a container like a div and called upon (or shown) only when needed. This is what I've done with the example below.
The 'data-location' anchor attributes must correspond to the form ID's they are requesting.
First, I've hidden all the things not required to be visible on load and just spaced the links out (in blue).
Second, I've created the container, forms and links I need (in red).
Third, I've called my plugin to handle the interaction (in green).
Below the HTML, I present the plugin code. There is a little catch all at the top, just in case anyone creates a container with either an ID, class or neither.
Enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form changer</title>
<style>
#formholder #resetpassword, #formholder #selfregister, #formholder a[data-location="login"]
{
display:none;
}
#formholder a
{
margin:0.2em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<div id="formholder">
<form id="login">
<p>Hello from login</p>
</form>
<form id="resetpassword">
<p>Hello from reset password</p>
</form>
<form id="selfregister">
<p>Hello from self-register</p>
</form>
<a href="#" data-location="login">Login</a><a href="#" data-location="resetpassword">Reset password</a><a href="#" data-location="selfregister">Self-register</a>
</div>
<script src="formchanger.plugin.js"></script>
<script>
(function()
{
$('#formholder a').formchanger();
})();
</script>
</body>
</html>

Now the plugin code:
(function($)
{
$.fn.formchanger = function()
{
id = $(this).parent().attr('id');
clas = $(this).parent().attr('class');
tag = $(this).parent().get(0).tagName;
if(id != null)
{
container = '#'+id;
}
else if(clas != null)
{
container = '.'+clas;
}
else
{
container = tag;
}
anchors = $(container).children('a');
forms = $(container).children('form');
$(this).click(function()
{
$(anchors).show();
$(forms).hide();
$(container+' #'+$(this).data('location')).show();
$(this).hide();
});
};
})(jQuery);

Cross browser box shadows (yet again)

A client recently asked me to make their site a 'copy' (don't ask) of another website. The site needing to be copied had employed one of those shadows using a very long image with a drop shadow at either end and repeated on the Y axis as a background. Plus, top and bottom shadow images to give the 360 degree effect.  This wasn't going to be possible to use with the site which I had developed, since my site was responsive. So I had to return to the old chestnut of drop shadows in IE. If my client was asking for a 'copy' of another site, there was a good chance they were IE users and I couldn't assume I'd get away with providing standard solutions (I can say this, we have a good relationship) .
See below.

.container
{
  margin-top:20px;
  box-shadow:3px 3px 10px 5px #666666;
  -moz-box-shadow:3px 3px 10px 5px #666666;
  -webkit-box-shadow:3px 3px 10px 5px #666666;
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=315,strength=2);
}

Onload alerts with foundation.js

I was recently asked to help on a website which had been designed using the foundation framework. Naturally, I had to sift through lots of code to find how the site actually worked, but it's not a bad framework. One of the requirements was to create a message alert only when a text string had been passed to the page.

Below is an example of how I did it using PHP. There are 2 elements highlighted in red. Crucial code which was not highlighted in the online documentation. Code which I have added to do the job.

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" ><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation test</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div id="myModal" class="reveal-modal">
<h2>Alert!</h2>
<?php
echo '<p>'.urldecode($_GET['message']).'</p>';
?>
<a class="close-reveal-modal">&#215;</a>
</div>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
<?php
if(isset($_GET['message']))
{
?>
$('#myModal').foundation('reveal', 'open');
<?php
}
?>
</script>
</body>
</html>

At last the HTML5 main element

For those of us who've been using HTML5 for a long time, it's been a bit frustrating to step back to those old divs. Now we finally have the element we've been waiting for <main>. Now look at our page.
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <header>
      <h1>This is the header</h1>
    </header>
    <main>
      <p>The main content</p>
    </main>
    <footer>Copyright mine</footer>
  </body>
</html>

Your first jQuery plugin

Here is a quick tutorial in how to create a jQuery plugin. Below is my basic page with a call to:
A file called 'first.plugin.js' containing the plugin (in red).
A call to a method called 'changetored' within that plugin (in blue).

<!DOCTYPE html>
<html lang="en">
<head>
<title>First jquery plugin test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
<!-- Call the plugin -->
<script src="first.plugin.js"></script>
<script>
(function()
{
/*
* changetored is a method declared in first.plugin.js
*/
$('p').changetored();
})();
</script>
</html>
Now for the plugin. Here is the file 'first.plugin.js'.

(function($)
{
$.fn.changetored = function()
{
/*
* In the context of a call like $('p').changetored();
* $(this) would become all paragraphs
*/
$(this).addClass('red');
};
})(jQuery);

Catching browser buttons

I was recently putting together an application. My test user did something I wasn't expecting. Rather than using the buttons within the application, he went for the browser buttons. It prompted me to provide a warning for the user that the application wouldn't work so well if he did this. See code below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test page</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<a href="index2.php">Go to page 2</a>
<script>
(function()
{
catchBrowser = true;

$('a').click(function()
{
catchBrowser = false;
});

$(window).bind('beforeunload', function()
{
if(catchBrowser == true)
{
return 'Please use only the buttons within the application pages.';
}
else
{
return;
}
});
})();
</script>
</body>
</html>

Removing Twitter Bootstrap modal link outlines

Developers who use Twitter Bootstrap may have noticed a problem when they use the navigation controls to launch a modal. This could be a link at the top which launches a contact form for example. The problem is, that an outline to the link is left behind. I've seen a few 'solutions' to this on the web. None of which worked for me, because they were CSS solutions and the outline is created using JavaScript. So, here's what a link required to launch a modal looks like:
<a href="#myModal" data-toggle="modal">Launch modal</a>
And here is some coding for the modal:

<div id="myModal" class="modal hide fade" role="dialog">
  <p>Hello</p>
    <button class="btn btn-primary">Save</button>
  </div>
</div>
Now, at last is the solution. Because, JavaScript creates the problem, it's a good idea to use JavaScript (in my case jQuery) to resolve it. The code should look like this:

(function()
{
    $('a').data('toggle','modal').click(function()
    {
        $(this).css(
        {
            'outline':'none'
        });
    });
})();
Good luck.

Two lines of PHP code which will save your sessions

So you develop PHP applications and use sessions to move data from page to page. You may then also have the problem that session data is not retained, especially if you use a line of code like this:
header('Location:nextpage.php');
Or indeed if the session is not saved on a page refresh.
Enter these 2 lines:

session_regenerate_id(true);
session_write_close();
Put these at the end of your page to save the session data. Also if you use the header function above do something like this.

session_regenerate_id(true);
header('Location:nextpage.php');
session_write_close();

How to configure your Ubuntu localhost for PHP MVC URL routing

Step 1. Open a terminal and type
sudo gedit /etc/apache2/sites-available/default
or whatever text editor you like using to open up your apache configuration file for editing.
Step 2. Under the sections headed  <Directory /> and <Directory /var/www/>:
Change the line 'AllowOverride none' to 'AllowOverride All'.

Step 3.  Open up a terminal and type
hostname
This will display your hostname.

Step 4. Open up a terminal and type
sudo gedit /etc/hosts
or whatever text editor you like using to open up your hosts file for editing.
Step 5. Modify the first line so it reads
127.0.0.1    localhost localhost.localdomain yourhostname
Step 6. Open up a terminal and type
sudo a2enmod rewrite

Restart your computer.
It will now work.

How to set up sendmail on your Ubuntu LAMP localhost

This is beautifully simple:
Step 1. Open up a terminal and type

sudo apt-get install sendmail
This will install the complete sendmail application. It will take a minute or so to complete.

Step 2.  Open up a terminal and type

hostname

This will display your hostname.

Step 3.  Open up a terminal and type

sudo gedit /etc/hosts

or whatever text editor you like using to open up your hosts file for editing.

Step 4. Modify the first line so it reads

127.0.0.1    localhost localhost.localdomain yourhostname

Restart your computer.

It will now work.

Create unordered lists from lines of text using Emmet in Sublime text 2

Designers and developers of web sites often find they're having to convert text into HTML at the micro level despite all the tools we have available. Here is just one example of how Sublime Text 2 with the Emmet plugin can help. You may have to use alternative keys for macs.
Let's say we have 10 lines of text that we want turning into a HTML unordered list. OK, with Emmet we can select all the lines and wrap them with <ul></ul> using ctrl+alt+enter and typing ul, then enter again.
What we don't want to do from here is have to select each line individually, then press ctrl+alt+enter and typing li, then enter again.
What we can do is select all the lines, then ctrl+shift+l to split the selection into lines, then press ctrl+alt+enter and typing li, then enter again.
As you can imagine, this technique is useful across other circumstances where we have the text, but need to turn it into HTML.

Yet more fun with IE

I've been working with a good designer recently. To be fair to him, I've made more of an effort to accurately represent his work in IE 7 and 8. My layout has used twitter bootstrap and I discovered 2 things about CSS in IE along the way:
1. To style the <legend> tag, you need to encase your form elements in a <fieldset> tag.
2. To specifically target IE 7 and 8 in your styles, you need to add /9 to the end of styles. These will not affect your styles targeting good browsers. I put these specific styles at the bottom of my stylesheet so that I don't have to hunt round for them at a later date. Here are some examples below. Very quirky.

/*All IE 7 and 8 stuff*/

hr.bluehr
{
width:104.3%\9;
}

#formholder legend
{
margin-left:-6px\9;
}

input[type='text'], input[type='password']
{
width:94%\9;
}

.btn
{
border:1px dotted #EEEEEE\9;
margin-left:-0px\9;
}

Combining Twitter Bootstrap with Moodle

Moodle is an excellent LMS and Twitter Bootstrap an excellent page design framework so why not put them both together. Here's how.


Create a new theme location on your moodle installation by following these instructions. http://docs.moodle.org/24/en/Themes_FAQ#Why_is_the_new_theme_I_uploaded_not_showing_up_in_Theme_Selector.3F
You may suffer your new theme appearing with the name [[pluginname]]. If so, follow these instructions http://docs.moodle.org/dev/Themes#Getting_Your_Theme_to_Appear_Correctly_in_Theme_Selector
Download the Twitter Bootstrap theme from http://theming.sonsbeekmedia.nl/
Copy the contents of your downloaded theme into this directory.
Finally, you want to be in a situation where you can make your own small tweaks.
Open /theme/bootstrap/config.php
Add 'user_styles' to the end of the '$THEME->sheets' array.
Now create a file called /theme/bootstrap/style/user_styles.css. You can now put your tweaks in there such as:

p
{
font-family:Georgia,Serif;
}

Install and use LESSCSS on your ubuntu server

LESSCSS is an excellent progression in the development of stylesheets, but how do you install and use it on your ubuntu server?
The first thing we do is to install node-less. To do this through the terminal, use the command:
sudo apt-get install node-less
Right, that's the installation done. Yes, that easy.
Now let's create our LESSCSS stylesheet. Here is my simple example, which we'll put into a file named styles.less:

@blue:#00c;
@white:#FFFFFF;
body
{
background:@blue;
color:@white;
}

There are two ways of using LESSCSS.
The first way is to download, the less.js library from http://lesscss.org/, then simply refer to a LESSCSS stylesheet we created and subsequently call the library thus:.

<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The second way is to compile our LESSCSS stylesheet into a normal CSS. To do this, again go to the terminal, change to the directory containing your page e.g.
cd /var/www/test/less
Then compile the LESSCSS stylesheet into a normal CSS like this:
lessc styles.less > mystyle.css
Now you can just call your newly created CSS in your page, but this time without the need for the less.js library thus:

<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>