More unobtrusive JavaScript goodies

If you want unobtrusive JavaScript on your page and don’t know where to start, try my recently updated Performer library.

It gives you a good selection of many of the basic features you want from JavaScript – easy AJAX, toggling the visibility of elements, resizing elements and many more. And all of that is done in an unobtrusive, degradeable way so if the visitor doesn’t have JavaScript they can still use your pages.

I’ve recently added two more functions:

Editor
Turns any simple text element (H1, H2, blockquote and many more) into an inline form when the text is clicked. This allows you to provide in-place editing for short pieces of text (usernames, password etc.).
Prompter
Adds a piece of text to a textarea or input type="text" element to prompt the user on what they should type in. The text disappears when they click into the element, and reappears if the box is still empty when they click out.

See demos of all the functions here, along with full documentation and the Performer JavaScript file.

Proto-Proto-Former

Everyone knows I’m a fan of the Prototype JavaScript framework. But even I realise that for a novice getting the best out of it can be a daunting task. So I wrote a simple library called Performer to allow you to use some of the Prototype features without writing a single line of javaScript, instead using CSS rules.

There’s now another way for people to get started with Prototype using Protoscript, a simplified language that gives you lots of nifty features such as fading, drag-and-drop, toggling and much more. It looks good, although it like many JavaScript libraries (except mine, fnar fnar) it doesn’t provide you a way to separate JavaScript from HTML without some extra work. Still, the drag and drop thing is cool.

Geeking-up

Last night I attended my first GeekUp event. It was very interesting, but due to the fact the meetings are always on a Wednesday which is my busiest night of the week I’m not sure I’ll be able to make it to any more. However we shall see.

There were two short presentations in a 20:20 style because, as the Pecha Kucha website says:

…as we all know, give a mike to a designer (especially an architect) and you’ll be trapped for hours. The key to Pecha Kucha Night is its patented system for avoiding this fate. Each presenter is allowed 20 images, each shown for 20 seconds each – giving 6 minutes 40 seconds of fame before the next presenter is up. This keeps presentations concise, the interest level up, and gives more people the chance to show.

So it was quite impressive to see two worthy contenders for the speed-presenting crown giving interesting talks on OpenStreetMap (see the website here) and eye tracking. Both were educational, and I’m sure 6 minutes and 20 seconds never seemed so short to the guys speaking.

The crowd seemed to enjoy it, too, especially as they were encouraged to heckle if the speakers went over the allotted time of 20 seconds per slide. And heckle they did, assisted by beer. I left early, but not before my good friend Steve managed to get chatting to two young ladies (yes, they were there for the geek event and not just random passers-by) so who knows what happened to him last night. He’s playing coy about the whole affair, so I guess we’ll never know…

Top 5 Firefox plugins

I’m almost rabidly in love with Firefox, the little browser that could. In fact the link I’ve just given you has been the *only* place I’ve been to in Internet Exploiter when I’ve installed a fresh copy of Windows on my machine. Of course I use Linux a lot now, so I don’t even have to do that.

Anyway, Firefox is easily extensible through a whole galaxy of plugins. Seriously, there’s almost certainly something in there that will reduce the number of applications you use every day. Before you know it someone will create a Firefox plugin that does away with an operating system. Happy thoughts.

As a web geek I tend to err on the side of development plugins, but I also use some other things as well. Here’s my can’t-live-without-them list of Firefox plugins.

  1. Web developer toolbar by . The guy deserves knighting for creating this wonderful collection of useful tools for web developers. If you ever mess about in HTML then you need this now.
  2. Firebug is to JavaScripters what the Swiss Army knife is to … well, the Swiss Army. You got JavaScript? Firebug will show you what’s happening inside the spaghetti.
  3. Blogging would be much, much harder if it weren’t for Scribefire. This little beauty gives you a blog editor right in your Fox. Want to blog about a page? Just right click and click “Blog this page”. Type your text and publish. Easy.
  4. We all hate adverts, right? Get rid of them with AdBlock Plus. It’s so good, and so unobtrusive, that it took me more than a few minutes to figure out why the adverts I was putting on a clients’ website weren’t showing up for me. Maybe I’m stupid, but maybe AdBlock Plus is clever.
  5. Speaking of clever, Greasemonkey is more clever than a packet of professors. How do I describe it? I’ll have a go: “Hijack any website and make it do what you want it to, all using easy JavaScript”. There. Get it now? Magic.

And some honourable mentions:

YSlow is a brand new tool from the clever people at Yahoo that works inside Firebug (my number 2 above) to help show you how you can speed up your pages. From suggesting content expiry dates (and showing you exactly which items don’t have them) to showing the difference in time between loading a page with an empty and full cache, this is a very useful addition to your Firefox.

If you have kids you’ll want to make sure they are protected online. Glubble does just that, but from within Firefox. Don’t spend your money on some parental filtering program when you can do it all from the magic ‘Fox.

My new best friend: Beryl

Further to my experiences loading Ubuntu Studio on my main machine, I thought I’d let you know about something that may just change your opinion about Linux. You thought it was a hard to use, graphically boring operating system for geeks, yes? You’d be wrong, then. Meet Beryl (watch this selection of videos for details).

Impressed? You should be. That’s some sweet window effects right there, yes sir. And it’s as easy to get as ticking Beryl for installation – the system takes care of the rest (downloading, compiling, organising, fettline, installing, cleaning up and initialising). OK, I admit I had some problems getting the operating system onto my machine, but it was worth it.

SO hopefully we’ll start to see some more people agreeing that Linux is ready for the big-time.