Welcome ShopTalkShow listeners!

February 8th, 2012

Hi there if you’re visiting from ShopTalkShow, it’s great that Dave and Chris are going to review PerformerJS.

I’m Chris and PerformerJS was born out of some JavaScript I wrote about … 6 years ago I think. It struck me that for simple JavaScript interactions and design patterns there was no need to write any JavaScript code, and even simple code like you get with jQuery plugins was putting some front-end people off using these modern techniques. You know what it’s like; you copy and paste something you saw somewhere but it doesn’t work. If you don’t understand how that code worked you’ve got no chance of fixing it.

PerformerJS means you don’t have to understand what $(function(){ $("hideme").hide(); }) means, you just need to add (mostly) sensibly-named CSS classes to elements for them to do stuff.

Click this to read more…

So that’s the history, what about the future? Well, at my day job we’re starting to use PerformerJS more and more so there’s a lot of motivation for me to keep the code up to date, add new features, and fix bugs. Plus attention from other developers is worth a lot, too.

Rather than make Performer do everything and the kitchen sink, I’d rather focus on providing the most used design patterns and functionality and leave the really clever stuff up to plugins that will do it better anyway, or developers who know JavaScript much better than me.

But that doesn’t mean PerformerJS is standing still, oh no. Coming very soon in "imagepopper", which allows you to pop open an image from a URL (like a larger version of a product thumbnail, for example) in a modal dialog, with the option to style it like a polaroid picture.

I’m also planning on completely rewriting the code from scratch. This is for two reasons:

  1. Some of the code – OK< most of it - is really old and not best-practices. I've learned a lot about JavaScript over the last couple of years, and it's time to put that knowledge to use.
  2. At the moment PerformerJS has a load of methods that translate an internal call into something that one of the supported libraries understands. With jQuery taking over the world I think it would be better to natively support jQuery, then provide versions of PerformerJS that includes translation code to work with MooTools and Prototype. And, potentially, other libraries as well (YUI, extJS etc). Any help with that would be gratefully received.

So, thanks for visiting. I hope you find PerformerJS cool and useful. If you find any bugs please let me know, and if you want to help out please get in touch. PerformerJS is now on GitHub, so fork me!.

Version 1.0.4 released

January 21st, 2012

I’ve just released version 1.0.4 which include some bugfixes and a new delay parameter for Looper, allowing you to do slideshows. I’ve also got around to finishing the documentation for Morpher, so you can do animations.

I intend this to be the last version of the code in the current state as I want to rewrite Performer completely so it natively works with jQuery (check the stats). I certainly don’t intend dropping support for Prototype and MooTools if I can help it, but I need to go where the developers are. I hope this rewrite will lead to dramatic speed improvements, fewer bugs and more possibilities in the future.

License updates

July 20th, 2010

Hot on the heels of the recently-release version 1.0 of Performer, here comes 1.0.1. This version has one change which I’ve been meaning to do for a while and never got around to. Performer is now available under four different licenses, meaning you can choose the license that suits your needs best.

There are more details available on the license page, but if you have any questions please feel free to ask.

Version 1.0 released

July 14th, 2010

It’s late, so there’s no documentation updates yet. I’ll just say that Performer has reached the big 1-0, grab the latest version here. You’ll see there are now versions specifically for jQuery, Prototype and MooTools which should save you some bytes of you know which library you’re using.

New features? There’s quite a few:

  • A new ‘Morpher’ function, which allows you to animate elements
  • Several new ‘load…’ functions allowing you to trigger JavaScript to run when the page is loaded (like load a modal window and more)
  • Optional ‘delay’ parameter for lots of functions, allowing you to delay the running of the function for a number of seconds
  • Almost a complete rewrite for speed and filesize
  • Better default CSS styling for Performer elements
  • Lots of bugfixes

When I get some time I’ll update the documentation. Please let me know if you find any bugs with this new version.

JavaScript, without the code: a Performer tutorial

December 30th, 2009

I originally wrote this tutorial for Nettuts, but they (quite rightly) said I was being cheeky by writing a tutorial about software I’d written myself. So it’s here instead.

If you’re not a JavaScript blackbelt, or even if you’re still struggling on scripting training wheels, you can still use some great effects on your pages. Look here for how to use JavaScript in your pages, without writing any JavaScript code.

The Rise of the (JavaScript) Machines

Let me tell you a story. Back in the mists of time when the web was young there was HTML, which described documents. Then along came CSS, and those documents got all stylish. But they didn’t *do much*. We needed something interactive, dynamic and powerful to make our documents into living, breathing things. We needed JavaScript.

It took JavaScript (from here abbreviated to JS), once the whipping-boy of web technologies, a long time to shake off the spectres of scrolling status bar messages, obtrusive popup windows and onclick attributes. Modern JS can be clean, beautiful and well-ordered thanks to a tasty selection of libraries which separate the developer from the gnarly internals of JS, while smoothing over browser inconsistancies.

jQuery logoJavaScript has grown hugely in popularity over the last few years thanks to web applications like Google Mail, and much easier to use because of libraries like jQuery, Prototype and MooTools. These libraries make JavaScript development much simpler, but they still require you to write *some* JavaScript to get things working. What about, for your run-of-the-mill JavaScript needs, you could leverage the power of JavaScript from within your HTML code? Performer does exactly that.

Introducing Performer

Performer is a set of JavaScript functions that give you a range of effects you can use on your pages by automatically hooking-up CSS classes and events (such as clicks and keypresses). That means you can toggle the visibility of elements, create nicely-styled tooltips for links, validate forms and even do AJAX without writing a single line of JavaScript. How easy is it? This easy:

<p&gt<a href="#" class="toggler targetEl-mytarget">Toggle this!</a></p>
<p id="mytarget">Click the link and I will be hidden...&lt/p>
Performer: example 1

(See this in action)

Whoa, what happened there? Simple: Performer saw I’d given a link a CSS class of "toggler", so when someone clicks that link I want to toggle the visibility of something. The id of the thing I want to toggle is in a "CSS parameter" (more on those later) called "targetEl" with the value "mytarget". Then I added the id "mytarget" to the second paragraph and hey presto! Performer does the magic.

There’s more where that came from…

The same technique of using CSS classes to specify the what’s, where’s and how’s of your interactive stuff is used by Performer to give you loads of other features. Here’s a few examples:

Automatically pagnating a list (documentation)

Got a long list you want to split up? Performer will automatically add ‘page’ links so your visitors can go through the list without reloading the page.

<ul class="pager pagesize-5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
Performer: example 2

(See this in action)

Creating a modal window (documentation)

Want to make a window popup in a cool Web 2.0 style? Performer handles that, and loads the content for the popup window from another page on your site automatically.

<p><a href="#" class="modalwindower lightBox-true targetPage-example3modal.html">Click here for a modal window</a></p>
Performer: example 3

(See this in action)

Submit a form without reloading the page (documentation)

How about submitting a form your visitors fill in without reloading the page? Performer has that covered.

<form class="submitter targetPage-example4receiver targetElement-submitterresponse" action="#" method="post">
<p><input name="submittertext" type="text" /></p>
<p><button>Submit form</button></p>
<p id="submitterresponse">Awaiting response...</p>
</form>
Performer: example 4

(See this in action)

How does it work?

For each performer features there is a corresponding CSS class, for example "toggler" for the Toggler feature, "submitter" for the Submitter feature and so on. Performer scans the HTML of your page when it loads to find all these classes, then hooks up the relevent JavaScript functions.

Most of the Performer features need some extra options to make them work, for example to specify which element needs to be toggled. This is handled using "CSS parameters" in the format "[parameter name]-[value]", for example "targetEl-mytarget". It takes a few seconds to get used to this idea, but it’s a really neat way to give your parameters to Performer features. And you can then use the CSS parameters like normal CSS classes to style Performer-enabled element. For example:

<p&gt<a href="#" class="toggler targetEl-mytarget">Toggle this!</a></p>
<p id="mytarget">Click the link and I will be hidden...&lt/p>
a.targetEl-mytarget { color: #F00; }
Performer: example 5

(See this in action)

What else does Performer do?

Performer has a big list of features:

Styling

  • Hider: hide an element when the page is loaded
  • Shower: show a hidden element when the page is loaded
  • Toggler: toggle the visibility of an element
  • GroupToggler: toggle the visibility of all elements with a particular CSS class
  • Switcher: hide one element and show another
  • Sizer: change the size of an element
  • Styler: give an element a CSS class

Text

  • Truncator: truncate long content in an element, adding a ‘more’ link
  • Editor: make an element editable, sending the changed content to a page by AJAX

General functions

  • Hooker: hook any event (keypress, click, selection change etc) happening on an element into a custom function

Navigation

  • Tabber: creates a tabbed interface, showing one of a group of elements
  • Accordianer: creates an accordian interface, showing one in a group of elements
  • Looper: loops round a group of elements when a link is activated
  • Pager: automatically splits children of an element into multiple pages, adding links to navigate
  • Popper: opens a link in a new window

Notification

  • ModalWindower: opens a modal window with content from another page loaded by AJAX
  • ContextMenuer: gives a custom context menu on an element
  • Tooltipper: gives a custom tooltip, with content either from the title attribute or from another element

AJAX

  • Loader: loads content from another page into an element
  • ToggleLoader: loads content from another page into an element and toggles the elements visibility
  • ReLoader: automatically loads content from another page into an element every X seconds
  • PreLoader: automatically loads content from another page into an element when the page is loaded
  • Submitter: submits a form to another page then displays the receiving pages response in an element
  • Deleter: sends a request to another page and removes the target element from the page

Forms

  • Focusser: places the focus in a form element when the page is loaded
  • Duplicator: duplicates an element, useful for adding new input type="file" elements
  • SubmitLocker: locks all submit buttons when a form is submitted, to stop people pressing them twice
  • Setter: sets the value of a form field
  • Prompter: puts prompt text in a input type="text" or textarea form field when the field is empty
  • Limiter: limit the amout of text that can be entered in a input type="text" or textarea form field
  • FormChecker: check that a form has been filled in correctly (valid email addresses, required fields filled in etc)
  • PasswordChecker: check the strength of a password and display it to the user
  • Matcher: checks that two form fields, for example an email address and it’s confirmation, match
  • Selector: when the option in a select field changes, sends the option value to another page by AJAX and loads the response into an element
  • Resizer: makes a textarea field bigger when the cursor reaches the bottom

By now you should have a reasonable idea about what Performer can do. Remember to check out the documentation for a full details of all the features. It’s also written to force good practice, for example degrading nicely when javaScript is disabled or not available. All elements which use Performer features can alo be styled how you want using CSS, but Performer has some styles already built in.

And the best thing is Performer works with your favourite JavaScript library: jQuery, Prototype and MooTools are supported seamlessly. You can also download Performer in two flavours: the full file with comments, and a minified version (saving precious bytes). It’s also available as a WordPress plugin. The WordPress plugin has one extra nice feature. If you don’t use a JavaScript library in your WordPress site it’s no problem, Performer will automatically load jQuery from the Google AJAX API site.

JavaScript, without the code

So if you find yourself repeatedly reusing some JS code and thinking there must be a better way, or you don’t know how to start, Performer is for you. So this festive season make sure you wrap up warmly, spend time with family and friends, and use Performer to be full of festive cheer.

Hello world!

April 13th, 2009

Welcome to the new Performer website. In case you don’t know what Performer is, I’ll steal a quick introduction from the homepage, but wrap it in a Performer function. Click here to be amazed…

Performer is a set of JavaScript functions which aims to abstract away the complexity inherent in JavaScript libraries such as jQuery, Prototype and MooTools. We don’t aim to replace these libraries – they do a fantastic job and are very much needed – but we do aim to make it easier to use the features they afford website developers.

Performer does this by allowing developers to use nothing more than CSS classes and standard element attributes (like rel and href) to trigger these features.

How did I do that? By adding class="toggler" rel="intro" to the link and id="intro" class="hider" to the div containing the introduction text. Nothing else was added.

So in a nutshell Performer allows you to unlock the power in your favourite JavaScript library (currently Prototype and jQuery are supported, I aim to support MooTools and more in the future) from your HTML. JavaScript, with no code!

For more information please check out the Documentation section – although I’m afraid I’m still writing the docs – or you may want to see Getting Started with Performer or Next Steps with Performer.

Lastly, please let me know in the comments if you find mistakes, spelling errors, or things which just don’t add up. I guarantee you’ll find a few!