Monday, November 4, 2013

jQuery plugin for collapsing content - readmore.js

If you're looking for a simple method to collapse and expand blocks of HTML content, I highly recommend the jQuery plugin readmore.js by Jed Foster.

Highly customisable, and implemented with a single function call against any id, class or element, e.g.:
$('p').readmore();
All CSS, more/less links and animation is taken care of automatically!

One thing to pay attention to however, is the height of the collapsed text, as a mis-alignment can cause text lines to be chopped in half horizontally. This is fixed by tweaking the maxHeight parameter, or alternatively you might be able to do something fancy with CSS to pretty it up.

Another tweak to consider is replacing the default 'read more' text with an image or button.

Project page: http://jedfoster.com/Readmore.js
Github: https://github.com/jedfoster/Readmore.js

Thursday, June 20, 2013

Audio synthesis with Web Audio intro - Stylophone

Stuart Memo has recreated the short-lived, stylus-operated Stylophone in HTML5, using Web Audio and his own vector-drawn keyboard library qwerty-hancock to demonstrate the basics of audio synthesis with the Web Audio API:

Article: http://tympanus.net/codrops/2013/06/10/web-audio-stylophone/ (via HTML5 Weekly)

...then see if you can spot the Stylophone featured in Bowie's Space Oddity!

Wednesday, February 6, 2013

Converting an existing javascript file to a require.js AMD module

Require.js is a Javascript module loader, helping to reduce complexity of applications by managing dependencies and allowing easier separation and organisation of code into modules.

Step 0: Use jslint

First of all, you should be using jslint to ensure your javascript code is clean and well formatted (I know its available as a plugin for IntelliJ, not sure about eclipse).

Step 1: Organise

To make this process as straightforward as possible, get your existing code into an organised fashion (i.e. a collection of vars and functions). Using jslint has probably got it into a good state already!
var foo = "...";

function func1() {
 ...
}

function func2() {
 ...
}

Step 2: The define call

It is fairly trivial to then wrap a 'define' call around the code (see require.js documentation), and turn it into an Asynchronous Module Definition (AMD):
define(function () {
    "use strict";

    return {
     // Your code goes here..
    };
});
But if you have dependencies existing in the file (e.g. jquery), you will need to resolve them as module dependencies and refactor their usages before the module can function.

Step 3: Dependencies

Add the dependencies by name as an array in the define() call, and corresponding parameters in the module function.
Existing usages of those dependencies will then need to be updated to call functions via the parameter objects (Note: to use dependencies in this way, they must also be AMD-compatible modules. Otherwise, you may need to configure a shim for the dependency).
define(["jquery", "another_dependancy"], function ($, lib) {
    "use strict";

    return {
     var foo = "...";

 function func1() {
            var content = $('#body-content');
         ...
 }

 function func2() {
     lib.someFunction();
     ...
 }
    };
});
Now your require.js module is ready to be used! But there's more you should do before that..

Step 4: Encapsulation

One of the advantages of this module pattern is that it can be structred so that variables and functions can be internalised and effectively defined in a 'private' scope. The module's return object can define exactly what should be publicly accessible.
In the previous code snippet, the variable foo and both functions were all returned by the module. This means that they would all be publicly accessible by any client code. Instead, we want to ensure that foo and the functions are initially defined as private, and then expose the functions explicitly in the return object.
define(["jquery", "another_dependancy"], function ($, lib) {
    "use strict";

 // private variable
    var foo;

 function func1() {
  var content = $('#body-content');
  ...
 }

 function func2() {
  if (foo === null) {
   foo = lib.someFunction(); 
  }
  return foo;  
 }

 return { 
  doTheThing: func1,
  getTheFoo: func2
    };
});

Done!