The JavaScript blog.


ui widgets reactive react

McFly, React Widgets, react-separate-template

Posted on .


McFly (GitHub: kenwheeler/mcfly, License: BSD) by Ken Wheeler is a Flux implementation. It uses Facebook's Dispatcher, and provides factories for Actions and Stores.

To use McFly, create an instance of McFly then make a store with mcFly.createStore. You can then generate new actions with mcFly.createActions.

Internally, CommonJS modules are used with a Browserify-based build script to generate the final browser-friendly source, so it's modular and easy to read.

React Widgets

If you need some UI widgets for your React projects, then you might want to try React Widgets (GitHub: jquense/react-widgets, License: MIT, npm: react-widgets) by Jason Quense. It's influenced by jQuery UI and Kendo UI, and implements dropdown lists, combo boxes, selects, datetime pickers, and a calendar.

The usage is based on custom elements with attributes that set up the data binding to drive the widgets. Each widget has several attributes that provide a good level of flexibility, and they support keyboard shortcuts as well.

Separating React Templates

Sergii Kliuchnyk wanted to keep React HTML fragments in separate files to make it easier to work on stylesheets without building part or all of an application. react-separate-template is a GitHub repository that explores this idea.

There's a script called conv.js that combines a JavaScript file with a corresponding HTML file to make the resulting .jsx file that you'd usually find in a React project.

There are still some issues, like the handling of attributes, but it seems like something that could be adapted to work as part of a typical Gulp/Grunt build script.


jquery plugins forms calendars time widgets

jQuery Roundup: persistState, CLNDR.js

Posted on .

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


persistState (GitHub: togakangaroo / persistState, License: MIT) by George Mauer saves the state of UI widgets. It can be applied to a selector, so you can save the state of a specific set of widgets rather than all of them.

I like the idea of using this to save the state of form controls, particularly in a multi-stage form that's handled client-side. Values are saved to localStorage, and the API of persistState allows you to swap in your own serialisation handler.

Saving the state of form controls looks like this:

$.ow.persistState.elementPersistence['textarea,input:not(:checkbox),select'] = {
  saveState: function($el) {
    return { val: $el.val() };

  restoreState: function($el, state) {
    if (!state) return;
    if ($el.val() !== state.val)


CLNDR.js (GitHub: kylestetz / CLNDR, License: MIT) by Kyle Stetz is a calendar plugin:

There are wonderful and feature-rich calendar modules out there and they all suffer the same problem: they give you markup (and often a good heap of JS) that you have to work with and style. This leads to a lot of hacking, pushing, pulling, and annoying why-can't-it-do-what-I-want scenarios.

CLNDR doesn't generate markup (well, it has some reasonable defaults, but that's an aside). Instead, CLNDR asks you to create a template and in return it supplies your template with a great set of objects that will get you up and running in a few lines.

CLNDR requires Moment.js, which is OK because I don't leave home without it!


jquery plugins maps tags widgets

jQuery Roundup: Mapael, Velge

Posted on .

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



Mapael (GitHub: neveldo / jQuery-Mapael, License: MIT) by Vincent Brouté is a Raphael-based vector map plugin:

With Mapael you can display a map of the world with clickable countries. You can build data visualisations by setting some parameters in order to automatically set a color to each area of your map and generate the legend. Moreover, you can plot cities on a map with their latitude and longitude.

The basic API looks like this:

  map: {
    name: 'world_countries'

Vincent has some examples in the readme, for example, this map of France on JSFiddle.


Velge (GitHub: dscout / velge, License: MIT, bower: velge) by Parker Selbert is a tag widget, inspired by the tagging UI found in Pivotal Tracker.

It supports sorting, validation, data normalization, pattern matching, keyboard shortcuts, and callback methods for things like tag addition and removal.

The API is based around a constructor:

var velge = new Velge($('.container'), { single: true });  

The instance will then accept callbacks like this:


It's tested with Mocha and installable with Bower!


jquery ui plugins widgets

jQuery Roundup: Recurrence Widget, HeapBox

Posted on .

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

Recurrence Widget

Dealing with recurring dates isn't easy, but one way of adding a layer of structure to projects that must deal with them intelligently is by following standards like iCalendar. Johannes Raggam sent in jquery.recurrenceinput.js (GitHub: collective / jquery.recurrenceinput.js, License: MIT), which is a UI widget that is compatible with RFC5545.

The widget allows various repeat rules to be selected and then outputs a string that should be usable in ICS files.


HeapBox (GitHub: FilipBartos / heapbox, License: MIT) by Filip BartoŇ° is a select replacement. It has an event-based API, supports standard features like disabling the control, and has some nice flat UI themes.


jquery ui html5 mobile plugins widgets cryto

jQuery Roundup: Fine Uploader, SimpleSlideView, jQuery.uheprnGen

Posted on .

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

Fine Uploader

Fine Uploader

Fine Uploader (GitHub: Widen / fine-uploader, License: GPLv3) by Mark Feltner is a client-side library for managing file uploads. It's free of dependencies, but there's a jQuery plugin for convenience. It supports multiple file uploads, progress bar, drag and drop, upload cancelation, validation, and direct to Amazon S3 uploads. S3 uploads work using CORS, and XHR2 is used for browsers with File API support and monitoring upload progress.

The author maintains a blog about the project, and a recent post includes details on the S3 support.


SimpleSlideView (GitHub: cloudfour / SimpleSlideView, License: MIT) by Tyler Sticka is a mobile-style UI widget for displaying and managing animated view hierarchies:

This plugin was designed to work well with non-fixed layouts, which means it can be helpful to scroll to the top of the window or container prior to a view changing. If a $.scrollTo plugin is available, SimpleSlideView will attempt to use it by default. It has been tested with jquery.scrollTo and ZeptoScroll.

The views are divs marked up with a container so they can be displayed and hidden as needed. Data attributes are used to associate navigation with markup: a link with data-popview or data-pushview allows movement through the view hierarchy. There's also a JavaScript API for managing this.

The readme has full documentation and an example for using it in a responsive interface.


jQuery.uheprnGen (GitHub: ryanmcdonough / jQuery.uheprnGen, License: Public Domain) is Ryan McDonough's first attempt at a jQuery plugin, but it's cool because it wraps around Steve Gibson's UHE PRNG script, which stands for Ultra-High Entropy Pseudo-Random Number Generator.

This carefully designed PRNG utilizes more than 1536 bits of internal state memory. The operating parameters of the generator's algorithm were carefully chosen (it uses a safe prime factor) to guarantee that every possible PRNG state is visited before the sequence begins to repeat.

With Ryan's script, you can call $(this).uheprngGen({ range: 100, count: 10001 }); to generate 10001 random numbers with a range of 0 to 100.