First of all, we’ll look at what exactly AngularJS is and how you would go about creating your very first Angular app.

This article is a quick introduction to what AngularJS is, what the main components of an Angular application are and how you’d go about building your first app.

What is AngularJS?

AngularJS is an open source javascript framework maintained by Google that is aimed at making building testable single page applications easy. Unlike with a lot of Javascript frameworks, Angular handles all of presentation, logic, data and processing code and gives specific guidelines on how each of these should be organised which should help keep your apps clean and well laid out.

Angular uses an MVC architecture to structure apps. Models are plain old javascript objects (POJO) meaning there’s no weird and wonderful methods to access or update your variables. Views are simple HTML (with some special Angular tags that we’ll look at later). Controllers are the javascript code used to glue everything together.

Your First AngularJS App

While there may be a few things that can seem tricky to get your head around at first, most of the core stuff in Angular is actually pretty simple. Lets go through and build a very simple app.

First of all we’ll need a very simple HTML file to use as our main file, below you can see mine.

First of all you’ll see I’ve included the Angular javascript file from a CDN. Secondly, you’ll see that I’ve added a funny looking tag to my body element.

This is your first look at an Angular directive, something you’ll be seeing a lot of in the future. For now, you just need to know that directives tell Angular that it has to do something with this section of the document. Angular comes with lots of built in directives and you can define your own. The ng-app directive just tells Angular that it should process this part of the document as an app.

I have seen some debate on whether you should put ng-app in the html or body tag. From my experience, it doesn’t matter too much performance wise but you will have to add it to the html tag if you want Angular to dynamically update the title of the document.

Next we want to create a file for our main application to go in. We’ll call this app.js. Include the app.js file after the Angular CDN file.

The first thing we’ll do in here is define our app.

In Angular, a module is a section of an application. You can have many modules in your application, this makes it more granular and easier to test or re-use code in the future. Here we have created a new module for our “HelloWorld” app and set it to a variable called app.

The empty square brackets are where we would load any dependencies our app might have. Angular will only load the dependencies our app requires, if multiple modules need the same dependencies, it will only load them once. As we are just building a simple app, we don’t need to load anything here. It is important to leave the empty square brackets here even if we don’t have any dependencies. Without them, this statement would try to get the “HelloWorld” module which doesn’t exist yet!

Next we want to create our controller! As this is just a small app, we’ll keep all of our javascript code in the one file. In a real world app, we’d want to organise everything into separate files and folders.

As you can see, we’ve created a new controller called “HelloController” using the app variable we defined before.

We’ve passed the $scope variable to our controller too, scopes in AngularJS can be one of the things that are tricky to get your head around and they definitely merit a whole article of their own which will come later in the series. For now a scope is just the container for the data that is shared between the controller and the view. If something is updated in the scope, the update will be reflected in the view and the controller. This is called data binding and is one of the core features in AngularJS. Lets see it working!

To demonstrate the data binding, lets create a new item in our scope. Remember we learned before that models are just POJO? Well, that means adding a new item is as simple as this.

Now, lets display the value of the hello item in our view. To display a variable (or any sort of expression) in Angular you use the following syntax {{ expression }}. Inside your expression you can use anything from variables to array items or even simple mathematical calculations.

Now you should see the “Hello, world!” text inside your index.html file. That’s cool, but Angular can do better. Lets try some two way data binding! We’ll add an input to our HTML page.

As you can see I’ve added some extra code to the input, hopefully you’ll recognise it as another Angular directive! The ng-model directive maps our form input field to an item in the $scope object. In this case, we’ve mapped it to the ‘hello’ item. This means when our page loads, angular populates the input with the value of the item and the two way data binding means that when we update the value in the input the changes automatically propagate to the scope object and then to anywhere else where that value appears in our app.

Hopefully you’ll now have a good idea of what AngularJS is and the basics of creating an Angular app. There’s still lots more to learn over the next few articles in this series and I’ll go into the things we have learned in a lot more detail.

The first book I’ll be reviewing is Javascript The Definitive guide by David Flanagan. First off, this book is huge! (it’s almost 1100 pages).

Normally when you get a book that is as big as this you kind of expect it to be over elaborate when making points and it can get old a bit fast but I didn’t think this was the case with this book, it is very concise.

As the name suggests, the book will teach you everything from the very basics of javascript to the more advanced stuff meaning it is good for both beginners and developers who have been working with javascript for a while. If you have experience with languages that use similar syntax such as PHP or C you might find that some of the earlier sections (I’m thinking variable types and operators here) aren’t new to you, I read through these bits anyway. I did find some of the earlier chapters very informative too (the stuff on variable scope was pretty interesting).

Later chapters in the book go over everything from object-oriented subjects to regular expressions and even a few chapters HTML 5 APIs (geolocation, web workers, client-side databases, web sockets and some more!).

Even after a read through, this book will be very useful for any little problems I might come across later on.

If you’re looking for a book to teach you jQuery, Mootools or another javascript library then this book isn’t for you. Similarly, if you want ready made solutions you can just copy then this isn’t the book for you either. What this book will do is to teach you how these javascript libraries work behind the scenes and give you a much clearer idea what you’re doing when you load that jQuery plugin.

I would actually advise people to read a book like this before trying to learn to use a javascript library, I think the knowledge you would gain from this book will make picking up any javascript library much easier and will especially help you if you want to create your own plugins etc.

Also, as I mentioned earlier on in the article. This book is huge so it’s maybe not the best book to take on holiday with you to read on a plane or something but it is (for me anyway) an essential book to have on your bookshelf.

If you’d like to buy Javascript The Definitive guide, head on over to Amazon (they also have a Kindle version).

A very simple way of keeping the content on your website fresh is to grab your latest tweets from Twitter and display them on your WordPress site. At first it might seem like it could be quite a lot of work to do this. Luckily WordPress has a fantastic community of plugin developers and an easy way of adding new content to certain areas of your site.

You might have guessed that I’m talking about widgets here. If you don’t know what widgets in WordPress are you could check out my other article on adding widgets to your WordPress site and also have a look at what the official WordPress site has to say on widgets.

Once your happy that your theme will support widgets and you know how to add them, we’ll move on to the best WordPress plugins to add tweets to your site and some other cool features.

Twitter Feed For WordPress

This one is a nice simple plugin to get any Twitter users tweets and display them on your blog. If you only want to display your tweets then this plugin is great, it’s really easy to customise too!

Tweetable

This plugin has quite a few features. It can automatically post to your Twitter account when you add a new blog post, you can also tweet straight from the WordPress admin panel. Of course there are a few different options ways of displaying tweets in your widget areas and in your posts!

Tweet Blender

Tweet blender will grab tweets based on lots of different criteria, you can filter tweets from one user, multiple users, tweets that contain a certain hash tag or keyword and some other things.

Elegant Twitter Widget

Another nice simple plugin that will output semantic HTML. This plugin is one of the few Twitter plugins for WordPress that will work on a PHP 4 server.

Twitter Widget Pro

This widget will grab the latest posts for a user you specify. It will also handle hashtags, @usernames and in tweet links properly. It also supports displaying profile images and there are a few different options on how to display dates.

If your theme isn’t widgetized, then don’t worry. Adding widget areas is really simple!

First of all, you will need to make sure your theme has got a functions.php file. Most themes will have this already but if it isn’t there just create it and WordPress will pick it up automatically. If you’re modifying a theme you’ve downloaded, it might be worth creating a child theme so that your changes aren’t overwritten during the next update.

In the functions.php file, simply add the following code.

if ( function_exists('register_sidebar') )
register_sidebar();

In the array we pass some options to the register_sidebar function. Here’s the options and what they do (quoted from the WordPress site):

• name – Sidebar name.
• id – Sidebar id – Must be all in lowercase, with no spaces.
• description – Text description of what/where the sidebar is. Shown on widget management screen. (Since 2.9)
• before_widget – HTML to place before every widget.
• after_widget – HTML to place after every widget.
• before_title – HTML to place before every title.
• after_title – HTML to place after every title.

The next step is to add the code to the places where our widget will appear in our theme. To do this we will use the dynamic_sidebar function in WordPress. The most simple example of this in action is:

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : endif;

If you have some default code to run if no widgets have been added to the sidebar, you would do it like this:

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
	//Default code to run here
endif;

If you gave your widget area a name in the functions.php file then you can specifically load the settings for that widget by passing its name to the dynamic_sidebar function.

Finally we can now go to the Appearance -> Widgets option in the WordPress menu to see our available widgets and widget areas. Adding / removing widgets is as simple as dragging and dropping them.

Child themes are useful in a few different situations. The first is theme frameworks. If you use the main theme framework as the parent theme, you can create a child theme to extend or change some of the functionality and style of the framework without ever modifying any of the frameworks original files. In theory you could have many child themes that all extend the parent theme.

The second situation where using child themes in WordPress can be useful is when you download a theme from the internet. By default WordPress will tell you when your themes need to be updated, if you do the update after making some modifications to your theme you will lose all of your changes, not good.

By using a child theme you can extend the parent theme and make your changes in there. Then if the parent theme is ever updated, you will still have your nicely intact child theme. There is still a possibility that something might break depending on what is changed in the update, but at least you haven’t lost all of your hard work!

Like most things in WordPress, setting up a child theme is pretty straight forward. First of all we would create a folder for our new theme inside the wp-content/themes folder of your WordPress installation. Inside that you will need a style.css file. Here’s an example of the header of a style.css file taken from the official WordPress sites page on child themes.

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentyeleven
Version:        0.1.0
*/

If you’ve ever created a theme before this won’t be new to you. The only option that is new is the ‘Template’ option. This is simply the name of the folder that contains the theme you want to extend.

Now that you know what a child theme is and how to set one up, you never have to worry about overwriting your work again! Check out what the WordPress Codex has to say on child themes for more information.

This is where Postmark comes in, they say that sending your transactional emails through their API can make them look better to the recieving server so they’re less likely to be marked as spam. What’s more, they even allow you to track how many emails you’ve sent and how many went into the intended recipients spam box. This promise plus the offer of 1000 free emails on registration and at only $1.5 for 1000 emails I decided to test Postmark out on a new application I was working on.

Setting up Postmark is as easy as whoever you manage your DNS through makes it! First off I signed up for a free Google apps account for my domain, this part it really straight forward. Next I signed up for Postmark account, again nice and easy. The next step was to set up the sender signatures, this is where it got tricky.

My main server is with 1&1 and so the DNS was pointed at the 1&1 name servers. I discovered that 1&1 will not let you add the required settings to the DNS, it’s a no-go. Luckily, I had registered my domains with NameCheap who do let you add TXT information to the DNS, it just takes a bit of digging to find out how so I thought I’d share it as it might help somebody.

First of all you need to make sure the DNS is with NameCheap. When you are looking at your domain in the ‘Modify Domain’ section there will be a button that says ‘Transfer DNS Back to Us’ (see below).

I saw a lot of people trying to do the next step before this one and get stuck. You won’t be able to see the button in the next step until you have done this!

Once I’d transferred the DNS back to NameCheap I needed to point the domain at my hosting so that my site still worked. You should see a new button that says ‘All Host Records’ (see below). This is the button you couldn’t see without transferring the DNS to NameCheap.

Pointing the domain at your hosting is simple. Copy the settings below but use your own IP (I’ve blurred mine out to stop people getting confused).

The top two make sure that http://yourdomain.com and http://www.yourdomain.com both point to your site. The third one points any subdomains at your site. As far as the server is concerned http://something.yourdomain.com is a different domain to http://yourdomain.com. This just points them all to the same place (this one is optional really). The fourth one just lets you use FTP on your site by going to ftp.yoursite.com.

Next we need to do the last bit, adding the SPF and DKIM values given to us in the Postmark application. As far as I know, each signature has its own values given to it by the app. You will have to log in to your account, select the correct server (you will only have one if you’re setting your first site up) and then click the ‘Sender Signatures’ link. Anyway, the codes will be something along the lines of:

v=spf1 a mx include:spf.mtasv.net ~all

k=rsa; p=MHwwDQYJKoZIhvcNAQEBBQADawAwaAJhALZllb8wNEhCMSNSdMXG3eL...

The top code is the SPF one and the bottom code is the DKIM one. You should still be in the ‘All host records’ section of namecheap. We’ll do the DKIM one first as that one took me longest to get right.

Under the * and ‘ftp’ subdomains add another entry. In the first box you want to type:

pm._domainkey

In the second box copy and paste the whole second line of code that Postmark gave to you (starting with k=rsa; p=MHww…). In the third box select ‘TXT Record’ and put 1800 in the TTL box.

That should do it for the DKIM. For the SPF. I put an @ symbol in the first box because it says in the legend at the bottom of the page that @ = none. Just leaving the first box blank might work for this one but I haven’t tested it, the @ worked for me.

Again in the second box paste the text from the first line of the code the app gave you. Choose ‘TXT Record’ and 1800 again and save it. That should do it, you might have to wait a little while before the app can see the changes you have made.

Here’s an image of how my finished entries look:

Also, if you have any problems head over to the Postmark support section where I found Chris to be very helpful.

Today I came across a great little site that lets you get the links to the latest versions of the most popular javascript libraries quickly and easily.

You find your library on the page and click the ‘Copy’ button. Then all the code you need to include the library in your page is copied to your clipboard.

I really like simple, easy to use sites like this that do one thing and do it well rather than trying to do too much.

The Google Font API allows you to use any font from their font directory or you can use the font loader to load other fonts which they co-developed with TypeKit.

Using the Google Font API

There’s no point in re-inventing the wheel so I’ll just link to a great article and video guide by Jeffrey Way over at Nettuts. You can have a look at his article here.

Other Info

The great thing about the Google Fonts API is the fact that you can still use CSS3 effects on your text if you want to. As for page performance, obviously the initial download may slow your page down slightly but they do try to cache everything to minimise and extra loading times, just make sure you don’t try and load too many fonts!

First we start off with our blank HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enabling and disabling a text input with a checkbox using jQuery</title>
</head>
<body>
</body>
</html>

Next include the jQuery js file from Google.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Next we add our text inputs and check boxes. I have also added some labels so that you can see which check box goes with which input. I have added 3 inputs so to show that you can use this technique with multiple boxes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox"/>
<input type="text" name="test3" />
</body>
</html>

Now I add a class to each check box so that I know which check boxes I want jQuery to watch for clicks on. You don’t have to do this but you might get some strange results if you didn’t and you had other check boxes on your page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control"/>
<input type="text" name="test3" />
</body>
</html>

I’ll also add a value to each check box, this will match the name of the input I want it to control.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />
</body>
</html>

Next, the jQuery. First of all we need the javascript tags, this normally goes at the end of the document so that the HTML & CSS are loaded before any javascript, giving the user the impression that the page is loading faster.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
//Our code will go in here
	});
</script>
</body>
</html>

This tutorial will only deal with inputs that are all enabled when the page first loads (I might write another one in the future that covers having some disabled when the page loads) so we need to make sure that all the checkboxes are checked when the page loads. I did this with javascript, this might not be the right way to do it if you want it to degrade gracefully. To check all of my checkboxes when the page loads I use the code.

$(document).ready(function(){
		$('.input_control').attr('checked', true);
	});

Next I write some jQuery code that tells jQuery to do something whenever someone clicks one of the checkboxes with the class of ‘input_control’.

$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
//Do this when someone clicks something with the class input_control
		});
	});

Now we do a simple if statement that says ‘if the check box was checked then set the disabled attribute to false, if the check box was unchecked then set the disabled attribute to true.

$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);	
			}
		});
	});

And that’s it! I’ve added the code of the completed page below and you can see a demo here. There are probably other ways of doing this, but this is the simplest way that I came up with. I did try doing this with toggle rather than using an if statement but although the disable/enable checkbox worked, the checkbox didn’t check/uncheck.

Completed Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Readonly Input Box</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<h1>Readonly Input Box</h1>

<label>My Test Label 1</label>
<input type="checkbox" class="input_control" value="test1"/>
<input type="text" name="test1" />

<br />

<label>My Test Label 2</label>
<input type="checkbox" class="input_control" value="test2"/>
<input type="text" name="test2" />

<br />

<label>My Test Label 3</label>
<input type="checkbox" class="input_control" value="test3"/>
<input type="text" name="test3" />

<script type="text/javascript">
	$(document).ready(function(){
		$('.input_control').attr('checked', true);
		$('.input_control').click(function(){
			if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false){
				$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
			}else{
				$('input[name='+ $(this).attr('value')+']').attr('disabled', false);	
			}
		});
	});
</script>
</body>
</html>

If you’re creating a website for a client you will normally find they don’t want to learn how to use everything in the WordPress admin panel. They probably hired you so that they didn’t have to learn loads of new stuff and I’m sure what they wanted was a simple admin panel that made updating their site easy.

Unfortunately, as brilliant as WordPress is, if you simply gave them a login and left them to it the chances are they’d look at the admin panel, get scared and never go there again, or start changing all of the settings until they broke something. Luckily, there are a ton of different ways we can modify the WordPress admin panel to make it quicker and easier for our clients to use.

Hiding stuff they don’t need

This one is obvious, if they can’t see a button to click, then they can’t click it! I normally hide things to do with automated site backups (which you should be doing on all of your sites!), settings (for the site and plugins) etc. Basically stuff they wouldn’t normally need to use.

For this I use WPLite. Once installed WPLite gives you a list of all the options on the left menu in WordPress with a checkbox next to it. Simply select the ones you want to hide from the menu and that’s it! There is no editing any of WPs files and if in the future they need to see an option that they currently can’t, it’s as simple as logging in and changing some options.

Just don’t forget not to hide the WPLite link from yourself! There is an option to show everything to admin users so it’s advisable to do that and set yourself up as admin and the other users as something else if possible.

A similar plugin to this that I haven’t tested is the Hide Admin Panels plugin which says it will let you hide certain admin options from specific users. This could come in very hand for some sites.

Integrating Analytics

Everybody wants to know how much traffic they’re getting on their new website but giving a user some login credentials and a link to update their website and then some more credentials and another link for their web statistics can be a little overwhelming for them. Luckily there is a nice plugin for WordPress that allows you to easily integrate Google Analytics into the WordPress dashboard. No more links, no more login details, it just works! Have a look at Google Analyticator.

Custom WordPress Option Panels

If you’ve made a custom theme for a client. It might be a good idea to add some custom options to that theme to make it a better fit for the users. I wrote a post a little while back on Custom WordPress Option Panels that rounded up some tutorials.