The JavaScript blog.


graphics plugins text atom

Rantjs, Avatar, esformatter

Posted on .


Rantjs (GitHub: svenanders/Rantjs, License: ISC, npm: rantjs) by Sven Anders Robbestad is a library for procedurally generating text. It takes a formatted constructor and then generates suitable sentences:

var rantjs = require('rantjs');  
var rant = new rantjs.SimpleRant;  
var sentence = rant.rantConstructor('<firstname male> likes to <verb-transitive> <noun.plural> with <pron poss male> pet <noun-animal> on <timenoun dayofweek plural>.');

console.log(sentence); // 'Sean likes to chop parrots with his pet cat on Saturdays.'  

There are a lot of supported tags, with subgroups, so you can generate a activity video or adv emotion. You can also add your own tags.

The author suggests that this might be useful for generating random text in games, but I think it might also work well for generating random admin area sample text in a blog or CMS, and for creating text to use in testing.


If you're looking for a way to generate default avatars, then take a look at Avatar (GitHub: MatthewCallis/avatar, License: MIT, npm: avatar-initials) by Matthew Callis. It can show the user's initials in a styled or unstyled avatar, or optionally fall back to a Gravatar instead.

To use it, just instantiate Avatar with the container element:

var avatar = new Avatar(document.getElementById('avatar'), {  
  useGravatar: false,
  initials: 'MC'

/* or */

  useGravatar: false,
  initials: 'MC'


Sindre Sorhus sent in atom-esformatter (GitHub: indresorhus/atom-esformatter, License: MIT), an Atom editor package for formatting JavaScript with esformatter. Esformatter itself supports lots of options for formatting JavaScript, like the indentation characters, line breaks, and whitespace handling.

Sindre's Atom package lets you run esformatter from the Command Palette by typing esformatter, and you can run it on a selection or the whole file.

Esformatter supports plugins, so you can change its behaviour by loading other Node modules. There's a list of plugins and also a plugin wish list. Sindre notes that it can be used with Gulp and Grunt, which might be a good way of processing open source JavaScript according to your project's style guide before you release it.


text typesetting

txtjs, Useuses

Posted on .


Ted Patrick sent in txtjs (GitHub: diverted247/txtjs, License: BSD), a typesetting engine. It provides font and glyph rendering that is indepenent of the OS and browser by using SVGPath on a canvas element.

The documentation has lots of examples so you can see how it handles things like character styling with multiple fonts and alignment. The project comes with a warning that says txtjs should be used for "creative applications" where the layout requirements exceed the capabilities of the DOM. I imagine it could be useful in a scenario where tight control is required for graphic design projects.

txtjs is part of CreateJS, an open source set of libraries including EaselJS and TweenJS.


Useuses (GitHub: SpoonX/useuses, License: BSD-2-Clause, npm: useuses) by Wesley Overdijk is a library for handling "soft" dependencies. Given a JavaScript file, you can express the dependencies with @uses ./my-dependency.js in a comment.

Once you've defined dependencies you can create builds with the command-line tool, like this:

useuses -i example/main.js -o example/dist/built.js -w  

There's also a Node API, so you could hook it into a Grunt or Gulp. Wesley had created an earlier version that was for Grunt, but this is a rewritten, more generic version. He's written a blog post about JavaScript dependency management that describes the module in more details.


parsing text

Natural Language Parsing with Retext

Posted on .

Retext (GitHub: wooorm / retext, License: MIT, npm: retext) by Titus Wormer is an extensible module for analysing and manipulating natural language text. It's built on two other modules by the same author. One is TextOM, which provides an object system for manipulating text, and the other is ParseLatin.

Given some text, ParseLatin returns syntax trees:

parseLatin.parse('A simple sentence.');  
 * ˅ Object
 *    ˃ children: Array[1]
 *      type: "RootNode"
 *    ˃ __proto__: Object

These trees can then be processed as required. You can iterate over nodes or search them for values, it's a bit like a DOM for plain text (or syntax/grammar).

The Retext module has lots of plugins. One example is an implementation of the Metaphone algorithm -- retext-double-metaphone. There's also a short-code emoji parser, so you can actually build tightly focused text-processing modules with Retext. Another similar plugin is a typographic parsing library, which converts ASCII to HTML entities.

One cool use of Retext would be natural language date parsing, which is something that in my experience always ends up in a horrible mess of regular expressions. The author is still looking for a "retext-date" implementation, so it would be interesting to see what that looks like in Retext.


jquery date plugins time text state-machine

jQuery Roundup: Orangevolt Ampere, Succinct, jQuery Age

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Orangevolt Ampere

Orangevolt Ampere

If you like state machines, then you might find Orangevolt Ampere (GitHub: lgersman / jquery.orangevolt-ampere, License: MIT/GPL2) interesting. Created by Lars Gersmann, it uses AngularJS, jQuery, Boostrap, and Font Awesome and attempts to help you model single page applications by encapsulating data operations and route transitions in state machines. That means your applications get some features for "free", like infinite undo/redo.

The author has made a presentation about Orangevolt Ampere that gently introduces the main concepts, which I recommend looking at before diving into the code.

The wizard example is a good example of how state machines can model something that would ordinarily be awkward to work with.


Succinct (GitHub: micjamking / succinct, License: MIT) by Mike King is a text truncation plugin. It truncates based on the simplest case where you know the number of characters you want to display: $('.truncate').succinct({ size: 80 }) will cut text down to 80 characters and add an ellipsis.

jQuery Age

jQuery Age (GitHub: ksylvest / jquery-age) by Kevin Sylvestre formats and tracks dates and times as human readable text. It allows the text suffixes and grammatical formatting to be overridden, so it could be internationalised as needed.

<time datetime="2010-01-01T12:00:00Z" class="age">January 1, 2010 12:00</time>  
<time datetime="2020-01-01T12:00:00Z" class="age">January 1, 2020 12:00</time>

<script type="text/javascript">  


jquery plugins backbone.js text bootstrap wysiwyg

jQuery Roundup: Backbone Associations, bootstrap-wysihtml5

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Backbone Associations

Backbone Associations (GitHub: dhruvaray / backbone-associations, License: MIT, bower: backbone-associations) by Dhruva Ray is a plugin for one-to-one and one-to-many associations between models and collections:

applications can listen to any kind of change (change, add, remove, reset, sort, destroy) in this hierarchy using standard Backbone events and respond to them. (views can re-render for example). The implementation strives to be tiny (2.2KB), easy-to-understand, light-weight and fast.

Once the plugin has been loaded, models can be defined using Backbone.AssociatedModel, and then relationships can be set up with Backbone.One and Backbone.Many.

var Product = Backbone.AssociatedModel.extend({  

var User = Backbone.AssociatedModel.extend({  
  relations: [{
    type: Backbone.Many,
    key: 'locations',
    relatedModel: Product

The reversed association is automatically inferred, so a product could be set for a user. Values can be traversed using fully qualified paths as well:


Fully qualified paths can also be used to assign event listeners:

emp.on('change:works_for.locations[*]', cb);  

The author has written up a full tutorial for Backbone Associations, and has included unit tests and full documentation.


bootstrap-wysihtml5 (GitHub: jhollingworth / bootstrap-wysihtml5/, License: MIT, bower: bootstrap-wysihtml5) by James Hollingworth is an amazing text editor component. It's highlight consistent with Bootstrap's design, and has many features you may take for granted when editing text, like the usual keyboard shortcuts.

Trantor Liu sent in his fork, trantorLiu/bootstrap-editor, which pairs up the project with jQuery-File-Upload. This adds support for things like upload progress, drag and drop, and cross-domain uploads. Trantor notes that the demo won't currently work because there's no server-side support, but he's provided instructions on how to set it up locally.