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.

The beat goes on

Things are continuing apace with BeatsBase – the online community for DJs and I hope we’ll soon be able to start opening some of the doors (and maybe a window or two) to the crowds waiting outside. But first I wanted to show off a few of the features I’ve been hard at work building.

The Hot ListFirstly is the Hot List, where people can see the tracks, playlists and mixes that have got a lot of positive votes. Let’s face it, I wouldn’t be writing a true Web 2.0 application without voting, would I?

The Hot List will also be RSS-enabled, allowing people to subscribe using an RSS feed reader so they can be notified of the movers and shakers on the site.

BeatsBase votingAnd speaking of voting, we’ve got a really neat and simple way for people to vote for items. Just click to say whether you love it, think it’s OK, or don’t find it so hot. You can also leave an optional comment with your vote, and you can see the difference your vote has made immediately with the Vote Bar (I’ve yet to come up with a snazzy name for these horizontal stacker bar charts).

BeatsBase mixes and playlistsSo you want to put a few tracks together into a playlist and share that with the world? No problem, just click, choose and build your playlist. And what if you’ve created a mix using some tracks in our database? No problem too, you just choose the tracks you’ve mixed and we do the rest.

So now we know what tracks are in what playlists and mixes, we can do some really fun stuff. Like tell you what are the most mixed tracks, the most popular tracks in playlists, and what two tracks nearly always go together. We can also tell you what playlists and mixes any particular track appears in when you view it’s details so you can discover other users that like the same music as you.

Remember, we’ve already got over 30,000 tracks in the database (yes! it’s true! I counted ’em!) in a wide variety of styles, so there’s bound to be a pile of stuff you’ll love. And with our lovely users adding new tracks (hopefully) every day, we’ll be The Place To Be when it comes to track data on the web. The beat is getting louder.

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.