The Code

Here’s how to setup a simple chart. you need to include the jQuery framework as well as the highcharts.js file and excanvas.js file for IE users which you’ll get in the download from Highcharts. once you’ve got that setup simply paste this into your document head, and create a div with the id ‘graphDiv’, this is where the graph will render to. Note in the first few lines of setup code at the top of the script we specify this along with the chart type. In this case we’re using a bar chart. Below that we have the setup title parameter which is the main label for the graph along with the labels for the x and y axis.

You should be left with a graph as shown below.

   $(document).ready(function() {
      var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'graphDiv',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Anne',
            data: [1, 0, 4]
         }, {
            name: 'Martin',
            data: [5, 7, 3]
         }]
      });
   });

NOTE: the demo below is not of the code above. If you want to play around with the code for the demo you can simply copy the source from your web browser whilst viewing the demo

jQuery Version

So below is a simple ‘click’ function that basically gets the value of the name attribute from any link that we set on our page and sends it to the analytics code at the bottom of our document.

Here’s an example of a link:

<a href=&quot;http://www.google.co.uk/search?hl=en&rlz=1G1GGLQ_ENGB314&q=papermashup.com&btnG=Search&meta=&aq=f&oq=name=&quot;papermashup search on Google;&gt;Search Google&lt;/>

$('document').ready(function () {
    $('a').click(function(){
        Pagetracker._trackPageview('/outgoing/' + $(this).attr('name'));
		});
	});

This is the analytics tracking code that will go just before the closing body tag on your page.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6393355-53");
pageTracker._trackPageview('/outgoing');
} catch(err) {}</script> 

Mootools Version

This is exactly that same technique as above with the jQuery version but replicated with Mootools.

window.addEvent('load', function() {
		$$('a[name]').each(function(el) {
			el.addEvent('click',function() {
				var dd = '/outgoing/' + el.get('gaid');
				_gat._getTracker("UA-YOUR TRACKING ID")._trackPageview(dd);
			}.bind(this));
		});
});

So to sum up. To make your links easier to read in Google analytics add the name attribute to any link so when it’s clicked it will register with Google.

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.

Take Time To Learn

In order to get into your new programming language you need time and commitment to perfect your new skill. Take the time to spend a day learning rather than and hour here and an hour there, you’ll learn more this way. it took me about a week to get comfortable with jQuery. I use jQuery everyday so it was relatively easy to get to grips with as the learning process was continuous, however you need sleep so your brain can de-fragment everything you’ve learnt that day.

Buy a selection of books

The truth is you just can’t learn a programming language in 24hrs, some books purport to teach you the basics in 24hrs. I’ve never found these books useful. I’d recommend buying a selection of books for whichever language your learning and sit down and read the basics. You’ll find some books easier to read than others so pick your books carefully. Remember you won’t be able to learn everything from a book but it’s a great starting point to start to understand the logic.

Collect tutorials and demos

Start building up a folder of download demos that you can refer to and reverse engineer. I find this very useful, and still do it if i want a quick fix for a project. Reading tutorials on your specific language will also give you a better understanding. generally tutorials are short and sweet and give you all the info you need to know.

Bug fixing

It’s inevitable that your going to run into code errors. Don’t pull your hair out, we all go through it, work through the error and go back on yourself to find out what the problem was. If your building an application, don’t just code it all then test it. Test your code as you go along, then if you find an error you’ll quickly be able to identify the problem.

Here’s a quick example of an ajax request with Mootools. the code below is from sandmoose.com. However I have modified it to get the data using the twitter search api.

So the script contains 4 functions, the first function ‘initializeContainer’ makes a new ajax request to our file, in this case ‘twitter.php’. The next function initialises the fade out effect, and tells the function that onComplete to trigger the function ‘updateContainer’. This function puts the data from our file ‘twitter.php’ into the div with and id of contain, once this is done it triggers the function ‘fadeinContainer’ which fades the contents of the div back in.

You need to include the mootools framework, here’s the Google hosted link:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js" type="text/javascript"><!--mce:0--></script>

The Code:

function initializeContainer() {
	new Ajax('twitter.php', {update:'contain'}).request();
}

function ajaxRequest() {
	$('contain').effect('opacity',{duration:1000, fps:50, onComplete:updateContainer}).start(1,0);
};

function updateContainer() {
	new Ajax('twitter.php', {update:'contain', onComplete:fadeInContainer}).request();
}

function fadeInContainer() {
	$('contain').effect('opacity',{duration:1000, fps:50}).start(0,1);
}

We need to initialise the function onload.

<body onLoad="initializeContainer()">

After browsing the vast space that is the internet, i stumbled upon a great piece of code that, depending on the number of words in a div automatically adjusts the font size. This could be really useful if you have a list of user feedback, that you want to jazz up.

So whats the code doing? Simply put. The code looks for the text within class ‘.text’ then counts the number of words by exploding the text where there is a space, then its just a matter of putting in some if statements to adjust the font size using ‘el.setStyle’.

The Code:

window.addEvent('domready',function() {

    	$quote = $$('.text p:first-child');

        $each($quote,function(el) {

            var $numWords = el.get('text').split(' ').length;

                if (($numWords >= 1) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ($numWords < 10)) {
                    el.setStyle('font-size','36px');
                }
                else if (($numWords >= 10) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ($numWords < 20)) {
                    el.setStyle('font-size','32px');
                }
                else if (($numWords >= 20) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ($numWords < 30)) {
                    el.setStyle('font-size','28px');
                }
                else if (($numWords >= 30) &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; ($numWords < 40)) {
                    el.setStyle('font-size','24px');
                }
                else {
                    el.setStyle('font-size','20px');
                };

            });

    	});

make sure that you include the mootools core js file.

The HTML:

<div class="text">

Don't expect me to write anything interesting in here as this is really just a test! but you can check out the demo over at papermashup.com</div>

Credit to Chris Coyier over at CSS tricks for this one.