Just before the holidays, you took part in the iPhorm WordPress Plugin Giveaway, where two of you had a chance of winning a copy of the plugin. Now it is time to draw the winners!

And the two of you who got a late Christmas present are WPH and Mike Dedmon. They have been contacted and will receive their prizes shortly.

iPhorm winners

For those of you who did not win, I wish the best of luck next time!

WordPress is undoubtedly the most popular CMS in the world. It is used for so much more than the authors initially envisioned. With all of its wonderful features and incredible plugins, you can build anything – from a personal blog to a fully-fledged online shop.

With the holidays right around the corner, we decided to give away two copies of the iPhorm plugin which will help you create forms for your website with an easy to use drag-and-drop builder directly from WordPress.

The iPhorm Plugin

iPhorm is a WordPress plugin that makes building forms easy with elements that include email address, date and time, file uploads and many more. The form submissions are received as emails or directly in your dashboard. Designers have full control on how the forms looks, and for everybody else, two themes are provided. For a live demo, see here.

How to Win

For a chance to win a copy of the plugin, do the following:

• Leave a comment below this article;
• Tweet it.

The winners will be announced on January 5th 2012.

Ten days ago you took part in the IM Creator giveaway, where three of you had a chance to win a lifetime subscription for their new web site building service. Now it is time to draw the winners!

And they are kit, Richard Bland and Chen YH. They have been contacted and will receive their prizes soon.

The Winners

I am wishing the best of luck in the coming competitions for those of you who did not win!

Every website is different. From complex online stores that test your development skills, to presentation oriented pages that depend heavily on design, and everything in between. But there is a right tool for any job. You can use an open source CMS to lift the development burden off complex sites, but it would be an overkill for simpler ones.

This is where a tool like IM Creator comes into play.

IM Creator Lifetime License

IM Creator is a new simple and free HTML-based drag and drop website builder that allows you to create your website in a trouble-free, accessible and pleasant experience. With IM Creator, you can build a beautiful site, fast. Start from an existing design or make a new one - it’s up to you.

The Prize

The folks behind IM Creator have generously offered three lifetime licenses for their premium plan to Tutorialzine readers (valued at $95/year each). The offer applies to new clients of their service.

How to Win

For a chance to win a lifetime subscription, do the following:

• Leave a comment below this article;
• Tweet it.

The winners will be announced on December 15th 2011.

A week ago, you took part in the 4Templates giveaway. The curtains are closed, so are the comments, and now is time to draw the winners using the giveaway randomizer app from a while back.

The winners are: Momcilo, SubZero and Imran. They get to choose a premium theme or template from 4Templates for free.

4Templates Winners

For those that did not win, I am wishing best of luck in the giveaways that come!

We are all programmers and writing code is what we do best. But there is a common pain we all share – making our sites look as good as they function. Lets face it – design is hard. Luckily for us however, there is a quick solution to this – a beautifully designed theme that is ready for use.

With the help of our friends at 4Templates, three of you will have a chance to win a premium theme or template of their choice for free.

Win a premium theme from 4Templates

4Templates.com has hundreds of awesome website templates and WordPress themes with amazing graphics, standards compliant XHTML and CSS code, PSD files, and great tech support whenever you need it. And with everything under 30 bucks, you’ll always find something that works great no matter the project or budget.

How to win?

To participate, do the following:

• Leave a comment;
• Tweet about this post.

The winners will be announced on December 1st 2011 in a followup post.

As a website owner, you’ve probably heard that Google is using your page load times as a metric in their ranking algorithm. It is not given a lot of weight, but even for usability reasons, having a fast website means having happier visitors (and more of them). With tools like Google’s Page Speed and the YSlow firefox addon, you quickly run out of optimization tips to do on the page level. You need to dig deeper for real speed gains.

If you are a web developer, this post is for you. It goes over some of the experience I had with moving Tutorialzine to and configuring a VPS (virtual private server), the logical step after shared hosting.

You may wonder why it took nearly two years for me to decide to migrate this website. Well, it’s because

Shared hosting is not a bad idea

Coming to think of it, the Internet Revolution didn’t occur because of Google, Twitter, nor Facebook, as much as it did for offering a cheap way for people to publish content online. And it doesn’t get much cheaper than shared web hosting – thousands of websites on a single server, utilizing every bit of performance and bandwidth. And every couple of years, as servers become more and more powerful, it is possible to host ever larger websites on that same cheap platform.

Bad reputation

But then, why does shared hosting have such a bad reputation? It is actually a combination of several factors. Having learned to use Google before asking trivial questions, I didn’t need much support from my web host. On the rare occasions that I did (usually to report issues like downtime, unreachable database server or undelivered email), it usually took about 24 hours to receive a response. While this has more to do with the company itself than shared hosting, it is still part of the experience. But before judging too harsh, keep in mind that you can’t expect miracles for $5 per month.

There is another bad practice that nearly all shared hosting providers are guilty of – overselling. Going after maximum returns, companies cram more websites than what is possible for a single server to handle, in the hope that not everyone will be using what they are promised. The result – bad performance and frequent downtime. Of course, I have to admin that there has been good progress in this area in recent years, but it is because of the more powerful hardware, and not that companies have become nicer to their customers.

However, you can work around this problem – with WordPress plugins such as W3 Total Cache, I managed to optimize the page load times of this site, and with services like MaxCDN (which kindly sponsor Tutorialzine), I was able to increase the download speed of static files like images, stylesheets and JS files by moving them onto a fast delivery network. So as a result, I had livable performance even on a commodity web hosting provider.

The bad news is that this comes at a price. Although my website was as optimized as possible this still didn’t save it from

The downtime

We’ve all felt the frustration when a favorite website is unavailable; it is even worse if it’s yours. Downtime is a clear sign that your oversold web host is struggling with the load. It is understandable, once you take into account the millions of pageviews it has to serve every day. But there is another issue that becomes clear once you try to set up your own LAMP server: commodity web hosts aren’t tuned for speed, they are tuned for security. Isolating users from one-another on a shared system is an absolute must, which means that no system-wide caching or other performance optimizations are possible. They also have to stick to the slow Apache, as it is the most feature-rich webserver that a lot of software (including WordPress) depends on.

Tutorialzine's response time (lower is better). October 9th marks the transfer to VPS.

Here comes salvation

The obvious choice is to ditch shared hosting entirely and move to VPS. This is your individual slice of a real server, over which you have complete control. You can choose the OS (most likely a server-friendly Linux distribution) and the software on the machine, so you can install pretty much what you want. It is more expensive than the $5/m hosting plan, but you get guaranteed performance and the freedom that comes with it.

Sounds exciting? Yes, indeed! So you order one, spend a couple of hours following one of the friendly getting started guides, fire up your browser and discover that your website is as slow as it used to be. But how come?! You followed all the steps, embraced the open source philosophy, and still it isn’t much better.

The bad news

It is easy to have a LAMP stack up and running, but it is hard to have it running fast. As a minimum you will need to be comfortable at the terminal, doing basic Linux administration, configuring web servers, setting up virtual hosts, email and dns, while at the same time keeping you system secure. With a VPS you are on your own. If you don’t have experience working with linux, or the time and energy to read and experiment as things happen (a quite debilitating task, trust me), you are going to have a bad time.

Moving Tutorialzine required several days of testing different configurations, installing software and tweaking. I also had to read about all the topics above and become familiar with a lot of command-line utilities. But was it worth it? Of course it was. I now have complete control on my set up and can install exciting software that I couldn’t have hoped to find on a regular web host. The site is also much snappier than before, which will benefit everybody.

How to decide

Choosing where and how to host your website is not easy. Right now there are a lot of alternatives to shared hosting that do not require you to set up your own virtual server. There are cloud platforms like Heroku and PHP Fog, or grid hosting solutions that aim to narrow the gap between VPS and shared hosting. If you don’t want to spend time on a command line, I suggest that you give these a try.

For me going with VPS was a natural choice, as I had already spent some time reading about linux, so it was about time to put the things I have picked up over the last year into practice. But I will not be cancelling my hosting account any time soon. It is still a nice fit for simple or low volume client websites.

What is your experience?

Have you tried any of the cloud platforms? Do you keep a hosting account lying around? Share it in the comment section.

In this article we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library’s more obscure features.

1) Use the Latest Version of jQuery

With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag.

You can even include jQuery directly from Google’s servers, which provide free CDN hosting for a number of JavaScript libraries.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments.

2) Keep Selectors Simple

Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() and getElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.

$('li[data-selected="true"] a')	// Fancy, but slow
$('li.selected a')	// Better
$('#elem')	// Best

Selecting by id is the fastest. If you need to select by class name, prefix it with a tag – $('li.selected'). These optimizations mainly affect older browsers and mobile devices.

Accessing the DOM will always be the slowest part of every JavaScript application, so minimizing it is beneficial. One of the ways to do this, is to cache the results that jQuery gives you. The variable you choose will hold a jQuery object, which you can access later in your script.

var buttons = $('#navigation a.button');

// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

Another thing worth noting, is that jQuery gives you a large number of additional selectors for convenience, such as :visible, :hidden, :animated and more, which are not valid CSS3 selectors. The result is that if you use them the library cannot utilize querySelectorAll(). To remedy the situation, you can first select the elements you want to work with, and later filter them, like this:

$('a.button:animated');	// Does not use querySelectorAll()
$('a.button').filter(':animated');	// Uses it

The results of the above are the same, with the exception that the second example is faster.

3) jQuery Objects as Arrays

The result of running a selector is a jQuery object. However, the library makes it appear as if you are working with an array by defining index elements and a length.

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
	console.log(buttons[i]);	// A DOM element, not a jQuery object
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

If performance is what you are after, using a simple for (or a while) loop instead of $.each(), can make your code several times faster.

Checking the length is also the only way to determine whether your collection contains any elements.

if(buttons){	// This is always true
	// Do something
}

if(buttons.length){ // True only if buttons contains elements
	// Do something
}

4) The Selector Property

jQuery provides a property which contains the selector that was used to start the chain.

$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

Although the examples above target the same element, the selectors are quite different. The second one is actually invalid – you can’t use it as the basis of a new jQuery object. It only shows that the filter method was used to narrow down the collection.

5) Create an Empty jQuery Object

Creating a new jQuery object can bring significant overhead. Sometimes, you might need to create an empty object, and fill it in with the add() method later.

var container = $([]);
container.add(another_element);

This is also the basis for the quickEach() method that you can use as a faster alternative to the default each().

6) Select a Random Element

As I mentioned above, jQuery adds its own selection filters. As with everything else in the library, you can also create your own. To do this simply add a new function to the $.expr[':'] object. One awesome use case was presented by Waldek Mastykarz on his blog: creating a selector for retrieving a random element. You can see a slightly modified version of his code below:

(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');

7) Use CSS Hooks

The CSS hooks API was introduced to give developers the ability to get and set particular CSS values. Using it, you can hide browser specific implementations and expose a unified interface for accessing particular properties.

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

What is even better, is that people have already built a rich library of supported CSS hooks that you can use for free in your next project.

8) Use Custom Easing Functions

You have probably heard of the jQuery easing plugin by now – it allows you to add effects to your animations. The only shortcoming is that this is another JavaScript file your visitors have to load. Luckily enough, you can simply copy the effect you need from the plugin file, and add it to the jQuery.easing object:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
	if ((t/=d/2) < 1) return c/2*t*t + b;
	return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9) The $.proxy()

One of the drawbacks to using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup:

<div id="panel" style="display:none">
	<button>Close</button>
</div>

And you try to execute this code:

$('#panel').fadeIn(function(){
	// this points to #panel
	$('#panel button').click(function(){
		// this points to the button
		$(this).fadeOut();
	});
});

You will run into a problem – the button will disappear, not the panel. With $.proxy, you can write it like this:

$('#panel').fadeIn(function(){
	// Using $.proxy to bind this:

	$('#panel button').click($.proxy(function(){
		// this points to #panel
		$(this).fadeOut();
	},this));
});

Which will do what you expect. The $.proxy function takes two arguments – your original function, and a context. It returns a new function in which the value of this is always fixed to the context. You can read more about $.proxy in the docs.

10) Determine the Weight of Your Page

A simple fact: the more content your page has, the more time it takes your browser to render it. You can get a quick count of the number of DOM elements on your page by running this in your console:

console.log( $('*').length );

The smaller the number, the faster the website is rendered. You can optimize it by removing redundant markup and unnecessary wrapping elements.

11) Turn your Code into a jQuery Plugin

If you invest some time in writing a piece of jQuery code, consider turning it into a plugin. This promotes code reuse, limits dependencies and helps you organize your project’s code base. Most of the tutorials on Tutorialzine are organized as plugins, so that it is easy for people to simply drop them in their sites and use them.

Creating a jQuery plugin couldn’t be easier:

(function($){
	$.fn.yourPluginName = function(){
		// Your code goes here
		return this;
	};
})(jQuery);

Read a detailed tutorial on turning jQuery code into a plugin.

12) Set Global AJAX Defaults

When triggering AJAX requests in your application, you often need to display some kind of indication that a request is in progress. This can be done by displaying a loading animation, or using a dark overlay. Managing this indicator in every single $.get or $.post call can quickly become tedious.

The best solution is to set global AJAX defaults using one of jQuery’s methods.

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
	url			: '/ajax/',
	dataType	: 'json'
});

$.ajaxStart(function(){
	showIndicator();
	disableButtons();
});

$.ajaxComplete(function(){
	hideIndicator();
	enableButtons();
});

/*
	// Additional methods you can use:
	$.ajaxStop();
	$.ajaxError();
	$.ajaxSuccess();
	$.ajaxSend();
*/

Read the docs about jQuery’s AJAX functionality.

13) Use delay() for Animations

Chaining animation effects is a powerful tool in every jQuery developer’s toolbox. One of the more overlooked features is that you can introduce delays between animations.

// This is wrong:
$('#elem').animate({width:200},function(){
	setTimeout(function(){
		$('#elem').animate({marginTop:100});
	},2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

To appreciate how much time jQuery’s animation() save us, just imagine if you had to manage everything yourself: you would need to set timeouts, parse property values, keep track of the animation progress, cancel when appropriate and update numerous variables on every step.

Read the docs about jQuery animations.

14) Make Use of  HTML5 Data Attributes

HTML5 data attributes are a simple means to embed data in a webpage. It is useful for exchanging data between the server and the front end, something that used to require outputting <script> blocks or hidden markup.

With the recent updates to the jQuery data() method, HTML5 data attributes are pulled automatically and are available as entries, as you can see from the example below:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
	data-options='{"name":"John"}'>
</div>

To access the data attributes of this div, you would use code like the one below:

$("#d1").data("role");			// "page"
$("#d1").data("lastValue");		// 43
$("#d1").data("hidden");		// true;
$("#d1").data("options").name;	// "John";

Read more about data() in the jQuery docs.

15) Local Storage and jQuery

Local storage is a dead simple API for storing information on the client side. Simply add your data as a property of the global localStorage object:

localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

The bad news is that it is not supported in older browsers. This is where you can use one of the many jQuery plugins that provide different fallbacks if localStorage is not available, which makes client-side storage work almost everywhere.

Here is an example using the $.jStorage jQuery plugin:

// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
	// if not - load the data from the server
 	value = load_data_from_server();
 	// and save it
	$.jStorage.set("key",value);
}

// Use value

To Wrap it Up

The techniques presented here will give you a head start in effectively using the jQuery library. If you want something to be added to this list, or if you have any suggestions, use the comment section below.

As this is the first post of the year, I would like to thank all of Tutorialzine’s wonderful readers for the amazing support over the past twelve months. In 2011 you will continue to enjoy the highest quality tutorials and articles on the site.

Over 220 people took part in the FormBuilder giveaway, proving that forms are in fact one of the most tedious aspects of web development. But, lets not keep you waiting any longer. Using last year’s Giveaway Randomizer App, I selected five of you to receive a free copy of the script.

The Winners

The winners are:

• Marcelo Conceição;
• Daniel Henrique;
• Feed55;
• gabriel;
• brum;

They have been contacted and will receive their prizes shortly.

It has been a while since I last released a new script on ZineScripts, so I decided it was about time to implement one of the ideas that I’ve had for quite a while now.

Because Forms Suck

If you’ve spent any time as a web developer, you’ve surely come across one of the most tedious aspects of the job. Forms. No matter how many times you’ve created one, nor how much code you have amassed, it is still tedious as hell for a number of reasons:

• Validation You absolutely have to validate user emails, check if important fields are left empty, and in some cases even validate phone numbers, zip codes, dates and so much more. You also need a friendly way of displaying those errors;
• Captchas You don’t want spam bots to submit your form;
• Markup You still have to write all the markup for the forms;
• Design You’ve put so much time in designing your form, only for it to be ruined by the non consistent browser controls;
• AJAX After you’re done with the validation, you will have the pleasure of implementing it all over again on the client side.

This is where FormBuilder comes into play. It solves all of the above in an easy, programmer – friendly manner.

What is FormBuilder?

It is a PHP script that you can upload to your web hosting space. It can build web forms with unlimited length, complete with validation, captcha, error display and custom design by reading a configuration file. Here is what a typical contact form (see it here) looks like :

$config['fields']	= array(
	array(
		'label' 	=> 'Your name',
		'type'		=> 'textField',
		'required'	=> true,
		'errorText'	=> 'Please enter a valid name.',
		'fromName'	=> true
	),
	array(
		'label' 	=> 'Email',
		'type'		=> 'textField',
		'required'	=> true,
		'validation'=> 'email',
		'errorText'	=> 'Please enter a valid email.',
		'fromEmail'	=> true
	),
	array(
		'label'		=> 'Subject',
		'type'		=> 'select',
		'default'	=> 0,
		'items'		=> array('Please Choose','Business proposition','Partnership','General Inquiry'),
	),
	array(
		'label' 	=> 'Message',
		'type'		=> 'textArea',
		'required'	=> true,
		'errorText'	=> 'You are missing a message.'
	)
);

With this approach, developers and designers can finally have a breath of fresh air and automate the dirty work. You can learn more about what FormBuilder is capable of, including tutorials and examples at its official page.

A FormBuilder - Powered Contact Form

Win a Free Copy!

Five of you will have a chance to win a free copy of FormBuilder, complete with sources and PSDs by doing the following:

• Leave a comment below;
• Tweet about this post;

The winners will be announced on January 10th in a follow up post.