How to update the browser on the status of an AJAX process

Websites with AJAX elements are a defacto standard on the web and have been for quite some time. AJAX allows you to run a request on the server without actually leaving the page the user is on, executing it asynchronously while the browser waits for a response.

One big problem with this is that if the process takes more than a few seconds, there’s no built in methods in the AJAX standards to receive content before the entire request is complete, so how do we let the browser know the status of the process on the server, if we can’t stream information to the browser using AJAX? We’ll be addressing this problem in this post.

Continue reading “How to update the browser on the status of an AJAX process” »

Amazing world animation in JS, the 1K world.

I stumbled across this amazing 1K ‘Hello World’ animation today:

The source code is the most interesting part: you’re already looking at it. Try it out yourself, copy and paste the code, or just take a look at the source code yourself. Be sure to check out the other posts from this guy on his Minified JavaScript Craziness page.

All credit for this code goes to Martin Kleppe, amazing! I’ve never seen anything like it, the source code is the animation!

Math and Science Art Series: Visualising Pi with a HTML5 canvas

I was inspired by a friend to do some art using the math/scientific world as a basis, so I decided to start with the classic: pi.

I’ll be looking at some different ways of visualising the digits of pi visually using HTML5 and the canvas element to iterate over the digits. If you have any cool or interesting ideas regarding Math, Science and Art visualisations, especially concerning pi and other interesting numbers, then leave a comment below and we’ll feature your thoughts or works in our next post!

Continue reading “Math and Science Art Series: Visualising Pi with a HTML5 canvas” »

Creating polaroids using Flickr API (also how to space rotated elements correctly)

Hanging Polaroids

Some might say polaroids are a bit overdone when it comes to displaying your photos, but I’m going to be using the Flickr API to get a selection of images and hang them on a virtual line.

There’s a bit more to this though, as I’ll be showing you how to calculate the actual widths of our hanging polaroids so that we can fit as many on the line as possible without having them overlap. This may sound trivial, but when we’re hanging our pictures at an angle it becomes slightly more complex.

Continue reading “Creating polaroids using Flickr API (also how to space rotated elements correctly)” »

Using jQuery BBQ to create an instant bookmarkable search with AJAX

jQuery BBQ creates a nice interface for manipulating your url without having to reload the page. This means that you can create bookmarkable content without having to reload the page every time you want to change a url parameter. This is great for creating AJAX based forms that can display results instantly while still being bookmarkable.

A lot of sites use this sort of functionality already. A good example of this is grooveshark, which uses the hash part of a url to store parameters. Drupal also includes jQuery BBQ in its base package. Page reloads take a long time, so in today’s world of responsive web pages and impatient users, putting url parameters in the hash part of a url makes a lot of sense.

Continue reading “Using jQuery BBQ to create an instant bookmarkable search with AJAX” »

Creating a chroma key effect with HTML5 canvas.

First try at chroma key

If you have a video/photograph that has a plain background, such us you’d find if you used a green/blue screen or maybe on a plain sky background, you can create a chroma key effect. This is the same technique used by weather presenters and on hollywood movies to replace the background with something else.

We’ll go through some of the trials an tribulations of using this to replace the background of an image and even on a video. Continue reading “Creating a chroma key effect with HTML5 canvas.” »