DailyJS

DailyJS

The JavaScript blog.


Tagstate-machine
Featured

libraries modules npm angularjs state-machine

ngPromiseStatus, fsm-event

Posted on .

ngPromiseStatus

ngPromiseStatus (GitHub: BarakChamo/ng-promise-status, License: MIT, npm: ng-promise-status) by Barak Chamo is a collection of promise-aware Angular directives that make it easy to bind UI elements to the outcome of promises. This could be a button that takes an unspecified amount of time to run, that will eventually display success or failure.

You can also bind the promise values to alerts, and the author has provided Bootstrap samples that use Bootstrap's ubiquitous .alert message boxes.

fsm-event

fsm by Dominic Tarr is a very useful module for making finite state machines. I've used it with some success on a few Node projects. However, when I'm writing Node I prefer to deal with streams and events, rather than the methods in fsm's API. Yoshua Wuyts sent in fsm-event (GitHub: hyoshuawuyts/fsm-event, License: MIT, npm: fsm-event), a wrapper that uses EventEmitter.

To use it, create a new instance of fsm with the states you need, and then call m(state) to enter a given state. The corresponding listener will fire.

Why? Most state machines have overly complicated interfaces for managing state. The fsm state machine is simple but doesn't manage state for you, so I wrote a wrapper around it that manages state in an event-driven way. The initial use case was to manage complex, stateful UI elements but it can be used anywhere.

This would have actually helped with my specific use of fsm, where I ended up using it heavily alongside EventEmitter objects.

Featured

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

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">  
  $('.age').age();
</script>