Nettuts+

Review of jQuery Enlightenment – and Free Copies!

Jeffrey Way — Sat, 14 Nov 2009 00:14:56 +0000

jQuery Enlightenment, by Cody Lindley, is a breath of fresh air when it comes to e-books. It’s written by a jQuery team member, each code snippet includes a link to JSBin for live previewing, and – most importantly – there’s no fluff. Ultimately, this means that you’ll learn faster, and more thoroughly.

To prove how much I enjoyed reading this book: I received my review copy on a Wednesday, and finished it the next day. As I’m sure many of you are aware, tech books and front to back reads very rarely go well together. This is a testament to the “no fluff” aspect I referenced earlier. Over the course of a dozen chapters, Cody will teach you everything you need to know.

At a Glance

Chapter 1 – Core jQuery
Chapter 2 – Selecting
Chapter 3 – Traversing
Chapter 4 – Manipulation
Chapter 5 – HTML Forms
Chapter 6 – Events
Chapter 7 – jQuery and the web browser
Chapter 8 – Plugins
Chapter 9 – Performance best practices
Chapter 10 – Effects
Chapter 11- AJAX
Chaper 12 – Miscellaneous concepts

Who this Book is for?

While most books on jQuery are primarily focused on introducing the library to new users, jQuery Enlightenment instead assumes you’re at an intermediate level hoping to learn the more advanced tips and techniques. As such, I especially enjoyed the read more than I would have if it was just another crash course style book. Assuming that you’re a regular Nettuts+ reader, it’s more than probable that you have at least a basic understand of jQuery. If so, it’s time to take your skills to the next level; jQuery Enlightenment will take you there.

Though perhaps the most convincing reason to check out Cody’s new book is because he’s an official member of the jQuery team.

JSBin Snippets

Throughout the book, Cody supplies every single code snippet with a respective live preview from JSBin. This may not sound like much; however, it’s incredibly helpful when you can simply click on a link, and immediately be transported to a page which allows you to “toy” with the code. I can’t tell you how vital this is – and, frankly, it’s shocking that more web development e-books haven’t taken advantage of this yet.

About the Author

Cody Lindley is a Christian, husband, son, father, brother, outdoor enthusiast, and client-side engineer. Since 1997 he has been passionate about HTML, CSS, JavaScript, Flash, Interaction Design, Interface Design, and HCI. He is most well known in the jQuery community for the creation of Thickbox, a modal/dialog solution. In 2008 he officially joined the jQuery team as an evangelist. His current focus has been on client-side optimization techniques as well as speaking and writing about jQuery. As of late he is employeed by Ning.com

Free Copies!

Cody has been generous enough to offer a handful of copies to our readers! To enter, simply leave a comment, and check back on Monday (Tuesday for some of you) to see if you’re a winner! Otherwise, if you’d like to purchase the ebook and immediately read it, you can buy it here.

Easy Website Updates with PageLime

Jeffrey Way — Fri, 13 Nov 2009 02:10:53 +0000

PageLime makes the process of editing static websites laughably easy. There are times when a full CMS like WordPress is far too complicated when only simple edits are required – not to mention the fact that a static template must first be modified accordingly to work with WordPress. Wouldn’t it be easier if your current static website could instantly be integrated with a service, without requiring hours of conversion time? This is where PageLime comes in.

In today’s video tutorial, we’ll go through the process of purchasing a site template on ThemeForest, and then integrating that specific template with PageLime, resulting in a website which is super easy to update…even for your mom.

PageLime is a remote Content Management System that allows you to update the content, images, and documents on your web site without installing any software.

The Screencast

Other Viewing Options

What’s in Store for PageLime?

In the CEO’s own words…

Repeating Regions – You/Your clients will be able to have regions that you define as repeatable. This will let you dynamically create new buttons in navigation, blog like article additions, etc. This is in testing now, and will roll out across all sites in the next week!
Multipage Dynamic Content – You will be able to define areas that show up on other places in the website. So when you update them, they update in other places.
Blog – Drop in simple PageLime managed blog.
Client Invoicing – We’re building an invoicing feature from withing PageLime that will let you manage your PageLime clients with auto recurring invoices that link to your PageLime account. This basically allows you to setup a subscription model for you clients, and pass the cost of PageLime directly to them. OR charge them more, and make money off of PageLime! This will be a feature in the Business Account Level.
iPhone App – Manage websites from an iPhone application. This is already designed, just need to go about building it soon. I can send you screenshots if you would like.
eCommerce – Either a partnership with another team, or build one ourselves that can be dropped in, like the blog.

How to Create a Photo Gallery using the Flickr API

Paul Burgess — Thu, 12 Nov 2009 18:22:34 +0000

Flickr is, without doubt, the biggest and best photography website on the internet. There are lots of widgets, badges and plugins which allow you to display your latest Flickr photos on your website, but we’ll take it a step further by tapping straight into Flickr and integrating your photostream into your website, giving you a photo gallery that is a breeze to update.

We’ll be creating this photo gallery using the Flickr API and phpFlickr . If the letters ‘A,P & I’ are enough to strike fear into your heart, don’t worry, we will take it slow and give full code examples that you can copy.

Flickr have also recently launched The App Garden, which is a showcase of tools, toys and sites which use the Flickr API to offer something useful or fun. Once you get to grips with using the API, you can let your imagination conjure up a new way to use it and submit your app.

For this tutorial I am presuming that you already have a Flickr account, and access to a server that runs PHP and PEAR.

The Outline

Get a Flickr API key
Download the phpFlickr files
Build a gallery page to display our thumbnails (with pagination)
Make a photo page to show our photos (with previous and next navigation)

Step 1 – Get a Flickr API key

Your API key is your own unique series of numbers and letters which grant you access to Flickr’s services. Go here: http://www.flickr.com/services/apps/create/apply/

Here you must decide if you are going to use Flickr for commercial or non-commercial purposes. Flickr provide good explanations as to which you should choose, chances are you’ll need a non-commercial API key, which is what I am choosing for this demo.

Follow the steps and fill in all your details.

You should then be presented with your unique key which will appear as a series of random numbers and letters like so:

You’ll also see a number called ‘Secret;’ ignore that for now. For this exercise we only need the key; make a note of it as we’ll need it soon.

If you use the API to build a cool tool or site later on, you might want to submit and feature whatever you build in the Flickr App Garden. You can click on ‘Edit app details’ to fill in the info.

Pay particular attention to the tips and advice given in the API Terms of Use and the Community Guidelines, if you abuse it, you’ll lose it.

Now on to the exciting stuff…

Step 2 – Download phpFlickr

phpFlickr is a project by Dan Coulter. It is a class written in PHP which acts as a wrapper for Flickr’s API. The files process the data provided by Flickr and return arrays in PHP, which we use to display our photos

We need to download the files that we will later include in our webpage, and will do all the complicated work for us. Visit phpflickr.com or skip straight to the download page at Google Code. In this demo, we’ll be using the zip file: phpFlickr-2.3.1 (zip)

Download and unzip it. For this tutorial, we only need the PEAR folder and the phpFlickr.php file. Upload the files to your web directory

Step 3 – Basic Setup and Simple Configuration

Now we have all we need to connect with Flickr and retrieve our photos. We’ll make two pages: one to show our thumbnails and one to show the photo. All of the code will be available as complete pages at the end of the tutorial.

These code examples are all working on the basis that your files are on the root of your server – or all in the same folder. Before anything else, we need to create a cache folder in order for phpFlickr to work properly. Create a folder called ‘cache’ in your web directory and give it writable permissions (CHMOD 777).

Now we’ll build a page that displays our thumbnails and has some simple paging. In the example gallery, this is index.php – and looks like this.

Before we go any further, we need to set two main variables in the config.php file.

Open config.php. You’ll see it’s just asking for two things: your API key and your Flickr username.

First, enter your API key – the long random set of numbers and letters you were given earlier on by Flickr. Keep your info inside the quote marks.

// insert your API key
$key="ENTER YOUR FLICKR API KEY HERE";

Now for your Flickr username; this is not your Yahoo sign-in username or your Flickr screename – but the username you use for Flickr itself. To double check, sign in to Flickr and look at the top of the page where it says ‘Signed in as…’ – that is your username. So let’s declare our username as a variable:

// enter your Flickr username
$username="YOUR FLICKR USERNAME HERE";

Save the changes to config.php and upload – you shouldn’t need that file again.

Step 4 – Building the Thumbnails Page

On to the page itself. Here’s a breakdown of what we are doing at the top of the page, which cues up everything ready for the action:

We are going to include some Previous and Next links with a small bit of code further down the page. The thumbnails we are going to show depend on what page we are on, so we run a simple if statement which will grab our page number. If there’s a ‘fpage’ query in the url, use that. If not, we are on page one.

Next we include the core phpFlickr file that has everything we need in it communicate with Flickr.

// inclue the core file
  require_once('phpFlickr.php');

Now we fire up a new class from the phpFlickr file using our API key that we got earlier.

// Fire up the main phpFlickr class
$f = new phpFlickr($key);

phpFlickr uses caching to speed the process up. There are options of using a database technique but for this tutorial we will use the simpler cache folder option. We need a folder called ‘cache’ that is writable, meaning that the system has access to it and can alter its contents. To do this set the folders’ permissions to 777 via your FTP program. Then we add this line to enable it:

$f->enableCache("fs", "cache");

We call the people_findByUsername method which returns an array:

$result = $f->people_findByUsername($username);

From that array, we also need your unique user id (your Flickr id that look like this: 11221312@N00, declared here as $nsid) which we get like so:

// grab our unique user id from the $result array
  $nsid = $result["id"];

Next, we call the people_getPublicPhotos method, which again returns an array that we will call $photos. In this line, we are also passing through our id which we got in the line above ($nsid). NULL refers to the ‘extras’ option which we’re not concerned with right now. We are also stating the number of thumbnails we want to display (21), and are passing through the page to start on ($page) which relates back to the $page variable from the top of the page:

 $photos = $f->people_getPublicPhotos($nsid, NULL, NULL, 21, $page);

The last bit we need to set the page up is a little bit of info we need for the paging to work. We access the $photos array we created above, and pull out the the total number of pages, plus the total amount of photos in our photostream:

$pages = $photos[photos][pages]; // returns total number of pages
  $total = $photos[photos][total]; // returns how many photos there are in total
  ?>

Notice we’re closing the php section off here with the ?> Now we have all we need to get the first 21 thumbnails from our Flickr photostream and display them. We’ll carry on with the page now, adding some html, using PHP to show the images, and include some simple paging links. So let’s start by writing some basic html.

 



Nettuts Flickr Gallery Demo




My photo gallery

Nothing out of the ordinary here; just setting up the html and starting an area for the thumbnails. The next step is to fill our div called ‘thumbs’ with our thumbnails like so:

Note we’re opening php again with

We’ll use a foreach loop to run through the $photos array and to get to the photo element ($photo), which holds the info we need for the thumbnails.
See the comments in the code for an explanation of what’s going on:

";
   
// This next line uses buildPhotoURL to construct the location of our image, and we want the 'Square' size
// It also gives the image an alt attribute of the photo's title
       echo "buildPhotoURL($photo, "Square") .  "\" width=\"75\" height=\"75\" alt=\"$photo[title]\" />";

// close link 
      echo "";

// end loop
}
?>

We’re almost done with the main page. Chances are, you have more than 21 photos in your Photostream; so we’ll need to add some paging with some Previous and Next links so we can move to the next 21 thumbnails. The links look like this:

This code relies on the line we had at the top calling the $page variable. When our code calls in the photos from Flickr, it also uses the $page variable to know where to start – look back at the line where we called ‘people_getPublicPhotos’ and you’ll see that we passed in the $page variable there as well. That value is the backbone of this little paging arrangement. We’ll open a paragraph with the id of ‘nav’, open up the PHP tags, and define our ‘back’ and ‘next’ variables:

Next we handle the actual ‘Previous’ and ‘Next’ links by checking that we’re not on the first or last page, the close off php and close the ‘p’ tag.

// if it's not the first page
if($page > 1) {
echo "« Prev";
}
// if not last page
if($page != $pages) {
echo "Next »";}
?>

Now we refer back to some values we had at the beginning to display a little more about where we are in the gallery:

Page $page of $pages";
echo"$total photos in the gallery";
?>

And to abide by Flickr’s terms and finish the page off, we’ll add:

This product uses the Flickr API but is not endorsed or certified by Flickr.

That’s everything we need to produce a page that displays the latest 21 photos as thumbnails with a simple Prev / Next navigation. Just like the homepage on the demo. Next up: the page that displays our photo.

Step 5 – Build a Page to Display Single Photos

Now that we have our thumbnails, we need a page to show the full image when one is clicked on. Here is the code for photo.php, which the thumbnails link. We start this page similarly to the index page, but instead of the page number, we want the id of the photo which has been passed in the url from our thumbnail page:

enableCache("fs", "cache");

Now we need to gather some info from Flickr about the photo such as the photo’s id number, its dimensions, where it sits in relation to other photos (context) and the url of the image.

// access the getInfo method, passing in the photo's id
$photo = $f->photos_getInfo("$id", $secret = NULL);

// pass the photo's id to the getSizes method to get the dimensions of our image
$photosize = $f->photos_getSizes("$id", $secret = NULL);

// we want the dimensions of the medium size which we get from the $photosize array in the previous line
$size = $photosize[3];

// again passing the photo's id through we get the context, which tells us which photos are before and after the current id
$context = $f->photos_getContext("$id");

//  the buildPhotoURL method does pretty much what you'd expect - build the  photo URL, we pass in $photo and the size we require to return the  image URL e.g.  http://farm4.static.flickr.com/3108/3175330082_0bf4b22e47.jpg
$photoUrl = $f->buildPhotoURL($photo, "Medium");

// This tells us who the owner of the photo is.
// This is an important part to include as we want our gallery to show  only our photos and not pull in other users' photos - more of an  explanation about this in the notes at the end
$owner = $photo["owner"]["username"];

// We only want the photo if it belongs to us - so if our username  is the same as the owner of the photo... we'll write out the page and  show it
// more info on this at the end of the tutorial
if($username == $owner){
?>

Now we are primed for the rest of the page with the juicy bits.







<?php
// We access the $photo array and grab the title of the photo to use as the document title
echo $photo[title]
 ?>






Photo gallery


$photo[title]";

// The photo itself, you'll recognise $photoUrl from above where we  built the photo's url, we are also accessing the $size array that we  prepared earlier to get the width and height
// and the title once again
// We'll also make it link to the version on Flickr for good measure
echo"";
echo"";
echo"";

// The photo's description
echo"$photo[description]";
?>

Now we have our photo… and we are almost done. This last bit may look a bit tricky but don’t be put off by it. It has to do with the photo’s context, as in, which photo comes next in the stream and which one was previous to it. Just like you see on people’s Flickr galleries. The reason there seems a lot of code is because for this to work best, we have to check to see if there is a photo before or after the current photo. If there isn’t, we don’t want a link, instead we insert normal text and a dummy image (noimg.png).


";

} else {
// if not - show the blank filler image
echo"";
};

// if there is a next photo...
if($context['nextphoto']['id']){echo "";
} else {
// if not - show the blank filler image
echo"";
};

echo"";

echo"";
// if there is a previous link, write a link - if not, just the text
if($context['prevphoto']['id']){echo"« Prev";}  else {echo"« Prev";};
echo" | ";
// if there is a next link, write a link - if not, just the text
if($context['nextphoto']['id']){echo"Next  »";}else {echo"Next »";};
echo"";
?>

And to finish the page off, we’ll include a link back to the main gallery, a bit of text for Flickr and close off the html.

« Main gallery

This product uses the Flickr API but is not endorsed or certified by Flickr.

Hold up! One more thing… we finish the if statement from just before the html began… again, see the notes at the end about why we do this.

And there you have it. A photo gallery for your website, powered by your Flickr account. Take a look at the demo page to review how it looks with a bit of extra markup and styling added. This is a very basic implementation of the Flickr API; it just scratches the surface of what you can do, but it does provides a nice photo gallery for your site/blog which you can easily update and maintain via Flickr.

NOTES & EXTRAS

In this tutorial we are retrieving a user’s public photos. Within photo.php, we reference $owner in this tutorial. At this point we are ensuring that the photo displayed belongs to the owner of the photograph. If we leave this out, your photo page can pull in any user’s public photo, and that is obviously not what we want. This goes back to the advice Flickr provides in their guidelines.

You should use the API to access your own images only or those which you have permission to use. If you display someone else’s pictures, you should mention the name of image owner and name of the image. Flickr also say "…pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr.”
There are other ways to display your photos using the search method in the API, but it is a bit more complicated and requires you to provide authentication – in other words, use the API to log in and let Flickr know it really is you – more info on that can be found here.
This demo is a very simple example of what you can do with the Flickr API. You can take it much further and in fact do pretty much everything Flickr does: get photo sets, show tags and comments, display private photos, even upload images. Take a look at the API documentation here: http://www.flickr.com/services/api/ You can cross check the methods against the phpFlickr.php file.
Just as we called in our photos using $photos = $f->people_getPublicPhotos($nsid, NULL, 21, $page); you can do the same with a set. For example, $photos = $f->photosets_getPhotos(”$set”, $extras, $privacyfilter, 21, $page); is a way to get 21 photos per page from a set, where $set = the set id (something like 72157594488289220), then using foreach ($photos['photo'] as $photo) {… to get the images etc.
If you need to see which part of the array you need, you can use print_r() to list out the array and see how to find to the value you need. Surround it with
```
 tags to make the output legible.
```
The file paths in this demo all work on the assumption that everything is in the same folder (or all on the root) – feel free to move stuff about but be sure to change the paths
Huge thanks to Dan Coulter for wrting the excellent phpFlickr. Be sure to take a look around the phpFlickr documentation: http://phpflickr.com/docs/ for more tips and advice on taking things further

Have fun, and show us what you come up with!

Build a Beautiful Carousel with JavaScript from Scratch: New Plus Tutorial

Pablo — Wed, 11 Nov 2009 20:20:26 +0000

In today’s PLUS video tutorial, Pablo is going to show you how to create a Flash-like carousel…without using Flash! By implementing some clever JavaScript techniques, you’ll learn how to create this beautiful effect. As you’ll find, it’s not quite as complicated as you might imagine. It simply requires a solid grasp of Geometry. Join today!

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

The Basics of Object-Oriented JavaScript

Leigh Kaszick — Wed, 11 Nov 2009 14:10:24 +0000

Over recent years, JavaScript has increasingly gained popularity, partly due to libraries that are developed to make JavaScript apps/effects easier to create for those who may not have fully grasped the core language yet.

While in the past it was a common argument that JavaScript was a basic language and was very ’slap dash’ with no real foundation; this is no longer the case, especially with the introduction of high scale web applications and ‘adaptations’ such as JSON (JavaScript Object Notation).

JavaScript can have all that an Object-Orientated language has to offer, albeit with some extra effort outside of the scope of this article.

Let’s Create an Object

    function myObject(){

    };

Congratulations, you just created an object. There are two ways to
create a JavaScript object: they are ‘Constructor functions’ and
‘Literal notation’. The one above is a Constructor function,
I’ll explain what the difference is shortly, but before I do, here
is what an Object definition looks like using literal notation.

    var myObject = {

    };

Literal is a preferred option for name spacing so that your JavaScript
code doesn’t interfere (or vice versa) with other scripts running on the
page and also if you are using this object as a single object and not requiring
more than one instance of the object, whereas Constructor function type
notation is preferred if you need to do some initial work before the object
is created or require multiple instances of the object where each instance
can be changed during the lifetime of the script. Let’s continue to build
on both our objects simultaneously so we can observe what the differences are.

Defining Methods and Properties

Constructor version:

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Literal version:

    var myObject = {
        iAm : 'an object',
        whatAmI : function(){
            alert('I am ' + this.iAm);
        }
    }

For each of the objects we have created a property ‘iAm’ which contains a
string value that is used in our objects method ‘whatAmI’ which alerts a message.

Properties are variables created inside an object and methods are functions created inside an object.

Now is probably as good a time as any to explain how to use properties and
methods (although you would already have done so if you are familiar with a library).

To use a property first you type what object it belongs to – so in this case it’s myObject –
and then to reference its internal properties, you put a full stop and then the name of the
property so it will eventually look like myObject.iAm (this will return ‘an object’).

For methods, it is the same except to execute the method, as with any function, you must
put parenthesis after it; otherwise you will just be returning a reference to the function
and not what the function actually returns. So it will look like myObject.whatAmI()
(this will alert ‘I am an object’).

Now for the differences:

The constructor object has its properties and methods defined with the
keyword ‘this’ in front of it, whereas the literal version does not.
In the constructor object the properties/methods have their ‘values’
defined after an equal sign ‘=’ whereas in the literal version, they are
defined after a colon ‘:’.
The constructor function can have (optional) semi-colons ‘;’ at the
end of each property/method declaration whereas in the literal version
if you have more than one property or method, they MUST be separated with
a comma ‘,’, and they CANNOT have semi-colons after them, otherwise JavaScript will return an error.

There is also a difference between the way these two types of object declarations are used.

To use a literally notated object, you simply use it by referencing its variable name,
so wherever it is required you call it by typing;

    myObject.whatAmI();

With constructor functions you need to instantiate (create a new instance of)
the object first; you do this by typing;

    var myNewObject = new myObject();
    myNewObject.whatAmI();

Using a Constructor Function.

Let’s use our previous constructor function and build upon it so it performs some basic
(but dynamic) operations when we instantiate it.

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Just like any JavaScript function, we can use arguments with our constructor function;

function myObject(what){
	this.iAm = what;
	this.whatAmI = function(language){
		alert('I am ' + this.iAm + ' of the ' + language + ' language');
	};
};

Now let’s instantiate our object and call its whatAmI method, filling in the required
fields as we do so.

    var myNewObject = new myObject('an object');
    myNewObject.whatAmI('JavaScript');

This will alert ‘I am an object of the JavaScript language.’

To Instantiate or not to Instantiate

I mentioned earlier about the differences between Object Constructors and Object Literals and that
when a change is made to an Object Literal it affects that object across the entire script, whereas when
a Constructor function is instantiated and then a change is made to that instance, it won’t affect any
other instances of that object. Let’s try an example;

First we will create an Object literal;

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a new property', as expected

Even if you create a new variable and point it towards the object, it will have the same effect.

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }

    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'

    //define new variable with object as value
    var sameObject = myObjectLiteral;

    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';

    //alert current myProperty
    alert(sameObject.myProperty); //this will still alert 'this is a new property'

Now let’s try a similar exercise with a Constructor function.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will alert 'this is a property'

So as expected, both return the correct value, but let’s change the myProperty for one of the instances.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }

    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();

    //change myProperty of the first instance
    constructorOne.myProperty = 'this is a new property';

    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();

    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a new property'

     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will still alert 'this is a property'

As you can see from this example, even though we changed the property of constructorOne
it didn’t affect myObjectConstructor and therefore didn’t affect constructorTwo. Even if
constructorTwo was instantiated before we changed the myProperty property of constructorOne,
it would still not affect the myProperty property of constructorTwo as it is a completely different
instance of the object within JavaScript’s memory.

So which one should you use? Well it depends on the situation, if you only need one object of its kind for
your script (as you will see in our example at the end of this article), then use an object literal, but if you need several instances of an object, where each instance
is independent of the other and can have different properties or methods depending on the way it’s constructed, then use a constructor function.

This and That

While explaining constructor functions, there were a lot of ‘this’ keywords being thrown around
and I figure what better time to talk about scope!

Now you might be asking ‘what is this scope you speak of’?’ Scope in JavaScript is function/object based, so that means if you’re outside
of a function, you can’t use a variable that is defined inside a function (unless you use a closure).

There is however a scope chain, which means that a function inside another function can access a
variable defined in its parent function. Let’s take a look at some example code.

As you can see in this example, var1 is defined in the global object
and is available to all functions and object, var2 is defined inside function1
and is available to function1 and function2, but if you try to reference it from the global object
it will give you the error ‘var2 is undefined’, var3 is only accessible to function2.

So what does ‘this’ reference? Well in a browser, ‘this’ references the window object, so technically
the window is our global object. If we’re inside an object, ‘this’ will refer to the object itself however
if you’re inside a function, this will still refer to the window object and likewise if you’re inside a method
that is within an object, ‘this’ will refer to the object.

Due to our scope chain, if we’re inside a sub-object (an object inside an object), ‘this’ will refer to
the sub-object and not the parent object.

As a side note, it’s also worth adding that when using functions like setInterval, setTimeout and eval,
when you execute a function or method via one of these, ‘this’ refers to the window object as these are methods of window, so
setInterval() and window.setInterval() are the same.

Ok now that we have that out of the way, let’s do a real world example and create a
form validation object!

Real world Usage: A Form Validation Object

First I must introduce you to the addEvent function which we will create and is a
combination of ECMAScript’s (Firefox, Safari, etc.. ) addEventListener() function and
Microsoft ActiveX Script’s attachEvent() function.

    function addEvent(to, type, fn){
        if(document.addEventListener){
            to.addEventListener(type, fn, false);
        } else if(document.attachEvent){
            to.attachEvent('on'+type, fn);
        } else {
            to['on'+type] = fn;
        }
    };

This creates a new function with three arguments, to being the DOM object we are attaching
the event to, type being the type of event and fn being the function run when
the event is triggered. It first checks whether addEventListener is supported, if so it will use that, if not it will check
for attachEvent and if all else fails you are probably using IE5 or something equally obsolete so
we will add the event directly onto its event property (note: the third option will overwrite any
existing function that may have been attached to the event property while the first two will add
it as an additional function to its event property).

Now let’s set up our document so it is similar to what you might see when you develop jQuery stuff.

In jQuery you would have;

    $(document).ready(function(){
        //all our code that runs after the page is ready goes here
    });

Using our addEvent function we have;

    addEvent(window, 'load', function(){
		//all our code that runs after the page is ready goes here
	});

Now for our Form object.

var Form = {

	validClass : 'valid',

	fname : {
		minLength : 1,
		maxLength : 15,
		fieldName : 'First Name'
	},

	lname : {
		minLength : 1,
		maxLength : 25,
		fieldName : 'Last Name'
	},

	validateLength : function(formEl, type){
		if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		} else {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		}
	},

	validateEmail : function(formEl){
		var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
		var emailTest = regEx.test(formEl.value);
		if (emailTest) {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		} else {
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		}
	},		

	getSubmit : function(formID){
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == 'submit'){
				return inputs[i];
			}
		}
		return false;
	}			

};

So this is quite basic but can easily be expanded upon.

To break this down first we create a new property which is just the string name of our 'valid' css class
that when applied to the form field, adds valid effects such as a green border. We also define our two sub-objects, fname and lname,
so we can define their own properties that can be used by methods elsewhere, these properties are minLength
which is the minimum amount of characters these fields can have, maxLength which is the max characters
the field can have and fieldName which doesn't actually get used, but could be grabbed for
things like identifying the field with a user friendly string in an error message (eg. 'First Name field is required.').

Next we create a validateLength method that accepts two arguments: formEl the DOM element to validate
and the type which refers to one of the sub-object to use (i.e. fname or lname).
This function checks whether the length of the field is between the minLength and maxLength range, if it's not
then we remove our valid class (if it exists) from the element and return false, otherwise if it is then we add the valid class and return true.

Then we have a validateEmail method which accepts a DOM element as an arguement, we then test this DOM elements value against an
email type regular expression; again if it passes we add our class and return true and vice versa.

Finally we have a getSubmit method. This method is given the id of the form and then loops through all input elements inside the specified form
to find which one has a type of submit (type="submit"). The reason for this method is to return the submit button so we can
disable it until the form is ready to submit.

Let's put this validator object to work on a real form. First we need our HTML.

    

    
        First Name

        Last Name

        Email

Now let's access these input objects using JavaScript and validate them when the form submits.

addEvent(window, 'load', function(){

	var ourForm = document.getElementById('ourForm');
	var submit_button = Form.getSubmit('ourForm');
	submit_button.disabled = 'disabled';

	function checkForm(){
		var inputs = ourForm.getElementsByTagName('input');
		if(Form.validateLength(inputs[0], Form.fname)){
			if(Form.validateLength(inputs[1], Form.lname)){
				if(Form.validateEmail(inputs[2])){ 					 

						submit_button.disabled = false;
						return true;

				}
			}
		}

		submit_button.disabled = 'disabled';
		return false;

	};

	checkForm();
	addEvent(ourForm, 'keyup', checkForm);
	addEvent(ourForm, 'submit', checkForm);

});

Let's break down this code.

We wrap our code in the addEvent function so when the window is loaded this script runs.
Firstly we grab our form using its ID and put it in a variable named ourForm, then we grab
our submit button (using our Form objects getSubmit method) and put it in a variable named submit_button,
and then set the submit buttons disabled attribute to 'disabled'.

Next we define a checkForm function. This stores all the inputs inside the form field as an array and we attach it to a
variable named.. you guessed it.. inputs!
Then it defines some nested if statements which test each of the fields inside the inputs array against our Form methods.
This is the reason we returned true or false in our methods, so if it returns true, we pass that if statement and continue onto the next,
but if it returns false, we exit the if statements.

Following our function definition, we execute the checkForm function when the page initially loads and also attach the function to a keyup event
and a submit event.

You might be asking, why attach to submit if we disabled the submit button. Well if you are focused on an input field and hit the enter key, it will
attempt to submit the form and we need to test for this, hence the reason our checkForm function returns true (submits the form) or false (doesn't submit form).

Conclusion

So we learned how to define the different object types within JavaScript and create properties and methods within them. We also learned a nifty addEvent function and got to use our object in a basic real world example.

This concludes the basics of JavaScript Object Orientation. Hopefully, this may start you on your way to building your own JavaScript library! If you liked this article and are interested in other JavaScript related topics, post them in the comments as I'd be happy to continue writing them. Thanks for reading.

7AMP – Creating a Development Environment

Dan Wellman — Tue, 10 Nov 2009 16:51:09 +0000

Running a local development web server is one of the best ways of learning AJAX; reading up on it is one thing, but being able to pass the raw data back and forth between a browser and a server is really the only way to truly understand what is happening at a fundamental level. To create the dynamic and interactive apps and sites that we’ve come to know and love, you need a development server.

On Windows systems we really have only a few decent options available; we can use Microsoft’s Internet Information Services (IIS), which is usually bundled with Ultimate or Business versions of Windows, or we can use Apache, the extremely popular open-source alternative. Remember when Microsoft enjoyed a 90% market share of the browser market? Apache is the MS of the web server world and at some points in its illustrious history has enjoyed almost total domination in its respective field.

IIS is generally quite easy to configure as it uses a graphical interface and is fairly intuitive, however IIS is geared towards development with the .net framework; .net is a proprietary language and generally you need something like Visual Studio to succeed in building web applications with it. Visual Studio does not come cheap (although free express versions are available and if you’re really hardcore you could use notepad to write the code) and many people prefer the open-source alternative PHP.

Similarly, MSSql is a perfectly adequate database solution made by Microsoft, but like its other offerings, is also a proprietary technology. Mysql is free, open-source, and very, very popular. It’s easy to use, robust and scalable and that’s why many developers prefer it. To create development environment we really want to spend as little as possible so really our choices here are clear – Apache as the platform, PHP as the server-side language, and Mysql as the storage technology. But getting all these technologies talking to each other is not quite as straight-forward as running a few installers.

Getting Started

First of all, we need to download the installers for Apache and Mysql and the files required to run PHP. The installers can be found at the following locations:

http://httpd.apache.org/download.cgi
http://dev.mysql.com/downloads/mysql/5.1.html#downloads

On the above pages choose the appropriate MSI packages for your platform (e.g. x64 or x32) and requirements (you may as well choose the full SSL version of Apache). With PHP however, we don’t want the installer, we want the zip file that contains all of the PHP files as there is more in this package than you get with the standard installer. It can be found at the following URL:

http://uk2.php.net/get/php-5.2.11-Win32.zip/from/a/mirror

There are two different zip files for Windows on the PHP site, make sure you do not get the one with NTS (non thread-safe) in the name as this will not work with Apache (which is thread-safe). Before running the installers or unpacking the zip file we just need to do a couple of minor system tasks; we should stop any instant messenger applications temporarily as they can interfere with the Apache installation, and we should disable Windows User Account Control (UAC) as it interferes with the Mysql configuration utility. To disable UAC visit the User Accounts application in the Control Panel:

In the applet set the slider to the bottom setting:

Click the OK button and confirm the very last UAC notification you should ever receive (w00t!), then restart your machine as directed.

Installing Apache

The first thing we need to install is the Apache web server which serves web pages to browsers following HTTP requests, and forms the foundation of our development environment. Run the installer, click the next button to get started and accept the license terms. Click next again and you should then see the following screen:

Complete the dialog as shown above and click next again; on the following screen choose the Typical option:

We can now just keep clicking next until the installation occurs. Once finished you should see the Apache icon in the notification area; it should have a green play symbol to indicate that it is running:

As a consequence of Apache running successfully, we should be able to open a browser, type http://localhost in the address bar and see the following message:

Configuring Apache

The web page we’re seeing is being served from Apache’s default content-serving directory which is probably located somewhere like this:

C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs

That’s fine, but it will be a bit of a chore having to dig that deep when we want to add or remove files. We can easily configure Apache to server content from a folder that is closer to hand; create a new directory on your C drive and call it apachesite.

In the Start menu group for Apache there is an option to Edit the Apache httpd.conf Configuration File, choose this and a text file will be opened. This is Apache’s main configuration file; unlike IIS, Apache does not have a GUI for configuration, instead we must edit this text file to make changes to the server. Scroll down to the Main Server Configuration section, which begins on line 144. On line 177 there should be the DocumentRoot directive, which will be pointing at the directory mentioned above. Change this line so that it points to the directory we created on the C drive:

DocumentRoot "C:/apachesite"

Just below this directive are several Directory directives; you’ll need to set the second one so that it points to the same path as the DocumentRoot:

Save the file and restart Apache which you can do by left-clicking the icon in the notification area and choosing Apache2.2 → Restart. To veryify that it works create a new HTML file called index.html in the new directory and request localhost from the browser again:

Installing PHP

Next we can install PHP so that Apache can run PHP files when necessary; create another new directory on the C drive and call it php, then open the PHP zip that we downloaded and drag the entire contents into the php folder. That’s all we need to do as far as ‘installation’ is concerned; all we need to do now is configure Apache to use it.

Configuring Apache to use PHP

Edit the httpd.conf file again; after all of the AddModule directives near start of the file add the following new code:

####### PHP Config ###########
LoadModule php5_module "C:/php/php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/php"
##############################

Save the file, but don’t worry about restarting Apache yet as we need to make a couple more changes and restart the computer anyway.

Configuring PHP

Like Apache, PHP relies on file-based configuration; in the C:\php folder rename the file called php.ini-recommended to php.ini. Now we need to add a Class Variable to Windows so that it knows where the PHP files reside. You’ll need to go back to the Control Panel and open the System applet. On the Advanced tab, near the bottom of the dialog is a button called Environment Variables – click this button and a new dialog will open:

The new dialog is divided into 2 sections; in the bottom section select the line that has Path as the Variable name (you’ll need to scroll down a bit) and then click the Edit button below the second section to open the editor:

Go to the end of the Variable value line and add the following text to the exsting value:

;C:\php\;

This will map to the php folder we created on the C drive and which we unpacked the PHP files from the zip file into. It is very important that you don’t remove any of the existing text in the value (or other programs on your machine, or your entire machine, may stop working) and that you enter the new text exactly as it appears above. Once this is done click OK on the three dialog boxes and restart your computer.

Once your computer has restarted, the Apache icon should still have the green play symbol on it and PHP should be configured successfully. To test it create a page in your text editor and add the following code to it:

Save the new file as phpinfo.php in the C:\apachesite folder and then request the page by typing the following address in the browser’s address bar:

http://localhost/phpinfo.php

Your browser should display the PHP information page:

Success! Now we just need to install Mysql and everything is ready.

Installing Mysql

Run the Mysql installer that we downloaded and keep clicking Next until you get to the configuration wizard:

Uncheck the Register box and then click the Finish button. Click next again and then on the following screen choose the default Detailed Configuration option:

On the next screen choose the Developer Machine option:

After clicking Next on the above screen choose the default option again on the following screen:

Go with the defaults that are selected on the next screen too:

And again, just go with the default option on the next page:

The next screen has both options checked, just keep them checked and move along:

Don’t worry about checking the Firewall Exception box, whether this is required will vary depending on your system and firewall so you can do this in a minute manually if need be. Provided you just want the standard Latin character set you can again just choose the default and click next:

On the next screen keep the defaults, but also check the box to add the executions path to the Windows Path variable (we did this manually when configuring PHP):

Enter a new password for the Root account and then click Next again:

On the final screen click the Execute button and the configuration changes will be applied:

Once the wizard has completed you should see confirmation:

At this point you should restart your computer again. You aren’t prompted to but Windows is fickle and the installation may not run correctly if you don’t do it. So ensure you do.

Testing Mysql

Ok, so you’re back after doing the reboot right? Good. Let’s just check Mysql is running correctly. In the start menu there should be a Mysql Command Line Client application, choose this and enter the password you set when running the Mysql configuration wizard. You should see the following screen:

Enter the following command at the prompt:

show databases;

The databases in use should be shown; a test database is installed by default:

Type the command

use test;

The test database will be selected:

Let’s create a basic table; type the following command:

create table users(name varchar(20), age int);

This will create a new table called users and add two columns to it, one to hold name data consisting of up to 20 variable characters (alphanumeric) and the second to hold age data as an integer. Hit enter and you should get the Query OK message to confirm the table was created:

To populate the table with some dummy data use the following command:

insert into users values('Dan', 31);

You should get the success message again after you hit enter:

As a final test we can check that the data has been inserted into the table corectly using the select command:

select * from users;

Which should show the table and the data we inserted:

Configuring PHP to talk to Mysql

All we need to do now is configure PHP to talk to Mysql; earlier on we renamed a file to php.ini in the C:\php folder, open this file now in a text editor. First of all, scroll down to the Paths and Directories section and find the extension_dir directive on line 536; change it so that it appears as follows:

extension_dir = "./ext"

Then scroll down to the Dynamic Extensions section which begins on line 628. In the Windows extensions section remove the semi-colon from in front of the following lines:

extension=php_mysql.dll
extension=php_mysqli.dll

That’s all we need to do; save the file and once again restart your machine. After restarting you can check for Mysql support in the phpinfo.php page again:

This is pretty much a guarantee of success, but really we should create one more PHP file so that we can test that we can read the data from our database; in a text editor create the following file:

Save this as phpmysql.php in the C:\apachesite and request it using your browser; you should see the following message:

If this doesn’t work, try putting your firewall into training mode and seeing if you get a notification asking whether to allow the application when you run the page.

Summary

We have now truly succeeded and have the perfect development environment for creating dynamic AJAX-powered pages. Sure, there may be various programs that we can run which will do some or all of the configuration for us, but which may or may not work on the latest version of Windows, but where is the fun in that?! Getting Apache, Mysql and PHP configured manually is an achievement and it gives us the opportunity to learn more about the platforms we’re using when creating modern web applications.

17 Hours of JavaScript from the Masters

Andrew Burgess — Mon, 09 Nov 2009 12:00:38 +0000

Douglas Crockford. John Resig. Peter-Paul Koch. Nicolas C. Zakas. If you recognize these names, you probably know what they all have in common: they’re amazingly talented JavaScript Developers. Today, you’ll hear from all of them, in this roundup of JavaScript presentations. Be ready to stretch your brain!

1: Javascript: The Good Parts

Length: 1 hour, 3 minutes
Speaker: Douglas Crockford
Slides (powerpoint)

Is JavaScript a hopeless mess, or a robust and flexible standard? In this presentation, Douglas Crockford, the world’s foremost authroity on JavaScript, will try and convince you that the language is worth your time. This is a great video, and everyone coming to JavaScript for the first time should watch it! You might also want to check out Crockford’s book by the same title. (Here’s another instance of the same talk.)

2: The JavaScript Programming Language

Length: 1 hour, 51 minutes
Speaker: Douglas Crockford
Slides (zip)

This is the first session in Crockford’s JavaScript Trilogy. In this talk, he’ll walk you through many of the features in JavaScript, as well as discuss the language itself and some JS programming styles. Here’s another great watch for newcomers!

3: An Inconvenient API: The Theory of the DOM

Length: 1 hour, 18 minutes
Speaker : Douglas Crockford
Slides (zip)

While this video isn’t focused on JavaScript, it’s the second part of Douglas Crockford’s JavaScript Trilogy. You’ll hear about the browser, why it is the way it is, and a few of the key concepts behind it. Of course, it’s all very relevant to JavaScript Developers.

4: Advanced JavaScript

Length: 1 hour, 7 minutes
Speaker: Douglas Crockford
Slides (zip)

This is the final installment to Crockford’s trilogy. Moving up to advanced concepts, this video will introduce you to topics such as inheritance, debugging, and efficiency.

5: Games, Performance, TestSwarm

Length: 1 hour, 11 minutes
Speaker: John Resig
Slides (slideshare)

John Resig, the creator of jQuery, knows what he’s talking about. In this presentation, which he gave at JSConf 2009, he talked about measuring performance in JavaScript (including an intro to the pros and cons of benchmarking), as well as JavaScript games and distributed testing.

6: Speed Up Your JavaScript

Length: 56 minutes
Speaker: Nicholas C. Zakas
Slides (slideshare)

Nicolas Zakas is the author of “Professional JavaScript for Developers” and co-author of “Professional Ajax.” This talk is all about performance, and you’ll hear the low down in the areas of scope, data access, loops, and the DOM.

7: Best Practices in JavaScript Library Design (or Building a JavaScript Library)

Length: 1 hour, 1 minute
Speaker: John Resig
Slides (slideshare)

Ever wanted to build your own JavaScript Library? John Resig talks about the princples of doing so in this Google Tech Talk. He covers the whole spectrum from designing a good API to maintaining the library, with implementing, debugging, and testing (just to name a few!) in the middle.

8: Drop-In JavaScript Performance (or Perfomance Improvements in Browsers)

Length: 1 hour, 2 minutes
Speaker: John Resig
Slides (slideshare)

In this video, John Resig goes through some of the latest and greatest in the world of JavaScript and DOM performance. Although this type of talk goes out of data somewhat quickly (the browser speed stats are pretty stale), there’s still a lot to look forward to here!

9: JavaScript Events

Length: 55 Minutes
Speaker: Peter-Paul Koch
Slides (pdf)

Peter-Paul Koch is a professional front-end engineer from the Netherlands. He’s done an enormous ammount of CSS and JavaScipt browser testing and has published the charts on his website, Quirksmode. This talk is a JavaScript Events Theory Class given at Yahoo!.

10: Scalable JavaScript Application Architecture

Length: 52 minutes
Speaker: Nicolas C. Zakas
Slides (slideshare)

This is a great theory presentation; Nicolas Zakas talks about JavaScript architecture. You’ll learn how to separate modules on a page, how to get them to interact with other modules that they don’t know exist, and more JS goodness.

11: ECMA Harmony and the Future of JavaScript

Length: 1 hour, 6 minutes
Speaker: Brendon Eich

You may not have heard of Brendon Eich before, but he’s the man who started it all: the creator of JavaScript. In this talk, he goes into a bit of language history, as well as talking about what’s coming in the ECMAScript 5 proposal.

12: The State and Future of JavaScript

Length: 55 minutes
Speaker: Douglas Crockford
Slides (powerpoint)

JavaScript hasn’t changed in almost a decade; so what’s going on? In this talk, Douglas Crockford explains some of JavaScript’s history, the battles fought in the past years, and what the standard could look like in the (relatively) near future. Yes, this is quite similar to Brendan’s talk (which was actually given the evening before), but this one has that Crockford theoretical slant to it.

Others

There are many videos and presentations out there that aren’t just about JavaScript, but certainly involve it. Check these out:

The JSON Saga

Length: 49 minutes
Speaker: Douglas Crockford
Slides

Server-Side JavaScript

Length: 23 minutes
Speakers: Isaac Schlueter and Matt Hackett

Advanced JavaScript with Libraries, and part 2

Length: 56 minutes
Speaker: John Resig

Ajax Security (mp3 link)

Length: 51 minutes
Speaker: Douglas Crockford
Slides (slideshare) and (powerpoint)

The DOM is a Mess

Length: 1 hour, 12 minutes
Speaker: John Resig
Slides (slideshare)

That’s It!

Well, that’s all I’ve got for you today, but I’ve probably missed your favourite; share it in the comments!

Learn how to AJAXify Comment Forms

Jeffrey Way — Fri, 06 Nov 2009 18:28:28 +0000

In this week’s video tutorial, I’ll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.

Screencast

*Note – please forgive me, but I had a slight cold when recording this. I apologize if my words are a bit mumbled.

Other Viewing Options

Conclusion

This screencast demonstrated just one way to animate your contact forms. Truthfully, it’s probably a bit too much for a regular site! But we’re here to have fun with it. If you decide to implement something like this into your own site, perhaps a more toned down version, please do leave a comment with a link to the page for our review!

Book Review: Zend Framework 1.8 Web Application Development

Fred Wu — Fri, 06 Nov 2009 10:01:02 +0000

If you are looking into buying a book to learn about Zend Framework, chances are you are already set on using Zend Framework to build your next project. Today, we will be looking at Zend Framework 1.8 Web Application Development by Keith Pope, published by Packt Publishing.

First of all, you’ll notice that this book is based on Zend Framework version 1.8, and as of writing this review, the latest stable release of Zend Framework is 1.9.4. This is not an issue, because 1.9, even though it brings new features such as PHP 5.3 compatibility and RESTful web services, does not change its structure or any part of the system that might have impact on your learning.

Flow of the Book

The flow of this book is heavily inspired by the famous Ruby on Rails book, Agile Web Development with Rails, where the author invites you to join the process of building a demo application, which in both cases is a shopping cart system. Judging by the feedback of the Rails book, most people feel quite comfortable learning a framework this way, some don’t. I guess if you are not a fan of following a defined learning structure, this book probably isn’t for you.

Short but Sweet

It is a relatively short book, with only around 350 pages. As a result, this book expects you to be comfortable with working with PHP 5 and have a solid grasp of Object-Oriented Programming. If you aren’t already familiar with PHP, or PHP 5’s OOP features, I highly recommend you to polish up the said skills.

MVC Still Rules

The first two chapters of the book focus on the MVC (Model-View-Controller) pattern. As the author mentions at the start of the book, Zend Framework is a loosely coupled framework; it does not enforce the MVC principle. However, given the popularity of MVC within the web development community, it is definitely worth while to learn how to write an application in MVC. Chapter one explains the basics of MVC whilst chapter two explains the request/route/dispatcher/response family. These two chapters will set up the foundation nicely for you and get you to understand the basic structure of a Zend Framework powered MVC application.

Adventure of the Store-Front App

Chapter three to nine contain the actual ‘adventure’ where you as the reader will be riding along with the author on the journey of creating a store-front/shopping-cart application. During the process, the author tells you not only what to do, but also why to do them. A good example is the ‘fat controller skinny model’ vs ’skinny controller vs fat model’ comparison, the book illustrates each and tells you why you should stick with the latter.

Chapter ten wraps up the store-front application with some more common tasks such as bootstrapping modules and sharing common application elements.

Code Optimization, Caching and Testing

Chapter eleven touches on a very practical topic: code optimization and caching. This is especially beneficial if you’re to run a large volume web application or if you have limited hardware resources. Pay special attention to the Zend_Cache section as the author tells you how to integrate it effectively in your application in order to achieve the best result.

The last chapter, chapter twelve, introduces you to Zend_Test, a testing framework that utilizes PHPUnit.

Verdict

To wrap the review up, I think this is an excellent book on Zend Framework provided you:

already have a good understanding of PHP;
already have a good understanding of OOP;
can follow the rather forceful learning flow;
know how to learn with initiative (e.g. do your own research!).

This book sits well in the market, as it aims primarily at web professionals who most likely are already experienced with PHP and perhaps some other PHP frameworks, and don’t have time to read books with 1000’s of pages.

You may purchase this book via Packt Publishing’s website.

Inside the Mind of ThemeForest’s Top Selling Author

Jeffrey Way — Thu, 05 Nov 2009 12:33:03 +0000

Kriesi is ThemeForest’s top selling author; he, last month, broke the record of most sales in a single month, across all of the Envato marketplaces! It’s even more shocking when we consider the fact that he’s only 27 years old!

In this interview, we’ll dive into his work process, and hopefully steal some tips and inspiration!

How long have you been in the web design business?

About five years ago, I started the Multimedia and Web Design Course at SAE Vienna in my home country, Austria. Back then, I did mostly Flash stuff (almost every piece of work was REALLY horrible to tell the truth) and I also had some interest in html coding (I loved table design back then ). With every course I took, I lost a little interest in Flash and got more curious about HTML and CSS. When they handed me my Bachelor Degree a few years later, I was pretty decent with HTML and CSS whereas my Flash skills were lousy at best.

I did some small projects for an event agency during that time and as soon as I finished College, they offered me a full time Job as a Front-end Developer, which I gladly accepted. I’m still working at this Agency

When/How did you first come across the Envato marketplaces – specifically ThemeForest?

I was a regular reader of the TUTS-PLUS Websites and therefore was aware that there is a marketplace called ActiveDen, where people sell all this neat Flash stuff; but since I was only a Front-end Developer with HTML, CSS, and some PHP Skills at that time, I didn’t really bother.

When Envato announced the opening of ThemeForest, I thought I could give it a try, and uploaded my first WordPress theme. The theme flopped really hard and only earned me 30 Bucks during the first month. Out of pure boredom, I created a second theme.

The second one did a little better, really just a little, but it was enough that I became curious if I could do better with each theme. =)

You’ve been particularly successful when it comes to WordPress theme sales. When developing a new item, do you try to plan for PSD, Site Template, and WordPress submissions? Or do you prefer to focus only on one category per design?

When I started creating templates, I almost always only planned for the WordPress version. I was thinking that the HTML Templates are far to cheap to earn a good amount of money, which is actually not true.

I did this until I invested countless hours into a Wordpress theme which underperformed to a point where I had worked for about 3$/hour for a whole week. Since then, I usually create a HTML template as well, to test if customers like what I have designed.

I still usually don‘t do a PSD version. Unlike other people, I only design to a certain point in Photoshop; many of the small improvements and details that customers see in the final HTML version are added while I code the HTML and CSS.

Though encouraged, we do not require that authors provide support for their items. Do you? Considering how well your items sell, how do you manage to provide quality support to so many different buyers? Any tricks/short-cuts?

It is indeed really hard sometimes to support all customers, especially those not familiar with WordPress, but I try to answer all questions. I think it’s crucial if you want customers to return and buy your themes again. The big problem I guess is providing “Quality Support”. I simply don‘t have the time to do more than 90 minutes of theme support each day, so if I see tons of requests on my Author Dashboard, answers usually (and unfortunately) get a little more generic :/

There are several “tricks” that worked out pretty good for me:

I am trying to encourage all customers to use the item dashboard and not the mail contact form. That way, other customers benefit from the answers as well and I only have to check one place for requests.
Updating the documentation file that comes with the download regularly helps a lot as well. I also save answers that I have given more than 2 or 3 times into a text document for copy/pasting on demand.
Overall I can only suggest to find your own method of streamlining support; the best way to cut down support time of course is to create themes and documentation that are so easy to use, that support requests drop to a minimum.

Do you or have you considered selling on the different Envato marketplaces as well?

Yes. I have tried to upload a flash file once last Christmas, since I had a pretty neat Santa animation. Those who have checked my portfolio might have already guessed it… it seems it wasn’t that neat. ;D

Many successful authors have noted that the biggest advantage to selling their designs through us is that it takes the client completely out of the design process, and instead allows the author full control. Would you agree? Any other advantages?

I agree, it is indeed great to be in full control of all decisions. I have worked with too many clients over the past years who thought just because they can use MS Paint they are great designers But you should never underestimate the positive impact of a second opinion when creating your themes. Therefore I almost always ask some of my colleagues at the agency to make suggestions on my designs before I release them.

I also love the fact that I don’t have any deadlines here and can try new stuff with every theme I release

Do you take advantage of our referral program, or promote your items in any additional ways to increase sales?

Only a little; I promote my themes on my blog and on Twitter when I release them. But since I make postings rarely on my blog, the impact on my sales ain’t that big. ;D I will try to post more often in the future when my sites redesign is finally done, but to tell the truth I am not a very persistent writer.

Without giving away any of your key techniques, if you could only make one choice, what would be the most important thing to keep in mind when selling on ThemeForest?

Study and improve. There are very few authors here that did a great job from the beginning. Almost everyone who is selling a lot nowadays has heavily improved over previous months. I am no exception, I can’t believe how much I have learned about web design and coding during the last year, and I think that’s the best weapon we have. Learn from your mistakes, listen to reviewers and customers and improve with every file you release.

A new member signs up with ThemeForest and is hoping to upload his or her first item. Any advice?

Use the help of the community to get your items uploaded and to improve yourself. Authors, customers, reviewers, almost everyone here is very helpful; so don‘t hesitate and ask Don‘t give up if an item gets rejected several times, it happened to almost all of us!

Final question. What’s next for you? Any special items planned before the end of the year?

I will try to invest more time into my themes, which basically means more themes, hopefully better themes, more updates and better support. I am already in the process of designing the next two items, but it’s been a very busy month at the agency so I haven’t been able to release anything new for a while now.

Last but not least, I wanted to take the chance and thank everyone who purchased one of my themes! I appreciate it more than you probably can imagine. Earning money here is great of course, but its equally amazing to be part of such a great community!