Categories
Tutorials

Importing hand-drawn art into Photoshop

Using Photoshop to design websites it great - it allows for pixel-perfect designs that can then be styled to your hearts-content using all the powerful tools included in the application. But sometimes it's nice to add a human touch, and have hand-drawn art in our designs. Now I personally don't do this all too often, but the other day when a client asked for a design that I simply couldn't create in Photoshop, I reached for the good-old pencil and paper to draw a fish sat in a chair (this might seem somewhat odd out of context, but there you go), and some nice lettering.

So what are our options? For me I wanted to draw the art, then colour it in with Photoshop, and add it to the site, and the distinct lack of thorough tutorials I found didn't do a great deal to help, so I thought I'd document my process here.

I started by sitting down and actually drawing the final product, and after an hour or two of trying to make a realistic fish I scanned the bad boy in, and came up with the following:

Hand-drawn fish

Great, I was happy with the simple design, and now I needed to 'vectorise' it. And here is where I hit my brick wall. Illustrator wouldn't play ball - I tried a billion different settings for the live trace tool, and it simply failed miserably. I concluded this was down to the opacity of the drawing, so I traced it with a 0.3mm fine-liner to make it stand out a little more. Here's what I ended up with:

Fish fineliner

Not bad, but still Illustrator just looked at me blankly. And that's when I found out about VectorMagic - an online tool to convert hand-drawn art to vectors. Now the service is free for the first 2 images you upload, and then there's a subscription of $8 a month, or you can buy the desktop version. So while it's not a complete solution, it works damn well! (I eventually forked out for the desktop client and I can honestly say it works every time). Now if you don't fancy being locked into a service like that the only other option is to manually trace (using the pen tool) in Photoshop - I know, this isn't really a solution, and that's why I seriously suggest you give VectorMagic a go.

So, having put my image through the VM process I got the following:

Traced Fish

Yay! It's starting to look a lot better. From there I began to colour in my creation using the fill tool, and the brush. After about 10 minutes I had:

Fish coloured-in

And then I added highlights and shadows to make it look more realistic - using a layer with the blend mode set to multiply, and a small brush using black and white for shadows and highlights respectively. The final fish took it's form:

Fish final

And that's now my process for importing vector art.

Categories
Tips & Tricks

Hide an element with jQuery whilst scrolling

Note: This article has been marked for a quality review and will soon be updated.

Today I came across an interesting problem that no amount of Google searches could solve. So I had to knuckle down and come up with a solution - and surprisingly it was much more simple that it had first appeared.

So the problem is hiding an element when a user is scrolling - it might be a menu, a header, or a picture of my cat, Sophie. Either way we can't just use the simple delay() function in jQuery to help us out - we need to use some raw JavaScript. To accomplish this we will create a variable into which we will place the current scroll amount of the page, we will then wait for a period of time, and check if that scroll amount has changed. If it has we will leave the element hidden, otherwise we'll show it to the user again.

And here's the rather simple code to do just that:

$(document).scroll(function(){
	$('section').fadeOut();
	
	var scrollA = $('body').scrollTop();
	
	setTimeout(function(){
		if(scrollA == $('body').scrollTop()){
			$('section').fadeIn();
		}
	}, 200);
});

And there we have it! A really simple effect made easy with a tiny bit of JavaScript.

You can check out the fiddle over here: http://jsfiddle.net/LJVMH/

Categories
Tutorials

Animate a site’s loading

Note: This article has been marked for a quality review and will soon be updated.

There are a lot of things we can do as web designers to improve the UX of a site, much of the time subtle animations can be added to add a bit of finesse to a page, and a new trend is that of adding animations to the loading of pages to make it look a bit better. So what do I mean by 'loading animations'? I'm not talking about the annoying "feature" of having a site load in a flash and then display a loading spinner while it actually pulls up the content using AJAX; rather adding a tiny amount of code to gain more control over how our site loads. But before we jump in to the code we need to remember a couple of things: first the animations can't take very long, after all we're trying to improve the user experience, so having a site take 5 seconds to load in will just frustrate the user. And second, as we will be using JavaScript for this, we need to add a fallback in case it's turned off.

Here's what we'll be creating (new window).

So to begin I've written up a very simple page, here's the HTML:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Animated Loading</title>
	<!--[if IE]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div class="wrapper">
		<header>
			<h1 class="left">My Website</h1>
			<nav>
				<ul>
					<li>Home</li>
					<li>More</li>
					<li>About</li>
					<li>Contact</li>
				</ul>
			</nav>
		</header>
		<section class="hidden">
			<h2>Welcome</h2>
			<p>Yay for loading animations!</p>
		</section>
		<footer class="hidden">
			<p>Copyright goes here</p>
		</footer>
	</div>
</body>
</html>

Notice the use of the class "hidden" - that does exactly what you might think, and to make sure it actually works, let's hook up the CSS:

/* Globals */
.wrapper {
	max-width:1200px;
	display: block;
	margin:0 auto;
	padding:0 10px;
}

.hidden {
	display: none;
}

.left { float:left; }
.right { float:right; }

body {
	background: #dfdfdf;
}

/* Header */
header {
	overflow: hidden;
	position: relative;
	top:-145px;
}

h1 {
	background: #222;
	padding:50px;
	font-size: 2.5em;
	line-height: 0.4em;
	color: #fff;
}
		
nav {
	float: right;
}

	nav li {
		padding-top:52px;
		float: left;
		width:91px;
		text-align: center;
		height:90px;
		cursor: pointer;
		margin-right:2px;
		display: none;
	}
	
/* Sections */
section {
	margin-top:2%;
	padding:2%;
	background: #fff;
	overflow: hidden;
}
	
	section h2 {
		font-size: 1.25em;
		font-weight: bold;
	}

/* Footer */
footer {
	text-align: center;
	padding-top:10px;
}

Again, some very basic CSS to ensure it actually looks like a functional website. Notice how elements such as the 'nav li' elements are hidden using CSS (you might want to just add a class in the HTML, but if they are dynamically generated, this is your best bet).

If we open the page now we don't see very much, some would say it was blank, many people actually. This is what users without JavaScript enabled will see. So to remedy that we need to make use of the <noscript> tag in our header. Just before the closing <head> tag, add the following code:

<noscript>
	<style type="text/css">
		header {
			top:0px !important;
		}
		
		section, footer, nav li {
			display: block !important;
		}
	</style>
</noscript>

That code will only be executed if we don't have access to JavaScript, and so will force the elements we worked so hard to hide, to show up. Good stuff, we're not breaking the internet by requiring JavaScript! And on that note, let's write some.

Here's the code I wrote for the example - it's very basic, and executes within 2.45 seconds (but because some animations are in parallel it feels like 1.25 seconds). Make sure you include jQuery on your page, and then whack in the following code:

$(function(){
	/* Loading Animations */
	$('header').animate({'top':0},500, function(){
		$('nav li').each(function(index){
			$(this).slideDown(300*(index+1));
		});
		
		$('section, footer').fadeIn(750).removeClass('hidden');
	});
	

	$('a:link').click(function(){
		$('header').animate({'top':'-185px'},300);
		$('section, footer').fadeOut(300);
	});
});    		 

The first part of the that code waits for the DOM to be fully loaded, and then animates the header to slide in. When the header has finished showing up we cycle through the navigation's list elements, sliding them down at a growing animation length (notice the '+1' to ensure we don't multiply by zero). Once that's done we fade in any other elements we had hidden, and remove the class of 'hidden' - here you could use another each() cycle, but in the interests of speed I just stuck with a simple fade in effect. The next block of code is for links away from the page. We look for any links, and then whenever they are clicked, we quickly animate the contents of the page out in 0.3 seconds - I think this is just a nice touch. With a bit of tweaking of things like timings and the odd animation, you can make a visitor smile before they've even read what's on your site.

And that's how to improve the UX of your websites with subtle loading animations.

Categories
Deep Thought

Reality check: Why Adobe Muse doesn’t matter.

Recently a number of people in the web community, specifically developers have been complaining about Adobe Muse, a website creation tools for people without coding knowledge. And while I agree that Adobe doesn't know what the community wants, I think the reactions to this tool have been a little too big. Here are my musings (I couldn't resist that badboy).

First up Muse isn't a new concept. In fact there are a billion and one tools to allow people without knowledge of coding to build websites, SquareSpace is just one example. They are not aimed at people who know HTML and CSS, and so people like me don't use them. But the reason these applications are popular isn't because making websites is easy, or because everyone has a web-designer within them, it's because people usually start off with a great template. People who don't have a design background and who then use a service like Muse to build a site without a template, generally end up with a crap website. Does that bother me? Nope, it doesn't impact my trade in a bad way, in fact it's good if anything because I can say to potential clients "look at what this guy did, it doesn't look very good does it? And that' why you should work with me.".

Using a tool like Muse is like buying a microwave meal, it looks the part, it tastes mediocre, and it's full of crap. Although you can create websites with Muse, as developers know, the code it spits out isn't great. This impacts things like SEO, thus making the website harder to find.

Anyone that follows me on Twitter knows that I do sometimes complain about Photoshop. Sure there are some bugs, it's way over-priced, and the company that makes it has lost touch with the creative industry, but to be honest it does the job. I don't expect great things from Adobe, and neither should you. While they are off spending time and effort creating nasty applications like Muse (written in AIR), I'm confident others are looking for an alternative.

So stop complaining about Muse, it wasn't built for you, it doesn't affect you, and although Adobe has changed (despite it once being about the music), it doesn't matter.

Categories
Tips & Tricks

10 Best Practises for jQuery Beginners

Note: This article has been marked for a quality review and will soon be updated.

jQuery is the one of the most popular JavaScript frameworks available; it enables developers to write code that is easy to understand but that also allows really powerful functionality. There are a boat-load of tutorials out there on jQuery, and the documentation is awesome, but in this article I'll go over the things that all beginners should know about jQuery.

1) Document.ready

One thing that often catches newbies out is that their code doesn't seem to be having any effect on their page, despite all of it being correct. A major cause of this is that their jQuery code is attempting to access DOM elements before they exist. This can happen because developers place their JavaScript in the <head> of their pages, and so by the time the rest of the page has loaded jQuery doesn't know what's going on. The simple way to solve this issue is by telling jQuery to execute the code only when the DOM has finished loading, like so:

$(document).ready(function(){
	//Code goes here
});

But be warned, there are some circumstances where you shouldn't bother wrapping code in it. For example if you're clued-up about performance and already have all your code at the bottom of your page, it's unnecessary to use it, because all the elements already exist. Other exceptions might include wanting better code reusability - say for instance placing non-jQuery functions outside of the wrapping.

2) Cache elements

A lot of the time people write functions like:

$('.myelement').click(function(){
	$(this).doSomething();
	$(this).doSomethingElse();
	$(this).fadeOut(500);
});

And there isn't anything wrong with that. But if you started doing 10 things to the element once it were clicked it would start to look a little messy. To fix this it's a good idea to put the $(this) selector into a variable, like so:

$('.myelement').click(function(){
	var el = $(this);	
	el.doSomething();
	el.doSomethingElse();
	el.fadeOut(500);
});

This will give you less code to write in the long run, and using descriptive variable names will also help you keep focus on what you are manipulating. But more important than that is the performance increase - asking jQuery to return an element over and over as we did before wastes valuable performance - so caching will speed up your code!

3) Chaining

And the above brings me nicely to my next point - chaining. You can chain jQuery functions, meaning that you don't have to separate all those lovely functions, so the code I just wrote could actually look like:

$('.myelement').click(function(){
	$(this).doSomething().doSomethingElse().fadeOut(500);
});

And by just chaining those functions we have condensed 3 lines of code into 1.

4) AJAX

One reason why a number of developers like jQuery is because it has an excellent syntax for AJAX. In Javascript making AJAX requests is cumbersome and difficult to learn, but in jQuery it's pretty easy. So if you've taken the time to fade in messages to your users using jQuery, why not go ahead and submit forms using AJAX, thus creating a more cohesive user experience.

This is how it's done:

$('.myform').submit(function(){
	var dataString = $(this).serialize();
	
	$.ajax({
		url: 'process.php',
		data: dataString,
		type: 'POST',
		success: function(data){
			//Do something
		}
	});
});

The above code waits for the form with a class of '.myform' to be submitted, and then sends the data in the form via a POST method to 'process.php'. If the whole thing works well the success function is called and accepts some data. You would simply set up process.php to either return an error or simply say 'success', and then act accordingly - perhaps showing a success balloon or error notification.

5) Using delegate()

Most beginners typically start by using syntax such as:

$('.myelement').click(function(){
	//Do something
});

Just as I did above. There isn't anything technically wrong with that code, it's just that it could be better. Newbies will often find them googeling why their click() method doesn't work on dynamically created elements (as could be done using AJAX), and the reason for this is because jQuery binds the event handlers to the elements when the page is loaded. So we have to change the way we write our code to ensure we don't run into any issues.

To do that we can use the handy delegate() method. For example:

$('.myWrapper').delegate('p', 'hover', function(){
	$(this).doSomething();
});

The code above tells jQuery to listen for hover events on paragraph elements within the .wrapper element. The method allows us to add elements without worrying if event handlers will listen out for changes to them, and so it is good practise to use it in production.

6) Using powerful selectors

Complex selectors in jQuery allow us to tailor more specific and targeted interactions on our websites. Say for instance we want to target all paragraphs, except those with a class of 'not-me'. A great way to do this is like so:

$('p:not(.not-me)').click(function(){
	$(this).doSomething();
});

There we used the :not() syntax to exclude elements with a class of '.not-me' - a simple, but very effective way of selecting only the elements we want. Furthermore we may only wish to select the first paragraph on our page, to do that we would use another handy selector:

$('p:first').click(function(){
	$(this).doSomething();
});

There are a bunch of powerful selectors besides just class and ID based ones, you can take a look in the docs over at: http://api.jquery.com/category/selectors/

7) Use callback functions

I often answer questions from people who want to know how they can trigger actions once other actions have finished execution. And the simple answer is by using callbacks. For those new to jQuery the term by be unfamiliar, but you've already witnessed one in the AJAX example above! A callback method is one that is called after the method in question has done it wants to do, in jQuery a lot of functions allow you to pass a callback function of your own; let's take a look at how we'd do this:

$('.myelement').click(function(){
	$(this).fadeOut(500, function(){
		alert('Element faded out!');
	});
});

The code above listens for a click on our elements, fades it out, and then alerts the user about it. The callback function is passed as a separate parameter to our fadeOut() method, and is executed after the element is faded-out.

8 ) Use a context

In the interests of performance let's take a moment to think about how jQuery finds elements. When you say something like:

$('.myelement').click(function(){  });

jQuery searches the entire DOM for it. But what if you only have things with that class within say a div with a class of '.main-content'? If so you can provide a context to jQuery (much like we did with the delegate() method above). Doing this enables jQuery to only search within that context, thus saving on performance. And here's how it would look:

var context = $('.main-content');

$('.myelement', context).click(function(){
	$(this).doSomething();
});

The more specific (and smaller) your context, the faster your code.

9) Pass objects not identifiers

When writing your own functions it might seem like a good idea to do something like:

function myfunction(id){
	$(id).doSomething();
}

myFunction(“.myElement");

But that really isn't very flexible. It's far better to actually pass the object around like so:

function myfunction(el){
	el.doSomething();
}

myFunction($(“.myElement"));

10) Don't depend on jQuery

While the techniques above are good advice for writing solid jQuery, you certainly shouldn't depend on the thing. Never use jQuery as a replacement for CSS - not only is it more inefficient, but you are ignoring users without Javascript turned on, and it's a sure fire way to annoy users.

Categories
Tips & Tricks

Force JS replace to work on all occurrences of needle

When manipulating strings in JavaScript a useful method to know about is the replace() method. It take 2 parameters - the needle and the haystack. So if you wanted to replace 'cat' with 'dog' it might look something like this:

var myString = "The cat jumped over the fence";
var myNewString = myString.replace("cat","dog");
document.write(myNewString);

Great it worked. You can also use regular expressions for the needle if you're into that kind of thing - say for instance, if you want to generate a valid URL. It when doing just that, that I realised I had a problem on my hands. My code used 2 replace methods - one for removing special characters, the other to remove spaces. The first was a regular expression, while the second was a basic method searching for a space and replacing it with a dash. My problem was that it was only replacing the first space. And so I had to reach for a regular expression to help me out.

Don't worry if you're not too great with RegEx, this one is really basic, and here's what it looks like:

var myString = "The cat jumped over the fence to meet another cat."
var myNewString = myString.replace(/cat+/g,'dog');
document.write(myNewString);

That bit of code tells the rendering engine that we are using a RegEx with our forward slashes, inside we have the word we are looking to replace, then the plus symbol tells it to match the preceding word (in our case 'cat'), 1 or more times. Then the magic happens - we use the 'g' character to tell it to look for all occurrences.

And that is how you ensure all occurrences of a needle are replaced when using the replace() method. Hopefully this article will save you scratching your head over why a seemingly obviously method won't play ball.

Categories
Tutorials

Build an early sign-up mailing list system

Note: This article has been marked for a quality review and will soon be updated.

When you've got a great idea for a product its often hard to resist buying up the domain name for it, but what do you put there? A coming soon logo? A paragraph about what you're making? How about allowing visitors to sign-up to hear updates when the products becomes public? The last point is the most useful because not only does it let you keep track of early interest, it ensures your visitors don't go getting all excited and then forget about the product when it launches a couple of months down the line. So our system will allow users to pop their email address into a form, and will then insert it into a database and send an email to the new subscriber. We'll look at how to build in admin notification, as well as having a system in place that requires users to confirm their email address before they are added to the list. We'll be making a script that we can use on multiple sites with little alteration so if, like me, you have a number of projects awaiting public release you will be able to stick it on all your different servers with relative ease. Let's get started.

First up we will do the simple task of creating our database. Depending on the features you want, you may want to alter the structure a little, but in our case we will build in support for users to enter their name, email, and to have to confirm their subscription. So for that we will need the fields: ID - our primary key, name - if we want to collect the subscriber's name, email, confirmed - if they have verified their email address, site - which mailing list they subscribed to, created - when did they subscribe? So our process should look like this: User Enters Email -> Added to Database & Verification Email Sent -> User Confirms -> Database Updated. So go ahead and add that table to your database, I called my database 'mailing_lists', with my table named 'users'. Here is the SQL to create the table:

CREATE TABLE `users1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(150) NOT NULL,
  `email` varchar(200) NOT NULL,
  `confirmed` tinyint(4) NOT NULL DEFAULT '0',
  `site` varchar(150) NOT NULL,
  `created` varchar(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

Now we'll build the main PHP script list.php that will handle all the heavy lifting. To begin we'll define some important variables, and create a connection to our database, here's what that looks like:

define(REQUIRES_NAME, false);
define(NOTIFY_OWNER, true);
define(OWNER_EMAIL, 'YOUR EMAIL HERE');
define(SITE_NAME, 'SITE NAME HERE');

define(DB_USER, "USERNAME");
define(DB_PASS, "PASSWORD");
define(DB_HOST, "DB HOST");
define(DB_NAME, "DB NAME");

$db = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

We're using MySQLi for a speed increase and to allow us to use Object Orientated Programming. Now we will create the function that will allow us to insert new subscribers to the database, we'll call it addToList().

function addToList($email, $name = ''){
	if($name=='' && REQUIRES_NAME){
		// Name required and not provided
		echo 'Invalid name';
	}else {
		$email = strtolower($email);
		global $db;
		
		$cur = $db->query("SELECT * FROM users WHERE email = '".$email."' && site = '".SITE_NAME."'");

		if($cur->num_rows > 0){
			echo 'Duplicate entry detected';
			return false;
		}else {
			$db->query("INSERT INTO users(name, email, confirmed, site, created) VALUES('$name', '$email', 0,'".SITE_NAME."', '".time()."')") or die('Error inserting into database');
			return true;
		}		
	}
}

Let's see what that function does. First up we check if we should be collecting the user's name, if we are and it isn't there, we stop the script and send out a warning. Otherwise we set up the $email variable and make sure we have access to our $db variable. The next part makes queries the database to make sure the user hasn't already subscribed to the list, if they have we tell them that a duplicate entry was detected, and if not we insert their data into our table. Great stuff, we've done the main part of our script. But if we want the user to be able to confirm their email address, and even send an email to the admin, we'll need to write a few more functions. And to make sure we don't go writing duplicate code, we will create our own function for sending mail that will in turn call PHP's mail() function. Here's what it looks like:

function list_mail($to, $subject, $message){
	if(!empty($to) && !empty($subject) && !empty($message)){
		$headers  = 'MIME-Version: 1.0' . "\r\n";
		$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";	
		$headers .= 'From: noreply@'. SITE_NAME . "\r\n";		

		mail($to, $subject, $message, $headers);
	}else {
		echo 'Bad parameters passed to list_mail()';
	}
}

It's a pretty basic function that checks that the parameters of $to, $subject, and $message aren't empty, and then sends a HTML email if everything checks out. Otherwise we echo out a handy error.

The next two functions we will write are the two that handle the content of the emails sent to our users and our admin, so you'll need to alter them accordingly.

function sendConfrimMail($email, $name = ''){
	$subject = 'Subscription Confirmation';
	$message = '<html>
			<head><title>Subscription Confirmation</title></head>
			<body>
				<center><p style="margin-top:20px;">You have successfully subscribed to updates from '.SITE_NAME.', thank you for signing up to be the first to receive information about our exciting new project, we look forward to providing you with something amazing in the near future.

<p>But before you can receive updates you need to confirm your subscription by visiting: http://'.SITE_NAME.'/confirm.php?e='.$email.'&t='.md5($email.SITE_NAME).'</p> <p>-The Management</p></center> </body> </html>'; list_mail($email, $subject, $message); } function notifyOwner(){ global $db; $subCount = $db->query("SELECT COUNT(*) FROM users WHERE site = '".SITE_NAME."'"); $subCount = $subCount->fetch_array(); $subCount = $subCount[0]; $subject = 'New '.SITE_NAME.' Subscription!'; $message = '<html> <head><title>New '.SITE_NAME.' Subscription!</title></head> <body> <center><p style="margin-top:20px;">A new subscription has just been submitted to the site! We currently have '.$subCount.' subscribers!</p> <p>Let\'s make em happy!</p></center> </body> </html>'; list_mail(OWNER_EMAIL, $subject, $message); }

Now those functions both do essentially the same thing, they just send messages to different people. And as a handy addition the notifyOwner() function also includes the subscriber count in the message. Feel free to go made coding up a beautiful HTML email and playing around with the content at this point.

You should notice that in the confirmation email we included a link that links to the site name we provided /confirm.php, and passes the variables 'e' and 't' (not the friendly alien) along with it. The 't' variable is the encrypted version of the user's email, plus our site name as a salt. This is something we can easily replicate when we build confirm.php a little later.

So where are we at? Well we have a bunch of great functions that we can port to different sites with relatively little hassle, but, as the more astute among you may have noticed, none of them are ever called! So we're going to have to write 10 more lines of code to make it happen! And it just so happens I've already done that :).

if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
	if(addToList($_POST['email'], $_POST['name'])){
		sendConfrimMail($_POST['email'], $_POST['name']);
		if(NOTIFY_OWNER){
			notifyOwner();
		}
		echo 'Success';
	}
}else {
	echo 'Invalid email address';
}

So this code first validates the email address passed to us using the filter_var() function that works it's magic by using a complex regular expression for validation - this saves us having to write one ourselves. Next we call our addToList() function from within an if statement. This ensures that the following code only executes if all goes well, and because the function also handles the error output we don't need a matching else for that statement. If all does go well, we then send the confirmation email to our user, check if we need to notify the list's owner/admin, and then echo 'Success'. Otherwise we tell the world that the email provided wasn't valid. Excellent. Now we only have 2 more parts to add; that's the form itself, with which we will use some jQuery to handle our error, and the confirmation page. So let's start with the server-side.

Here is the code for confirm.php:

if(!empty($_GET['e']) && !empty($_GET['t'])){
	define(SITE_NAME, 'SITE NAME');
	
	define(DB_USER, "USERNAME");
	define(DB_PASS, "PASSWORD");
	define(DB_HOST, "DB HOST");
	define(DB_NAME, "DB NAME");
	
	$db = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

	$email = $db->real_escape_string($_GET['e']);

	$result = $db->query("SELECT * FROM users WHERE email = '$email' AND site = '".SITE_NAME."'");
	
	if($row = $result->num_rows > 0){
		if($row['confirmed']=='0'){
			if($_GET['t']==md5($_GET['e'].SITE_NAME)){
				$db->query("UPDATE users SET confirmed = 1 WHERE email = '$email' AND site = '".SITE_NAME."'");
				echo 'Subscription confirmed!';
			}else {
				echo 'Invalid Token!';
			}
		}else {
			echo 'Email already confirmed!';
		}
	}else {
		echo 'No record found.';
	}

}else {
	echo 'Invalid URL!';
}

So here we check to make sure we have both the user's email, and their confirmation token, and then connect to our database. We then create a variable called $email - a sanitised version of the email addressed passed to us in the URL. However we still use the one provided to us later - this is because a user might have a special character in their email address, and may not be a hacker, so if our function returns something slightly different it will alter the confirmation token. We then make sure that the record exists, and that it hasn't yet been confirmed. If it hasn't we test the confirmation token and update the database. Notice the 5 echo statements to keep the user updated about what's going on. And that's it for PHP for today. Let's build our snazzy form.

Now our script expects only the email address of any subscriber, but we can optionally also pass it the name of a new subscriber. In this case we'll just pass the email address to keep it simple, but if you wanted to include the name you would add another input named 'name'.

<form action="list.php" method="post">
	<span class="status">Enter your email address below to hear updates.
<input type="text" name="email" placeholder="Email address..." /> <input type="submit" value="Subscribe to Updates" /> </form>

And we'll add some jQuery to submit the form using AJAX, and to handle the errors accordingly.

$(function(){ 
	$('form').submit(function(){
		$.ajax({
			url: 'list.php',
			type: 'POST',
			data: 'email='+$('input[name=email]').val(), //Add name here if you want it
			success: function(data){
				if(data=='Success'){
					$('form input').fadeOut(500, function(){
						$('.status').text('Email submitted! Please check your email to confirm your subscription.').css('font-weight','bold');
					});
				}else if(data=='Invalid email address') {
					$('.status').text('Please ensure you have entered a valid email address!').css('font-weight','bold');
				}else if(data=='Duplicate entry detected'){
					$('.status').text('Duplicate entry detected! You have already signed up.').css('font-weight','bold');
				}else {
					$('.status').text('Error processing data, please try again in a moment.').css('font-weight','bold');
				}
			}
		});
		return false;
	});
});

The code above is some simple jQuery to submit the form to list.php, and to handle what it returns. If the script outputs 'Success' it's all good, and we can tell the user just that. We then process the rest of the errors that we cater for in our script, and humanise the data accordingly, and if the error is anything else - possibly to do with the server being busy, we just put out a standard error message.

And that is how to build an early sign up mailing list!

Download the source here.

Categories
Tutorials

Spice up your Hyperlinks!

Now the words 'hyperlink' and 'sexy' rarely frequent the same sentence in my household, but something which appears to have come into fashion lately (namely I'm using it ;)) is the fading in of the hover state on hyperlinks. So instead of simply specifying the :hover state in your CSS, you use JavaScript or CSS3 to spice up the whole hovering thing. Here's what we will be creating, now lets see how we might go about doing it.

First off let's take a look at the CSS3 way - apparently all the cool kids are using it. If we had a link which we wanted to 'sexify' we might do something like:

.spice {
	color:blue;	
	transition: all .2s linear;
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
}

	.spice:hover {
		color: red;
	}

Bam! Right there we have one sexy hyperlink using only one CSS3 transition. So when we hover over a link with the class of 'spice' we should see it fade to a lovely bright red, and then upon mousing out, back to that delicious blue. But what happens if (God forbid) a user visits in IE8 or something?! We have support for Opera, Firefox, Chrome and Safari, but not IE. Well surprise surprise we need to have a fall-back for older browsers. And for that, we will be using jQuery (other JavaScript frameworks are available).

Before we continue I should add that I would always suggest using the CSS3 way over the jQuery method, but in any case this is how we do it:

$(function(){
	var color = '';
	
	$('.spice-jq').hover(function(){
		color = $(this).css('color');
		$(this).animate({'color':'red'},200);
	}, function(){
		$(this).animate({'color':color},200);
	})
});    		

Above we first wait for the DOM to be finished loading, and then create ourselves a variable called 'color' to hold the value of the link's colour in it's normal state (if all your links are the same colour, you can just replace every occurrence of 'color' with whatever colour you want). We then animate the colour of the link back and fourth using the hover() function. But before you wonder why the code above doesn't work on your site, I should add that for colour animations, the jQuery Color Plugin is required - so go ahead and include that in your page before the above script.

So now we could using something like Modernizr to detect if the user's browser has CSS3 transitions support, and if not, whack the above jQuery code onto our page. And with that, you should now have a set of beautiful links on your site that make it that little bit slicker.

Categories
Tutorials

Building a Confirmation Dialog in JavaScript

Note: This article has been marked for a quality review and will soon be updated.

A common feature of desktop applications is that when a user prompts a potentially destructive action, the program will display a confirmation dialog to ensure that the user doesn't go and do something silly. To do this we will use some basic JavaScript. In this tutorial I will be using jQuery to display and manipulate our elements, but this technique uses good old' JavaScript to get the job done. So let's get started. Click here to see the finished product.

Thee are a few ways to do this, namely we could create a global variable and wait for it to be changed by our dialog function and then proceed; or we could have our function return either true or false based on the user input, and then carry on. However the method we will be using will be to mole net a function that accepts a callback function as one of its parameters. If the user confirms the action the callback function will be called, and of not we will simply hide our dialog and do nothing. So with that in mind, lets create the HTML for our dialog. Here's what I've got:

<span class="lightswitch" style="display:none">
<div class="confirm" style="display:none">
	<div class="wrapper">
		<h3>Are you sure?
		<p>This will clear all the changes you have made.

<button class="left" id="confirm-continue">Continue <button class="right" id="confirm-cancel">Cancel </div> </div>

So we have 2 elements to worry about here - the .lightswitch span, and our .confirm div. The light-switch code will be used to dim the rest of the screen while the dialog is open to ensure focus is directed to whatever we want to put on our pop-up. All that's left is to style our dialog - feel free to go mad with your CSS at this point, but this is what I ended up with:

.right { float:right; }
.left { float: left; }

.confirm {
	display: block;
	width:350px;
	left:50%;
	top:50%;
	margin-top:-100px;
	margin-left:-175px;
	z-index: 1500;
	overflow: hidden;
	cursor: default;
	position: fixed;
	background: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

	.confirm .wrapper {
		padding-bottom:10px;
		overflow: hidden;
		font-family: sans-serif;
		color: #000;
	}

	.confirm span {
		width: 90%;
		margin:0 5%;
		display: block;
	}
	
	.confirm h3 {
		background: #212121;
		font-size: 22px;
		color: #fff;
		width:91%;
		padding:2% 5%;
		margin:0;
		border-radius: 4px 4px 0 0;
		-moz-border-radius: 4px 4px 0 0;
		-webkit-border-radius: 4px 4px 0 0;
	}
	
	.confirm button {
		border:none;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		color: #fff;
		background: #212121;
		padding:5px 10px;
		font-size: 15px;
	}

.lightswitch {
	display: block;
	background: rgba(0,0,0,0.75);
	z-index:1000;
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	position: fixed;
	overflow: hidden;
}

The CSS above gives us a centred box with a dimmed background overlaid on top of the rest of the page. The rest of it is just basic styling that you'll want to change to fit with your own UI.

And now to the JavaScript! Here's how it looks:

function confirmIt(title,text,callback){
	$('body').append('');
	$('.lightswitch').fadeIn(300, function(){
		$('.confirm').fadeIn(100);
	});
	
	$('#confirm-continue').click(callback);
	$('#confirm-cancel').click(function(){ $('h1 span').text('Action Cancelled'); })
	
	$('.confirm button').click(function(){
		$('.confirm').fadeOut(500, function(){
			$('.lightswitch').fadeOut(200, function(){
				$('.confirm, .lightswitch').remove();
			});
		})
	});
}			

Let's go through what it does. On the first line we can see the 3 parameters we pass to the function for the title, text, and callback function for our dialog. If the user confirms the action they initiated the callback function will be called, and if not, the action will be cancelled. The function beings by appending the HTML we wrote earlier to the end of our page and then fades-in our .lightswitch to dim the background; and when that completes it fades in the actual confirmation dialog. That's the first part sorted.

We then have to set up some event handlers - for when the user clicks "Continue" and when they click "Cancel". For our continue button we can simply use the function passed to us to confirm the action was intended. We could leave our cancel button without an event handler, but in our case we will change the content of our main heading to reflect the user's choice. But neither of those lines actually get rid of our dialog, so even if the user confirmed/canceled the action our box would still be visible. So to remove it from the screen we will bind a function to the click events of both buttons. In that function we simply reverse the fading-in of the elements, and then remove them from the DOM to ensure we don't go having multiple elements with the same IDs in the future.

And with that we are finished! We now have a good system in place to ensure our users don't accidentally delete or perform some other destructive action on their data.

Categories
Tutorials

An introduction to OOP

Note: This article has been marked for a quality review and will soon be updated.

Object-orientated programming is a concept that is more likely to pop up when programming desktop applications rather than those for the web. But once you start using OOP you will wonder why you ever used procedural programming (that's simply using a program that calls a load of functions/procedures), well maybe not completely - OOP has its place on the web, and in this tutorial we will explore a practical usage of the common programming-paradigm. So what is it? Put simply OOP is when programmers create objects in which they can store data, and ask those objects to do certain things. So for an example, we might have a person object for which we can set things like eye colour and height - these values would be stored in variables. We might also have some instructions that we can give to our person object* like "star jump!", our person would then do a star jump, in our case it might be more like writing something to the screen like "I just did a star jump!".

So how do we know what variables and instructions we have for any give object? Put simply, with our class. A class is a file which contains all the information about any objects that will be created. The most common analogy for a class is a blue-print - it's a good one, because our class contains all the information we need to know about anything we make using it. Just as a blueprint for a house tells us the dimensions of the thing, it also shows us how the doors open and where the water comes in. When we actually make our house in the real world we build it, in the world of computers we instantiate it. When we've finished building in the real world we say we have a house, in programming we call it an instance of the house class.

Deep breaths people! Let's move onto the why we might want to program like this.

OOP really re-enforces a number of good programming techniques, and the 4 principles of the paradigm are as follows: A PIE. No, not the tasty treat, but another acronym! Now if your background isn't in programming the next 4 words might fly over your head - but for the moment I need you to grab a net and get ready to catch them. A PIE stands for Abstraction, Polymorphism, Inheritance, and Encapsulation. Now if you've done any programming on the web or otherwise it's likely you've done at least 2 of the above things. So let's go through them one at a time.

Abstraction

This refers to the technique of taking a problem and focusing on the 'abstract' rather than the individual. Take a look at this function:

function addMyNumbers($a, $b){
    return $a + $b;
}

Above is a very basic example of abstraction at work. Instead of writing 4 + 7 directly into our code, we have written a function that adapts to return a value based on what we pass to it. Therefore we have abstracted that concept. In OOP we use abstraction to make classes. For instance, in our person class we might have an instance method of runOneMileThatWay() - a method that does exactly what the name suggests. But the problem with such a method is that it is very specific. If we wanted our person object to run 5 miles instead of 1 (they are very fit by the way), we would either have to write a new method, or call the same method 5 times. The solution to this is to copy our add method above, and pass a value which tells our instance to run $x amount of times. This makes our program more efficient and easier to maintain.

Polymorphism

If any of these words is going to trip you up, this is gonna be the one. Bear with me here. Polymorphism is the term used to describe the idea that variables, objects, and functions can have more than one form. We don't need to go too deep into why this is important, but let's take a look at an example where polymorphism comes into play.

$x = (int) 4;
$y = (float) 5.76532;

echo $x + $y;

Perfectly legal right? We've declared 2 variables - one integer, and one floating point number, and then added them together. Run this code and you get a number just below 10. But technically this shouldn't work. Integers and floats are stored using different methods, but thanks to polymorphism PHP knew to simply add the two together as we humans would, instead of complaining about the distinction between integers and floats. And that's all you really need to know about polymorphism for now.

Inheritance

Nice and simple - your mum has blue eyes, so you have blue eyes right? Well human genetics is a little more complex than what we're going to be doing, but you get the idea - you inherit (or get) your traits from your parents and general ancestry. In OOP our objects can also inherit things like methods from their super classes. In certain languages you must always tell the world (or rather compiler) what class you are inheriting from. For example in Objective-C - the language used on iOS, the most common class to inherit from is called NSObject. As I said before you can inherit methods which ensures you don't repeat yourself, and can easily maintain your code. NSObject contains really useful methods such as 'description' which can do all kinds of things.

In our example we might have methods such as 'wake up' and 'sleep', but these behaviours are not limited to humans, all living things do this (I should think), so maybe we could create a class called 'Animal'. In the animal class we could have methods such as wakeUp and fallAsleep, and then we could sub class it and make our person class inherit from it. Lets see the PHP way of doing just that.

Class Animal {
	private $awake = false;

	public function wakeUp(){
		$this->awake = true;
	}
	
	public function fallAsleep(){
		$this->awake = false;
	}
}

Class Person Extends Animal {
	public $name;
	
	public function starJump(){
		echo $this->name . ' did a star jump!';
	}
}

$me = new Person();

$me->wakeUp();
$me->name = 'Tom';
$me->starJump();

Don't worry about the syntax too much if you're not familiar with it; but here we can see that we have 2 classes. Our first is 'Animal' which has the methods we said we'd create, and the second is 'Person' which allows us to do a star jump - I've never seen a monkey do one of those, so I think we're safe to keep that within our own species for now. We then create a new object based on the person class, and immediately call the 'wakeUp' function - but this doesn't exist in our Person class, so what's going on?! Well because we used the keyword 'Extends' - (syntax varies from language to language) our $me object has access to all the methods implemented in our Animal class. And that's inheritance.

Encapsulation

Last but not least is this badboy. The term is means when we take the data (instance variables/ivars) and instructions (methods), and put it all within a class. When we do this we make our objects self-sufficient. Think about it like so. Without encapsulation our person class might have to be operated on by another function outside of our class to, say for instance, make a curry. So it might send a bunch of messages (that's just calling the methods of a class), to our object, and fiddle around with our public instance variables. That way of doing things will get the job done. But, and it's a big but, it ain't good practise!

If you were working on a project where your people objects had to be able to make a curry (maybe it's a restaurant game), and you wrote your curry method outside of your person class it would work. But then what happens if you start a new project, and the people objects in that scenario need the curry shizzle?! Bad things start to happen, that what happens. So let it be known, objects should know what they are doing without needing help (anything beyond variable data), from the rest of your program. Maybe you decide not all people should need to know how to make a curry (plain craziness quite frankly), it would be a better idea to sub-class the Person object to something like a 'Chef' class - using your handy friend inheritance .

And with that we have finished with the main concepts of OOP. As you can see above, most of the A PIE concepts work together to create a beautiful paradigm (to a programmer at least), and one that will ensure you consistently write good quality code. Although this has been written from the perspective of web development, should you ever wish to move into complied programming languages such as Objective-C for iOS, you will find that they are heavily class based, so you've learnt something that should serve you well in the future - well done you!

* I am by no means suggesting that you objectify men or women.