Category Archives: Web Development

Web Development Web Links

Beautiful parallax effects

Parallax effects on webpages can be awesome if done well.   I’m still pretty new to js and web development in the grand scheme of things, so haven’t figured out how to do them yet (I will though), but I think they’re very cool.

parallax

Parallax.js by Matthew Wagerfield is a ‘simple, lightweight parallax engine that reacts to the orientation of a smart device’, and, based on the demo here, it’s pretty impressive.  The graphics and animation used are beautiful and if you run it on your iPad or iPhone and move it about, the effects are pretty spectacular.  Do follow the link, as the picture above doesn’t do justice.  If you don’t have a mobile device you can move your mouse about to get an idea of the kind of effects you’ll get with motion.  It kind of reminds me of the effects in Little Big Planet.

I’d love to put something together like this one day.  The project GitHub page is here.

Web Development

How ajax works – a simple tutorial

ajax

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.

Development Web Development

More HTML5 canvas tinkerings – an analog clock

I’ve been playing around with more HTML5 canvas stuff to try to reinforce my learning so far and, tonight, finally managed to finish a little project I’ve been messing with for the past couple of days, an analog clock!

canvasclock

It’s nothing too special, but I’m very happy with it.  The code could definitely do with some tidying up, I think, and I’ll definitely get around to it soon.  There’s so many things I’m realising are possible with this exciting technology, so look out for more posts on the subject.

In terms of the coding for the clock, one of the things I’m most happy with is the little routine I threw together to draw the numerals on the clock face:-

				
var theAngle = 30;

var numerals = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"]

for(i=0;i<12;i++) {
	context.save();
	context.rotate(theAngle*(Math.PI/180));
	context.translate(0,-100);
	context.rotate(-theAngle*(Math.PI/180));
	context.fillText(numerals[i],0,0);

	context.restore();
	theAngle = theAngle + 30;
}

That I even managed to suss this bit out proves to me that I’m slowly starting to get the hang of what I’m doing, not only with the limited canvas knowledge I have, but with jQuery. It’s nice to have an idea in my mind of what I want to achieve and to be able to turn my thoughts into something real on the screen.

I’ve a couple more exciting ideas that I hope to put together over the next few days, so please do keep an eye out for more. When I understand things more, I hope to pen a few canvas related tutorials to help you guys out, too!

Until next time!  The full code for the clock can be found on Github.com.  Feel free to fork, comment, etc as you please.

Charts Development Web Development

HTML5 Canvas – Donut chart builder

Over the past couple of days I’ve been steadily making progress through Foundation HTML5 Canvas by Rob Hawkes. So far it’s a really great book, and I feel like I’m picking things up pretty rapidly (that’s a recommendation for you, by the way – seriously, if you’re thinking of learning how to use canvas, get it).

To test myself on what I had learned so far I decided to build a donut chart maker. It could just as easily have been a pie chart maker, but I wanted that extra bit of a challenge.

donut

Before you say “don’t you hate pie charts, though?”, I’ll answer with a “generally yes, thanks”. I just figured it to be a decent challenge to set myself. A bar chart would have been relatively easy, I think (although I might have a go at some point in the future.

Now, I know I’ve probably not built it in the most efficient way, but I’m really pleased with progress so far. Basically, enter a comma separated list of values in the box and click ‘Go’ and a donut chart is built in the canvas space. Slice angles are automatically calculated based on what proportion each value is to the sum of all the values together.

Anyway, I just wanted to share it with you. My code is available on Github for those interested in looking at/critiquing/playing around with it. By all means fork it if you find something that you want to add.

I’m hoping to do much more with this in the near future, including maybe incorporating labels and percentage values into the chart, so do keep an eye out. I’m also thinking about how I could use the canvas element to create some other useful charts from scratch – it’s all exciting stuff!!