Archive for the ‘jQuery’ Category

Node.js – Server-side JavaScript24
May

Last Friday I was lucky enough to attend Remy Sharp‘s one day Node.js workshop in London.

nodejs - server side javascript

The course started, rather conveniently, from the very beginning and concisely covered the basic installation of node.js and getting up and running with node package manager.

Next we used express.js, a node web framework, to rapidly build and deploy a data-driven webapp complete with custom url routing, and EJS page templating. As if this wasn’t already enough, we then wrote another line or two of code to add a fully functional JSON API to provide access our site’s data… amazing!

For me this was the highlight of the day. The speed with which new prototypes can be built and deployed is astonishing. Express JS kind of reminded me of the CodeIgniter PHP framework except it was quicker and easier to work with in almost every respect.

After a very impressive two course lunch, complete with a salad bar (all included in the ticket price) we headed back to the classroom to learn how to create a variety of web servers to support:

For the lazier readers amongst you, there is a good summary of all these technologies over at the HTML5Doctor blog.

Unfortunately, due to evolution of the workshop syllabus throughout Remy’s tour, learning about databases (MongoDB) was no longer in scope for the course. However, thanks to the solid foundation I got from the rest of the course, I am now confident that I can work this part out on my own.

WARNING: After a couple of beers it seems Remy has a tendency to get over-excited whilst demoing his pet projects. If there are any full pints on the table, get your laptop and bag out of the way ASAP!

All in all a great day. I left feeling inspired to build new things, eager to learn more and smelling somewhat beery, thanks Remy.

jQuery Slideshow Plugin09
Jul

This is a really simple plugin but it is code that I have found myself re-using on various projects and I therefore assume that it will be of use to others as well. The overall effect is very straight forward. A slideshow which fades cyclically between images in a gallery.

The plugin can be implemented as follows.

HTML

<div id='myID'>
<img src='path/to/image-1.jpg' />
<img src='path/to/image-2.jpg' />
<img src='path/to/image-3.jpg' />
...
<img src='path/to/image-n.jpg' />
</div>

JavaScript

$('#myDiv').slideshow();

That’s it! This results in the following effect.

12345

There are two optional parameters that can be passed to the slideshow method. The first is an integer which represents the duration of the fade effect (default 800ms). The second is also an integer and represents the amount of time each image is shown for (default 6000ms). If we wanted to have a faster fade, say 300ms and show each image for only 2 seconds we could use the following code.

JavaScript

$('#myDiv').slideshow(300,2000);

This code would achieve the following effect.

abc

 
As demonstrated by this page it is possible to animate multiple galleries on the same page. Each gallery works independently and can have a any number of images. It is also possible to specify different fade times and display times for each gallery if required.

This plugin is available for download both as a zipped folder containing a full demo (16k) or as a single javascript file. If you use the plugin on a project I would love from you. Additionally if anyone finds any bugs or would like to see any new features please let me know and I will do my best to help.