Category Archives: Web Development

Development Web Development

Worried about learning something new? Read on…

Learning

Image source – Flickr

A couple of years ago I was faced with a bit of a personal quandary.  I figured that, to progress further in my career I would likely need to learn some new technologies other than Office products and VBA and settled on web development.  After about ten years of using just the one technology I started to worry a little bit and even questioned my abilities to pick up stuff I hadn’t really looked at before..  Now that I’ve been at it for a while I wanted to quickly post answers to the questions I was asking myself then:-

What if I get stuck?

You will.  Google, however, is your friend.  I have no developer friends and very little in terms of a support network for general web development and design stuff, but I’ve coped pretty well.  There hasn’t been a single question I’ve had that I’ve not been able to get the answer for myself through search or posts on sites such as StackOverflow.  In addition to that, there are a whole host of sites and tutorials that can point you in the right direction.  Getting involved in social networking is also useful!  Find well known people who are experts in the field and follow them – you’ll be surprised just how much you can soak up just by reading their tweets/status updates and reading links they provide.

What if I don’t get it?

You will.  The best advice I can give here is that the best way to learn is by doing.  Just reading an article on jQuery, for example, won’t teach you enough to be able to use it. You need to practise, make mistakes, fix them, and then practise again.  The only way to successfully pick up anything new is to keep at it.  Don’t stress out if you keep forgetting things, just keep on going back and repeating what you’ve already done.  It’ll stick, eventually, I promise.

What if the new stuff I’m learning makes me forget stuff I already know?

I worried about this one a lot.  Being reasonably proficient in VBA, I worried that learning a new language like Javascript would confuse me.  I was concerned that I would get the two mixed up and somehow start writing one when I needed to write the other.  It never happened.   The basic answer to the question is this – It won’t, as long as you keep on working at it.  Like anything, if you stop doing something and don’t come back to it for some time you’re more than likely to become rusty at it.  I was good with Physics, Biology and Chemistry at school but there’s no chance I’d remember how to do even half that stuff now if I was asked, but that’s because I don’t use it any more.  Keeping on using the tools you’re already proficient with will make sure you don’t forget the stuff you already know.  The new knowledge won’t push it out of your brain – don’t worry.

But there’s so much to learn!!

Yep, there is..  In fact, there’s probably more to learn than your brain has capacity to take in.  Don’t stress about it though – you can only remember/absorb so much.  I would suggest starting with the basics and as you progress you can pick up the bits you think you’ll actually need to learn.  For web development, for example, start with HTML and basic CSS and then decide whether or not you need to learn CSS3 (you do) and jQuery/Javascript (you should).  There are a massive amount of libraries, frameworks and techniques to learn that you’ll probably never need.  If there are some that you need only once, don’t go crazy about learning them completely – just learn the bits you need to go on with.  There’s also nothing wrong with using or tailoring something somebody else has used and made available online.

Whilst this post relates mainly to web development, it applies to pretty much any new subject that you want to learn.  My main advice to you?  Go for it.  It can’t do any harm, and broadening your horizons also has the potential to open up many more possibilities in life and your career.

Until next time..  Comments as always are welcome.

Web Development

What is jQuery, and why should I use it?

Developing for the web can be a tricky business.  HTML and CSS alone can be tough enough to contend with, but add Javascript to that and you’ve got a whole different ballgame.  It’s not a particularly tricky language to learn the basics of, but some of the work you need to do to support the myriad of browsers in the market at the moment can be a bit of a bind.

Luckily, about 6 to 7 years ago, jQuery was released to make our lives easier.

JQuery is a Javascript library.  By that I mean it is a collection of functions designed to take the sting out of some of the trickier aspects of programming using Javascript, especially when involving manipulating the DOM (which stands for ‘Document Object Model’ if you didn’t already know.  It’s basically the ‘model’ of a webpage, including all of the HTML elements – more on this in another post maybe).

Using jQuery rather than Javascript means you can carry out some quite complex coding on your webpages and applications that work in most compatible browsers without having to know all of the required syntax.  It’s actually that popular even seasoned Javascript professionals use it as a part of their day to day development workflow, as the developers have made it so easy to implement (and so efficient) it saves re-inventing the wheel and coding from scratch.

When I first came across jQuery I didn’t like the idea of using a library.  To me it almost seemed like cheating, as if I was using somebody else’s code to do the work I should have been doing, but after some time under the hood I wouldn’t go back to coding without it.  Add to that the simple fact that I don’t have to worry about cross-browser issues and I’m a much happier developer.

So, what does jQuery do?;

You need more reasons to use it?  Here’s a brief list of things that make jQuery indispensable, in my opinion:-

  • jQuery makes traversing and manipulating the DOM super easy, thanks to a very intuitive CSS-like way of selecting page elements.
  • Otherwise complex effects and transitions (such as fading in and out) are made extremely simple.  In fact, the fadeIn function in jQuery allows you to do in one line of code what would take tens of lines in the equivalent pure Javascript.
  • It is fully supported and has a massive community, plus there are a raft of amazing websites and books on the subject to really help you along the way.
  • Plugins.  There are literally thousands of plugins that enhance jQuery functionality, making even more complex web development tasks easier.

Look out for more posts on web development (including some about jQuery) in 2013!

Charts Web Development

Flot tutorial: Creating a simple bar chart

I thought I’d take a slightly different direction re charting and data visualisation today and offer up a quick and easy tutorial on creating charts for the web using a jQuery plugin called ‘Flot’ (for those not in the know, jQuery is a javascript library developed to make web-based programming easier and quicker. There’s too much of it to talk about now, but if you’re interested follow this link).

So what is flot?

Flot is a charting library designed to make creating charts for the web an easier task. Without such a library there’s a pretty big learning curve and work just to get a few lines drawn on a webpage. Flot takes all that fuss and hassle away and just allows us to get on with creating stuff. OK, there’s still coding that needs to be done, but it’s simplified greatly.  Another great thing about flot is that is open-source and, as such, updated reasonably regularly.  There was a time when there were hardly any updates, but there now seems to be some movement.

In this article I’m just going to take you through a very basic tutorial on creating a simple bar chart using this brilliant tool.

What do I need?

Nothing really, just a computer with a text editor and a browser.

Setting up

First of all, create a folder called ‘Flot Learning’.

The next thing you need to do for this tutorial is place three javascript libraries in your folder. You can download the latest version of Flot here as a zip file.  Unzip the file and copy these three files to your folder:-

excanvas.min.js
jquery.flot.js
jquery.js

These are the javascript files that will do the heavy lifting for you. The excanvas file is needed if you want your charts to display in IE6/7. Without it, nothing will display in these earlier browsers. You’ll notice there are a lot of other js files in the download, but we won’t need these for this example.

OK, now create a new file in notepad (or your web development IDE, if you have one) and call it flot-simple.html (or whatever name you like).

With the file now open, copy and paste the HTML below. This will act as your template for the code to follow:-

<!DOCTYPE html>

<head>
<title></title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="excanvas.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

<style>
body {
     font-family: Arial;
}

#mycanvas {
     width: 500px;
     height: 300px;
}

</style>
</head>

<body>

<div id="mycanvas">

</div>

<script>

</script>

</body>
</html>

Let me quickly talk you through what this template is doing. In the three <script> lines we are linking to the three files you downloaded earlier. Following this we have some style instructions for the div. Normally you would put your style instructions in a separate file, but for simplicity’s sake I thought I’d add some page-level styling.

Finally we’ve created a div called “mycanvas”, which is the placeholder for our beautiful bar chart later on. The code to create the chart will be entered within the script tags near the bottom.

Make sense so far? If not you might need to read up a little bit more on basic HTML stuff to fully understand the meaning of the code in your file.

OK, then. Save your file and open it up in your browser and you should see absolutely nothing! If that’s the case we’re ready to move on.

Building the chart

In the bottom script tag, type the following:-

$(function() {

});

This is the wrapper for your charting code.

The first thing we need for our chart is some data. Let’s create a chart looking at seasonal sales figures for 2011:-

Spring:  2010
Summer:  2543
Autumn:  2520
Winter:  2354

Let’s start by putting the values into an array for use later. Type these bits inside the function we’ve just created:-

var myData = [[1,2010], [2, 2543], [3, 2520], [4, 2354]]

You’ll notice that the data is entered within a pair of square brackets, and each individual data point is entered within separate comma-separated square brackets, each of which contains two values. The first is the index of the data point you are plotting, and increments by one in this case, and the second is the value you want to plot on the chart.

OK..now the magic happens. Add the following:-

$.plot($("#mycanvas"), [
     {
          data: myData
     }
]);

The <script> section of your html file should now look like this:-

<script>
$(function() {
     var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

     $.plot($("#mycanvas"), [
          {
               data: myData
          }
     ]);

});
</script>

Save your file again and refresh the page in your browser. If everything is as it should be you should have something that looks like this:-

Do you? Excellent – we’re well on our way. OK, so you’ve created the most basic of charts using flot. No labels, no formatting, nothing. The default is a very simple line chart, as shown. Now we need to do something about how it looks. Let’s start by turning it into a bar chart, shall we? It is worth noting at this point that the chart is displayed just like any other page element, so you can move it around and display with any other content you choose. for this tutorial however we’re just going to stick with a chart on the page.

After the ‘data: myData’ part, add a comma, and on the next line type this: –

bars: { show: true }

(Please note, anything in curly brackets usually indicates something where multiple comma separated values can be added.

Refresh your browser and you should now see this:-

Happier? It’s great, isn’t it? I don’t like the colour much though, so let’s have a stab at it. Add another comma, and on the next line add:-

color: "#454d7d"

Save and refresh your browser again:-

So far so good? The color property must be in quotes and can be either a html color (ie ‘Gray’, ‘Red’ etc) or a color using hexadecimal notation as we just did.

Right then. What else is missing? I’m personally not too keen on being able to see the grid through the bars, so I’m going to change the opacity of the fill in the bars. We do this by adding another item between the curly brackets in the ‘bars’ section, so it looks like this:-

bars: {show: true, fill: 1}

The ‘fill’ property takes a value from 0 to 1 and acts as the opacity of the fill colour of the bar. The closer to 1 the less the opacity (or see-through-ability). Save and refresh again!

Better, but now it looks a bit too blocky. I’d like the bars to have a border…

In theory the bars already do have a border, it’s just that they are the same colour as the fill inside the bars, so what we need to do is change one of them. In Flot there is a fillColor property, which is entered under ‘bars’, so let’s for now just add that and add a lighter shade of blue. Your code for the bars should now look like this:-

bars: { show: true, fill: 1, fillColor: "#757dad" }

Note again that the fillColor property is entered within quotation marks as hexadecimal notation.

For reference (and just in case you’re getting lost at all), the code in the script tags should now look like this:-

<script>
$(function() {
     var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

     $.plot($("#mycanvas"), [
           {
                data: myData,
                bars: { show: true, fill: 1, fillColor: "#757dad" },
                color: "#454d7d"
           }
     ]);

});
</script>

Save and refresh!! All good so far:-

Right then. What’s missing now? We could do with better labelling of the x-axis, couldn’t we? Let’s get started!

There are a few ways we could go about doing this, but I’m going to opt for one which makes editing your chart much easier. We’re going to create an Options variable and store our display options in that. Add the following to your code, before the $.plot part of your code:-

var Options = {

}

The options for how the chart will display will appear as comma separated values between the curly brackets. Let’s start by changing the x-axis. We need to add labels, so let’s do that. Add the following between the curly brackets:-

xaxis: {ticks: [[1,"Spring"], [2, "Summer"], [3, "Autumn"], [4, "Winter"]] }

And click save. All we’ve done here is the same as we did when we added our data. We’ve four sets of comma separated values for each of the areas we’re reporting on. Make sure the first figure in each set (ie the number) matches the same number in the data).

If you were to refresh your browser at this point you wouldn’t see much, because we’ve done nothing with the new information. What we need to do is to add it to our Flot code.

Flot options are added to the $.plot part right after the last square bracket. In our case we’re just going to type the name of the variable (Options). Your code should look like this when you’ve done:-

<script>
$(function() {
     var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

    var Options = { xaxis: {ticks: [[1,"Spring"], [2, "Summer"], [3, "Autumn"], [4, "Winter"]] } }

     $.plot($("#mycanvas"), [
           {
                data: myData,
                bars: { show: true, fill: 1, fillColor: "#757dad" },
                color: "#454d7d"
           }
     ],Options);

});
</script>

I’ve highlighted the new code we’ve just discussed in blue to make it easier to see where it fits.

And…save and refresh one more time! You should see this:-

Not too bad…not too bad at all!! However, the finicky part of me isn’t happy that the x-axis labels don’t appear under the bars. Can we fix it? Yes, we can! Go back to the actual plotting code and add the following to the end after another comma:-

align: "center"

Which should leave your plot code looking like this:-

     $.plot($("#mycanvas"), [
           {
                data: myData,
                bars: { show: true, fill: 1, fillColor: "#757dad", align: "center" },
                color: "#454d7d"
           }
     ],Options);

Let’s save and refresh one last time for now. Here’s what’s left:-

Wonderful! Much, much better, don’t you agree?

And that’s it for now, I think. There’s so much more to Flot in terms of formatting, but I’m going to leave it here as I think you’ve learned a lot already. I’ll come back with a second part to this soon to discuss more formatting options, including grid lines and legends. If, in the meantime you want to learn more, Flot has some really good in-depth documentation here. It might be a little confusing if you’re not a javascript programmer, but if you use it based on the boilerplate code we’re left with it shouldn’t be too difficult to experiment with to make some great charts.

Flot doesn’t just do bar charts, either.  Check out the examples on the Flot website for some of the really cool stuff you can do with it.

Give the code a whirl and play around with some of the settings – if you’ve any questions or comments on this tutorial please do leave them after the post. I hope this has been of use to you and will be back soon with more Flot goodness!!

Finally, here’s the entire code we’ve just created:-

<!DOCTYPE html>

<head>
<title></title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="excanvas.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>

<style>
body {
     font-family: Arial;
}

#mycanvas {
     width: 500px;
     height: 300px;
}

</style>
</head>

<body>

<div id="mycanvas">

</div>

<script>
     $(function() {
          var myData = [[1, 2010], [2, 2543], [3, 2520], [4, 2354]];

          var Options = { xaxis: {ticks: [[1,"Spring"], [2, "Summer"], [3, "Autumn"], [4, "Winter"]] } }

          $.plot($("#mycanvas"), [
               {
                   data: myData,
                   bars: { show: true, fill: 1, fillColor: "#757dad", align:"center" },
                   color: "#454d7d"
               }
         ],Options);

});
</script>

</body>
</html>