Note: this post isn’t about the cleaning brand.

Whether you’re new to web development or not, no doubt you’ve heard of ajax somewhere on the web.  Often considered tricky or fiddly to implement, libraries like jQuery have made it not only accessible, but straightforward to use.

In this article I want to explain in the simplest terms the general concept of ajax and how it works in order to give you a good overall image of what is happening behind the scenes in pages that use the now seemingly ubiquitous concept.   Whilst a lot more does happen behind the scenes than I discuss here, I think the basics should be enough to begin with.

So, what is ajax exactly?   Ajax stands for Asynchronous Javascript And Xml, which nowadays I suppose is a bit of a misleading term, but the concepts are still sound.  It describes the fact that a request can be made via javascript code to another server asynchronously (ie, without any perceivable hangup in the browser) and the browser can deal with the returned data and even update the page you are looking at in real time without having to refresh.  That’s my simplified take on it, anyway.

AJAX these days is pretty much everywhere, from Google Maps to Twitter, and basically describes any action that does something with data that isn’t on the page you’re currently looking at.  Dynamically and without having to click the refresh button, new content can be added to the page and databases can be updated.  It’s one of the steps towards making web applications behave more like native desktop apps and is one of the technologies that makes applications like (for example) Google Spreadsheets work.

How does it work then?  Let’s start with webpages in general.  When you visit a URL, the following happens (at the simplest level):-

1. Your browser sends a request to a url and awaits a response.
2. The receiving server processes the request and sends back some content (likely html).
3. This data/content is then received, parsed, processed and rendered on screen in the browser.

You don’t really see any of this happening, you just press enter, or click a link, and a few seconds later, you see some content on the page.  Next time you click a link imagine what is happening (at some speed, I must add) behind the scenes.  Fascinating stuff, isn’t it?

So.  On to ajax.  How does that work?

You probably won’t be surprised to hear that more or less the same thing happens, only in the background and without any movement away from the page you’re looking at.  Lets say you’re looking at a page with a button on that, when clicked, pulls the latest weather report from another site (such as  the BBC) and displays it on your page.

Here’s what happens (again, oversimplified):-

1. You press the button
2. Some javascript code reacts to the pushed button by sending a request to a url, after which it awaits a response.  You can still continue to use/view the page whilst this happens.
3. The receiving server processes the request and sends back its response to the function that called it.  Again, this can be html, but could also be text, xml or another data format (such as JSON).
4. The function that was called by the button press listens out for a successful response in answer to the request it made.  Once it has received this, it receives the data that has been sent back and does something with it.  In our example, it is some weather data.  If the response is an error, it can be programmed to react accordingly.
5. Another part of the same function, or another one, processes the received data and dynamically displays something on the active webpage.  If an error occurred at some point, the function could display an error message in the same way.

Amazing stuff, isn’t it?  The general technology of ajax is driving much of the web today, from live updates on twitter to google maps.  Getting your head around the concepts of what is happening is the first step in being able to use it yourself.

Now you know the basics, the next thing is to learn how to use it.  As mentioned earlier in the article, there are a lot of pre-built javascript libraries that can abstract and simplify a lot of the complex code and make it easier to use and process the returned data.  jQuery is a great example and provides some extremely straightforward ways of dealing with ajax, especially if you are designing for browsers that might deal with ajax in subtly different ways.

In a future article I’d like to post more about ajax, including a couple of tutorials on how to implement it in your pages.  Until then, why not do a little research yourself on the web?

Comments and questions are, as always, very welcome.

This part in particular has made me think a little about the way I have been running 2toria over the past couple of years.  I’ve been looking at finding useful tutorials, or things that are new (to me anyway) without concentrating on the stuff I consider to be ‘simple’ and ‘straightforward’, even when I was posting about Excel.  I’ve also avoided posting about things that I might not fully understand.

The main reason I originally set up 2toria was to share knowledge that I’d picked up with you guys, as well as to help my own learning along the way.  I’m constantly learning new things and I don’t ever want to stop, but for some reason I still find myself scratching around for content to post on at times.  I usually think of things, but sometimes they seem too simple or too complicated and I put them off.  I also sometimes know a little bit about something, but don’t want to post about it in case I get something wrong and face criticism for providing misleading or incorrect information.  Sometimes I find myself with an opinion or idea about something but again don’t post just in case I’ve got the wrong end of the stick or I’m just plain wrong about it.

Starting today, that’s going to change.  I want to concentrate on more regular posts, tutorials and discussions on the site, because I feel that by doing it, it might add something that’s of use to somebody, maybe even you.  The very concept that something I write might be of use at some point is a very rewarding one.

Looking at the past year’s most popular posts, they are all posts I’ve done at some point where I’ve shared something I know or have recently learned with the world.  Here are the top five for the year:-

Flot tutorial: creating and simple bar chart

Excel tip:   Display the name of the last user to save a file

Excel quick tip: Return the cell address of the maximum value in a column

Editing Excel charts in Illustrator/Inkscape

SQL Server:  Show the date a table was last modified

These have all been useful to somebody (hopefully) at some point, and they were all knowledge that I shared with others that I’d probably picked up on more or less the same day.  It feels great that people come across this content, even though somebody has probably written similar in the past.

So, to summarise, I intend to start writing much more from now.  I’m not the most knowledgeable person in the world in the subjects I find interesting, but I have stuff to say.  I might not get everything right, but it’s better than sitting here with my mouth/laptop shut.

It’s time to get back on track and just write.

Lea Verou’s Bsc thesis explains (throughly) the inner workings of Dabblet.  Very interesting read.

Social Roulette has a 1 in 6 chance of deleting your Facebook account.  Do you feel lucky?

Christian Heilmann urges you to play with things. 

Had a bad day?  It’s just a day, in the grand scheme of things, and as it happens, that’s not much at all

Firebug lite is no longer being worked on or supported.  Want to contribute to its future?

Of no point whatsoever, but I love it

CSS Zen Garden is coming back for its tenth anniversary

First of all, let’s create a simple html page which contains a header and the image we want to use.  My starting html looks like this:-

<!DOCTYPE html>
<html>
   <head>
      <title>Polaroid effect in CSS</title>
      <link rel="stylesheet" href="pol-style.css" />
   </head>
<body>
      <h1>Polaroid-style border effect using CSS</h1>
      <div class="polaroid">
          <img src="polaroid-images/doggie.jpg" />
          <h2>This is my dog</h2>
      </div>
</body>
</html>

It’s a fairly simple html file, with a link to a stylesheet and an image in separate folders for the project.  I’ve created a div with class name of ‘polaroid’, which will be used to style the image to make it look like a polaroid.  As far as HTML goes, that’s it.  The rest of the work will be done with the CSS.

So far then, we have this:-

Nothing much to get excited about, really, apart from the dog (which isn’t mine, by the way – I got the image from here).

Right, then.  So, how do we make the image look like a polaroid?  Here’s the CSS I used:-

body {
    background-image: url(polaroid-images/dark-noise-1.png);
    font-family: arial;
}

h1{
    color: white;
}

h2 {
    color: black;
    text-align: center;
    margin: 10px;
    font-weight: normal;
}

.polaroid {
    background-color: white;
    display: inline-block;
    padding: 20px 20px 0 20px;
    box-shadow: 10px 10px 5px Black;
    transform:rotate(4deg);
    -ms-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
}

And the page now looks like this:-

There’s a lot more we could do to this, but I wanted to keep things simple.
The finished product can also be viewed here.

Lots of cool HTML5 stuff at CreativeJS

Paul Miller took a year off from the internet – how did it go?  Really interesting and well written article.

‘Screengrab’ – a clever, clever bit of film…just try to figure out how it was done

Lots of praise amongst web devs and designers about this beautiful piece of design for Manchester City Council

A clever way of dealing with software piracy in a game development simulator.

The Trouble with Codeschool – forget language specifics, this article contains a list of things you really should know if you’re a developer.  I need to do some learning…

This is cool

Click some dots and this app will calculate your age (didn’t work for me, but worth a try).

Play a responsive accordion with your browser (resize the window).

Like Calvin and Hobbes?  Want to read all of the comics for free (and legally)?  There’s an app for that.

A huge (and extremely interesting) article on the Stephen Wolfram blog about Facebook statistics and data.  Well worth a read if you’ve time.

Also, try out the Wolfram|Alpha personal analytics for Facebook to get some really interesting insights into your Facebook world.

Oh, and my sister in law has started a new blog about being a mum, saving money and other important stuff.

Hopefully will be back on track next week..

You can develop.

Anybody can develop.

There is very little in the way of your learning how to develop.

I just wanted to get that out of the way before I start, because this post is about what I consider the top essential skills that any developer should have or put the effort into learning.  Some of the skills discussed are those that come naturally, whilst others can be learned and developed with practise.  I’m certainly not saying you can only be a developer if you tick all of the boxes discussed here, but I think they are a big help, and I also believe that in most cases they are skills that can be fed and watered and nurtured over time.

I’m discussing non-technical skills here, so I won’t be talking about specific languages, tools or concepts, although I may do that in a future post.

Let’s get started, shall we?

Math(s)/Algebra

I’m not saying you should have a phd in mathematics, or that you should understand calculus, but a decent understanding of the basic mathematical concepts is, I think, an important skill to have if you are a developer.  Using variables efficiently requires a decent grasp of algebra, especially if you intend to calculate values to use in your applications.  If you’re wanting to develop games, you will likely need a good understanding of geometry and basic physics concepts, too, or you’ll find it hard (and frustrating) work.

No good with maths?  Make your way to Khan Academy and learn (more on this later).  It’s easier than you think, and very rewarding (and will make your programming life much, much easier, trust me).

Problem solving skills

If you’re wanting to be a developer, you probably already have these.  After all, what else is development if not solving problems?  The great thing about this skill is that, the more you do it, the better you get at it.  Answers can sometimes take a long while to come, but when they do, the additional knowledge you get from them tends to stick.

Communication and social skills

I don’t think there’s really any job you can do without having good communication skills, and developing is no exception.  Being able to explain to people what you are doing is fundamental in developing applications, especially if your clients are of a non-technical nature.  If you’re going it alone as a freelance developer, good communication is vital for you to get business and develop good working relationships that might get you more.  Documenting your efforts well also requires good written communication so that others can understand how things work, or why you made particular decisions in your development process.

A thirst for knowledge

I firmly believe that you can’t really stand still as a developer.  With new trends and technologies appearing all of the time, it’s important to have an enquiring mind and to keep yourself ahead of the crowd.  With the internet at your disposal, you can learn more or less anything, it’s just a case of looking in the right places.  In fields such as development, nobody ever knows everything (some people seem to, or pretend to).  Keeping on track and never allowing yourself to stagnate is, in my opinion, super important.

Organisation

Developing software requires good (if not, great) organisational skills.  Opening up an IDE and randomly vomiting code into it might get you the results you want to start with, but it can become a nightmare to maintain that code as it increases in size, especially if when you start getting bugs.  A good developer knows how to organise their work to make it not only easier to maintain, but also to pass on to others.  Planning a software project well makes it much easier to develop, too, especially if you’re working with true object-oriented development or in teams.

Organisation and planning are also important for you to get an idea of how long projects might take.  Telling a client your work will only take two weeks is fine, if you’ve planned it right.  If not, and the project takes two months, that client won’t be knocking on your door any time soon.

Patience

I believe patience is a skill that can be learned and nurtured.  Some are better at it than others, and some are more patient in certain circumstances than they are in others, but I believe that, given the practice you can get better at it.  Patience is really important for developers for a number of reasons.

First of all, learning new techniques and technologies takes patience, and we’ve already discussed how important your thirst for knowledge is, haven’t we?

Second, you will need patience when developing applications, especially if you encounter a bug (or multiple bugs) and can’t quite yet figure out how to fix it/them.  Reading line after line of code, or following the path of your code through a debugger requires a keen eye and, yes, sometimes lots and lots of patience.  Remember, computers only do what they are told, so if you’re not getting the results you want, it’s you that did something wrong, not the computer (most of the time).  Don’t throw your machine through the nearest window if you’re not getting the results you need. Go outside, breathe and relax…learn to be patient and things will seem so much easier, I promise.

Memory

Whilst there are tools and techniques to help improve memory, in general I think people either have good ones, or they don’t.  That doesn’t mean a bad memory is a barrier to good software development, but having a decent one can help.  Being able to keep a number of things in your head at the same time can be really useful when developing solutions, especially if you are moving values around between variables in your application.  Having said that, there’s only so much you can keep in your head at any one time, so being able to organise yourself is once again, very important.  Pen and paper are extremely useful tools, too.  Write things down that your head doesn’t want to store so that you can refer to them quickly when needed.

The ability to handle criticism, and to be self-critical

One thing you’ll hear a lot as a developer is criticism.  Your application takes too long to load, the font you use is terrible to read, and the form you built doesn’t seem logical.  Don’t take it to heart.  One skill that is important is being able to handle criticism well.  Most of the time it will be constructive, but often it won’t be.  Being able to listen and see things from your users’ perspective can help you a lot. Why don’t they like the font?  How could it be better?  Speak to people and you might find they are actually right!  Usage of software and styling can be subjective, so learn to handle feedback well and have a reasoned response if you feel the user is wrong.  Don’t get grumpy or defensive, it’ll get you nowhere.

Self-criticism is also essential.  You aren’t perfect.  No, you really aren’t..  Writing a piece of software, leaving it alone for a few days or weeks and then coming back to it will often highlight areas that don’t work as well as you thought when you first wrote it.  Self-criticism makes the difference between a good developer and a ‘just ok’ developer, and makes the difference between an adequate product and an outstanding one.  With every re-visit of anything you make or develop, you should see something you could have done better.  Learn this trait and use it regularly.

And last of all (but possibly one of the most important)…

Being a nice person

Being a nice person is just good, ok?  If you regularly lurk on forums waiting for questions from noobs only to shoot them down in flames for not knowing as much as you, you’re not a nice person.  You were new to this stuff once too, remember?  If you can’t be helpful, don’t bother.  It doesn’t help and can be a real confidence killer for those just starting out.

Can you think of any more?  Comments are welcome, as always.

The theme is also responsive, which means it looks great on tablets and (hopefully) mobile.  The only problem I’ve come up against so far is that the main header logo is cropped slightly on mobile.  This will be fixed soon, hopefully..

Anyway, I’m hoping any regular visitors prefer the new cleaner look.  Now to get more content written and posted *scribbles furiously.

Anyway, here is a list of the things that have cheered us up, kept us entertained and generally happy this past week:-

Really cool animated text fill effect using just CSS

No explanations necessary – this is just incredible work…

Ben Howdle writes about why “can’t” is a copout.

A list of interesting internet tips and tricks on Reddit.  Definitley worth a read through if you’ve some time

Signs you’re a good programmer and, if you’re interested, its opposite.

A handy database of Javascript libraries, categorised by type

40 years of icons, the evolution of the modern computer interface

Time

Shodan:  The scariest search engine on the Internet