DailyJS

DailyJS

The JavaScript blog.


Tagcolor
Featured

frameworks libraries events modules ender pubsub color hyphenation

Ender Roundup: Radio.js, one.color, Hypher

Posted on .

You can send in your Ender-related projects for review through our contact form or @dailyjs. Be sure to also update the Ender package list page on the Ender wiki.

Radio.js

Radio.js (GitHub: uxder/Radio, Licence: MIT, npm / Ender: radio) by Scott Murphy is a simple publish / subscribe library with a well-designed chainable API. Radio.js operates through the $.radio() method from within Ender.

//create topic called changeTabEvent and subscribe myFunction
$.radio('changeTabEvent').subscribe(myfunction);
//publish to the topic changeTabEvent
$.radio('changeTabEvent').broadcast(data);
//unsubscribe myFunction from the topic changeTabEvent
$.radio('changeTabEvent').unsubscribe(myFunction);
//do all of the above in one line via chaining
$.radio('changeTabEvent').subscribe(myFunction).broadcast(data).unsubscribe(myFunction);

Event "channels" are created by the main radio() method.
You can then use the three main API calls to interact with the channels:
subscribe(), broadcast() and
unsubscribe(), each able to take different types and
numbers of arguments.

Radio.js will also work as a stand-alone browser library and in node.js.

one.color

one.color (GitHub: One-com/one-color, Licence: BSD, npm / Ender: onecolor) by Peter Müller and One.com is an
amazingly comprehensive color toolkit. It implicitly converts between
RGB, HSV, HSL and CMYK color spaces with or without alpha transparency.
Its API is chainable for composing, adjusting, and serializing color
values. A demo page gives you some
idea of the potential of one.color.

one.color

$.color('rgb(102, 76, 230)'). // Can parse CSS color strings
    lightness(+.2, true).     // Implicit conversion to HSL
    red(-.1).                 // Implicit conversion back to RGB
    hex();                    // "#00a6f2"

one.color will also work as a stand-alone browser library and in node.js.

Hypher

Hypher (GitHub: bramstein/hypher, Licence: BSD, npm / Ender: hypher) by Bram Stein is a small hyphenation engine
compatible with Hyphenation.js
language objects.

Hypher adds soft hyphens to
text strings (Unicode: U+00AD, HTML: ­ or ­) according
to language rules as defined in the patterns objects. Modern browsers
then use these soft hyphens to break words where wrapping is required,
otherwise they are invisible.

Hypher comes with a large number of
language patterns which are also available in the npm repository as
hyphenation.lang (e.g.
hyphenation.en-us or hyphenation.fr). Simply
include hypher and at least one language pattern in your
Ender build.

// generates 'Hy|phen|ation is use|ful when cen|ter jus|ti|fy|ing a text.'
// where `|` is a soft hyphen
$('<p>Hyphenation is useful when center justifying a text.</p>')
  .appendTo('body')
  .hyphenate('en-us');

Hypher is also available as a jQuery plugin and will work as a stand-alone
browser library and in node.js.

Tidbits and updates

Some minor notable items since the last Roundup:

Bonzo goes 1.0.0

Bonzo, the DOM manipulation library included in The Jeesh, has received a lot of minor fixes this week and its test suite has been
significantly expanded, so much that a bump to 1.0.0 seemed appropriate.

Minor Qwery update

Qwery, the selector engine included in The Jeesh had some minor performance improvements, particularly for IE8,
and can now be configured to turn off use of native
querySelectorAll if required:
$.configure({ useNativeQSA: false }).

Bean does better delegation

Bean, the event manager included in The Jeesh, has received some delegation-love, fixing bugs related to
clone() and erroneous event.currentTarget
values.

Bean is also likely to see a change in the implementation of
on() that will make it (mostly) compatible with the
implementations in Prototype,
jQuery and Zepto. Further details are available on GitHub.

Ender via CDN

After the flurry of recent activity on core Ender modules,
Dustin Diaz has updated the The Jeesh and a more bulky Ender build on S3 this week, so is these builds suit your
needs then point your script tag to one of these CloudFront URLs:

The Jeesh (Qwery, Bonzo, Bean, domReady)

http://cdn.enderjs.com/jeesh.js
http://cdn.enderjs.com/jeesh.min.js

Jeesh++ (Qwery, Bonzo, Bean, domReady, Reqwest, Morpheus, Valentine, Bowser, $script.js)

http://cdn.enderjs.com/ender.js
http://cdn.enderjs.com/ender.min.js

Twitter's Bootstrap for Ender

Along with the release of Bootstrap
v2
, an Ender compatible version
is now available on npm. Unlike the v1.x port, this new version makes
each plugin available separately so you only need to include the ones
you intend to use in your Ender build.

With all plugins installed, a minimal Ender build for full Bootstrap
functionality comes in at a little under half the size of the equivalent
jQuery Bootstrap.

Further details available on the new
ender-bootstrap repository.