More JavaScript goodness

If you’re one of the few people in the world that liked the look of my Performer JavaScript library but found it didn’t quite do what you want, take a look at these projects from which include really nifty modal window generators.

And if that’s not enough then the talented Dustin Diaz has a
chainable JavaScript kit
built on the Yahoo! UI framework. It’s quite a bit more complicated than using the Performer classes, but it’s a whole lot more powerful.

And if all that is too geeky for you, take a trip down memory lane with PC World’s 50 best tech products of all time. It made interesting reading, and I had fun seeing which of my favourite gadgets made it into the list.

Playing the sharing

One of my favourite free music site is 3hive, although these days I rarely get a chance to download much stuff. The problem is I have to download something before I know whether it floats my boat, so to speak. Even with broadband that’s a few seconds per song, which soon adds up.

Not any more. If you’re a user of the greasy monkey for Firefox, you’re in luck. Just download this GreaseMonkey script and you’ll get a little Flash player below each download link. You can preview each track before you download with a mere click of the mouse. The Flash player was written by Jeroen Wijering and he’s kindly giving it away free. In this version of the 3hive player the Flash file is run from my website, but you can easily amend the script to run the file from somewhere else.

Happy listening!

Extending Performer

Only a day or two old and already my JavaScript library baby is learning new stuff. Namely it’s learnt how to pass the selected value of a select element to a remote page and load the response of that page into a named element. If you didn’t understand that, don’t worry. I’m barely there myself. So let me give an example.

Let’s say you have a list of musical styles and when someone chooses one you want to send their selection to a remote page. That remote page will look at their selection and bring back a load of sub-genres for that genre. So if they choose ‘Rock’ they will get back ‘Indie’, ‘metal’, ‘Glam’ etc. With me so far?

That remote page could build a new list of all the sub-genres, and Performer will take that sub-genre list and load it back into the original page inside the element you specify. And all that in the blink of an eye, or at least click of a mouse. Or, indeed, the press of a key – this function (and all the others, as far as my testing has proved) is keyboard-friendly.

Anyway, give it a whirl.

Announcing Performer

The time has come, after many months of development deep in my secret lab, to release my monster lovely library into the wild. Here’s the skinny:

It’s called Performer. It allows you, using nothing but standard HTML code, to add functionality to your web pages. Functionality like toggling the visibility of elements (now you see it, now you don’t) and updating parts of the page from a remote location (all that AJAX stuff).

it is built on the quite, quite wonderful Prototype framework (and the cool site design is nicked wholly from there).

It’s free and you can use it for pretty much anything – including commercial stuff. Just follow the simple instructions in the licence, OK?

So there you have it, unobtrusive JavaScript goodness for everyone. Let me know what you think.

Performer – Unobtrusive Prototype Helper

In a recent SitePoint blogs post by the estimable Kevin Yank he talks about Handling JavaScript-disabled Browsers. This is a vital part of making sure that any web application works correctly, and is something I spend a good proportion of my time doing.

Kevin rightly advocates something called progressive enhancement, which is a methodology designed to give a working system to everyone, but an enhanced experience to those that support more advanced technologies. It’s something I’ve talked about before.

In fact I’ll soon be giving away an initial version of my Performer JavaScript helper class (which I’ve talked about briefly before – good grief, was that really over a year ago?). basically it sits on your pages alongside the wonderful Prototype JavaScript library and allows the savvy developer to easily add AJAX-y style goodness to pages in an unobtrusive way. Let me give you a couple of examples:

Loading the content from a remote page when a link is clicked
<a href="ThisPage.php?With=RemotePageCall" class="loader" rel="Remotepage.php" rev="TargetElement">Click me to load the RemotePage.php file into targetElement</a>
Hide an element when the page is loaded
<div id="HiddenElement" class="hider">This element is hidden if the browser supports JavaScript, otherwise it is shown</div>

I plan on supporting several other features with the first release, including togglers, so watch this space.