myphpetc

Please help beta test my new site areatags.com

2011-05-12T20:12:00.000+10:00

I am working on a new project which allows for collabarative editing of places, activities and events.

If you could take some time out to have a look at the site, test the login functionality and send me some feedback would be appreciated.

You can send feedback to info at the below domain:

http://areatags.com

Much appreciated!

Security questions

2011-02-04T10:06:00.000+11:00

How secure are security questions if several sites are using the same emergency security questions?

How many people could get your bank details, hotmail account or anything else with the combination of your email address and the answers to your emergency questions?

This site I just visited goes one step above scary and asks you to provide 5 separate questions with answers, anyone else seen these questions before?

My bank actually asks two of these five questions for me to approve transactions.

Anyone else starting to feel these secret questions are not so secret once every second site you visit on the net starts asking the same questions.

How not to win customers with your sales site

2010-10-19T18:45:00.001+11:00

I'm currently in the middle of purchasing something on the internet. Easy you might think, unless the thing that you need to buy is for your business or enterprise. Years ago sites like Amazon and eBay revolutionised the way we bought on the internet and made it easy to purchase goods in a way that worked for the consumer. Why did these sites become king? Not because of what they were selling, but how they were selling. It's the experience that matters. Why head to an online store that only shows part of their catalogue, requires you to sign up to use trivial parts of the site or has poor payment integration.

Unfortunately the same revolution hasn't happened for enterprise. B2B purchases are a nightmare obstacle course. Want to see our product overview video?... give me your name, number and email address and then we'll let you see. Want to know how much it costs?... give me your number and I'll call you. Want to contact a human?... our sales staff will be glad to have a chat and then call you every week for the next two months.

Most B2B business with an online presence are still stuck in the past, still trying to bug people so they can exist off the bottom 2%, the suckers. Their sites, no matter how elaborate are set up to solicit phone calls. Just like companies that cold call customers, it's just another form of spam and unfortunately, some people fall for it. After all they don't really have a choice.

So how can you improve your sales site? What should you change so that you are fishing for the 98% and not the bottom 2% that fall into the trap? Below are my suggestions for improving your B2B site to make it more customer friendly.

1. Don't hide your sales pitch.
Your home page might have drawn me in, but what are you providing beyond your flashy splash page? Do you have white papers, product overviews and videos detailing your products? Don't make me have to sign up for them. If your product is worth knowing make sure it can be known by the world. If you have some product videos host them on Youtube, who knows who might stumble across them. And don't hide your sales pitch behind jargon I can't understand. If I want a HR solution with payroll integration, tell me that's what you have and don't make me have to call to find out.

2. Be contactable in a way that is non-creepy.
Someone you don't know who calls you once a week to ask you what you are doing... that's a stalker. If I have a quick question about your product I don't want to call you because I know by looking at your website your first question is going to be: what is your name, what is your company, what is your position, what is your phone number? If I want to ask a quick question I prefer to send you an email, because I just want an answer to a single question. I don't want to be sold on your product just yet. Teach your call centre staff to answer emails if that's what it takes.

3. Give me a price
If I'm comparing 10 companies all with good looking web sites that are full of marketing fluff there's one good way to tell you apart: give me a price. If you can't tell me the price per license for enterprise for x users then I can only believe that you are hiding behind your product and it can't be that good if you can't tell me the price up front. Tiered pricing and support is fine, but be upfront. Don't leave me guessing that I pay a premium just because of my name and reputation.

The success of your sales site on the internet will depend on how well you can build a relationship with your audience. If you are full of jargon and fishing for my number you are not out there trying to reach out to your customers. eBay and Amazon are about trust and their relationship with their customers, make your sales site with the same idea in mind. Educate your customers, teach them why your product is better, provide them with tools to honestly compare and allow them to reach out to you.

Great jQuery text silhouette animation

2010-10-18T20:23:00.002+11:00

Going over some jQuery plugins today I came across this effect in a banner on this site that I thought was pretty cool. Btw, the plugin on that page is quite nice and will be even better after a few more releases (worth checking out as an aside).

The main idea is to have some black text on a white background (colors can change to taste) and then an image is animated over the top of the text which is the same color as the background (white) but with a transparent background. So that when the image passes over the text it creates a cool silhouette effect.

You can download the code here. You can see a working example in the site mentioned above.

As per the site linked above I also use 3 images to enhance the effect.

This could definitely be implemented a lot better (using multiple images to create a continuous stream as it currently stops after a period of time and some way to make the text selectable), but I'll leave that to you.

This effect is not something that would work on every site (think blinking text), but for some arty or monochromatic schemes I can see this fitting right in.

The code is quite straight forward:

<div id="text_cont">
   Some text
   <div id=\'cross_img\'></div>
   <div id=\'cross_img2\'></div>
   <div id=\'cross_img3\'></div>
</div>

Start with my text and three images.

Here is part of the css, you see the div with a white background and black text. Each of my images is almost identical, I offset them slightly using different top and left positions. Also in the jQuery I provide different speeds for the animation to try and create an overlapping effect.

#text_cont {
 background: white;
 color:black;
 font-size:120px;
 font-weight:bold;
 position:relative;
 overflow:hidden;
}

#cross_img {
 position:absolute;
 top:0px;
 left:0px;
 width:1800px;
 display:block;
 height:500px;
 background: url("../images/demo1.gif");
}

Here is the javascript:

$(document).ready(function(){
 $("#cross_img").animate({"left": -1800}, 150000);
 $("#cross_img2").animate({"left": -1800}, 120000);
 $("#cross_img3").animate({"left": -1800}, 90000);
});

You can see the different speeds as mentioned previously.

Hope you like it. If you use it anywhere I'd like to check it out.

jQuery scrolling page with autogenerated index

2010-10-15T16:52:00.001+11:00

In my previous article I wrote about scrollTop and how to get working for your sites. If you haven't had a chance to read it yet and you are not too familiar with scrollTop I suggest you check it out as I will use the techniques from that article in building the example in this tutorial.

What I am going to build today is made up of two parts: an index section and a document section. The index section will list titles in the document and will be built on the fly using jQuery. Clicking on one of the titles in the index will smoothly scroll down to the selected section.

Here is a live demo and you can download the code from here.

How to create the index section:
To begin with we want to loop over all of the titles in our text. In my example I am going to have all of my titles as h2 elements. I am going to use jQuery to loop over all of our h2 elements using the each function.

$("#our_book h2").each(function(index, elem) {
 });

Next we need to add an element to the index for each of our titles. I have chosen to have each of these as links.

$("#our_book h2").each(function(index, elem) {
  $("#our_index").append("" + $(elem).html() + "");
 });

So each link has now been added to the "#our_index" div, now we need to bind a click event to each of these links. Let's have a look at the code:

$("#our_index a").click(function() {
  var idx = $("#our_index a").index(this);
  $("#our_book").stop(true).animate({scrollTop: ($("#our_book").scrollTop() + $("#our_book h2:eq(" + idx + ")").position().top)}, {duration: 1500, queue: false});
  return false;
 });

To start off we need to get the index of link being clicked. As each link has been added in order that it appears in the "#our_book" section, the index of the link will match the index of the h2 element in the "#our_book" section.

Next we call the stop function on "#our_book", this is done so that when someone clicks multiple links rapidly it doesn't fill up the queue and all animations (on this element) are stopped immediately.

Following we chain on the animate method and we want to scroll to the position of our matching h2 element. To calculate its position we first add the current scroll position of "#our_book" by calling scrollTop. Next we add on the value of the position of the h2 element we are targeting relative to the parent, which is the "#our_book" element. This will give the position of where we need to scroll our "#our_book" element. If this is confusing I suggest checking out my previous post on scrollTop which explains this is further detail.

The final piece of our code is binding mousedown event to the "#our_book" element. We want to stop all animations if someone tries to scroll or clicks on our "#our_book" element. This is so that we are not fighting with the animation if you are trying to scroll up while it is scrolling down or if someone spots something of interest and they want the animation to stop they can just click.

This is a small practical example of using scrollTop which could be used in a variety of ways: intructions, TOS, FAQ etc.

Smooth scrolling with jQuery scrollTop

2010-10-14T19:32:00.004+11:00

I want to have a look at jQuery's scrollTop method; how to work with it and some of it's uses. To begin with if you are not familiar will the scrollTop function have a read over the API entry.

The scrollTop function can be called on any element, but is only relevant for items that have excess content. What I mean by excess content is that the target element has child elements that would cause the item to scroll, if it had overflow:scroll; set. This is important to note: it is not necessary for an item to have scrollbars in order to use scrollTop. So look at the two following examples, one is a <div> that has scrollbars and excess content, the other is a <div> without scrollbars and excess content; both can be controlled using the scrollTop function.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

So for either of these boxes I could call something like $(".excess_content").scrollTop(200); and the content would be scrolled regardless of whether there was a scrollbar or not.

The next thing I want to look at is how to scroll to a particular peice of content. Say we had a paragraph that had the most important text and some users may want to skip immediately to that paragraph. Similar to anchor tags in a page, we can reference an item inside our scrolling div in a similar way and scroll our element to that position.

To begin with I have labelled on of my <p> tags with the id "red_para". This paragraph has some text marked in red, when the button is clicked the element is scrolled immediately to that section.

So to scroll to a particular location we call the scrollTop function with the location of the target as the value. It looks like this:

onclick='$("#long-para3").scrollTop($("#red_para").position().top);'

So to get the location of our #red_para paragraph we call the position function and use the top value. Position according to the API gets the current coordinates of the element relative to the parent element.

The next thing I want to look at doing is scroll to our section smoothly, currently scrollTop just jumps immediately to the position indicated. With the use of jQuery's animate method we can do this quite easily.

Here's what it looks like:

$("long-para4").animate({scrollTop: $("#red_para").position().top},1500);

If you click the above button or play around with the scrolling and then try and click again you will notice something, the scrolling jumps around. So in my last example I will show you how to correct this issue and ensure that regardless of the scrolling position it will always scroll to the top of the red paragraph.

The problem arises because the position function gives us the position of the paragraph relative to where the parent is currently scrolled. This means that once the scrollbar has been moved it does not return the same value as it does initially. So we need to add the value of the scrollbar onto the position value. Hopefully the code can explain this clearly:

$("#long-para5").animate({scrollTop: ($("#long-para5").scrollTop() + $("#red_para_ani2").position().top)},1500);

This should give you a good introduction to the scrollTop function and how to get it up and running smoothly.

Be ready to go with pre-setup site folder

2010-10-13T19:02:00.000+11:00

During my limited spare time I like to have a look around and answer questions on Stack Overflow. Stack Overflow is not just a great place for getting answers to your questions, but is also great for finding out hints and tips about your language of choice just by browsing in a particular category. One of the main ways I browse the site is by searching for jQuery questions that are unanswered. This a great opportunity to challenge yourself and stretch your skills by finding an answer to something that hasn't been answered before; good brain exercise.

What I wanted to share with you today is how I set myself up ready to answer these questions without too much hassle. Quite often someone provides you with very few lines of code and if you had to set up a working environment each time it would be a huge hassle. If I have a spare hour I can usually get through about three or four questions so I need to be able to get up and going on an answer quickly otherwise it's just not worth the effort.

This is fairly straight forward kind of stuff, but I find it also helps me at work to have on hand when I have small bits of code that I want to try out or when I am stuck working on a particular solution I like to break it down into manageable chunks and work on one section at a time. So, the idea is to have a folder with a bunch files ready to go with all the bits and pieces I need.

To start with I keep a folder where I have all my previous attempts at other questions and solutions, you never know when you want to go back to one of these. Inside this folder is where I keep my base folder with all of these files. This folder is labeled 'aaa base'; it always sits on top and is easy to find that way. When I begin I just duplicate that folder and it's contents and then rename it to something that I will remember later e.g. if I'm working on an issue with draggables I call it draggable_something.

Inside this folder are three sub folders: js, css and images. There is also a base html file index.html. The images folder is empty by default.

Inside the js folder is script.js, a javascript file that contains an empty $(document).ready so that I can quickly add any jQuery / javascript as needed.

Inside the css folder is styles.css an empty css file. I prefer not to use a reset stylesheet for these exercises as it's useful to have some padding and margins for readability.

The index.html file looks as follows:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1.4.2");
 google.load("jqueryui", "1.8.4");
</script>
<link rel="stylesheet" href="./css/styles.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/start/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="./js/script.js"></script>
</head>
<body>
</body>
</html>

This begins with some of the basics; a DOCTYPE, html, head and body tags and also a reference to the character set.

Next I load in the latest version of jQuery and jQuery UI using Google's CDN. As well as the start theme stylesheet for jQuery UI.

The only thing left are the references to out styles.css css file and script.js javascript file.

This combination allows me to easily load in code snippets from Stack Overflow and test out bits and pieces of my own quite quickly without having to go through the hassle of setting this up, I simply just duplicate and rename the folder each time.

I have attached my test folder in a zip for you to use on your own trials, hope it comes in handy.

Lessons from LEGO for better software development

2010-03-27T14:12:00.007+11:00

I love LEGO. I've always loved LEGO. In every design school out there they should be holding it up as the glorious example of marketing that it is. From the smallest offering with a single racecar to the largest of boxed sets, each LEGO set is displayed in accurate detail and glowing colours on the front of the box along with several smaller pictures on the back to demonstrate what fun you can have with your newly purchased bricks. Their packaging has lasted the ages and has changed little in the many years since LEGO became popular.

Aside from their attraction and the many other joys of owning LEGO, there are lessons to be learned and applied to the world of software development from this humble little brick.

My son gets his first LEGO set on his 3rd birthday this week.

If you want to build a world, start by building a car

Of all the kids I ever met growing up, even the ones who had parents with bottomless pockets, they still only bought one set at a time. The lesson here is that you buy one set, you play with it, you integrate it, you take it apart and change it around and not until it becomes part of everything else do you move on to the next set. With LEGO even the smallest set can deliver and look great with the rest of your LEGO world.

So here's what we too often try to do with software: We ask the customer what they want, they want the full package, we market them the full package and we try and deliver them the full package. Month's later we're still trying to build the full package.

The lesson we can learn from LEGO: First build that racecar, then deliver, play around with it, and when it fits in, then move onto the next step; maybe a gas station, maybe a garage for the LEGO person to park their car in. Build your system in small functioning parts, the benefits are obvious: Spot issues earlier; It makes more sense when integrating new functionality to see how the existing functionality works and view the context; Incremental improvements and incremental changes, when you finish the entire project if you do it incrementally you will deliver something closer to what the user actually wants and will have months of feedback.

Everything is made from something smaller that already exists

This should go without saying, but we still as developers continue to reinvent the brick every time we build something. After decades of software development you would think it would be easier, so were are our magic bricks and why is it that you are still hand coding forms for web sites?

Many frameworks allow you the felixibility of utilising built in APIs for things such as form generation etc. A fully fledged framework may not be the answer every time for the work you are doing. But have you thought about working as a team to put together your own toolbox of functionality that you seem to be writing over and over again. We have a function for building html select elements that can be populated from any array or database table and I've used it again and again and it sits in a utilities class that anyone can use.

The lesson we can learn from LEGO: Don't build it, customise it. Make use of your existing blocks and you can build something rapidly again and again with the same reusable parts.

If you've played with one LEGO set you've played with them all

The benefits of a system that is familiar and requires little training when newly built are endless and scalable. Think of this when you are designing and writing requirements. If you can make your system seem familiar to your users they will adapt and adopt faster. You should be also working towards having the best in class practices for building your 'familiar' systems; think of the many companies that have a software brand and how familiarity works in their favour.

The lesson we can learn from LEGO: The instruction booklet you get from LEGO doesn't tell you how to play with your LEGO set, but a very straight forward step by step guide on how to get you up and going. The idea is to show you what you can achieve not how you should use it. You should build your software with familiar steps and controls.

There are many more lessons we can learn and apply from LEGO, including scalability, reuse, minimalism and familiarity. These lessons are worthy of consideration for your next project.

Build on-the-fly filtering with jQuery

2010-02-10T17:41:00.001+11:00

This tutorial looks at using jQuery to build on-the-fly filtering for search results to quickly filter out by matching search terms with content and hiding those elements that don't match.

Recently when jQuery upgraded their API they added a nice on-the-fly filtering feature for filtering by search terms within the API. To get an idea of what I'm talking about you can see the effect here by typing 'bl' into the search jQuery box and you will notice only the entries containing 'bl' are displayed.

You can download the code for this tutorial here
You can view a working demo here

This filtering works on both the title and on the content. It is quite easy to build and a nice trick that has multiple applications. Let's have a look at what our HTML will look like for each of our page elements:

<div class='option'>
 <div class='title'>Soccer</div>
 <div class='description'>A sport played with two teams of eleven players, a round ball and two sets of goals.</div>
 <a href='#'>more...</a>
</div>

So each element is an 'option' and there is a 'title' and a 'description' section. Fairly straight forward. Now let's look at the javascript behind the functionality:

$("document").ready(function() {
 $("#search_field").keyup(function() {
  var terms = $(this).val().toLowerCase();
  if (!terms) {
   $(".option").show();
  } else {
   $(".option").hide().filter(function() {
    return ($(this).children(".title").text().toLowerCase().indexOf(terms) > -1) || ($(this).children(".description").text().toLowerCase().indexOf(terms) > -1);
   }).show();
  }
 });
});

We start by adding the keyup event listener to our #search_field input. Whenever the keyup event occurs we grab the contents of the input and convert to lowercase and store in the terms variable.

If terms is empty we display all of our pages elements. If it is not empty then we begin by hiding all of the '.option' elements and then we apply a filter function. This function filters out all of the elements that do not contain the terms in the '.title' child element or the '.decription' child element. Those elements that haven't been filtered out are then displayed using show().

This kind of filtering is really useful when you have a limited number of elements on the page and makes good sense if you want to avoid round trips to the database.

How to get the best start with an IT career

2010-02-09T17:44:00.000+11:00

When you are in College / University it is hard to have the far-sightedness to know how your career is going to progress and where you will be in the future. If you are currently studying to work in the IT industry it is a good idea to start thinking about what you are going to do once you graduate and what direction you would like to take. In this post I would like to give you some suggestions on how to make those first few steps into the IT industry. If you have some good suggestions yourself please add them in the comments.

What to do before you graduate
Whatever you do, don't wait until you graduate before you start thinking about what you will do with your qualification. Many of you will be doing a generic IT degree that will prepare you for a range of careers within the industry. Now is the time to find out exactly what area you want to work in. If you don't decide early you may find that you are in a job you don't enjoy and in that case your second job will need to be a move sideways to something you do enjoy.

Once you have found the area you are interested in start learning and I don't just mean your text books. If your area of choice is design start reading about colour, start looking through books about interior decorating or design theory. If it is e-business, research some of the success stories in the industry or some of the more abstract titles on marketing. Read, read, read! Knowledge is king in the IT industry, the more you learn the more valuable you are; not just in terms of financial gain, but in the quality of the work you will deliver.

Apply your knowledge. Find an open source project on the internet and get to work. Even if you can only work on small sections you will improve. Reach out and connect to others in your industry via social networking and find out how you can help by asking. While I was attending university I asked anyone I knew if they could offer some work experience and after a couple of weeks I was able to help collate and prepare single HTML pages for a company intranet, eventually progessing on to whole sections of their site. You need to reach out, the goal is to get something on your resume other than working at Wendys or generic call centre experience.

Do as much studying, casual work, volunteer work, work experience and open source project work as you can before you graduate and you will be in a prime position come the time you graduate.

What to do once you graduate
Once you graduate you should have a clear idea of which part of the IT industry you want to work in and hopefully you have put the hard yards in to read and learn some of the skills you will require.

If you start having a look at employment advertisements you may be dissapointed, most of the jobs you would love to be doing usually require a lot more experience than you have. I would suggest that this is a fact for most people starting out, if you are damn lucky you will be able to find a fantastic first job that not only pays well, but is exactly what you were looking for. The key here is to focus on where you want to be rather than what is available to you now. It is best to think of your first job as a stepping stone to your ideal job. My first job as a programmer was paying much less than I was getting paid at the supermarket I worked at during my studies. The trick is to find a job that will actually get you to where you want to be next.

The other point I would like to make about your first job; if it is only a stepping stone and there is no progression, do not stay there longer than a year. Work as hard as you possibly can in the first year to add many different skills to your resume and then move to where you want to be. If you are still being paid like a paperboy after a year, you are either not learning enough or your work is not appreciated. Remember, you want to get to the next step and start doing some real work.

Once you land that all important second job you should be on your way to a positive and rewarding career in the IT industry.

Just to sumarise:
- Decide early what you want to do, don't wait till you graduate
- Learn as much as you can while you are still studying
- Look for work opportunities either in open source projects or work experience through social connections
- Be content with your first job as long as it steers you in the right direction
- Work hard in your first year so you can be in the job you want in a years time
- Knowledge is king, learn and keep learning

How can business reap the benefits of organic social networking?

2010-02-03T22:45:00.002+11:00

The long term benefits of social networking for enterprise are well known and have already been discussed in detail. There's team building, leveraging your knowledge base, early adoption and cross team discussion to name a few. For a long time there has been two sides of the fence to social networking in business; there are those who do and those that don't. The don't group is made up of several smaller groups; the we don't know how to do it, the we don't want to ruin our reputation or the we don't believe in the benefits groups.

For a long time I believed that the second group were just poorly educated and if they could see the light (or just give it a try) they would not only be convinced of the benefits, but they could reap the rewards of an open blogging policy. But for larger size outfits this approach is just too unwieldly, the size of the dinosaur is too great and the idea of testing the waters is hard with such a large foot. For smaller sized operations it's not viable to crowd source and hard to find passionate bloggers (even in the IT industry) to write about work in their own free time.

So how can small and large business still leverage the benefits of social networking outside of company blogging while still reaping the benefits for the business? The solution lies in employee involvement outside of the business. Already employees are connecting via Twitter, Linked In, myspace and other social networking outside of business hours. These organically formed social networking groups and activities can be taken advantage of (with permission) and business wide networking can be seen as an extension of these organic groups.

Each of these sites has readily available APIs that can be used to link groups and information from each of your employees. The information that each employee is adding online has already been made publicly available. Does your employee already blog? Ask if you can provide their RSS feed to the rest of the company. Are there employees that tweet regularly? Why not have a company wide aggregator of this activity. As with all online activity the good quality links can be pushed higher and the chatter will be ignored. This large amount of activity that is already happening in the public arena could be shared within, and for the better material without.

Be brave, be passionate about your employees and reach out. Not by sticking your foot in it, but by gently wading in.

Is Apple being too Apple?

2010-02-02T17:42:00.002+11:00

Many, many years ago I used to work for an Apple Centre and many more years before that I was a child with a love of computers. The first computer my family ever bought was not just any computer, but an Apple IIgs. You only have to scan over aforementioned wikipedia page to see that it was a lovely piece of Apple engineering. It had it all; audio, graphics (it was all about the graphics in the 80s) a memory expansion slot and the ability to add an internal HD. I'm not bragging here, I'm trying to conjure the picture of a computer lovingly crafted and ahead of its time (think iPod).

http://www.flickr.com/photos/quagmirez31/ / CC BY-ND 2.0

Apple have sat in this niche for years; before the iPod became top of the Christmas list for young boys and girls, Apple was synonymous with the architecture, graphic arts, production and design industries. They were still producing top notch computers that were ahead of their time in terms of quality, speed and power. So what was the problem, why have Apple been hiding in a cave for so many years and how is possible that they might screw it up again?

Firstly, during the 90s, Apple had too many different models on the market this also included their choice to allow cloned Macs in a revenue raising exercise. Sure customers like choice, but the customer was left with too much choice and were unsure which branch of the Macintosh family was appropriate and regardless of what you bought it was usually superseded by another model within a couple of months.

Secondly, Apple have always kept a strangle hold on everything they do. Way back when, while I was stuck with the few games that my family could afford at $50 a pop, my friends were swapping disk-loads of games and applications almost daily. We were left with something that was good quality wise, but was useless unless you continued to pay.

I don't want to go into too much detail in the above two points, because it should be obvious that the trend above is still part of the Apple's mentality today. Make something that is so good everyone will want it and then control the market that surrounds it. Think: iTunes, think app store, think Apple stores. They all look good and they are all flashy, but at the end of the day they are all Apple run and controlled.

Sure Apple's iTunes and apps are now at a price point that stops people from hesitating before they spend a couple of bucks, but think about what you are getting... who decides what apps you can use on your iPod, who censors what you can use on your iPhone, who decides what you can and can't install on your newly bought iPad? Are you sacrificing good design and quality for a lack of innovation and control? Apple pushes DRM because it's what they have always done. Sure the iTunes/app store is a good concept, but think to yourself, would you be more empowered if you could shop at another store? Would this provide you as a consumer with greater choice and pricing?

Although the smartphone/handheld industry has been around for a long while it is still finding its place outside of just being a telephone; maybe the equivelant of the personal computer in the mid-80s. How this pans out is anyones guess, but is it possible that someone will cut out some of the quality and sheen and deliver something that is flexible and open and you can install whatever you please, even if it means that your phone crashes occassionally?

As Apple looks to create new revenue for the future it will be interesting to see if they can maintain their current model. Will they produce another ten "i" products that are essentially different sizes of the same thing with a few slight differences? It's not too hard to imagine because they did it in the 90's. Or can they dig deep and produce products that are not only innovative by design, but also innovative in functionality and value to consumers.

Before you start coding... stop, take time and compare

2010-02-01T22:44:00.002+11:00

Many years ago my high school teacher told me about his days as an analyst; whenever he used to go breakfast cereal shopping it used to drive his wife crazy. He would compare everything from box size to amounts of sugar and price per 100 grams. Whatever he did he had to make a comparison. So think for a second what you are working on at this moment... how does it compare? Have you taken the time to compare your solution against anything else?

In the IT industry we focus too much on benchmarking a standard set of things before making deliverable; how fast is your site, how many bugs are there left to remove and what will be the cost benefit to the business or to our customer. But, one step that is imperative before you make the first jump is to stop and compare. There are many ways that you can go about doing this, the easiest of them you could call the cereal box test. Take a look at what is on the shelf, what are those ready made solutions that are in the same market as the product you are delivering. Look at all of the features and compare to your own feature set: Is there something missing? Is there something extra that isn't of use now but is imperative to have later on?

This is more than a custom tailored vs. boxed solution argument, it's about shopping around, even if the your customer isn't shopping anywhere else themsleves. If you've sold your customer on a particular solution ensure that you are giving them the best. Once the deal has been made you can even ask your client for their own ideas. Was there something in other proposals that you didn't offer. Have they heard of some new technology that they thought would be beneficial to the project. Once you are on the other side of the fence it's much easier to ask these kinds of questions and in the end it will pay in the results.

In every day life we hate to let an opportunity go by, even worse we hate to lose time and money. Don't sell yourself or your clients short, look around, take time and compare. By always looking forward you may miss something good that is sitting just beside you.

Easily add rotating banners to your wordpress site with jQuery

2010-01-31T21:43:00.001+11:00

Adding a rotating banner to wordpress with jQuery is too easy. The jQuery cycle plugin is one of the oldest and the best and comes with a multitude of effects transitions and inculdes next previous and pager options if needed. Even more the plugin includes pause on hover, click to progress and even custom transitions, unleashing the power and versatlity of jQuery.

I want to show how to do a simple fade out to the next photo style banner which is popular on many sites and works well in the main banner position. It's a good idea to check out some of the examples on the cycle plugin site and find whichever transition suits your needs. Some of the more animated transitions would likely suit your sidebar if you wanted to draw more attention away from the page. I feel something more subtle works better at the top op the page.

A transitioning image on a recent site that I worked on:

Now there are many sites that teach you to include jQuery using the wp_enqueue_script method. The best way for you to include jQuery on any site is to use Google's CDN.

To do this add the following to your header.php file:

<script type=\"text/javascript\" src=\"http://www.google.com/jsapi\"></script>
<script type=\"text/javascript\">
 google.load(\"jquery\", \"1.4\");
</script>

Next populate a div on your page with images where you would like your banner to appear:

<div id=\"header\">
 <img src=\"<?php bloginfo(\'template_url\');?>/images/01.jpg\" alt=\"Image 01\" />
 <img src=\"<?php bloginfo(\'template_url\');?>/images/02.jpg\" alt=\"Image 02\" />
 <img src=\"<?php bloginfo(\'template_url\');?>/images/03.jpg\" alt=\"Image 03\" />
</div>

Make sure your images have been cropped and adjusted to a reasonable size, with you banner it works well if all the images have the same dimensions.

Next download and include the cycle plugin in the head after the jQuery include, paying attention to wherever you installed the plugin:

<script language=\"javascript\" type=\"text/javascript\" src=\"<?php bloginfo(\'template_directory\'); ?>/js/jquery.cycle.all.min.js\"></script>

The next bit is calling the plugin which is very straight forward:

jQuery(document).ready(function(){ 
 jQuery(\"#header\").cycle({
  delay:-4000,
  fx: \'fade\',
  pause: 1,
  timeout:1000,
  speed: 4000
 });
});

I have set a negative delay so that it doesn't wait to transition for the very first image. I have set the 'fade' effect with a transition speed of 4 seconds and a timeout speed of 1 second which is the length of time between transisitons. The last option is pause which simply pauses the effect while the mouse is over the images.

It's that easy and with the combined number of transitions you can really add some magic to your wordpress site.

Enjoy!

Your next employee, 10 years experience or an avid learner?

2010-01-30T22:04:00.002+11:00

How do you keep up to date in the IT world?

Several months ago we did a round of interviews for a new position at our company. We weren't interested in how many years experience a person had, what we wanted was someone who was as passionate about IT as the rest of our team. Our team spends much of our spare time discussing the latest trends in the industry and how we can apply new technologies and methodologies to our work. One question that really stumped most people was 'How do you keep up to date in the IT world?'.

From the number of people that we interviewed who could not provide a coherent answer to this question, I would assume that very few people regularly spend their time reading blogs, reading online news or even text books for that matter. I would have even accepted an "I check Digg every now and then to see what are the top results". Most of the time we had to prompt people by asking them more directly, such as do you regularly read any blogs or visit any tech sites. But this also yielded few precise answers.

By the sheer fact that you are reading this post I am likely preaching to the converted. But I would like to say that staying up to date with IT is important and to do that you need to read, read, read. IT is an industry that is constantly trying to justify itself, we have to make time and make money for an organisation in order to exist and hopefully to grow. IT is in constant change which is one of the great things about our industry, but to stay relevant and to keep in touch we must constantly learn.

So how can we encourage reading outside of the few text books that we bothered to take out of the plastic during your college / university years? Maybe this question, "'How do you keep up to date in the IT world?' should become a standard interview question for all new positions, I know it will be top of the list for me. Should we be taught about it by our teachers when we are at university?

One of the best things we can do for new starters and for our own teams is to share what you read. Do you encourage learning amongst your staff or your team, do you take time to discuss what you have read in the past week? Maybe you could set up a page on your companies intranet or blog to share your latest thoughts and ideas or send out an email with your top ten links for the week. Take time in your weekly team meetings to find out what each person has learnt while doing their job this week. Foster a team of learners and growers and encourage this trend for anyone who joins your team.

How you keep up to date is not just about what the individual knows, it is about how the individual will continue to contribute to your teams future. In the end there is not much difference between a basic "programmer" with 2 or 10 years experience. If you can find someone who wants to learn and share and challenge; they will be much more beneficial to your team. But you won't find this person unless you have a team that actively seeks and encourages this kind of person.

What type of person would you like to add to your team? Someone who has 5+ years experience in this or that language or someone who has their finger on the pulse and is actually interested in what they are doing by constantly learning and constantly improving themselves and their team.

Be sure to also check out this post for some good ideas on keeping you and your team learning.

If you have some good ideas on how you or your team keeps up to date with IT leave me a message in the comments below.

Hints and tips for learning jQuery

2010-01-29T19:04:00.000+11:00

In this article I want to give some hints and tips for those of you who are just beginning with jQuery. jQuery can seem quite overwhelming at first, there appears to be a lot to cover and the syntax appears quite technical at first. The great thing is, once you have overcome the initial learning period, jQuery syntax is quite readable and will provide you with a fantastic tool with limitless potential.

I suggest before you begin, you also go over these tutorials. They are jQuery's own tutorials and are a good foundation. This tutorial will help you build on these basics and help you go further with jQuery.

To begin with jQuery is now available via Google's content delivery network (CDN). This means that you don't need to download anything to begin using jQuery. Here's how you can start a basic page which will load in jQuery via the CDN.

<!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>
<title>jQuery test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1.4");
</script>
</head>
<body>
</body>
</html>

This basic page when loaded will contact Google's CDN from wherever you are in the world and include it in your page. So now we have jQuery up and ready.

The next thing that I suggest you do is to get a copy of Firebug for Firefox. There are many similar tools for other browsers, I will leave you to investigate those. Having Firebug (or equivelant) allows us to enter javascript directly and view the results of running those commands. You can see from the screen shot below, when I type in the $ command I get the result function.

Firebug will be your best friend will learning jQuery because it can show the results of your function calls, prevent you from refreshing the browser and using alert messages for feedback and will even show you which elements match your jQuery selectors. Selectors tell jQuery which part of your page a certain function should target.

So now you should have your page loading jQuery, which we have confirmed by using Firebug and typing in the $ command so let's dive in and start using jQuery.

The first thing you will want to do to your page is to include a regular javascript file. You need to do this in the head after the section that loads in jQuery. Something like this:

<script type="text/javascript" src="my_script.js"></script>

Open up the my_script.js file (or whatever you called it) and we will start with our jQuery code. If you have read any tutorials or had a play with jQuery you will know we need to start by adding in jQuery's document ready function so let's do that:

$("document").ready(function() {
 // Other code goes here!
});

So if we place an alert() inside this function it will alert us when the page is loaded and ready to be accessed with jQuery.

Besides the above, there is nothing else needed to start using jQuery and working with its awesome functionality. So let's start taking a look at the way the language itself works.

jQuery has two main types of functions: Those that require a selector and those that don't...

A jQuery function call with a selector

$("#details").hide();

A jQuery function call without a selector

$.ajax("url", {}, function(data) {
 });

So those with a selecter will be in the form $(<<selector>>).<<function>> and those without $.<<function>>. A selector allows us to target a specific element or elements on the page. So we have functions that allow us to target elements and functions that don't need to be targeted, such as AJAX calls.

We can suggest that the non-selector functions are actually targeted at the entire page, then all functions can be viewed as <<selector>>.<<function>>.

The function part of the call can be found in the API, a list of all the functions that jQuery currently provides, jQuery has a great API browser which you will eventually become familiar with, for now you can have a quick look to see some of the functionality available. You will notice that most of these is written as either .<<function name>> or jQuery.<<function name>>, jQuery.<<function name>> are the non-selector functions we mentioned.

jQuery selector syntax takes a bit of learning, but here are some basic tips that will get you on your way...

To start with jQuery selectors are based on CSS selectors, if you are already familiar with CSS selectors you have a very good head start. So if you want to target all the h3 elements we can just do like this $("h3"). If you want to target all elements of a specific class you can do it this way $(".someclass"). All of the available selectors are available in the selectors section of the jQuery API.

You can chain selectors just like CSS e.g. $(".someclass, h3")

You can specify all descendants like CSS e.g. $("#specials *")

jQuery even has special selectors to match child elements and for filtering out certain items from your selection. For now try and familiarise yourself with the basic selectors of class, attribute i.e. input[name='first_name'] and class selectors and build up from there. Just keep in mind, it is not unfamiliar, if you can select it in CSS you can select it using jQuery.

The best way to get to know selectors is by trying out each of the selectors and the best place to do this is jQuery's site. Go to any page on the jQuery site, open up Firebug and start typing out some selectors. You can start out by trying in $("*") and drill down from there or view the page source and see which elements you would like to try and target.

The next important thing to know about jQuery is chaining. Most jQuery functions will chain, meaning you don't need to type the selector out multiple times, you can just apply function after function as such;

<<selector>>.<<function 1>>.<<function 2>>.<<function 3>>... and so on.

For example:

$("#my_div").css("background", "red").addClass("dimensions").toggle();

This will apply each of the three functions to our first selector, as each function is called the result is passed along the chain until it reaches the end.

So now we know how to write a basic jQuery function call and how to chain. Let's get familiar with the API. Looking down the left hand side you will see the main categories of the API; AJAX, Attributes etc. let's look at the main categories in detail.

AJAX: Used for making AJAX calls
Attributes: Used for retrieve/updating/adding/removing attributes
CSS: Used for CSS manipulation (add class, remove class, set CSS rule)
Data: Used for storing extra data on a DOM element
Dimensions: Getting the size of elements on a page (width, height etc.)
Effects: Fade in, Fade out, animating and other effects
Events: Used for handling events such as onclick, mouseover etc.
Forms: Functions for manipulating forms
Manipulation: Clone items, DOM inserting etc.
Selectors: A run down on the jQuery selectors and associated functions
Traversing: Functions for traversing the DOM

There are several categories I have left out that are also worthwhile but are hard to generalise or only have a few functions. But you can get a good idea from above jQuery's main functionality. Again, have a play with some of the functions using jQuery's site and Firebug. Also if you click through on the function name in the API it will lead you to a lot of details information about each function including a demo of how it works.

Just in summary, here is a rundown of what we have covered:

Use Google's CDN to load jQuery
Get Firebug so you can see what is going on and to run javascript/jQuery commands without reloading
Use the document ready function to use jQuery when your page loads (you can also use jQuery inside a regular function call)
A basic function is made up of $(<<selector>>).<<function>>
Selectors are based on and in most cases identical to CSS selectors
jQuery's functions can be chained
Get familiar with selectors then get familiar with functions in API
Use Firebug and jQuery's site to test out selectors/functions rather than trying to build things to test yourself

Hopefully this gives you a leg up when starting out with jQuery. Let me know how you are going by leaving a comment below.

Professional trust - delivering more than what the customer sees

2010-01-24T07:38:00.001+11:00

What makes a person a professional? I would suggest two things; knowledge and experience. You can have knowledge without experience as in a college graduate and it's possible to have years of experience without learning anything new. As consumers we put a fair bit of faith in professionals, we trust what an auto mechanic says about our car and we must rely on the opinion of a doctor.

This trust is extended even further, we expect that a professional can do something better than we can do ourselves. If you go to get a haircut you never get specifically what you asked for, the reason for this is the person cutting our hair can see what we can't see ourselves and adjusts accordingly. So this is another special trait of a professional, they have an insight into their subject. When they look at a piece of work they can see when something has been done well and when something has been done poorly. We as a consumer need to extend our trust to relying on a quality piece of work, even when we can't see it ourselves.

This reminds me of an old episode of the Simpsons. Homer goes to visit his long lost brother who owns and operates a previously successful car design business. Homer's brother asks him to help design their next model car for the "average American". What ensues is an argument between the designers and Homer as to exactly how the car should look. The designers want to inerperate Homer's ideas into something that appears sleek and marketable while Homer just wants something that looks like what he has in his head. In the end, his brother agrees to let Homer build the car in his head and it ends up costing him his business.

So we see for success, although the customer may always be right, it takes a good quality professional to implement the ideas and not in exactly the same way that the customer expected.

So how do we apply this to the work we do in the IT industry. If you are on the other side of the fence and you are providing a client with work, you have the client's trust that you are going to deliver a good quality piece of work. In the IT industry we have an even greater level of smokescreen as we hide behind the code we write. The average guy on the street can see a good quality car or can pick out a bad haircut, but your customer has no chance of picking out your poorly written code.

There is an unfortunate acceptance of well presented, poorly implemented, badly structured, overly cluttered and user-unfriendly code within our industry. I've heard the excuse many times that bugs in design and usability of web applications attributed to "it just works that way and it can't be fixed" which is accepted as the norm. People just expect less of the IT industry because it's apparantly over technical and supposedly unwieldly.

The general acceptance of poorly written web sites results in people charging excesive amounts in return for something that is below par. Recently an IT colleague of mine recieved some code via another colleague (non-IT) that had been written by an agency. The initial delivery was table based HTML which would have fit well in 1996. After rejecting the code as unusable (it was to be included as part of a larger site), the rework came back and was the same code, but each TD, TR and TABLE element were replace with DIVs. Not only is there one person who still thinks it's acceptable to code this way, but there's a whole damn agency of monkeys who thinks it's fine to deliver this kind of work to a paying customer.

Delivering poor quality work to a customer who is both accepting and uneducated is not only unprofessional, but it shows a lack of respect for the customer. This trust is given in the hopes that a customer will get not only what they ask for, but also for what they can't see. Are you selling or delivering to your customers a beautiful car with a second-hand engine?

I wish I knew the source of this quote, I read it somewhere a while back. It said, when you work on a web application for your company, always write it to the highest possible standard. It doesn't matter that nobody will ever look at that piece of code and smile in recognition. What does matter is that you have delivered the best piece of work that you can. It's only by working to the best of your ability that you can continue to go further.

So don't try to sell your customers or your company short. If you are a professional you will be delivering professional quality work. If you are just using your customers to make a quick buck you won't be doing it for long... I've had too many bad haircuts to know when not to go back.

Building great site navigation with jQuery and key listeners

2010-01-22T17:49:00.001+11:00

Good navigation is essential to any site. Gone are the days when everything should appear above the fold, users now want and expect a rich internet experience from the sites you build. A vital part of this is experience is a good layout and good navigation, especially if there are a large number of elements on the page.

On top of this it is also worthwhile to consider users with accessability issues and who are constantly stuck with using the tab key to navigate around often poorly designed web pages.

With jQuery it is possible and easy to improve keyboard site navigation by binding listeners to certain keys. In this post I will go over some of the basics to give you some ideas of how you can challenge your own designs and think about including a more clever way to navigate around the elements on your page.

In my sample application I will have nine boxes in a 3 x 3 square. Allowing us to navigate left, right, up and down and performing some function when the enter is pressed. My navigation will be indicated by switching the class on the currently selected item.

A working example of this code can be found here

You can download the actual code from here

Let's begin by looking at a simple function to getting your site to listen to key presses:

$("document").ready(function() {
 
 $(document).keydown(function(e) {
  switch (e.keyCode) {
  }
 }
});

Here we have our jQuery document ready function and a document level listener for the keydown event. The last piece is the switch statement which will determine what action is performed whenever a key is pressed. As we are looking at navigating around our site, let's bind some listeners to the arrow keys. Here are the codes that we will need:

37 Left arrow
38 Up arrow
39 Right arrow
40 Down arrow

I'm also going to add the enter key (code 13) to perform an action on the currently selected item.

You can find a full list of keycodes here

Let's look at some pseudocode to see how our navigation will work:

$("document").ready(function() {
 
 $(document).keydown(function(e) {
  switch (e.keyCode) {
   case 13:
    // Perform some action when enter is placed
    return;
   case 37:
    // Navigate left
    break;
   case 38:
    // Navigate up
    break;
   case 39:
    // Navigate right
    break; 
   case 40:
    // Navigate down
    break;   
  }
 }
});

Now let's look at the full code to see how it all holds together:

<body>
 <div id="container">
  <div class='item'>0</div>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
  <div class='item'>6</div>
  <div class='item'>7</div>
  <div class='item'>8</div>
  <div style='clear:both;'></div>
 </div>
 <div style='clear:both;'></div>
 <div id="debug"></div>
</body>

We can see our nine boxes all floated left in a containing div and all having the item class. Here is the javascript:

$("document").ready(function() {
 $(".item:first").addClass("selected");
 
 $(document).keydown(function(e) {
  // Current index
  var cur_idx = $(".item").index($(".selected"));
  var max_idx = $(".item").length - 1;
  var row_length = 3;
  
  switch (e.keyCode) {
   case 13:
    $(".item").eq(cur_idx).effect("explode", {}, 500, function() {$(this).remove();});
    $(".item:first").addClass("selected");
    return;
   case 37:
    // Get index of current item, if 1 then nothing, else move one back
    if (cur_idx == 0) {
     var next_idx = 0;
    } else {
     var next_idx = cur_idx - 1;
    }
    break;
   case 38:
    if ((cur_idx - row_length) <= 0) {
     var next_idx = 0;
    } else {
     var next_idx = (cur_idx - row_length);
    }
    break;
   case 39:
    // Get index of current item, if max then nothing, else move one forward
    if (cur_idx == max_idx) {
     var next_idx = cur_idx;
    } else {
     var next_idx = cur_idx + 1;
    }
    break; 
   case 40:
    if ((cur_idx + row_length) >= max_idx) {
     var next_idx = max_idx;
    } else {
     var next_idx = (cur_idx + row_length);
    }
    break;   
  }
  
  if (typeof next_idx != 'undefined') {
   $(".item.selected").removeClass("selected");
   $(".item").eq(next_idx).addClass("selected");
  }
 }); 
 
});

We begin by setting the selected class on the first of our boxes.

Next we set the keydown listener to the document. When the function is called we begin by getting the index of the currently selected item and also the number of items. The row_length variable is used to navigate up and down to the item above or below.

Next comes our keyCode swtich statement. For each of the arrow keys codes 37, 38, 39 and 40 we calculate whether we are going to go outside the item at index 0 or the last iem and we navigate accordingly by removing the class for the currently selected item and applying it to the item at the next_idx index by using the jquery eq() function to target the item at index next_idx.

If the enter key is pressed (code 13) we call the jQuery UI effect "explode" and then remove the item and reset the selected class back to the first item.

This is just the tip of the iceburg of what can be achieved using jQuery and key listeners but it should give you a glimpse of the possibilities for building a responsive, interactive web page.

If you have some good examples of sites with outstanding keyboard navigation share it with us with a comment below.

Pervasive advertising and digital sharecroppers

2010-01-21T21:39:00.001+11:00

Does pervasive advertising still work on the internet? As some of the big guys work hard to make a profit from their current business model pervasive advertising has crept onto pages and across screens. We've been led to believe that traditional methods of advertising are dying out; so why the full page ads, auto play video and pop-up like overlay advertisements? The simple answer is pervasive advertising works and still delivers a certain percentage of click throughs that can be depended on and on sold to clients. But internet advertising is a complex beast and one that big companies are struggling to make a profit from.

Digital sharecropping is a dirty word, but in the end who really cares? In Nicholas Carr's own words "What's being concentrated, in other words, is not content but the economic value of content.". But, again, who cares? Part of everyon'es big obsession with Web 2.0 is the celebrity status, if you were at all concerned that Twitter was making big bucks out of onselling your tweets you would blog in your own dark corner of the web. Youtube didn't drag you to their site or link to your video without your permission. So it is reasonable that they should be able to cash in on their traffic. The traffic that is the pitter, patter of millions of satisfied content creators and viewers.

What is interesting in the past five years of the internet, despite the large volumes of traffic flowing through Youtube, Twitter and other social sites, they are still finding it hard to come up with a successful model to compare with that made by the companies fund them (think the cost of buying Youtube to the profit made so far). Digital sharecropping aside, we have received a hell of a lot of joy in return for sharing our meager thoughts and content with these sites.

Social sites are just like reality TV, some people are willing to participate for free in hopes of celebrity, while a larger company sells advertising on their television network.

What's interesting to see is the way the big guys have gone about trying to get the best out of their clients advertising dollars. Like this example from yahoo:

Note, I didn't even click on this thing it just pops out at you and engulfs the entire screen. These type of adds are regular on yahoo's site and occasionally clicking on close will either redirect you to the sponsors site or just doesn't respond.

This next example from myspace is even better. The only thing worth looking at on myspace is the band pages, and the only thing on those pages is the music player. So clever myspace place the add directly over the music player. After closing an add it is replaced approximately every couple of minutes with a new one.

But the most memorable advertisement recently has to go to Digg with their Dragon Age full page advertisement. That caused a storm so big the instructions on how to remove the add reached the front page of Digg's own site. Have a look at the add below:

The Digg community went crazy with many threatening never to return. As the backlash reverberated around the halls of Digg HQ and at the risk of losing their beloved linkers (farmers?) it prompted this response. With full page adds never to be repeated since.

I'm sure we won't be seeing the end of pervasive advertising on the internet, but advertising in the internet is different to advertising in the real world. Most people tolerate advertising in return for entertainment. But on the internet, especially where users are giving up some of their own time and effort they are not willing to let the experience be degrade by advertising that interferes with the experience.

Sure we are willing to be sharecroppers and sure you can have advertising on your site and you can keep your traffic and we'll keep our 15 minutes of fame. By try and interrupt that experience and there might just be a workers strike.

Save to database via Ajax using jQuery, php, mysql

2010-01-21T20:57:00.002+11:00

When you start building your very first php + mysql applications you will likely have a loop that looks something like this:
* Display a form
* Submit a form to php page
* Update database
* Return user to form, possibly with success message

This is a good basic loop and works perfectly fine in very small scale sites or for something like a user sign-up form to a newsletter etc. But as web applications have moved forward and there is a greater focus on more fluid and dynamic applications form processing has also progressed and it is now possible to submit a form without reloading your page.

Think of the situation where someone has to use your web application to do a large amount of data entry or providing inline editing of a table. You wouldn't want your valuable users to be waiting while the page loads each time.

This tutorial will show you how you can process your form using Ajax.

A working version of this functionality can be viewed here.
You can download the code for this tutorial here

Our new loop will look like this:
* Display a form to the user
* Validation is performed on the form before submit, displaying an alert dialog if validation fails
* Form details are then sent to a php script via AJAX
* php script attempts to save to database and reports if there were any errors
* page is updated (form reset and success message) if successful or display error if save failed

To begin with we have a relatively plain HTML form:

<form id="personal_details" action="process.php" method="post">
 <fieldset>
  <legend>Personal Details</legend>
  <label for="name">Name</label>
  <input type="text" name="name"/>
  <label for="age_range">Age</label>
  <select name="age_range">
   <option value="">Please select an age range</option>
   <option value="1">0-12</option>
   <option value="2">12-16</option>
   <option value="3">16-21</option>
   <option value="4">21-30</option>
   <option value="5">30-50</option>
   <option value="6">50+</option>
  </select>
  <label for="sports">Please select your favourite sports</label>
  <input type="checkbox" name="sports[]" value="soccer" />&nbsp;Soccer<br />
  <input type="checkbox" name="sports[]" value="swimming" />&nbsp;Swimming<br />
  <input type="checkbox" name="sports[]" value="cycling" />&nbsp;Cycling<br />
  <input type="checkbox" name="sports[]" value="kayaking" />&nbsp;Kayaking<br />
  <input type="checkbox" name="sports[]" value="volleyball" />&nbsp;Volleyball<br />
  <input type="checkbox" name="sports[]" value="basketball" />&nbsp;Basketball<br />
  <button type="button" onclick="processDetails();">Submit</button>
  <div style="clear:both;"></div>
 </fieldset>
</form>

You can see we have a Submit button that calls the processDetails function. We also set processDetails as the submit function in the jQuery document ready function as such:

$("document").ready(function() {
 $("#personal_details").submit(function() {
  processDetails();
  return false;
 });
});

Now lets have a look at our processDetails function;

function processDetails() {
 var errors = '';
 
 // Validate name
 var name = $("#personal_details [name='name']").val();
 if (!name) {
  errors += ' - Please enter a namen';
 }
 // Validate age range
 var age_range = $("#personal_details [name='age_range']").val();
 if (!age_range) {
  errors += ' - Please select and age rangen';
 }
 // Validate sports selection
 var sports = $("#personal_details [name='sports[]']:checked").length;
 if (!sports) {
  errors += ' - Please select your favourite sportsn';
 }
 
 if (errors) {
  errors = 'The following errors occurred:n' + errors;
  alert(errors);
  return false;
 } else {
  // Submit our form via Ajax and then reset the form
  $("#personal_details").ajaxSubmit({success:showResult});
  return false;
 }
 
}

processDetails begins with our validating our three form inputs. We basically just check to see if they are set and if they have not been set we display an error message. If no errors are called we submit the form to Ajax by calling the ajaxSubmit function. ajaxSubmit is part of the jQuery forms plugin. This plugin has many great functions that we can use for processing forms. The ajaxSubmit function looks at the form elements action attribute and uses that to submit your form via Ajax so we don't need to worry about serializing and submitting the form manually, it all gets taken care of. I also pass in a success function showResult which will be called on Ajax submit success.

function showResult(data) {
 if (data == 'save_failed') {
  alert('Form save failed, please contact your administrator');
  return false;
 } else {
  $("#personal_details").clearForm().clearFields().resetForm();
  alert('Form save success');
  return false;
 }
}

On success we either display a success or failure alert message. If successful we also clear the form using the form plugins clearForm, clearFields and resetForm functions.

So now anything that happens in our php script is going to happen in the background after it has been called via Ajax.

In our php file we are going to do the following:
* Retrieve our data from the form post ($_POST)
* Check that we have been provided the amount of data we expected
* Try connecting to the database
* Clean the data from the post to ensure no attacks (please not in this example the cleaning is not extensive, you will need to learn about cleaning variables for database inserts elsewhere)
* Attempt to insert the data into the database

You will see that when there is an issue anywhere in the script we echo out 'save_failed' so that the javascript function showResult will know that there has been an issue.

Furthermore with any of the myqsl functions I have appended an @ to the front of the function call, this will supress any error messages given if accessing the database fails.

Let's have a look at the code:

// Retrieve form data
$name = $_POST['name'];
$age_range = $_POST['age_range'];
$sports = $_POST['sports'];
if (!$name || !$age_range || !$sports) {
 echo "save_failed";
 return;
}

// Convert sports array to a serialized string
$sports_list = serialize($sports);

We begin by retrieving the variables from the post and checking that they have been set.

Next we attempt to connect to the database, the details of your database will be provided by your host or depending how you have set them on your own personal server:

$db = array(
 'host' => 'host here',
 'login' => 'username here',
 'password' => 'password here',
 'database' => 'database here',
);
$link = @mysql_connect($db['host'], $db['login'], $db['password']);
if (!$link) {
 echo "save_failed";
 return; 
}
mysql_select_db($db['database']);

As mentioned, you will need to clean your variables to avoid database attacks. Begin by reading this to get a good idea of what's required. CakePHP has a very extensive cleaning function built in and is worth looking at if you want to do some further research.

// Clean variables before performing insert
$clean_name = mysql_real_escape_string($name);
$clean_age_range = mysql_real_escape_string($age_range);
$clean_sports_list = mysql_real_escape_string($sports_list);

Our last step is doing the actual insert into the database:

// Perform insert
$sql = "INSERT INTO details (name, age_range_ID, sports) VALUES ('{$clean_name}', {$clean_age_range}, '{$clean_sports_list}')";
if (@mysql_query($sql, $link)) {
 echo "success";
 @mysql_close($link);
 return;
} else {
 echo "save_failed";
 @mysql_close($link);
 return;
}

This is fairly straight forward; I try and run the query and then return the appropriate message and lastly close the database connection.

Hopefully this tutorial gives you some good insight into getting started on adding Ajax database updates to your web applications.

A shout out to open source and free software

2010-01-15T21:22:00.001+11:00

Free and open source software is the lifeblood of the internet. You only need to look at the number of servers running open software, the number of sites written in open languages and the ability to be able to download a variety of top quality applications (virus protection, games, video players etc.) to know that; the figures speak for themselves.

On top of this we have the bloggers, the plug-in developers, the evangelists, the authors, distributors and hosts that all give something away to further the free and open cause. Let's also not forget the end users, they are also important, they purchase the books and manuals, make donations and attend the conferences. It is with great pleasure that you can survey the current software landscape and see the giving of time, knowledge and creativity for the benefit of everyone. For this I want to say a big thank you to everyone on behalf of everyone else.

As a developer, quite frequently during job interviews you will be asked if you contribute to open source or other online projects. I used to always answer no to this question. Sure everything I touched was built on open and free technology and my whole career depended on the stuff, but I had never gone so far as to actually participate.

So this is my call to everyone, developer or not, to go out and participate. How? You don't need to write lines of code to help, but you can still contribute. Like the software you're working on? Go out and talk about it, blog about it, write about it in forums, evangelise. Don't know how to write? Buy a manual and support an author, most of the time those people who wrote the book also helped write the code. Still can't think of a way to help, most projects make it quite easy to donate and every bit helps.

I love gimp, I love ubuntu, I love php and the list goes on. Go out and spread the love! Take some time out of your own schedule to contribute and don't forget to consider what we now enjoy thanks to open software.

Give up your bad coding habits this new year

2010-01-14T21:28:00.004+11:00

What bad programming habits do you have? Developers are definitely creatures of habit and we tend to get stuck in our ways. I want to look at some of the bad habits I have picked up over the years and hopefully it will inspire and challenge you to take a look at the way you write code and maybe this new year we can try and change our ways.

Most of these habits are not so bad (at least that's what I tell myself) that they are going to bring down a whole project, but a good coding practice reaps benefits; saving time, testing, number of bugs in your finalised code and even the sanity of your work mates. Good quality coding can become second nature with practice.

Coding style

I have to admit, I have the worlds worst hand writing. Beautiful hand writing is developed over years of practice. Your coding style is built up simarly over time, if you don't take time to indent your code, comment, consolidate and refactor as you go it will stay that way. By the time you reach the end of your page and look back at what you've typed you can't be bothered to go back and fix things up. It's like writing a paper and going back and dotting the 'i's once it's finished.
Get in to the habit of correctly styling your code and just like your hand writing your speed will increase over time to the point where you can write presentable, intelligable, clean written code.
Those of us with good coding styles also find it easier to switch styles on request. So if you move to another company or get a new client who requires a certain coding style you can easily adapt your current coding style.
And if your company doesn't have it's own coding style (and you really want to make friends), try and encourage everyone to develop a company standard coding style that raises the bar for everyone.

Not enough testing

Oh no! Oh FUUUUUUUUU! Not god damn testing. If you're the kind of person who gets violently ill when asked to test your own code then you may be pleasantly surprised to know that the more you test and the earlier you test the less number of times you are going to have to revisit the same piece of code. There's only one thing worse than testing and that's having someone else tell you your code is buggy, so make sure you take the time to test your code.
The best way to do this is to get some idea of how it's going to be used and once it's built go ahead and use it. Everyone writes buggy code, we write code fast because we can, but you can't code perfect. Apps and sites are built using building blocks, but you need to test each page and the site as a whole. Test after each section and test once you've put all the pieces together. You are more likely to find bugs testing like a user rather than testing like a developer so go ahead and click everything, try and break it and then plug those holes. People accept the fact you are going to write buggy code, but they will be surprised if you hand over a well tested piece of work. Remember these guys know how to break it better than we do, that's their job.

One of the questions we asked in a recent round of interviews was 'what sites do you like to visit online and how do you keep your skills up to date?'. We were surprised at the number of people who didn't have an answer for this. Members of our team are crazy about the web and the latest news. Reading tech books, blogs and news articles is part of our passion for IT. It's not something we do to keep up to date, it's something we do because we love it.
Even if you're just checking out Digg or looking at a few bugs on Stack Overflow, the more you read the better your skills become. We work in an industry that is always changing and developers are being required more and more to provide clever solutions for a multitude of problems. One of the early pieces of software I worked on was a small java app for a biometric finger scanner and I was hired as a php developer. Broaden your skillset and increase your value, the net is full of clever solutions.

Cut and past code

Who doesn't cut and paste code; we do it from the one page we are working on to another, from the net or even from old apps into new apps. I do it, we all do it. The problem with cut and past code is context and understanding. You cut and paste code from one area and stick it into another you want to be sure that it's doing exactly what it should be doing.
Good suggestions are ensuring that you relook at the way the code is commented; has the context changed? update the comments. Will you understand why it has been stuck there if you were to look at the same section of code in 3 months time? Try integrating the code by rewriting it, that is, only keep the good bits. If it looks out of place now, imagine what it will look like to someone else who looks at your code.
If you need to search the net for an easy solution to a particular problem, chances are you don't understand the problem yourself enough to write it from scratch. Try and understand code and if you have time and it's a clever solution, try and learn how to write it yourself from scratch.

Programming in one environment delivering in another

This is one of my current bad habits. Our company standard web browser is IE6, so everything must be delivered and working on IE6. God help me if I had to debug and use web tools on IE6; I can't live without Firebug. But the big issue here is that once it's working in FF it has to be tweaked in IE6, which occassionally doesn't happen (guilty look).
This really goes back to a good personal testing regime, but if you are developing for a particular environment your works not over until you have used and reviewed in that environment. And more than likely you will find more bugs if you use that environment more often. If you have a client who wants you to build for a particular environment or setup, try your hardest to work in that environment or at least do all of your quick and full reviews in that environment. If you code in FF and need to have it working in IE, have IE on the screen next to you, only use FF to fix bugs. Finding bugs saves you time rewriting the same code again.

Trying to code everything in the frontend/backend/database and overreliance on one language

This can be a real killer. If your coding relies heavily on one methodology or technology your work will suffer. Too much javascript or an overreliance on AJAX? Hate server side technologies and want to do everything in the backend?
Usually sites like these suffer from speed, usability or functionality just doesn't work quite right. Try and get an understanding of how a good working application is put together and find a good balance between front and back. And as always, the number one rule of usability, don't put useless shit into your site.

Comment, Comment and More Comments

How many times have I looked at code I wrote 4 weeks ago and have no idea why the hell I wrote what's in front of me. It's painful. Commenting is not only useful for yourself, but you should consider it a courtesy. You can also usually tell how good a coder someone is by how good there commenting is. Why? Because commenting is human readable, you can read it a lot faster than code, you can immediately see if someone understands what their code is doing.
Commenting is a quality not a quantity thing, but more often than not it's lacking, so I suggest to aim for slightly over commented rather than commenting where and when you think necessary.
Also as suggested elsewhere, if you touch a piece of code that is already commented, read the code and update the comments. Out of date commenting is just as dangerous as incorrect code.

If you have any suggestions (or confessions) of coding habits that should be changed in this new year (and decade) let us know in the comments below.

Have a great new year and happy coding!

What's in the jQuery 1.4 release

2010-01-13T18:45:00.003+11:00

Well it's almost here. Just a couple of more sleeps and the official release of jQuery 1.4 is going to happen. I previously posted about what was expected to be included in jQuery 1.4. This post looks at the events surrounding the release and what has been included in jQuery 1.4.

To begin with you will want to head over to this site: this official site set up to celebrate the release of jQuery 1.4. It's going to have all the announcements and allows you to subscribe via RSS, email or Twitter @jquery so you won't miss a thing. The site is called 'The 14 Days of jQuery' (plus the two extra days they snuck on the front). you will notice a bunch of links towards the bottom of the site A,B,1,2 etc... which will show you each of the announcements for each day.

At the time of this post day A and B have already passed and there has already been some exciting goodies revealed. To start off with there has been a complete rewrite of the API and it looks awesome (see screenshot below). The API rewrite was done courtesty of Karl Swedberg in the process of writing the next version of the jQuery reference guide; it was so good they decided to turn his work into the new API site. So head on over to api.jquery.com, which is filled with all new examples and much more detail.

Even better, the new API even includes a section New or Changed in 1.4 so you don't need to go digging around in the API to find out. One thing I did notice, this page didn't mention the changes to live() which are one of the most talked about changes, but when I browsed the API to .live() it did mention that it has been changed for 1.4. Quote: "As of jQuery 1.4, the .live() method supports custom events as well as all JavaScript events." So I guess they will be updating that later. Which means there must be some more jQuery awesomeness hidden elsewhere that is not included in the New or Changed section so far.

Now if you are in hot anticipitation of the next release the fun doesn't stop here... If you can't wait till the actual release day, jQuery have released jQuery 1.4rc1 the first release candidate which will become the actual release some point in the next 48 hours. So you can get your hands on the almost complete jQuery 1.4 now and start using it in your projects today. Please note, if you come across any inconsitencies or errors while use the release candidate (or the final release) please head on over to jquery-dev and report the issues your having.

According to the site: "The final release (along with the full changelog) will occur this Thursday, on January 14th, coinciding with jQuery’s 4th birthday.". So we don't have long to wait.

The last piece of good news is that they are giving away free ebooks to any who makes a tax-deductable(please refer to your own countries tax laws, I don't know if this applies outside of the US) donation of US $20 or more. Go to the donation page to make your donation and recieve your bonus eBook. The jQuery Project is a non-profit, open source effort, supported by donations and contributions from developers, supporters and professional organizations. Your contributions help fund the continued rapid development and growth of jQuery and the jQuery community.

The jQuery 1.4 release gaurantees to be a killer, with major speed improvements and new functionality. I'm looking forward to the next 14 days. I also want to say a happy birthday to jQuery and many more to come. And a big thankyou to the developers who have made a tireless effort to get this release out on time.

Put your database under version control

2010-01-12T20:20:00.001+11:00

In this tutorial I want to look at some strategies for including your database as part of your version control strategy.

Over the years that I have been writing web applications the majority of the sites I have worked on include some sort of database back-end. Whether they be large scale web applications or simply a sign-up for a newsletter, the database is an integral part of the system. It may come as a surprise that it has only been in the most recent of applications that I have started including the database as part of our version control strategy.

If you haven't started to include your database as part of your version control I would like to point out some of the benefits realised and convince you of why this should also become your habit and part of your regular release cycle or even if it's a single site, part of your site release / update regime.

Most of you ~~should be~~ are most definitely backing up your database regularly, so I won't be covering that area.

To kick things off I will explain to you how we were previously doing things before our recent changeover to versioning our database. In the not so distant past there were five of us working on different parts of the same app. Each of us were working off of the same database, which meant even if we weren't aware that someone was changing the database, there was a small chance of you finding out incidently that a change was made to the table you were working on (queue scream). We would each work on our separate parts and before Beta release day we would all come together and apply our changes to a clean database that would be used for production once Beta was over. Sounds scary right? It was worse than that; we all kept a text file with aforementioned database changes that could be thousands of lines of stored procedures, triggers and table updates. We did manage to make it work without huge dramas, but it's a terrible way to work.

You can imagine if someone forgot to add their changes or held off adding changes or their changes needed to be reverted. The exact reason that we have version control for all our files, so why the hell not for your database? Your situation may (or may not) be as bad as what is mentioned above but you can see the benefits of including your database as part of your versioning: who changed it, when was it changed, can we roll back to a previous version, what should be included in this release? All of these things were not being answered before and we also couldn't track the most basic problem 'if something had been changed?'. Our CRM has hundreds of tables and stored procedures (not an exaggeration), it is God damn huge, so it's not an easy task to manually verify if something is changed or missing. You can now start to see a big problem requiring an easy solution.

We had discussed the problem several times and could not come up with a suitable solution. We wanted something unobtrusive that would be less trouble than what we already had. With any IT team we are always looking for the solution which requires zero effort, has zero loop-holes in case someone forgets to (or is too damn lazy) to do it and is a complete solution to the problem (partial solution = likely fall back to personal methods = half of us do it this way and half of us do it our own way).

The search for a solution got put onto the shelf (inertia) for some time until I came across a query to generate the CREATE script for any table or stored procedure, after this everything else fell in to place. I'll run you over our steps for keeping our database inside version control:

Components:
* Database table; each row contains the name, type and script to (re)create our stored procedures or tables.
* Stored procedure; empties the above mentioned table and then repopulates with the current state of our database.
* php script; Calls the stored procedure then retrieves all the rows from the table. Loops over each row then stores (or updates) an invdividual file which is a .sql file with the CREATE statement. These files are stored inside /db/stored_procedures or /db/tables folder.

Steps:
* Developer makes a change to a table or stored procedure
* Developer finished making any changes to scripts and any other files that will form part of version control commit
* Developer runs the php script above so that database files stored inside the repository are updated
* Developer commits to version control and writes a lovely message for all to see
* Other developers update their repositories and are aware that changes have been made to the database

All is good, yay! But there is still one small issue, the zero loop-holes, what happens if someone forgets to commit there database changes? This is covered in our release cycle. Whoever is responsible for the release MUST run the php script and if there are any database changes that have not been committed yet then we have a slight problem. This is usually solved by a bit of finger pointing. We also have an agreed rule, if it doesn't belong to anyone and was written by some phantom menace then we just revert back to the previous version (this hasn't happened yet because I work with such lovely people).

Hopefully this gives you a good insight into how you can get your database into version control. It is hard for me to provide working examples as there are so many different combinations of databases and scripting languages. I have provided some links below that I used to get our MSSQL database under version control.

How to generate a CREATE TABLE statement for a given table in SQL server

For your stored procedures you can do something like the following:

protected function export_storedprocs() {
 $sp_dir = $_SERVER['APPL_PHYSICAL_PATH'] . 'dbstored_procs\';

 // Retrieve all SP names
 $strSQL = "SELECT Distinct SO.Name
    FROM sysobjects SO (NOLOCK)
    WHERE SO.Type = 'P'
    ORDER BY SO.Name";
 $sps = $this->fetchrows($strSQL);
 
 foreach ($sps as $sp) {
  $strSQL = "EXEC sp_helptext {$sp['Name']}";
  $splines = $this->fetchrows($strSQL);
  if ($splines) {
   $h = fopen($sp_dir . $sp['Name'] . ".sql", "w");
   foreach ($splines as $line) {
    fwrite($h, $line['Text']);
   }
   fclose($h);
  }
 }
 
 echo "Export complete";
}

Also checkout: worthy reading on the same topic

jQuery Galleriffic gallery with Flickr feed

2010-01-08T20:08:00.004+11:00

This post looks at how you can combine the great look and functionality of the Galleriffic jQuery photo gallery plugin with Flickr.

Flick has great functionality already for you to share and view your photos, but the one thing that it doesn't provide is custom styling. If you want to combine a particular Flick photo album within a web design or your own blog you can do so relatively easy with the use of Flickr's API and a bit of javascript. Today I will look at grabbing a Flickr feed using JSON and combine that with the fast and fantastic jQuery Galleriffic plugin.

You can view a working example of this here. You can download the code here.

The Galleriffic plugin is well styled out of the box, but can easily be customised and has all the features you would want: pagination, slideshow and nice transition effects. My main interest in this plugin is that it looks classy and works well with very little customisation.

I will do a simple example and you can do the rest to integrate it into you site or design. I'm going to base my example on Galleriffic's own example-2.html. Begin by downloading Gallerific and you will find all the examples in the root directory. Open up example-2.html and let's begin editing.

Start by removing all of the li elements except for the first one from the thumbs div, we will be using the remaining li element to clone later on. It should now look something like this:

<div id="thumbs" class="navigation">
    <ul class="thumbs noscript">
        <li>
            <a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
                <img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
            </a>
            <div class="caption">
                <div class="download">
                    <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                </div>
                <div class="image-title">Title #0</div>
                <div class="image-desc">Description</div>
                <div class="image-auth"></div>
            </div>
        </li>
    </ul>
</div>

I also added in the image-auth div so I can give some credit to the authors of the photos used in my example.

Next we are going to change the document ready function. I'm going to show you the whole thing so you know where I'm coming from. Have a scan over it first and then I will explain what's going on. This is located at the bottom of the page just before the closing body tag.

jQuery(document).ready(function($) {
    $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=32142572@N00&lang=en-us&format=json&jsoncallback=?", function(data){
            $.each(data.items, function(i,item){
                var newthumb = $("ul.thumbs").children("li:first").clone();
                var baseimg = item.media.m;
                
                var thumbimg = baseimg.replace("_m.jpg", "_s.jpg");
                $(newthumb).find("img").attr("src", thumbimg);
                
                var disimg = baseimg.replace("_m.jpg", ".jpg");
                $(newthumb).find(".thumb").attr("href", disimg);
                
                var lgeimg = baseimg.replace("_m.jpg", "_b.jpg");
                $(newthumb).find(".download").children("a").attr("href", lgeimg);
                
                var title = item.title;
                var description = item.description;
                
                var desc = $("<div />").append(description);
                if ($(desc).children().size() == 3) {
                    description = $(desc).children("p:last").html();
                } else {
                    description = "";
                }
                
                $(newthumb).find(".image-title").empty().html(title);
                $(newthumb).find(".image-desc").empty().html(description);
                $(newthumb).find(".image-auth").empty().html(item.author);
                
                $("ul.thumbs").append(newthumb);
            });    
            
            $("ul.thumbs").children("li:first").remove();
            
            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });
            
            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     2500,
                numThumbs:                 12,
                preloadAhead:              10,
                enableTopPager:            true,
                enableBottomPager:         true,
                maxPagesToShow:            7,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play Slideshow',
                pauseLinkText:             'Pause Slideshow',
                prevLinkText:              '&lsaquo; Previous Photo',
                nextLinkText:              'Next Photo &rsaquo;',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 false,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                }
            });                        
    });

    // We only want these styles applied when javascript is enabled
    $('div.navigation').css({'width' : '300px', 'float' : 'left'});
    $('div.content').css('display', 'block');
});

You will notice that almost everything is now wrapped inside the getJSON call. We need to ensure our pictures are loaded before we call the gallerific function.

The getJSON call is a simple call to the Flickr Feed API. Once you get the hang of what's going on in this tutorial your next step is getting a Flick developer key and using JSON, you can do all sorts of cool things with the Flickr API. For this post I'm just keeping it simple and we will just be using a Group feed.

The main part of the getJSON call is the URL: http://api.flickr.com/services/feeds/groups_pool.gne?id=32142572@N00&lang=en-us&format=json&jsoncallback=?. It calls the groups_pool services feed and simply passes in the group ID. This can be retrieved easily from any group by going to the group's Flickr page and clicking on the RSS link near the bottom left hand corner of the page. The RSS feed will have an URL similar to this: http://api.flickr.com/services/feeds/groups_discuss.gne?id=1239213@N21&lang=en-us&format=rss_200 and you just grab the value of the id variable.

The next thing we do is loop over the results:

$.each(data.items, function(i,item){
    var newthumb = $("ul.thumbs").children("li:first").clone();
    var baseimg = item.media.m;
    
    var thumbimg = baseimg.replace("_m.jpg", "_s.jpg");
    $(newthumb).find("img").attr("src", thumbimg);
    
    var disimg = baseimg.replace("_m.jpg", ".jpg");
    $(newthumb).find(".thumb").attr("href", disimg);
    
    var lgeimg = baseimg.replace("_m.jpg", "_b.jpg");
    $(newthumb).find(".download").children("a").attr("href", lgeimg);
    
    var title = item.title;
    var description = item.description;
    
    var desc = $("<div />").append(description);
    if ($(desc).children().size() == 3) {
        description = $(desc).children("p:last").html();
    } else {
        description = "";
    }
    
    $(newthumb).find(".image-title").empty().html(title);
    $(newthumb).find(".image-desc").empty().html(description);
    $(newthumb).find(".image-auth").empty().html(item.author);
    
    $("ul.thumbs").append(newthumb);
});

data is returned in our callback function to the getJSON call. We then just loop over the data.items. If you want to look at what the feed looks like you can easily read it by going here and just replacing the Group id.

When we loop over each of the items we begin by cloning our first item in the .thumbs unordered list. We then get the baseimg which is the image source URL passed in from the feed. For each photo you upload to Flickr they have several formats but all have similar URLs so we are going to take advantage of this knowledge and we don't need to manipulate the image we retrieve from Flickr into different sizes e.g.

An image: http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg
Image thumbnail: http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg
Big version: http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg

You can now see they are almost identical. So we are going to build these three image links from the one retrieved in the feed. Our three images are thumbimg, disimg and lgeimg; our thumbnail, display image and large image. We then use jQuery's selectors to replace these URLs in the cloned li element $(newthumb).

Next we want to get and set the title, description and author. The feed contains a preformated description with it's own thumbnail (who knows why, I guess for convenience). So we check the description HTML to see if it has three sections, if it does then a user description has been entered on Flickr and we grab it, otherwise just leave it blank:

var desc = $("<div />").append(description);
if ($(desc).children().size() == 3) {
    description = $(desc).children("p:last").html();
} else {
    description = "";
}

In the last step we insert the title, description and author and then append our cloned and updated li element:

$(newthumb).find(".image-title").empty().html(title);
$(newthumb).find(".image-desc").empty().html(description);
$(newthumb).find(".image-auth").empty().html(item.author);

$("ul.thumbs").append(newthumb);

Now that all the elements have been looped over and added we have one final thing to do before we proceed to build our gallery, we just need to remove our initial and no longer need first li element:

$("ul.thumbs").children("li:first").remove();

After this is done we just call the gallerific function as per the initial example and then we're all ready to go.

There's one small thing that I changed and that's the variable numThumbs which determines how many thumbs are displayed per page.

One last thing to note is that the Flickr feeds only provide 20 items. If you want to get more from your feeds you will need to get a developer key and use the Flickr API. The public feeds are deliberately restricted to avoid abuse.

Enjoy!

How to get on the jQuery IRC channel

2009-12-08T21:41:00.001+11:00

This article looks at how to connect to the jQuery IRC channel via your web browser.

To connect is straight forward, you can go here, this will display the following:

Just enter any nickname and #jQuery as the channel and you are in.

The jQuery IRC channel is helpful if you want to get something answered quickly, there's plenty of people hanging around who could help, but... make sure you ask something specific and make sure you ask something relevant and you will be sure to get some help.

Cool transitioniong effect between images using jQuery animate

2009-12-08T19:42:00.003+11:00

This tutorial looks at using jQuery animate to transition from one image to another. jQuery's built in animate function provides a method for easily animating styles such as height, color and position. I will show you a method of toggling backwards an forwards between two images by changing on images dimensions to match the others and by fading one image out to reveal the other.

You can view a demo of this functionality here.

You can download the code for this tutorial here.

Each of the steps should work simultaneously to give a smooth transition from one image to the other. The current image will gradually change width/height while fading out to reveal the other image. The functionality will allow transistioning backwards and forwards between the two images.

This functionality is a great example of jQuery's animate function and could be applied in a variety of ways. You could extend it to cycle through several images, use it in an online catalog for different views of an item or to make an interesting photo album.

In our HTML we have a div marked with class .fade_switch, inside that are the two images that will be used to transition between:

<div class='fade_switch' style='display:block;position:relative;'>
 <img src='./images/green_present.png' />
 <img src='./images/zim.jpg'/>
</div>

This is all the markup that is needed, now let's look at our javascript:

$("document").ready(function() {
 $(".fade_switch img").each(function() {
  var img = new Image;
  img.src = this.src;
  var my_parent = $(this).parent(".fade_switch");
  
  var my_index = $(my_parent).children().index(this);
  
  var myself = $(this);
  
  $(img).load(function() {
   $(myself).data("start_w", img.width);
   $(myself).data("start_h", img.height);
   if (my_index == 0) {
    $(my_parent).css({"width":img.width, "height":img.height});
   } else {
    $(myself).hide();
   }
  });
  
  $(this).css({"position":"absolute", "top":"0px", "left":"0px"});
 });

We begin by looping over each image belonging to a .fade_switch div. We preload the image and after each image has loaded we store its dimensions by using the data function, this will be used later when we animate back to its original size (this is required by IE).

Next we check to see if it is the first image of the two, if so we set the parent .fade_switch element to the size of the image. We then hide the other image.

We finish by setting each image to position absolute, so one image sits in front of the other.

Then we have the click function for each .fade_switch div:

$(".fade_switch").click(function() {
  if (!$(this).is(':animated')) {
   var vis_img = $(this).children(":visible");
   var hid_img = $(this).children(":hidden");
   
   $(vis_img).css("z-Index", "100");
   
   var vis_width = $(vis_img).data("start_w");
   var vis_height = $(vis_img).data("start_h");
   
   var hid_width = $(hid_img).data("start_w");
   var hid_height = $(hid_img).data("start_h");
   
   $(hid_img).css({"z-Index":"1","width":vis_width,"height":vis_height}).show();
   
   
   
   $(vis_img).animate({
    "opacity" : "0",
    "width" : hid_width,
    "height" : hid_height
   }, function() {
    $(this).css("z-Index", "1").hide().css("opacity", "100");
   }); 

   $(hid_img).animate({
    "width" : hid_width,
    "height" : hid_height
   }, function() {
    $(this).css("z-Index", "100");
   });
   
   $(this).animate({
    "width" : hid_width,
    "height" : hid_height
   });
  }
 });

We first check to see that this element is not being currently animated, this is done to stop multiple clicks from screwing things up mid transition. This is done using the :animated selector: if (!$(this).is(':animated')) {

We then retrieve the two elements seperately according to whether they are visible or hidden. We set the visible image to have a zIndex of 100 so it sits on top.

Next we grab the dimensions of each of the images and set the hidden image to have the same dimensions as the visible on, but with zIndex set to 1, then we set it show (it will not appear as it sits behind the other image since it has a zIndex of one and both are absolutely positioned).

Once this is done we begin the animation. We animate the top image to opacity 0, and to shrink or grow to the behind image. Once it has completely faded and changed its dimensions we set it to zIndex 1 and hide it. We animate the back image to its original width and height and set it to zIndex 100 and we also make sure the parent div also has matching width and height.

If you have any great transitioning tricks or want to recommend any good tutorials, share them in the comments below.

Accessing draggable elements from ui.droppable drop function

2009-12-08T17:13:00.003+11:00

This post looks at the ui.droppable drop function. We will look at how to access the droppable, the element that has been dropped onto the droppable and how to access it's methods.

In most cases the droppable views the item being dropped as a draggable, whether it is a ui.sortable or a ui.draggable. To get some understanding of how this works, I came across this section of the jQuery UI Development and Planning wiki: "The droppable implementation comes with a global drag & drop manager called $.ui.ddmanager. It tracks the current draggable, has a list of all droppables at all times and its 'drag' function is called during dragging of the draggable (a 'drop' function on mouseup). It then forwards to the actual widget functions of the current intersecting droppable.". This is important to understand as when we access the element after it is dropped it is referenced via ui.draggable.

Let's take a look at the droppable API and how it explains the drop function for the ui.droppable:

This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable.

Code examples:

Supply a callback function to handle the drop event as an init option.

    $('.selector').droppable({
       drop: function(event, ui) { ... }
    });

So our drop function has the following signature function(event, ui) and we know that $(this) represents the droppable and ui.draggable represents the draggable.

So regardless of whether it is a ui.sortable list item or a ui.draggable being dropped on a droppable we can access the element in the following way:

$("#target").droppable({
 drop: function(event, ui) { 
  var element = $(ui.draggable);
  var DOMelement = $(ui.draggable)[0];
 }
});

You can then manipulate the item in anyway that you like using javascript or jQuery as per usual.

For a standard UI widget when looking at the file you will notice there are two types of functions; those defined with an underscore such as _clear and _trigger in ui.draggable.js and those that don't have an underscore, such as serialize and toArray in ui.sortable.js. Those with an underscore are like privately scoped functions, you cannot call them outside of the UI widget, the others you can and it is done like this. $("#my_sortable_ul").sortable("toArray");. There are also getters and setters available, examples of which are usually available in the API such as ui.droppable addClasses option which can be retrieved as such:

//getter
var addClasses = $('.selector').droppable('option', 'addClasses');
//setter
$('.selector').droppable('option', 'addClasses', false);

So now that we know how to target our element in the drop function and we know which functions are public and how to use setters and getters here is an example of how we can call those functions within the ui.droppable drop function. Note: The sortable and draggable are different in that for sortable list items it is the parent who is the ui.sortable, whereas with the draggable it is the element itself that is the ui.draggable.

// Calling functions on a ui.sortable

drop: function(event, ui) { 
 var array_values = $(ui.draggable).parent().sortable("toArray");
}

// Calling functions on a ui.draggable

drop: function(event, ui) { 
 $(ui.draggable).draggable("destroy");
}

// Accessing getter on a ui.sortable

drop: function(event, ui) { 
 var this_opacity = $(ui.draggable).parent().sortable('option', 'opacity');
}

// Accessing getter on a ui.draggable

drop: function(event, ui) { 
 var this_cursor = $(ui.draggable).draggable('option', 'cursor');
}

With a sortable once it has been dropped it may be also usefull to access the siblings of the element dropped:

// Set the background color on all of the siblings of the dropped element to red

drop: function(event, ui) { 
 $(ui.draggable).siblings().css("background", "red");
}

Using andSelf you can manipulate the siblings as well as the dropped element:

// Set the text color of all of the elements including the dropped element to blue

drop: function(event, ui) { 
 $(ui.draggable).siblings().andSelf().css("color", "blue");
}

jQuery widgets are extremely well designed and have layers of complexity that require a bit of digging. The are very simple to use, but with a bit of research you can get a great amount out of them. Hopefully this tutorial will help you understand UI widgets in a bit more detail.

Using jQuery with forms - part 5 (Traversing)

2009-12-07T21:48:00.003+11:00

This is the fifth in a series of tutorials on using jQuery to manipulate forms. In this series I will be looking at parts of the jQuery API reference in detail. In this tutorial I will be looking at forms and jQuery Traversing.

Filtering

eq(index)

Matches the element from a group at a particular index

// Set the second radio element with name foods to checked
$("#my_form radio[name='foods']:eq(2)").attr('checked', 'checked');

filter(expr)

Removes elements from a group that do not match the expression

// Set all of the input elements that have the class error and out_of_range to red
$("#my_form :input").filter('.error, .out_of_range').css('color', 'red');

filter(fn)

Removes elements from a group that do not match the supplied function, useful if you want to remove elements based on a complex function

// Set all of the input elements that have the class error and out_of_range to red
$("#my_form :input").filter(function(index) {
 if ((index > 6) || ($(this).attr("type") == "hidden)) {
  return true;
 }
}).css('color', 'red');

is(expr)

Used to check if one of the matched elements matches the expression

// Checks to see if any of the password elements has the error class

if ($("#my_form :password").is('.error')) {
 alert('A password field is still in error');
}

map(callback)

Takes a set of elements and maps each one onto the callback

// This is a very useful function but takes some understanding, rather than looking at the function below I suggest you check out this page for practical uses of this function.

// Map all of the options from #myselect to the $(this).val() function, get the actual DOM elements and join them with a comma
alert($("#myselect option").map(function() {return $(this).val();}).get().join(', '));

not(expr)

Removes elements that do not match the expression from the set

// Get all of the input elements and remove those that are not inputs and then apply a grey background
$("#my_form :input").not(":password").css('background', 'grey');

slice(start, end)

Selects a subset of the elements based on start and end index

// Hide all of the radio elements with name foods except the first and last element
$("radio[name='foods']").slice(1, ($("radio[name='blah']").size() - 1)).hide();

Finding

add(expr)

Adds a set of elements to an existing group

// Set all of the select elements to red border then set all of the select and text elements to color blue
// This could be useful if you wanted to show which elements had been validated as well as those that are in error
$(":select").css('border', '1px solid red').add(":text").css('color', 'blue');

children(expr)

Selects all the children of an element and optionaly filters them according to the expression

// Retrieve all of the select children elements of my form that have the class validated
$("#my_form :select").children(".validated");

closest(expr)

Closest works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.

// If a button is clicked it checks to see if it has the disabled class, if not it traverses up the document to find the closest element with the disabled class and then adds the matched class
$("button").click(function(e) {
  $(e.target).closest(".disabled").addClass("matched");
});

find(expr)

Searches for decendant elements that match the given expression

// Apply a yellow background to all p elements that are descendants of the .login_entry fieldset

$(":fieldset .login_entry").find("p").css('background', 'yellow');

next(expr) / nextAll(expr)

Find the next (the siblings after) sibling matching expr or find all the sibling after this element matching expr

// Set the text element directly after a disabled button to read 'this button is disabled'
$("button[disabled]").next().text("this button is disabled");

// Hide all p siblings after a disabled button
$("button[disabled]").nextAll("p").hide();

prev(expr) / prevAll(expr)

Find the previous (the siblings before) sibling matching expr or find all the siblings before this element matching expr

siblings(expr)

Find all the siblings of this element matching expr

parent(expr) / parents(expr)

Find the parent of this element (can be called on a group and filtered by expression) / Find all the parents of this element (the unique ancestors)

// If a parent contains a disabled button then hide it
$("button[disabled]").parent().hide();

Chaining

andSelf()

Find the parent of this element (can be called on a group and filtered by expression) / Find all the parents of this element (the unique ancestors)

// Find all fieldsets that contain radio elements and place a border around the radio elements and around the fieldset
$("fieldset").find(":radio").andSelf().css('border', '1px solid green');

If you found this post useful, here are part 1, part 2, part 3 and part 4 of this series.

Grid based approach to improve your designs

2009-12-07T18:47:00.005+11:00

This article looks at using the grid based design approach to improve your design efforts. Using a grid will provide clarity, structure and balance to your designs. There now exists a range of easy to use tools that can be turned on and off at will to guide you in the process of designing with a grid.

The idea of using a grid based system has been around for some while now, Smashing Magazine did one of their usual mega-link articles over two years ago now. But there are still a good reasons to have another look at the grid based approach. If you are like me and you are more on the development side and most of your design ideas suck most of the time it is a process of continual improvement. We spend most of our time concentrating on how things work and not on how they should look. The problem is that design, clarity and presentation all matter to the user experience. So, you should care.

If you are like me and work for a small team, don't have the luxury of a design team or it's just not feasible to have a mock-up for each page you work on, you will be making design decisions and trade-offs all the time. The use of a grid is a simple tool that will improve your design work. Remember it's just a guide, so you can shuffle things around to your liking. But you will find that the use of a guide as a beginning tool-block to lay out your design is a clever and practical way to improve the end result.

There are tools out there available to make designing with a grid very easy. These are simple links that can be dragged on to your toolbar and will apply the grid over the top of your page. They allow you to customise the grid and tweak your designs as you work on them. Firebug + grid = good idea!

960.gs has a jQuery based grid system which sits on a tab at the side of your page and has many options for displaying vertical and horizontal bars. It is my preferred choice as it looks great and the option to hide it without closing is helpful. As well it contains most of the options you need without being too cluttered.

The next is Allan Jardine's Grid javascript bookmarklet. Grid is highly customisable and has a full feature set. It allows you to set alignment, gutters and margins.

The last one is the simple, easy to use grid960 grid overlay bookmarklet. This has a 12 and 16 column option and an option to set the opacity. This is a good starting point if you only want to use the grid as a rough guide or you want to do some quick tweaking and don't want to worry about setting too many options.

If you want to read up more on the topic and how you can use the grid system to improve your designs I suggest you check out the 960 grid system site. The site has a good deal of showcase sites and links to other quality tutorials and resources.

The grid overlay is an easy way to make big gains in your overall site design and using these unobtrusive tools makes it easier for you to apply the grid approach to your next design.

If you have a grid designed site that you would like to share or if you have something to share on the best way to use the grid based approach let us know in the comments section below.

Building a Youtube playlist queue with php and jQuery

2009-12-06T22:22:00.003+11:00

This post looks at how you can use php and jQuery to build a Youtube playlist queue, be the envy of your friends at your next party and allow your friends to search and drag items to a Youtube playlist.

As a Youtube playlist refreshes each time the page refreshes there is no need to call a page refresh each you add items, once the current video has finished playing the screen refreshes and updates the playlist.

In order to get a working version of my application you will need to do the following steps:
1. Download Zend Gdata package
2. Download my application code
3. Get a Google developer key
4. Extract the Zend Gdata package
5. Extract my application inside the root folder containing the Zend Gdata package, which should look like this:
/ZendGdata-1.9.6/jyt
6. Open /ZendGdata-1.9.6/jyt/operations.php and enter your developer key on line :56 where it says $_SESSION['developerKey'] = '-set your developer key here -';

To begin with this post should be looked at as an introduction to the world of possibilities available with Gdata and php. The demo application provided is very limited, but presents a glimpse at something that could be a great application given a months development work. It should also give you a taste for how easy it is to use Gdata to build applications based on Google authenticated users.

In order to build good quality applications with Google you really need to do a bit of reading, it's not something that you can understand in a day. Google's APIs are large and you will need to read them if you want to take things further.

My demo application uses AuthSub which is the basic method for giving an application permission for using your Google data. You can read more about AuthSub here.

But the main part of the application is ZendGdata. As Zend so gracefully put it: "These packages (ZendGdata) contain everything you need to access Google's Data APIs from your PHP 5 application.". When thinking about Zend and writing small applications you may be tempted to think why bother; it was something that held me back before from looking at integrating Google application data previously. Why would you want to use Zend framework when I just want to list my damn youtube videos? Well it turns out you don't need an entire framework, you just need the ZendGdata package that can be downloaded from here.

ZendGdata works simply like any other third party API or library. It's not too large or overbearing (the library folder currently comes in at around 2MB), so don't be scared of it. But it does contain a whole bunch of useful functions for authenticating and accessing Google data.

The package also contains the documentation and also some sample applications that you can begin playing with, how cool is that.

My application is based on the Youtube application provided with the package. To begin with it generates a link to ask the user to authenticate, if you are signed in to youtube this will ask you to 'allow' or 'deny' the application access to your data.

Once authentication has taken place the application will then go and retrieve and display your first playlist (it is possible for it to display any available playlist, I have just kept things simple). You are then displayed a search box to enter terms and submit.

Once you have searched and found a video you like, simply drag the video on to the target, it will be removed from the search list. Your playlist will then update and the added video will be at the bottom.

Why did I want to build this application? Many years ago I went to a party, it was at a time when Napster was just starting to become popular, I was amazed at the limitless possibilities of what was essentially an infinite jukebox. People could go over to the computer at the party, select the tunes they wanted and they would be queued and played. Allowing anyone to come and choose the tunes they wanted to hear. CD switching was a pain in those days as you had to wait for one song to finish and for the crowed around the stereo to disperse.

So there you have it. I hope this inspires you to Google application building greatness.

Enjoy!

Display Google analytics with php, jQuery and flot

2009-12-04T22:42:00.004+11:00

This tutorial looks at how you can display your Google Analytics results using flot, the jQuery graphing library.

Flot will allow us to plot our results on a good looking graph without the need for flash; you can even enable and disable different sites if you are tracking multiple sites.

Unfortunately due to hosting restrictions I don't have a demo for this tutorial, but you can download the code from here

We will also be using the php analytics API class written by Chris Hope available from http://www.electrictoolbox.com. This class will allow us to easily retrieve our analytics data and will allow you to customise your results (including start date etc.)

We begin with a simple placeholder in our HTML, we then call our php script analytics.php using jQuery's getJSON method. The analytics.php script first checks to see if we have a cached version of the results (the retrieval from Google is considerably slow) and then serves the cached results. If there are no cached results it retrieves the data from Google's servers and then builds an array of data for each site. This array is then converted to JSON using php's json_encode and returned to our javascript file. Our javascript file builds an array suitable for Flot and then calls Flot's plot method.

Let's have a look at some of our code, firstly the HTML:

<h1>
My sites</h1>
<div id="placeholder" style="width:600px;height:300px;">
</div>
<p id="choices" style='display:none;'>
Show:</p>

This is simply our title and place holder for our graph and site toggler.

Our javascript file is made up of three functions:

$("document").ready(function() {
   var url = "analytics.php";
   
   $.getJSON(url, {id:  Math.random()}, function(datasets) {
      if (datasets) {
         // hard-code color indices to prevent them from shifting as
         // countries are turned on/off
         var i = 0;
         $.each(datasets, function(key, val) {
            val.color = i;
            ++i;
         });
         
         // insert checkboxes 
         var choiceContainer = $("#choices");
         $.each(datasets, function(key, val) {
            choiceContainer.append('
<input type="checkbox" name="' + key +
                              '" checked="checked" id="id' + key + '">' +
                              '<label for="id' + key + '">'
                              + val.label + '</label>');
         });
         choiceContainer.find("input").click(updateGraph);
         
         plotAccordingToChoices(datasets);
         
         $("#choices").show();
      }
      
   });
});

We begin with our document ready function. This starts by calling our analytics.php file using the getJSON function and retrieves our datasets. We loop over our datasets and assign them a colour. Next we create our checkboxes to turn sites on or off and assign the updateGraph click function to these checkboxes. Finally we call our plotAccordingToChoices function and show our choices checkboxes.

function plotAccordingToChoices(datasets) {
   var data = [];
   
   var choiceContainer = $("#choices");

   choiceContainer.find("input:checked").each(function () {
      var key = $(this).attr("name");
      if (key && datasets[key]) {
         data.push(datasets[key]);
      }
   });

   var options = {
            xaxis: {
                mode: "time"
            }
        };
   
   if (data.length > 0) {
      var plotarea = $("#placeholder");
      plotarea.css("height", "250px");
      plotarea.css("width", "500px");
      $.plot( plotarea , data, options );
   }
}

Our plotAccordingToChoices function takes in our datasets and then compares the data to the checked options to see if any are disabled otherwise they are added to the data array. Our data array is then simply passed through to Flot to plot.

function updateGraph() {
   var url = "analytics.php";

   $.getJSON(url, {id:  Math.random()}, function(datasets) {
      if (datasets) {
         var i = 0;
         $.each(datasets, function(key, val) {
            val.color = i;
            ++i;
         });      
      
         plotAccordingToChoices(datasets);
      }
   });
}

Our updateGraph function simply retrieves our data again and then calls plotAccordingToChoices. You could store this information somewhere in a global or in the DOM, if that's what you're in to.

Now let's look at the php side of things.

require_once('analytics_api.php');

$login = '-enter login here-';
$password = '-enter password here-';

$modified = @filemtime("cache.txt");

$modified = date("d-m-Y", $modified);
$current = date("d-m-Y");

if ($modified && ($current == $modified)) {
   $cache = @file_get_contents("cache.txt");
} else {
   $cache = null;
}

if (!$cache) {
   $api = new analytics_api();
   if($api->login($login, $password)) {
      $api->load_accounts();
      $accounts = $api->accounts;

      $return = array();
      
      foreach ($accounts as $accountname => $account) {
         $data = $api->data($account['tableId'], 'ga:week', 'ga:visits', 'ga:week', '2009-07-05', '', '52');
         $return[$accountname]['label'] = $accountname;
         
         foreach ($data as $week_number => $week) { 
            $return[$accountname]['data'][] = array( (strtotime("2009W".$week_number) * 1000) , $week['ga:visits'] + rand(0, 400) );
         }
      }
      
      $encoded = json_encode($return);
      
      echo $encoded;
      file_put_contents("cache.txt", $encoded);
   }
} else {
   echo $cache;
}

We begin by checking our cached file and then checking the date modified to see if the cache file is from today. If the cache file exists and it is from today we simply return the contents of that file.

Otherwise, we log in to our analytics account using the $api->login($login, $password) method. We loop over each of our accounts and retrieve the data from that account:

$data = $api->data($account['tableId'], 'ga:week', 'ga:visits', 'ga:week', '2009-07-05', '', '52');

You see here when we call the data method you can specify a whole bunch of different options, I will leave these to you to investigate. We are simply going to retrieve all weekly visit data starting from 2009-07-05 up to a maximum of 52 weeks if available.

We loop over this data and store it in the return array per account name. Then once all the data has been looped over we simply JSON encode and return.

Nice and easy.

Enjoy!

jQuery UI sortable drag multiple to target

2009-12-03T22:50:00.002+11:00

This tutorial looks at building a jQuery sortable UI widget that allows for sorting and for dragging multiple items on to a droppable target.

This is my first attempt (and possibly last) at building this so I haven't had a chance to check this off with all options available, I only built it for a single purpose.

The demo can be viewed here

And you can download the code from here

A brief rundown on how it works: control-click to select/deselect items. When the first item is dragged the other items are cloned and the original element hidden. If the main item being dragged hits the droppable target then the element and all its siblings are removed:

$("document").ready(function() {
  $("#sortable1").multisortable({});
  $("#sortable1").disableSelection();
  $("#target").droppable({
   accept: "#sortable1 li",
   drop: function(event, ui) { 
    var elements = $(ui.draggable).siblings(".ui-multisort-grouped").andSelf();
    
    $(elements).remove();
   }
  });
});

The element being dragged and its siblings are stored in the elements variable so you can essentially do what you like with them (read attributes etc.) at this point.

Hope this helps some people.

Enjoy!

Using jQuery with forms - part 4 (Attributes)

2009-12-02T19:31:00.007+11:00

This is the fourth in a series of tutorials on using jQuery to manipulate forms. In this series I will be looking at parts of the jQuery API reference in detail. In this tutorial I will be looking at forms and jQuery Attributes.

Attr

attr(name)

Retrieves the value of an attribute

// Retrieve the location that the form is submitting to
$("#my_form").attr("action");

attr(key, value)

Sets the value of an attribute

// Set the location that the form is submitting to, this may be 
useful when you want to set the action according to some input
$("#my_form").attr("action", "processing.php");

removeAttr(name)

Removes an attribute from an element

// Remove all inline styling from fields with the password class
$(".password").removeAttr("style");

HTML

html() / html(val)

Retrieves / sets the innerHTML of the matched element

// Retrieve the html() contents of the fieldset with ID 
#fieldset_login and then set the html to the 
contents of updatedHTML
var updatedHTML = ... some markup ...
var login_html = $("#fieldset_login").html(updatedHTML);

Text

text() / text(val)

Retrieves / sets the text contents of the matched element

// Retrieve the contents of the first label
var label_text = $("label:first").text();

Getting and setting the values of different form elements

// Retrieve and set the contents of text input
$("#my_text_input").val();
$("#my_text_input").val(new_value);

// Retrieve and set the contents of label
$("#my_label").text();
$("#my_label").text(new_value);

// Retrieve and set the contents of textarea
$("#my_textarea").val();
$("#my_textarea").val(new_value);

// Retrieve and set the value of select
$("#my_select").val()
$("#my_select").val(2) // Set select according to value

// Retrieve and set the text of select
$("#my_select :selected").text() // Text value of selected option
// Changes the text of selected option
$("#my_select :selected").text("some text") 

// Retrieve and set the text label of a button
$("#my_button").text();
$("#my_button").text("some text");

// Retrieve the button type attribute
$("#my_button").attr("type"); 

// Retrieve the value of the checked radio element
$("#my_form [name='radio_group']:checked").val();

// Check if a particular checkbox has been checked
$("#my_form [name='checkbox_group[]']").eq(1).is(":checked")

// Retrieve all the checked checkboxes in a serialized string
$("#my_form [name='checkbox_group[]']:checked").serialize() 

// Retrieve and set the contents of password input
$("#my_text_input").val();
$("#my_text_input").val(new_value);

If you found this post useful, here are part 1, part 2, and part 3 of this series.

5 sites and 5 jQuery plug-ins - tools for daily use

2009-12-02T19:29:00.001+11:00

This post looks at 5 sites that I use daily and 5 jQuery plug-ins that I use regularly. The aim of this post is to provide you with some useful tools that you can keep in your toolbox and hopefully they will also be of regular use to you. Both the sites and the plug-ins are practical, reliable and most importantly they do what they are supposed to do.

The sites that I have chosen are sites that I personally use frequently. I think it's important to know a bunch of good sites, it saves trying to remember too much: memorise the basics and keep the rest within arms reach. I visit the php API and the jQuery API several times daily, I remember the basics, but I wouldn't want to try memorising the entire php API. I've tried to choose sites that are more on the practical side, these are more tool like and less reference like. I may only use them once or twice a day for a minute or two, but they are good at what they do.

The first site is ColorPicker. No need to install any software, no adds, no clutter, it is a simple color picker and it's handy.

The next site is a Lorem Ipsum generator. I'm surprised at how often I use this. The site is Lorem 2. Lorem 2 has Lorem Ipsum text in many different formats, short/long paragraphs and short/long list items.

I'm sure most of you know about Stack Overflow and w3schools. I use these two for different reasons; I use w3schools whenever I forget the basics, it's presentation is clean and I can reference what I need to know quick and easy, it's for those times when I forget something simple and stupid like how to name radio buttons. I use Stack Overflow when I assume there should exist a practical solution to something I haven't worked out yet. It's a good way to compare your solution to your peers and a good place to get advice and feedback.

The jivebay Handling Checkboxes, Radio Buttons and Select Options in jQuery post was the inspiration for my select element cheat sheet and I still find myself referencing this post every now and then. The questions and answers in the comments section are just as good as the post itself and the answers are well written.

The last site is the dummy data generator Generate Data. This site will generate large amounts of dummy data in different formats (HTML, Excel, XML, CSV, SQL) and has a large variety of data types. You can also specify the number of rows and row names.

The 5 plugins that I have chosen are also simple and practical. Simple in that they are east to use and do not try and overcomplicate.

The main site I work on is an internal CRM, so we have a lot of tabled information. The jQuery tablesorter plugin is awesome; it allows for custom parsing for sort order and with a bit of work it is very easy to have inline editing. You can also sort on multiple rows.

The jQuery cookies plugin works across all browsers and is so easy to set up. You can have a look at this post if you want to read over some of it's features rather than reading the code itself. It has very easy set, and get functions and is lightweight.

There are currently many jQuery autogrow plugins, but my favourite is this one. It is small enough that you could just cut and paste the function out and stick it in your own utility script if needed. It also works well across all browsers without hiccups.

The same could be said for watermark plugins, there are many out there, but the one that I like to use (which has been in beta since 2007) is this one by Josh Bush. It also has built in hideAll, showAll functions which are useful when pulling values for submission via ajax.

The last one and maybe the most useful is the jQuery form plugin. For any ajax heavy application with many forms this plugin has many useful methods for serializing, resetting and submitting forms. It even has a method for submitting files via AJAX.

It is always good to have many sites and tools that you can rely upon, once you find something good make sure to bookmark it for later use and then share it around. What are some of your favourite plug-ins that you use daily? What are some sites that you can't live without?

Collection of December 2009 Wallpapers

2009-12-01T21:50:00.004+11:00

I've scoured the net and tried to find some of the best December 2009 wallpapers to kick of the festive Season. I was surprised that there were so few, being Christmas and all. Here is what I came up with.

Click on any of the images below to go to the artists page and download the full sized image.

jQuery php voting widget

2009-12-01T19:18:00.003+11:00

This tutorial looks at how to build a jQuery UI themeable voting widget using a jQuery sortable and a bit of php to store the current number of votes. The actual widget itself is quite light-weight and the only markup we need is a single unordered list. The jQuery is also minimal and most of the work is done in php to work out the what the current tally is and to store this information.

You can view the working demo this tutorial here.

You can download the code for this tutorial here.

In my implementation I have chosen to store the current number of votes as a single serialized string in a flate file, but this could easily be done in a database.

To begin with I will show you the unordered list, my list is going to contain Charlton Heston movies:

<li class="non-sortable" style="height:2.2em;">Rank your favourite Charlton Heston movies by dragging options</li>
<li class="ui-state-default movie-rank" id="movie-1"><span class='counter'>#1</span>The Ten Commandments</li>
<li class="ui-state-default movie-rank" id="movie-2"><span class='counter'>#2</span>Ben-Hur</li>
<li class="ui-state-default movie-rank" id="movie-3"><span class='counter'>#3</span>Planet of the Apes</li>
<li class="ui-state-default movie-rank" id="movie-4"><span class='counter'>#4</span>The Omega Man</li>
<li class="ui-state-default movie-rank" id="movie-5"><span class='counter'>#5</span>Soylent Green</li>
<li class="ui-state-default movie-rank" id="movie-6"><span class='counter'>#6</span>The Three Musketeers</li>
<li class="ui-state-default movie-rank" id="movie-7"><span class='counter'>#7</span>Antony and Cleopatra</li>
<li class="ui-state-default movie-rank" id="movie-8"><span class='counter'>#8</span>Beneath the Planet of the Apes </li>
<li class="ui-state-default movie-rank" id="movie-9"><span class='counter'>#9</span>El Cid</li>
<li class="ui-state-default movie-rank" id="movie-10"><span class='counter'>#10</span>Julius Caeser</li>
<li class="non-sortable"><button class="ui-button ui-state-default ui-corner-all" type="button" name="submit" style="float:right;">Submit</button></li>

If you look at the li classes above you will see there are two main types, the non-sortable and movie-rank. The jQuery sortable plugin allows us to specify which items should be sortable using the 'items' option and which items will not be part of the sorting process (that is, they stay put). We want our widget title and the submit button to stay put so lets look at the jQuery initialisation:

$("document").ready(function() {
 $("#sortable").sortable({
  placeholder: 'ui-state-highlight',
  items: '.movie-rank',
  cancel: '.non-sortable'
 });
 
 $("#sortable").disableSelection();

The three options from our sortable initialisation are placeholder, items and cancel. Place holder simply provides an indicator for where the item will be dropped, in my example this is the blue bar that appears as the item being dragged hovers over each list item. The items and cancel work as previously mentioned, basically 'items' are sortable and 'cancel' stays put. The final call to disableSelection is an undocumented jQuery UI method that prevents text selection happening on a list element so that grabbing an item to be dragged is easier and the text selection doesn't get the focus first.

Next I decided to add an update function whenever the sort order is changed. This updates the ranking of each item, so if you move #3 to the #7 position all of the numbers update to show your preferred voting order. Let's look at the code:

$('#sortable').bind('sortupdate', function(event, ui) {
 $(".counter").each(function() {
  $(this).empty();
  var index = $(".counter").index(this) + 1;
  $(this).text("#" + index);
 });
});

The sortupdate function is a special function specific to the jQuery UI sortable plugin. You can see all of the options and functions here. This is called when the sort order is updated. I simply remove all of the rankings and then update each of the elements according to their actual position amongst thier peers. This is done using the jQuery index function, which takes in a group of elements and finds the index of the element amongst that group (0 based).

The last piece of jQuery code is our submit function:

$("#sortable [name='submit']").click(function() {
 var rankings = $('#sortable').sortable('serialize');
 
 $.get("vote.php?" + rankings, {}, function(data) {
  $("#sortable").empty().html(data);
 });
});

Our sortable has another great funcion, serialize which looks at the IDs of our li elements and passes them in order as follows: arrayname-id. So I have mine set up as movie-1, movie-2 etc. so these will be returned as movie[]=1,movie[]=4,movie=[]=7... according to how we have sorted them. When this gets rebuilt in php we will have an array that is ordered in the same way as our sorted list with a reference to the index of our movie.

We then make an AJAX call using jQuery's $.get function which sends in our voting submission and waits to get the results back from our php script. Once the results are returned we simply clear out our sortable and insert the results returned from the script.

We start off our php script vote.php with retrieving the values passed in and setting up an array that has a key corresponding to the movie and the voting points allocated to that movie:

$movie_rankings = $_GET['movie'];

if ($movie_rankings && is_array($movie_rankings) && (sizeof($movie_rankings) == 10)) {
 $movie_points = array();
 
 foreach ($movie_rankings as $rank => $index) {
  if (!is_numeric($rank) || !is_numeric($index) || ($rank > 9) || ($index > 10)) exit; // Prevent hacking
  $movie_points[(int)$index] = (10 - (int)$rank);
 }

You will see I have added a few small security checks in there to avoid someone from screwing this up completely. We begin with getting the value of movie from our $_GET variable. We then check that this wasn't empty, that it is an array and that it has exactly the right number of elements, in our case 10.

Next we create the $movie_points array to hold our votes for each movie. We loop over the rankings passed in and while we are doing this we need to check that someone hasn't just passed in garbage. We check that the $rank and $index are both numbers and that they are both less than 10, another security check. We then set the points for each movie index inside the $movie_points array, casting each value to int in case some tricky person decided to use float values.

$current_rankings = @file_get_contents("rankings.txt");

if ($current_rankings) {
 $current_rankings = unserialize($current_rankings);
 
 foreach ($current_rankings as $index => $score) {
  $movie_points[$index] += $score; 
 }
}

$ser_points = serialize($movie_points);
file_put_contents("rankings.txt", $ser_points);

Following from that we retrieve the current rankings form our rankings.txt flat file. If the file existed we unserialize those values and loop over each value and add it to the point values just pased in by updating the $movie_points array. We then serialize the $movie_points array and store it in our flat file for later reference.

Now that we have our current standings and all our points tallied we want to build our output. Our output will contain a colourful graphical representation in the form of a bar chart, which will contain the percentages and the names of each of the movies:

arsort($movie_points);
  
$movies = array();
$movies[1] = "The Ten Commandments";
$movies[2] = "Ben-Hur";
$movies[3] = "Planet of the Apes";
$movies[4] = "The Omega Man";
$movies[5] = "Soylent Green";
$movies[6] = "The Three Musketeers";
$movies[7] = "Antony and Cleopatra";
$movies[8] = "Beneath the Planet of the Apes";
$movies[9] = "El Cid";
$movies[10] = "Julius Caeser";

$colours = array();
$colours[1] = "#E52E2E";
$colours[2] = "#E58F2E";
$colours[3] = "#E5DF2E";
$colours[4] = "#8FE52E";
$colours[5] = "#2EE56C";
$colours[6] = "#2EE5D2";
$colours[7] = "#2E49E5";
$colours[8] = "#942EE5";
$colours[9] = "#C02EE5";
$colours[10] = "#DE2EE5";

$total_points = array_sum($movie_points);

$html = '';

$counter = 1;
foreach ($movie_points as $key => $points) {
 $percent = round(($points / $total_points * 100), 0);
 $html .= "<li class='ui-state-default movie-rank non-sortable' id='movie-{$key}'><div style='background:{$colours[$counter]};height:25px;width:{$percent}%;padding:5px;margin-top:-6px;margin-left:-6px;'></div><div style='position:absolute;left:0px;top:0px;'><span class='counter'>{$percent}%</span>{$movies[$key]}</li></div>";
 $counter ++;
}

echo $html;

We begin by sorting our $movie_points from highest to lowest. Then we set up two arrays, one with the index to name mapping of our movies and the next with the colour level for our bar chart. We us php's built in array_sum to count up the total number of points already awarded, this will be used to work out percentages.

Next we loop over (from highest to lowest) each of our movies; we calculate the percentage points and then build the list item displaying our movie name, points and the coloured bar.

This is then echod out and returned to the jQuery scipt which will clear out our voting system and display the colourful results.

That's the lot.

Enjoy!

jQuery UI multiple draggable plugin

2009-11-29T22:07:00.006+11:00

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group. The aim of the plugin is to include all of the current functionality listed in the options.

To group and ungroup elements simply control click, the ui-multidraggable extension is applied for styling purposes and also to alert the plugin as to which elements are grouped.

You can view the following demos:

You can also download the plugin and the demos from here.

An update has now been provided for this plugin thanks to Caili Crane @ Pulse Energy allowing the plugin to be used with jQueryUI 1.8.8 and jQuery 1.4.4 and can be downloaded here.

As this is an extension of the base functionality it is also released under a dual GPL and MIT license. You can view copies of these licenses in the package when you download the source from the link above.

Following is a list of all the options from the draggable element and how they work with the multidraggable plugin:

addClasses works and is set on an individual level
appendTo works and is set on an individual level
axis works and is set on an individual level
cancel works and is set on an individual level
containment works and is set on an individual level
cursor works and is set on an individual level
cursorAt works and is set on an individual level
delay works and is set on an individual level
distance works and is set on an individual level
grid works and is set on an individual level
handle works and is set on an individual level
helper works and is set on an individual level
iFrameFix works and is set on an individual level
opacity works and is set on an individual level
refreshPositions works and is set on an individual level
revert works and is set on an individual level
revertDuration works and is set on an individual level. Note: this currently throws an error if two elements have different revertDurations and you attempt to drag before both have reverted to their original position.
scope works and is set on an individual level
scroll works and if any in the group have scroll set to true then enclosing element will scroll
scrollSensitivity works and is set on an individual level
scrollSpeed works and is set on an individual level, but once all elements are outside the original container the speed of the fastest grouped element is used
snap works and is set on an individual level
snapMode works and is set on an individual level
snapTolerance works and is set on an individual level
stack works, whichever element from the group is the one being dragged will have the highest zIndex
zIndex works and is set on an individual level

The only functionality I am aware of that currently does not work is the connectToSortable which I am working on resolving for the next release.

As you can see from the working options above, these settings are set on an individual but are likely to work more cohesively if they have the same values and options set. This was purposely done to allow for flexibility and usability (you may want certain items to have different opacity etc.).

I have very pleased to be able to release this plugin and hope it is useful. My first attempt at doing this nearly a year ago was miles away from where it is now and I am grateful to this post for teaching me how to do this the correct way.

Please let me know if you have any constructive feedback and if you are using this plugin anywhere.

Enjoy!

How can Chrome OS win market share?

2009-11-26T18:06:00.005+11:00

Who really rules the net? I know with most popular culture that it's somewhere between 8 and 18 year olds with an ever increaing dispensible income; they decide our music stars, our fashion and the growing movie takings. They brought us the Spice Girls, then Brittany, Miley and now New Moon. God bless their socks, they have brought us some real shit, but I'm not going to turn this into a rant about how teenage girls should really be listening to Radiohead.

God knows they've tried to influence the net; Facebook, lolcatz and Perez. But real IT companies are not considered with the steady stream of cultural detrits that is floating around the web. What they are more concerned about is how you are viewing it. You see, the folks at Redmond are sitting on one giant nest-egg that has been around for years that according to statcounter around 90% of us worldwide are continuing to use.

So who decides which OS is king? Is it just a matter of cool? I doubt it, I'm not sure where Windows sits on the cool-o-meter and I don't think that operating systems as a whole are the kind of cool that the kids are interested in. They are kind of the opposite to the big guys, they are more interested in what they are looking and not what they are using. I would argue that the driving influence for any computer technology are those of us who actually care.

Why is my Mother now using Firefox when 6 months ago she was stuck on IE6? Because someone who cared bothered to go and install an alternative. A couple of years back I may not have bothered, but what has made this shift in the environment that now so many people are moving away from Explorer and installing Chrome or Firefox or something else. We have! The people who care. The stuff floating around the net may belong to our cultural heroes, but what you are using belongs to us. The developers, the tech writers, the support team and the salesmen, not the guy on the street.

If it were just a matter choice maybe the Mac guys or the Linux guys would have had a better share, but recently there has been a real movement to change and you can see it in the last twelve months of browser statistics. It has been mobilised through blogging and demonstrated by the number of installs on friends and parents machines. So why is this so important to the OS market?

If you have ever tried, you will know how hard it is to convince someone to switch their browser, but once they have switched it is just as hard to switch them back. So, although at most major stores across the world your shiny new PC will come pre-installed with the latest version of Explorer, these same friends and parents will come back and ask you to reinstall their new favourite browser.

I just finished reading Robert Scoble's latest post titled "Why Google Chrome OS has already won":

"Google is in a war over developers with Microsoft. Google wants developers to build for the open web. Microsoft wants developers to build for Silverlight. Those messages are VERY clear coming out of both camps now."

I would argue that Google is not in a war over developers for the sake of building an open web, but for the reasons I have already mentioned. Google's war is not won at the storefront, but at the same place that Firefox won its battle. They want the tech guys to get off their backsides and install their new operating system on as many Friends / Mum and Dad machines as possible. Yes they are battling over developers, not to write code for a specific purpose, although they are trying to win the developers with their code, but they want the developers to be inspired to change.

In the end the cool kids will still use whatever is put in front of them, they can't tell the difference between Greenday and My Chemical Romance. The only way to change what the average Joe is using is if we can be bothered enough to go out and do it ourselves and now that Google knows that, hopefully they can deliver an OS good enough for us to get out there and do it.

jQuery flickr widget

2009-11-25T22:12:00.008+11:00

This tutorial shows you how to build a jQuery widget for your flickr photos or for your favourite flickr group.

Here is a look at the widget we will be building:

Flickr Sydney, Australia Pool

You can download the code for this widget here.

To build the widget we need to grab the jQuery hoverscroll plugin which allows us to do the nice scrolling action.

The rest is just a simple call to flickr's JSON API to retrieve the feed and another function to scale the images to size.

If you want to read about importing your flickr feed with jQuery and JSON I suggest you read this helpful post.

To begin with we simply grab our feed via JSON:

$("document").ready(function() {
     $.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=32142572@N00&lang=en-us&format=json&jsoncallback=?", function(data){
          $.each(data.items, function(i,item){
          $("<img/>").attr("src", item.media.m).appendTo("#images")
               .wrap("
<li><a href='" + item.link + "'></a></li>
");
          });
          
          $('#images').hoverscroll({
               vertical: true,
               width: 166,
               height: 400
          });

The main part of the call is the jQuery getJSON call, this calls the flickr API with the group ID of the group you want to display. You can easily get this URL and ID as it is almost identical to the RSS feed of the group. This feed is displayed at the bottom of the page, so it's a matter of clicking on the feed, grabbing the URL and changing the format over to JSON as above.

To view the different kinds of feed that flickr offers follow this link here.

The jQuery hoverscroll plugin is then called to build our lovely scrolling widget. You can view more detail about how the plugin works here.

The next part of the script just loops over the images and scales them accordingly.

$('#images img').each(function() {
               var maxWidth = 160; // Max width for the image
               var maxHeight = 160;    // Max height for the image
               var ratio = 0;  // Used for aspect ratio
               var width = $(this).width();    // Current image width
               var height = $(this).height();  // Current image height
      
               // Check if the current width is larger than the max
               if(width > maxWidth){
                    ratio = maxWidth / width;   // get ratio for scaling image
                    $(this).css("width", maxWidth); // Set new width
                    $(this).css("height", height * ratio);  // Scale height based on ratio
                    height = height * ratio;    // Reset height to match scaled image
                    width = width * ratio;    // Reset width to match scaled image
               }
      
               // Check if current height is larger than max
               if(height > maxHeight){
                    ratio = maxHeight / height; // get ratio for scaling image
                    $(this).css("height", maxHeight);   // Set new height
                    $(this).css("width", width * ratio);    // Scale width based on ratio
                    width = width * ratio;    // Reset width to match scaled image
               }
          });

I won't go into detail as to how the above works, it is just some math to scale the image to the provide constraint. Here I have set maxWidth and maxHeight to 160px.

The rest is just a bit of HTML and css.

Enjoy!

Best jQuery games from across the net

2009-11-25T19:53:00.002+11:00

Today I'm going to look at some of the best jQuery games on the net. As javascript speeds get faster and the great things you can now do with jQuery make it possible to produce some good quality games. Although speed and sizes are a bit of a restriction to the type of game that can be produced (no 3D shooters yet) these are great games none the less and some are quite addictive.

I hope to show you a range of what is available. Although there are quite a few jQuery games out there, I chose these for their playability and completeness. You can tell these guys put in a decent effort to make a quality product.

I'd like to start with the jQuery pong clone. Why play against your friends when you can play against your browser! This game has a whole bunch of options that you can set yourself if you decide to download it for yourself including ball speed, score to play to and paddle sizes. Click on the image to follow the link.

The next game is extremely addictive, but based on a simple idea. In jCharacterfall, water drips from the ceiling and you stop them from hitting the ground by pressing the matching letter. As the game goes on the drops fall faster and faster. Hours of fun!

Next up is a sudoku game. This is a nice clean implementation and is a real challenge to get your name up in the highscores (not like all the other hacked high-score lists!). Only thing I think is missing is the ability to pencil in smaller guesses.

Sticking with the retro theme is an old fashioned snake clone. You know the score, snake goes round, eats stuff, crashes into walls.

The next one is really special and a lot of effort has gone in to building it. Jon Raasch has built a clone of the old NES game T&C Surf Designs. It looks and handles like the classic Nintendo game and the sprites look great.

If you have any more suggestions for great jQuery games leave a comment.

Have fun and enjoy!

jQuery weather widget

2009-11-24T20:38:00.007+11:00

In this tutorial we are going to build a jQuery weather widget. This widget is pure javascript and requires no back-end/server so you can place it on your blog or anywhere you like.

Please note: Information in this widget should not be taken as accurate under any circumstance and should not be used to make any decisions in any circumstance. It is purely a toy. We make no claim to its accuracy for any purpose.

You can get the code for this tutorial here.

The widget makes two main calls using JSON to retrieve the users geolocation and then to retrieve the local weather for that location. It also uses the jQuery cookie plugin to remember the details so that it doesn't need to make these calls each time the page reloads.

The two JSON calls are to the geoPlugin site and then to the geonames weather webservice using the retrieved longitude and latitude coordinates. Please check the terms and conditions from their site if you want to use this widget on your own site. It also uses Googles weather images.

Let's look at the first part of the javascript code. We begin with the jQuery document ready function:

$("document").ready(function() {
     if ($.cookie('loc_longitude') && $.cookie('loc_latitude')) {
          getWeather();
     } else {
          $.getJSON("http://www.geoplugin.net/json.gp?callback=?", function(data) {
                eval(data);
          });
     }
});

It begins by checking if the geocordinates for this user have been set for this user. If not it calls the geoplugin site to retrieve geolocation details.

function geoPlugin(data) {
     $.cookie('loc_latitude', data.geoplugin_latitude, {expires: 7}); 
     $.cookie('loc_longitude', data.geoplugin_longitude, {expires: 7});
     $.cookie('loc_country', data.geoplugin_countryName, {expires: 7});
     $.cookie('loc_region', data.geoplugin_region, {expires: 7});
     $.cookie('loc_city', data.geoplugin_city, {expires: 7});
     $.cookie('loc_country_code', data.geoplugin_countryCode, {expires: 7});
     getWeather();
}

The eval function above calls the geoPlugin function and sets the geolocation details in the cookie, this will be used in the getWeather function which you will notice is called above if the location details are already set.

function getWeather() {
     var latitude = $.cookie('loc_latitude');
     var longitude = $.cookie('loc_longitude');

     var loc_conditions = $.cookie('loc_conditions');
     var loc_conditions_img = $.cookie('loc_conditions_img');
     var loc_temp = $.cookie('loc_temp');
     var loc_humidity = $.cookie('loc_humidity');

     if (loc_conditions && loc_conditions_img) {
          setConditions(loc_conditions, loc_conditions_img, loc_temp, loc_humidity);
     } else {
          var url = "http://ws.geonames.org/findNearByWeatherJSON?lat=" + latitude + "&lng=" + longitude + "&callback=?";
          $.getJSON(url, function(data) {
               var clouds = data.weatherObservation.clouds;
               var weather = data.weatherObservation.weatherCondition;
               var temp = data.weatherObservation.temperature;
               var humidity = data.weatherObservation.humidity;
   
               var conditions_img = getConditions(clouds, weather);
   
               var conditions = '';
               if (weather == 'n/a') {
                    if (clouds == 'n/a') {
                         conditions = 'fine';
                    } else {
                         conditions = clouds;
                    }
               } else {
                    conditions = weather;
               }
   
                    $.cookie('loc_conditions', conditions); 
                    $.cookie('loc_conditions_img', conditions_img); 
                    $.cookie('loc_temp', temp); 
                    $.cookie('loc_humidity', humidity); 
                    setConditions(conditions, conditions_img, temp, humidity);
          });
     }
}

The getWeather function starts by retrieving all of the geolocation details from the cookie. It then checks the cookie to see if the temperature details have been set in the cookie, if they have it simply goes ahead and displays all the information in the widget by calling the setConditions function.

If the temperature details haven't been set in the cookie it then calls the JSON weather service using the latitude and longitude details from the first JSON call. It then calls the getConditions function to retrieve the correct image corresponding to the current weather condition.

function getConditions(clouds, weather) {
     if (weather == 'n/a') {
          switch (clouds) {
               case 'n/a':
                    return 'sunny.gif';
               case 'clear sky':
                    return 'sunny.gif';
               case 'few clouds':
                    return 'partly_cloudy.gif';
               case 'scattered clouds':
                    return 'partly_cloudy.gif';
               case 'broken clouds':
                    return 'partly_cloudy.gif';
               default:
                    return 'cloudy.gif';
          }
     } else {
          weather = weather.replace('light ', '').replace('heavy ', '').replace(' in vicinity', '');
          switch(weather) {
               case 'drizzle':
                    return 'rain.gif';
               case 'rain':
                    return 'rain.gif';
               case 'snow':
                    return 'snow.gif';
               case 'snow grains':
                    return 'sleet.gif';
               case 'ice crystals':
                    return 'icy.gif';
               case 'ice pellets':
                    return 'icy.gif';
               case 'hail':
                    return 'sleet.gif';
               case 'small hail':
                    return 'sleet.gif';
               case 'snow pellets':
                    return 'sleet.gif';
               case 'unknown precipitation':
                    return 'rain.gif';
               case 'mist':
                    return 'mist.gif';
               case 'fog':
                    return 'fog.gif';
               case 'smoke':
                    return 'smoke.gif';
               case 'volcanic ash':
                    return 'smoke.gif';
               case 'sand':
                    return 'dust.gif';
               case 'haze':
                    return 'haze.gif';
               case 'spray':
                    return 'rain.gif';
               case 'widespread dust':
                    return 'dust.gif';
               case 'squall':
                    return 'flurries.gif';
               case 'sandstorm':
                    return 'dust.gif';
               case 'duststorm':
                    return 'dust.gif';
               case 'well developed dust':
                    return 'dust.gif';
               case 'sand whirls':
                    return 'dust.gif';
               case 'funnel cloud':
                    return 'flurries.gif';
               case 'tornado':
                    return 'storm.gif';
               case 'waterspout':
                    return 'storm.gif';
               case 'showers':
                    return 'storm.gif';
               case 'thunderstorm':
                    return 'thunderstorm.gif';
               default:
                    if (weather.indexOf("rain")) {
                         return 'rain.gif';
                    } else if (weather.indexOf("snow")) {
                         return 'snow.gif';
                    } else if (weather.indexOf("thunder")) {
                         return 'thunderstorm.gif';
                    } else if (weather.indexOf("dust")) {
                         return 'dust.gif';
                    } else {
                         return 'sunny.gif';
                    }
          }
     }
}

getConditions is simply a couple of large switch statements to retrieve the correct image. Once this is returned the image and the conditions details are set in the cookie. The last step is calling the setConditions function to display the details in the widget.

function setConditions(conditions, conditions_img, temp, humidity) {
     var country = $.cookie('loc_country');
     var region = $.cookie('loc_region');
     var city = $.cookie('loc_city');
     var loc_country_code = $.cookie('loc_country_code');
     if (loc_country_code == 'US') {
          temp = parseInt(temp) + 32;
          temp_type = "F";
     } else {
          temp_type = "C";
     }

     $("#weather_widget").append("");
     $("#weather_widget").append("" + country + "
" + city + ", " + region + "
Temp: " + temp + "° " + temp_type + "
Humidity: " + humidity + "%
" + conditions.substr(0, 1).toUpperCase() + conditions.substr(1) + "
");
}

The rest is just a little bit of css and html.

Enjoy!

Christmas digital art from deviantART

2009-11-23T21:50:00.002+11:00

Hope everyone is starting to get into the festive spirit. Today I've had a good look through deviantART and selected some of my favourite designs. I hope you like them and they help to brighten your holidays.

The first one I picked is fractal art, there are a whole bunch of really good fractal art Christmas images so if you like this kind of thing make sure you browse the category.

The second picture I chose looks like a movie poster and subtle Christmas reference is just the icing on the cake to an already fantastic image.

I really like this next picture, you have to look at it a few times to decide how you feel about it.

This next one is a great Christmas card design, it's a shame that there isn't a larger version available. Some lucky people will be getting this card.

Here is another great fractal. It looks like Christmas flowers growing out of mould; kind of strange, but Christmas like.

This next image was actually the first one I chose and it really stood out amongst the others. Something stark and beautiful. It uses great Christmas imagery in a different context.

The last one is some art done over the top of an existing photo. A job well done that really captures the moment.

I hope wherever you end up and whatever you believe this Christmas that you have a fantastic time with friends and family.

Take care and enjoy!

What is most important in a browser? Microsoft discuss IE9

2009-11-23T19:41:00.001+11:00

Dean Hachamovitch, General Manager, Internet Explorer recently blogged on the future release of Explorer, IE9. Titled 'An Early Look At IE9 for Developers', the post covers the direction that Microsoft are aiming to take with the next release of Explorer. If you want a good idea of the reaction to this post I suggest you check out the posts comments.

A picture says a thousand words, so here are some pictures (and quotes) taken out of context and hopefully they will say something:

One common test of script performance is from Apple's Webkit team, the SunSpider test

Our goal is to deliver better performance across the board for real-world sites, not just benchmarks.

With IE8, we delivered a highly-interoperable implementation of CSS 2.1

Some standards tests - like Acid3 - have become widely used as shorthand for standards compliance, even with some shortcomings. As we improve support in IE for technologies that site developers use, the score will continue to go up.

A more meaningful (from the point of view of web developers) example of standards support involves rounded corners.

Another example of standards support that matters to web developers is CSS3 selectors.

Ultimately, we want to work with the community and W3C and other members of the working groups to define true validation test suites, like the one that we're all working on together for CSS 2.1, for the standards that matter to developers.

Google AJAX libraries CDN

2009-11-19T20:42:00.002+11:00

Are you using the Google AJAX libraries CDN for your applications? Google offers the simplest and fastest way to deliver the latest version of your favourite AJAX libraries over the net.

With a few lines of code you can grab your preferred libraries without having to download or host them yourself. You can even specify a specific version.

Libraries include:

I now regularly use this method to include jQuery and the jQuery UI and the speed is definitely comparable to hosting it yourself.

Here's an example of including jQuery 1.3.2:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 google.load("jquery", "1.3.2");
</script>

It also parses as valid HTML.

No need to worry about downloading another copy of jQuery just include the lines above to get the version you need.

John Resig also mentioned in the first jQuery podcast that eventually core plug-ins and add-ons will also be available across the CDN so look forward to seeing that in the near future also.

Enjoy!

jQuery Twitter streaming widget in 30 lines

2009-11-18T20:39:00.017+11:00

Today we are going to build a widget for streaming Twitter search results using jQuery. This widget only requires 30 lines of javascript and the rest is CSS and a small bit of HTML.

The widget takes in a search term, in the example we are searching for the term "jQuery". It then updates every 20 seconds (you can change the frequency). Each time it updates it places the latest results at the top and if the number of results exceeds 20 it removes the excess results from the bottom.

Search jQuery

You can download the code for the above widget from here.

Let's begin by looking at the HTML:

<div id='twitter_stream'>
     <img src='./images/twitter.png' style='position:absolute;right:5px;top:-2px;' />
     <p id="stream_term">Search jQuery</p>
     <div id='twitter_results'></div>
</div>

This is very simple and consists of the widget div, the Twitter bird icon, the heading and then the results pane.

The javascript is essentially one main function, load_tweets():

function load_tweets() {
     var last_ID = $(".tweet_result:first").attr("ID");
     
     if (last_ID) {
          last_ID = last_ID.replace("tweet", "");
          var url = "http://search.twitter.com/search.json?q=jQuery&since_id=" + last_ID + "&callback=?";
     } else {
          var url = "http://search.twitter.com/search.json?q=jQuery&rpp=5&callback=?"; 
     }
     
     $.getJSON(url, function(json) { 
          var results = '';
          $(json.results).each(function() {
               if (this.id == undefined) return;
               results += "<p class='tweet_result' id='tweet" + this.id + "'><a href='http://twitter.com/" + this.from_user + "' class='tweet_user'><img width='16' height='16' alt='" + this.from_user + " on Twitter' src='" + this.profile_image_url + "' /></a>" + linkify(this.text) + "</p>";
          });
          if (last_ID) {
               $("#twitter_results").prepend(results);
          } else {
               $("#twitter_results").append(results);
          }
     });

     $(".tweet_result:gt(20)").remove();
}

load_tweets() checks to see if there are already any tweets loaded by retrieving the ID of the first tweet (this will be the ID of the most recent tweet form the results).

If there were already tweets then it sets the URL to retrieve all the results since that ID by passing in the &since_id= variable.

If there wasn't any tweets loaded then it just grabs the 5 most recent results.

The results are then loaded in via JSON using the jQuery $.getJSON call. It loops over the results and adds them to the results string and then prepends the results string to the #twitter_results div.

The next bit of magic is the linkify function. This function builds us some nice links depending on the type of link provided:

function linkify(text) {
    // modified from TwitterGitter by David Walsh (davidwalsh.name)
    // courtesy of Jeremy Parrish (rrish.org)
    return text.replace(/(https?://[w-:;?&=+.%#/]+)/gi, '<a href="$1">$1</a>')
               .replace(/(^|W)@(w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>')
               .replace(/(^|W)#(w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
}

The rest is just a little bit of CSS styling and the final touch is in the document ready function to get our results to stream we use the setInterval function:

$("document").ready(function() {
     load_tweets();
     setInterval(load_tweets, 20000);
});

Hope you like it!

jQuery multi-tiered drop-up menu

2009-11-17T18:45:00.002+11:00

This post provides a working example of the drop-up version of the jQuery Superfish drop-down menu plugin. A cross browser multi-tiered menu plugin that has many great features; it looks great and works great and was designed by fellow Aussie Joel Birch.

Drop-up functionality works similar to drop-down functionality except that it works from the bottom up and menu options are placed at the bottom of the screen or element rather than at the top of the page or element.

You can view an example of the drop-up functionality here.

You can download the working code here.

You can visit the original Superfish site. Where you can view working examples and documentation of the original and also download the original code.

Superfish easily takes an multi-tiered unordered list and using CSS and jQuery generates a nice looking menu that can easily be styled to your liking.

The solution was discovered when I was looking for similar functionality for myself. I haven't found a similar solution yet that looks as good and works across all the major browsers.

Enjoy!

jQuery CSS stylesheet switcher

2009-11-16T20:48:00.005+11:00

This tutorial shows you how to create a CSS style sheet switcher using jQuery for your site. This style sheet switcher has conventient forward and back links for you to cycle through available sheets and incorporates the cookie plugin so that user preferences can be retained for later visits.

The switcher widget is built by looking at each stylesheet that has the .switch class and uses the link tag's CSS color value to decide the color of the swatch in the widget. Clicking on a particular swatch will disable other stylesheets with the .switch class and activate the selected style sheet allowing a user to choose their style preference. Users can also use the left and right arrows which will either cycle forwards or backwards through available stylesheets.

To view a demonstration of this in action go here.

To download the files for this tutorial click here.

To begin with we have our html file, it is made up of 3 main parts:

Our stylesheets each with a color style, and with the class switch (all other stylesheets will be ignored)
Our sheetswitch div that will hold the color swatches for users to select their stylesheet
The rest of the html body to be styled

To begin with our stylesheets for us to switch between will look like the following:

<link rel="stylesheet" class="switch" style="color:#23B2D2;" type="text/css" href="./css/styles_blue.css" />
<link rel="stylesheet" class="switch" style="color:#8BE487;" type="text/css" href="./css/styles_green.css" />
<link rel="stylesheet" class="switch" style="color:#F24633;" type="text/css" href="./css/styles_red.css" />

Notice they all have the .switch class and a color style attribute. Our jQuery code will loop over these stylesheets when the page loads. It will get the color style from each link element and use it to build the color swatches that appear in the sheetswitch div.

The sheetswitch div is made up of color swatches; colored squares that users can click on to change the stylesheet. It also has a left and right arrow for users to loop forwards or backwards through available stylesheets. The style for the sheetswich div sits in its own stylesheet styles.css, because this stylesheet does not have the .switch class it will be ignored by the javascript during switching.

Let's look at the javascript:

To begin with we loop over the .switch stylesheets and build up the colors array as follows:

var colors = new Array;

// Disable all .switch stylesheets and build array of colours
$(".switch[rel='stylesheet']").each(function() {
    $(this).attr("disabled", "true");
    colors.push($(this).css("color"));
});

We then loop over the colors array to build the swatches and append them to the #sheetswitch. This is followed by the right looping arrow:

$(colors).each(function(index, el) {
     $("#sheetswitch").append("");
});

$("#sheetswitch").append("/1rightarrow.png' />");

Next comes the click function for each of the swatches. The swatches are added in the same order as the sheets themselves so we can use the index of the selected element to set the active stylesheet. Once we get the index we disable all stylesheets, enable the selected index and then we store the value in our cookie:

$(".swatch").click(function() {
   $(".swatch").removeClass("swatch_hi");
   $(this).addClass("swatch_hi");
   var index = $(".swatch").index(this);
   $(".switch[rel='stylesheet']").attr("disabled", "true");
   $(".switch[rel='stylesheet']").eq(index).attr("disabled", "");
   $.cookie('mysite_sheetswitch_idx', index, {expires: 7});
});

Our next and previous links that correspond to the forward and back arrows are a little more complex. They find the index of the currently selected sheet. They also get the number of sheets using the size() function. Then either add or deduct 1 fom the index to select either the previous or next stylesheet. The length of sheets is used to determine whether we need to loop (either to the last or first element depending on which way we are going):

var selected = $(".switch[rel='stylesheet']").filter(function () { return 
$(this).attr("disabled") == false; });
var current_idx = $(".switch[rel='stylesheet']").index($(selected));
var length = $(".switch[rel='stylesheet']").size();

if (current_idx >= 0) {
 var next = current_idx + 1;
 if (next > (length - 1)) next = 0;
 
 $(".switch[rel='stylesheet']").attr("disabled", "true");
 $(".switch[rel='stylesheet']").eq(next).attr("disabled", "");
 
 $(".swatch").removeClass("swatch_hi");
 $(".swatch").eq(next).addClass("swatch_hi");
 
 $.cookie('mysite_sheetswitch_idx', next, {expires: 7});
}

The last step is for when the page loads, we check to see if a cookie is already set. If so we take the index value and set the stylesheet accordingly.

if ($.cookie('mysite_sheetswitch_idx')) {
   var idx = $.cookie('mysite_sheetswitch_idx');
   $(".switch[rel='stylesheet']").eq(idx).attr("disabled", "");
   $(".swatch").eq(idx).addClass("swatch_hi");
}

Currently no stylesheet is set by default, this could be implemented easily by yourself. It would also be quite easy to add a random, or disable all links.

Would enterprise adopt Google Docs?

2009-11-14T22:05:00.006+11:00

Google have announced in a recent interview with ZDNet Asia that within a years time that Google Docs should have enough functionality that most enterprises could "get rid of [Microsoft] Office if they chose to".

As I am currently working for a large company this is a bold statement to be making. From this side of the fence there are few things that would need to be considered before a switch like that could be made:

Is the feature set comparable?
Is the security comparable?
Is the application compatible with my equipment?

Is the feature set comparable? In the article it goes on to mention that MS Office is "an overkill tool for most people" and that "Microsoft's offering will become a specialized offering for office workers who need its additional functions". I would argue from this respect, if Google are still offering a cut-down version of Word that Word will still continue to stay on top in the enterprise. I also don't see the difference between what Google are referring to as "most enterprises" and "office workers"?

Is the security comparable? Most large enterprises have highly secured documents that need to be edited on a daily basis; why would an enterprise support two applications internally? Big business requires that highly sensitive files are encrypted before being sent over the internet. I'm not sure what Google offers on this front, but from business perspective the trust is not there.

Is the application compatible with my equipment? For a business to adopt Google Docs they would need to be sure that Docs was compatible with their other applications (printers, faxing software, cut and paste to other applications) etc. This may be the smallest hurdle but is something to be considered.

Looking at it form here, for a multinational to start using Google Docs they would decide this on a company wide basis. That means the decision to use Google Docs is a decision to support Google Docs worldwide on every machine in every country. I would suggest that for any large company the first three points would need to be satisfied before the cost/benefit could be looked at.

Besides enterprise edition, for people like my parents and for my own personal use, I look forward to a new improved Google Docs with excitement. My parents collect a lot of garbage on their machine and it would be great to use a cut-down operating system in combination with Google Docs. As it stands, it's hard to argue for them to move away from Office as the things that my Mum gets emailed are usually buried in powerpoint slides, excel sheets and word docs. You don't know how much fun it is when your mother calls every time there is a file with an extension that she can't open.

Tech Crunch today also speculated through a "reliable source" that the Google Chrome OS will be launched within a week. Not sure what to expect from this one as it has been previously suggested that the initial support will be targeted towards netbooks.

Disclaimer: Views expressed here about Google Docs are my personal opinion and have nothing to do with my employer.

New jQuery podcasts

2009-11-13T17:25:00.005+11:00

It's always nice to get surprises and yesterday I got three in the form of three jQuery podcasts. I wasn't even aware that they were coming and yesterday by sheer luck I came across one after the other. The three podcasts I'm referring to are yayQuery, the official jQuery podcast and Remy Sharp's jQuery (click on the iTunes podcast link) podcasts.

I haven't had a chance to listen to Remy Sharp's podcasts yet, but the two that I did hear were a special treat. Remy's has several podcasts already up his sleeve, but the other two only just started this week and are well worth the listen.

yayQuery is an informal discussion with four top class jQuery developers who chat about some of their own ideas and what they see going on around using jQuery. These guys spend a lot of time in the IRC channel and are quite in touch with those people who use jQuery the most. The end of the podcast has a nice surprise, well worth watching.

Picture of the yayQuery podcast

The official jQuery podcast will have a regular guest each week, this week was John Resig who talked further about jQuery in mobile phones, the jQuery project and more about the upcoming 1.4 release. At the end of the show the guys went over some of their favourite jQuery plug-ins and add-ons that were released in the past couple of weeks, so work hard and maybe you can get a mention.

Next week (18th of Nov) they will have Richard D Worth from the jQuery UI development team. If you have a chance you can catch the live stream from here. Alternatively you will need to wait till U.S. Friday morning when they put the edited cast on line. You can subscrive via feedburner here or search on iTunes to subscribe via iTunes.

If you can get the chance it may be preferable to listen live to the jQuery podcast as you can also participate in the online chat. USTREAM allows you to chat and use twitter while listening to the cast, its a good chance to ask a question. At the end of this weeks show John went over some of the questions asked in the chatroom at the end of the podcast so it's worthwhile sticking around.

The best part of both podcasts was getting an insight into some of the parts of jQuery that I haven't used in detail and hearing from the pros some best practices. yayQuery and the official podcast are different enough to be worthwhile to have and listen to both, so take time to check them out and you might prefer one over the other or both.

Enjoy!

jQuery - Submitting a form with an AJAX call to determine return value

2009-11-13T13:21:00.001+11:00

A quick tip for submitting a form that has an AJAX call and submitting the form from inside the AJAX success function.

The issue happens when a function is bound to the submit event on a form and you want to validate details of the form via an AJAX call. This will look something like the following:

$("#my_form").submit(function() {

 var some_data = ....whatever...

 var url = 'call_to_some_script_for_validation';
 
 $.get(url, {data: somedata}, function(response) {
  if (response == 'success') {
   return true;
  } else {
   // Display error msg, whatever...
   return false;
  }
 });

 return ???
});

The issue here is in the line return ???. What should you place here? If we place return true here 99% of the time it is not going to wait for your ajax call to complete so it will always return true. If we place false here how are we going to get the AJAX function to return true.

To start with we want our AJAX function to determine whether or not the submit was a success. Because the stuff outside the AJAX call is going to be processed faster you should include anything that could cause the function to return false outside of the AJAX call to appear first and have the AJAX function have the final say. To do this you should have our function return false and let the AJAX function decide whether or not to reverse this, see below:

$("#my_form").submit(function() {

 var some_data = ....whatever...
 
 // Any other processing that may cause us to return false early

 var url = 'call_to_some_script_for_validation';
 
 $.get(url, {data: somedata}, function(response) {
  if (response == 'success') {
   return true;
  } else {
   // Display error msg, whatever...
   return false;
  }
 });

 return false;
});

Now this is not the finished product. The issue with the return true inside the AJAX function is that it only returns true to the AJAX function itself and will not trigger the submit of the form. Your first thought may be to call $("#my_form").submit(); but this will only trigger the submit function action and end in an infinite loop. So how to fix this?

The easiest way to get around this issue once we have success is to unbind the submit function from your form before submitting, as follows:

$("#my_form").unbind("submit");
 $("#my_form").submit();

So in the end you should have something that looks like this:

$("#my_form").submit(function() {

 var some_data = ....whatever...
 
 // Any other processing that may cause us to return false early

 var url = 'call_to_some_script_for_validation';
 
 $.get(url, {data: somedata}, function(response) {
  if (response == 'success') {
   $("#my_form").unbind("submit");
   $("#my_form").submit();  
   return true;
  } else {
   // Display error msg, whatever...
   return false;
  }
 });

 return false;
});

Examples of beautiful information

2009-11-12T19:14:00.002+11:00

This post looks at several creative ways of presenting information. Each example, while presenting a large amount of information, combines together to make a work of art. Although it may not seem practical to combine these forms of presentation in your own pages and applications it is a good idea to think of information as more than just a collection of data.

As a software developer you may not spend much time thinking about the presentation of information. Much of the focus of making a site look beautiful is spent on the overall look and feel of a site, whereas a large portion of the information presented on sites and in applications is stuck in tables. Again, if you are a software developer, you may see a large number of forms and database result sets every day and we present most of this information in a flat grid.

The main point that can be taken from these examples is that data can be presented in a way that provides further meaning. The white space, the grouping of related information, the relative size and coloring all take on different meanings and enhance the raw data. By sticking data into a grid you remove a large portion of its context aside from the table headings and we are stuck of coming up with ways of how to highlight a particular row, minimising the context and the meaning down to its smallest possible level.

The speed at which a user can interpret information on a page is important, especially for applications used in daily work life. The longer your staff are spending unnecessary time on page the more money it is costing your business. Tools are a simple primitive thing and if your work application is overly complicated it is not functioning as a tool.

If you develop a site, think about the role the data plays in usability. Or, if you are selling something on a site, if you place your pricing in a grid what does this say about the different values on offer? Are all values the same even though one costs $20 per month and the other $240?

Take some time to look at the examples of well presented information and think about why they work and how they provide extra meaning to the data they are representing. Rather than taking away an idea of how you could present your data in a practical way, think about what techniques have been used to enhance the information provided; white space, the grouping of related information, the relative size and coloring etc.

The first example Gapminder presents comparative statistical information for countries around the world. You can view oil production vs. consumption or life expectancy vs. income per person. These statistics can be compared per person and per country.

The next example is a collection of similar sites. visual complexity provides a range of sites displaying complex visual information. It provides a gallery of information artworks. One of my favourites is the results of the 2009 eurovision song contest.

The last site is the Processing exhibition site. Processing is a programming language designed specifically for visual display. John Resig of jQuery fame also wrote a port of Processing to javascript. The exhibition page showcases many fine examples of displaying visual information using Processing. My favourite being the Oasis project, a display of spatially aware living creatures that swim around under a display of black sand waiting to be discovered in this art piece.

OASIS from yunsil heo on Vimeo.

Consider next time before placing your information in a box, can you enhance the information with a variety of methods. Should your users search the grid for their one row or be guided by a display of well presented enhanced information.

jQuery 2009 Conference Slides - jQuery 1.4 release

2009-11-11T17:21:00.000+11:00

This post covers two presentations that John Resig made at the 2009 jQuery Conference that was held in September. These presentations provide a great insight into the current state of jQuery and what we can expect in the upcoming 1.3.3/1.4 release.

Below I have embedded the two slideshows from the talks John gave. I'm still not certain if there is going to be a 1.3.3 and a 1.4 release. Ealier this year it looked like we were going to get a 1.3.3 release, but it has been mentioned that 1.3.3 is likely to be called 1.4 and there will be no 1.3.3 release. Quote: "We're much closer to shipping 1.3.3 now (which is likely to become 1.4, with all the new features that're being added)".

There are rumours that 1.4 will ship in January, but we'll have to wait and see. I recommend you look at my other post which goes in detail over some of the features that we are likely to see in 1.4. Of note is the dramatic increase in speed with the new Sizzle selector engine and an expected three time faster increase in speed. Also moving towards support for jQuery in mobile applications.

The first talk covers recent changes to jQuery and the upcoming release.

The second talk covers the state of jQuery and more of what is happening around the software (Google groups alternative, growth, moving to Git) etc. It is well worth the read to find out about the effort behind jQuery and the direction of the jQuery project.

For those of you who can't wait, you can get a copy of jQuery 1.4pre from the jQuery nightly build. As this hasn't been officially released/documented yet, I'm not sure what is already implenting, working or stable so you will need to have a look around for yourself.

Selectable font image replacement

2009-11-10T17:52:00.002+11:00

This tutorial provides a technique on how to implement cross-browser selectable font image replacement.

You can download the files for this example here. Note: the files do not contain the fonts. You can follow the links at the bottom of this post to obtain free fonts. You can view a demo of the functionality here.

After so many years of being stuck with a small number of web fonts it's a shame that there isn't a standards compliant solution to the problem. What do we want? An accessible (as in users don't need to have anything installed and turn everything off and the page is still readable), fast, usable (text should be selectable, single, double and triple click should work as expected as well as copy/paste) and minimal (easy set up, limited number of DOM elements) solution to the font issue.

Designers want to use any font available, developers want to be able to implement it without doing extensive hacks and tricks and users want to enjoy the beauty while having the styled text function as standard text.

Currently there are several ways to go about trying to achieve the above, but I would argue that none of them meets the criteria above. They either rely on flash, don't work across all browsers, the text isn't selectable in most solutions or they require a hell of a load of mark up. The main issue is the lack of a standard that is already implemented across all of the major browsers. We want a solution that will work in 90 plus percent of all of the browsers currently in use.

This solution requires a limited amount of mark up, works in all of the current major browsers (IE6/7/8, Chrome, Firefox, Safari 4 Mac and Safari 4 Windows), works in text browsers (tested in WebbIE3) and can be used with any TTF and OTF fonts. This works in an unobtrusive way to allow users to select and copy text and single, double and triple click functionality works in all browsers.

My solution is really a collection of parts of other peoples solutions glued together with jQuery. I would like to take credit for it and give it a fancy name, but I think the solution has been around for a while in parts, but not put together in a clever way. At the end of this tutorial I will give links to some of the sources who deserve credit for their work.

The answer is in three parts: php and GD is used to render the custom font, a little bit of CSS hackiness is used to provide the text selection and jQuery is the glue which holds it all together by determining the text and font to be displayed and doing a little bit of browser checking to see if opacity is supported to get IE to work.

So how is it done? We start with an element, say a h2 and add a pair of span tags inside with some text as follows. Each of these pairs of elements will have a special class for later styling; I have called mine font_substitue and inner.

<h2 class='font_substitute'>
<span class='inner'>This is my fancy text</span></h2>

Furthermore you can provide a second class to the h2 to determine which font to display, e.g. Anidka

<h2 class='andika font_substitute'>
<span class='inner'>This is my fancy text</span></h2>

Using jQuery we loop over each of the $("h2 .andika") classes and then retrieve the text from the span. Using the combination of the selector and the text we use jQuery to insert a background image on the h2 element by setting the src of the image to point to our php script. The php script serves a png image with our rendered font. CSS is used to hide our text and provide a solution to the selection problem. This is done using filters in IE and ::selection rules for Opera, Firefox and Chrome. The last bit and the most tricky is getting the line-height, font size, wrapping and word-spacing to line up. This can take some playing around but a seasoned CSS expert shouldn't have too much difficulty in getting it done.

I'm not going to go in to great deal on how the php font rendering is done, this solution has been around for several years now and the full article on how to do this can be read here. My php script also allows custom tracking (like kerning), word wrapping and custom line height. Also be warned that GD appears to render the images slightly differently (spacing, line height etc.) depending on which version you are using so you will need to do a bit of tweeking. I also took TJ Atkins great color matching function.

This solution provides us with an accessible, fast, usable and minimal solution that works in all current browsers without the need for the user to install anything extra, designers can have their fonts and developers only need to add a minimal amount of code to get it working.

Sources:
Stewart Rosenbergers - Dynamic Text Replacement
TJ Atkins - php Image Replacement
ultraniblet at gmail dot com - tracking
One of many sources for free (as in please read the license first) fonts - sources for fonts
jQuery - jQuery

Fonts for example:
Andika
Marketing Script
Sax Mono

Using jQuery with forms - part 3 (Selectors)

2009-11-01T19:46:00.002+11:00

This is the third in a series of tutorials on using jQuery to manipulate forms. In this series I will be looking at parts of the jQuery API reference in detail. In this tutorial I will be looking at forms and jQuery Selectors.

Basics

element

Matches all elements with the given tag name

// Can be used to select the following elements
 
$("select")
$("label")
$("input")
$("form")
$("textarea")
$("fieldset")
$("legend")
$("select")
$("optgroup")
$("option")
$("button")

Basic Filters

:first / :last

Matches the first or last of group of elements

// Selects the first button element in my form
$("#my_form :button:first"); 

// Selects the last password element in my form
$("#my_form :password:last");

:not(selector)

Filters out elements from a previous group that match the given selector

// Selects all of the input fields 
// that are not hidden
$(":input:not([type='hidden'])")

:even / :odd

Matches all elements with an even or odd index

// Hide all the buttons with an even index
$("#my_form :button:even").hide(); 

// Apply the odd class to all text input elements 
// with an odd index
$("#my_form :text:odd").addClass("odd");

:eq(index)

Select a single element by its index

// Selects the third radio element with the name browser in 
// the form (count starts from 0) and set it to checked
$("#my_form :radio[name='rad']:eq(2)").attr('checked', 'checked');

:lt(index) / :gt(index)

Selects all elements with an index that is either less than or greater than the one specified

// Remove all radio elements with name browser 
// that have an index less than 2
$("#my_form :radio[name='browser']:lt(2)").remove();

Content Filters

:contains(text)

Selects all elements that contain the specified text

// Select all labels that have the word detail
$("#my_form label:contains('detail')");

:has(selector)

Selects parents that contain the select area

// Matches all fieldsets that contain 
// at least one radio element
$("fieldset:has(':radio')")

Forms

The following special selectors are available for forms

// Matches all input, textarea, select and button elements.
$(":input");

// Matches all input elements of type text.
$(":text");

// Matches all input elements of type password.
$(":password");

// Matches all input elements of type radio.
$(":radio");

// Matches all input elements of type checkbox.
$(":checkbox");

// Matches all input elements of type submit.
$(":submit");

// Matches all input elements of type image.
$(":image");

// Matches all input elements of type reset.
$(":reset");

// Matches all button elements and input elements of type button.
$(":button");

// Matches all input elements of type file.
$(":file");

Form Filters

:enabled / :disabled

Selects elements that either have or do not have the disabled attribute set

// Select all the textareas that are disabled and enable them
$("textarea:disabled").enable();

:checked

Matches elements that are checked (typically checkboxes, radio)

// Select the value of the checked radio element with name browser
$(":radio[name='browser']:checked").val();

:selected

Matches option that is selected (typically select element options)

// Get the text value of the select element named cheese
$("select[name='cheese'] :selected").text();

If you found this post useful, here are part 1, part 2, and part 4 of this series.

Using jQuery with forms - part 2 (Core)

2009-11-01T19:45:00.002+11:00

This is the second in a series of tutorials on using jQuery to manipulate forms. In this series I will be looking at parts of the jQuery API reference in detail. In this tutorial I will be looking at forms and jQuery Core functionality.

jQuery Object Accessors

each(callback)

Applying a function to each of the elements in the form

// Loop over each of the text elements in the form #my_form
 and set their background color to red if they are empty
 
$("#my_form :text").each(function() {
 if (!$(this).val()) {
  $(this).css('background-color', 'red');
 }
});

size()

Returns the number of matching elements

// Alerts the number of password elements in the form
 
alert($("#my_form :password").size());

eq(position)

Returns the element at the specified position

// Returns the third radio element with the name browser in 
the form (count starts from 0)
 
$("#my_form :radio[name='browser']").eq(2);

index(subject)

Returns the index of a matched element if found (starting from 0) otherwise -1

// Alerts the index of each radio element amongst its siblings

$("#my_form :radio").click(function() {
 alert($(this).parent().children(":radio").index(this));
});

If you found this post useful, here are part 1, part 3, and part 4 of this series.

Free large icon sets for commercial and personal use

2009-10-28T17:40:00.002+11:00

Thank God for the open source community and those people who are willing to give up their time to produce top quality goods for us all to share. In this post I have a whole bunch of top quality free (as in read the license before you use them) icon sets for your personal and commercial sites.

Why is important to have a post that provides icons for commercial use? Besides being handy to have your own pool of quality icons that you can use on any site, many developers start out working on small commercial projects and it's hard to come across a range of good quality icons. Sets such as FAMFAMFAM pop up all over the web and it was the first free icon set I ever worked with and it's still used in many projects today.

I don't want to provide you with links to sites with hundreds of sets where you have to wade through to find anything decent and I don't want to provide you with "80 free icon sets for commercial and personal use" where most of the sets only have 5 icons or only two out of eighty sets can be used in commrecial projects. Folks, this is the good stuff; five sets of icons with no less than 100 icons in each.

In order to share the love, I have provided a link to the actual site where the icons reside not just a direct download link. These people have taken there time to design some top quality icons for us all to use so take the time to have a look around while you are there.

Note: licenses change, please read (and obey) the license of each set at the time of download

FAMFAMFAM Silk Icons 700+ icons

A collection of over 700 16x16 icons in .png format.
This collection is great for CMS and dashboard sites or anywhere requiring several smaller sized controls.