The JavaScript blog.


libraries ui maps keyboard react

React: HotKeys, Google Maps, Dataminr's UI Components

Posted on .


Chris Pearce sent in a library for handling hotkeys in React (GitHub: Chrisui/react-hotkeys, License: MIT, npm: react-hotkeys). There's a blog post with more details on the project:

With the ability to monitor the 'focus state' of particular elements (where the element may not neccassarily be a direct focus target but simply within the parent tree) it makes it very easy to bind contextual hotkeys.

And using @ccampbell's excelent mousetrap library we are able to declare our hotkeys with very inutitive syntax.

Combining all this you get react-hotkeys which provides a declarative way of binding hotkeys to your React application.

The library itself provides the HotKeys element, which has a keyMap attribute. You can bind keys with names like del and backspace to handlers in your React application.

The library aims to take the pain out of defining key mappings, knowing when certain components are 'in focus' and which hotkey handlers in the hierarchy should be called while providing a minimal API and getting out the way for the most part.

Correctly handling focus is one of those details that many web applications get wrong, so if you're building anything relatively complex then react-hotkeys should help.

React Components for Google Maps

Wrapping Google Maps in React seems like a common problem, but is also a good example of a non-trivial case for creating React components. Zach Pratt sent in the first of a series of articles about React and Google Maps: React Components for Google Maps – Part 1.

Building React components for use with google maps can present some challenging problems for those who aren’t aware of the basics/quirks of developing with google maps. I aim to shed some light on the fundamentals of how to get the two to play nicely together, and to encourage developing the components in a way that will promote testability.

Part 2 includes code for extending google.maps.OverlayView and the React component for managing the map overlay.

Dataminr's React Components

Armaan Ahluwalia sent in several React components that have been developed at Dataminr. The react-components repository (GitHub: dataminr/react-components, License: MIT) includes components for a table, search, pie chart, and modal windows. There's a demo that shows each of the components with some sample data.

The components are all documented and have sample code, so it's pretty easy to get them working in your own projects. I also noticed that each component has tests as well, which is interesting if you've ever wondered how to write tests for redistributable components.


modules keyboard amd

Define.js, Combokeys

Posted on .


DefineJS (GitHub: fixjs/define.js, License: MIT, npm: definejs) by Mehran Hatami is a new module loader. It implements the AMD pattern and also supports Promised Modules, and other new nonstandard related module techniques.

You can specify the module's global name by including a global attribute on the script tag:

<script global="definejs" src="define.js"></script>  

Now you can declare a module with definejs.define() and load dependencies with definejs.require. Promised modules are implemented by returning new Promise when declaring a dependency.

The author has included tests written with the Karma test runner, so you can run the tests against a real browser.


Shahar Or sent in a keyboard shortcut library called Combokeys (GitHub: mightyiam/combokeys, License: Apache 2.0), a fork of the popular Mousetrap project.

It has some cool changes: it's been refactored to use CommonJS, and it doesn't automatically listen on document. You can now specify which element it listens on for keyboard shortcuts. That was actually one thing that prevented me from using Mousetrap in a project.


jquery testing plugins keyboard knockout paste

jQuery Roundup: QUnit 1.11, Knockout-jQueryUI, Tab Override, FilteredPaste.js

Posted on .

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

QUnit 1.11

There's a good post on the official jQuery blog about a change in direction to the QUnit project: QUnit 1.11 Release: A Look Back (and Forth). It discusses some of the history behind QUnit, and includes a survey where you can share how you're using it.


Trying to integrate libraries like Knockout is sometimes confusing when you're already using jQuery UI. To address this, Vas Gábor has created Knockout-jQueryUI (GitHub: gvas / knockout-jqueryui, License: MIT), which is a collection of Knockout bindings for jQuery UI widgets.

It's small, comes with a build script and unit tests, and the author has provided full documentation on the project's homepage.

Tab Override

Tab Override (GitHub: wjbryant / taboverride, License: MIT, bower: taboverride) by Bill Bryant allows the tab key to insert tabs in textarea elements. It also supports auto indent and multi-line tab insertion.

There's also a jQuery Tab Override plugin, and both scripts are AMD-compatible. Bill has included QUnit tests, which actually simulate key presses to test the script's various features.


FilteredPaste.js (GitHub: willemmulder / FilteredPaste.js, License: CC BY-SA 3.0) by Willem Mulder can be used to filter text when it's pasted into textarea elements, or anything with the contenteditable attribute. Why is this useful? Well, Willem got tired of dealing with support requests when text pasted from Word into his CMS carried across unwanted formatting.

I find myself always using Paste and Match Style and wondering why this isn't the default for the paste keyboard shortcut. The only time I've ever wanted to include formatting when pasting is when I make slides in Keynote/PowerPoint/Google Drive and want to include syntax highlighting in my examples. And that seems like an edge case if ever there was one!


frameworks libraries date history node modules time keyboard ender responsive

Ender Roundup: tablesort.js, Moment.js, jwerty, SelectNav.js, ender-events, ender-assert, Categorizr.js, Arbiter

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.


tablesort.js (GitHub: tristen/tablesort, npm / Ender: tablesort) by Tristen Brown is a dependency-free sorting library for HTML tables. tablesort.js can be invoked stand-alone via new Tablesort(document.getElementById('table-id')) or $('#table-id').tablesort() method from within Ender.

Olivier Vaillancourt has written a small review of tablesort.js for use in Ender on Twitter Bootstrap tables.


Moment.js (GitHub: timrwood/moment, npm / Ender: moment) by Tim Wood is small, yet very comprehensive date and time handling library.


Moment.js was mentioned last year on DailyJS but it now has a simple Ender bridge allowing you to pack it neatly into Ender builds for use via $.ender(). Plus, it's an absolutely fantastic library for anything date/time related so it's worth mentioning again. Be sure to scan the docs to see just how much this library can do.

$.moment().add('hours', 1).fromNow(); // "1 hour ago"

// manipulate
$.moment().add('days', 7).subtract('months', 1).year(2009).hours(0).minutes(0).seconds(0);

// parse dates in different formats
var day = $.moment("12-25-1995", "MM-DD-YYYY");

var a = $.moment([2010, 1, 14, 15, 25, 50, 125]);  
a.format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"  
a.format("ddd, hA"); // "Sun, 3PM"

// operate on different 'moment' objects
var a = $.moment([2007, 0]);  
var b = $.moment([2008, 5]);  
a.diff(b, 'years'); // 1  
a.diff(b, 'years', true); // 1.5  

The project maintainers also follow a rigorous release methodology, making great use of git branches, something that is not often found on smaller open source libraries.


jwerty (GitHub: keithamus/jwerty, Licence: MIT, npm / Ender: jwerty) by Keith Cirkel is a small keyboard event handling library which can bind, fire and assert key combination strings against elements and events.

$.key('ctrl+shift+P', function () { [...] });
$.key('⌃+⇧+P', function () { [...] });

// specify optional keys
$.key('⌃+⇧+P/⌘+⇧+P', function () { [...] });

// key sequences
$.key('↑,↑,↓,↓,←,→,←,→,B,A,↩', function () { [...] });

// pass in a selector to bind a shortcut local to that element
$.key('⌃+⇧+P/⌘+⇧+P', function () { [...] }, 'input.email', '#myForm');

// use `$.event` as a decorator, to bind events your own way
$('#myinput').bind('keydown', $.keyEvent('⌃+⇧+P/⌘+⇧+P', function () { [...] }));

// use `$.isKey` to check a key combo against a keyboard event
function (event) {  
    if ( $.isKey('⌃+⇧+P', event) ) { [...] }

// use `$.fireKey` to send keyboard events to other places
$.fireKey('enter', 'input:first-child', '#myForm');


SelectNav.js (GitHub: lukaszfiszer/selectnav.js, npm / Ender: selectnav.js) by Lukasz Fiszer is a small library that will convert your website's navigation into a <select> menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. SelectNav.js is inspired by TinyNav.js for jQuery.

ender-events and ender-assert

ender-events (GitHub: amccollum/ender-events, Licence: MIT, npm / Ender: ender-events) and ender-assert (GitHub: amccollum/ender-assert, Licence: MIT, npm / Ender: ender-assert) are two packages by Andrew McCollum, previously bundled in his node-compat library. ender-events gives you an implementation of the NodeJS EventEmitter class in your browser, while ender-assert gives you a browser version of the NodeJS assert module.

Andrew also has a tiny extension to Bonzo, the DOM utility included in Ender's starter pack (The Jeesh), named ender-remove that simply triggers a 'remove' event when nodes are removed from the DOM. Which can be helpful for performing clean-up actions.


Categorizr.js (GitHub: Skookum/categorizr.js, Licence: MIT, npm / Ender: categorizr) by Dustan Kasten is a JavaScript port of the Categorizr PHP script by Brett Jankord.

Categorizr gives you $.isDesktop() $.isTablet() $.isTV() $.isMobile() methods to determine the current device.


Arbiter (GitHub: iamdustan/arbiter, Licence: MIT, npm / Ender: arbiter) also by Dustan Kasten is a tiny library for managing the HTML5 history interface via pushState(), using AJAX requests to load new content upon request.


jquery design plugins keyboard websockets

jQuery Roundup: jquery-mobile-960, Easy WebSocket, mapKey, bValidator

Posted on .


jquery-mobile-960 (GitHub: jeromeetienne / jquery-mobile-960)
by Jerome Etienne is a port of 960 grid to jQuery Mobile. By combining
960.gs with jQuery Mobile the author aims to offer more flexible layout options, which makes
supporting tablets easier:

jQuery mobile layout is currently rather raw. They only split the width in even parts, providing little controls to the designer. It uses an custom API with names ending with a, b, c or d, ui-block-a for example. Not the classic grid-4 or span-3, so it feel awkward. [...] 960 grids are flexible and well known. So i used ported 960 grids to see if it helps.

Easy WebSocket

Easy WebSocket (GitHub: jeromeetienne / EasyWebsocket, MIT
License) also by Jerome Etienne is an effort to remove servers from the
WebSocket equation. It appears to use iframes and a small Python App
Engine script to make accessing resources as easy as this:

  var socket = new EasyWebSocket('ws://example.com/resource');

  socket.onopen = function() {
    socket.send('hello world.')

  socket.onmessage = function(event) {
    alert('received: ' + event.data);

So technically it still depends on a server, but it could make the lives
of front-end developers simpler who aren't used to messing around with
server-side code.


mapKey (GitHub: pixelmatrix / mapkey, MIT License) by Josh Pyles is a jQuery keyboard shortcut plugin that has
aliases for a lot of keys. Rather than working out the key codes for
arrow keys, left and up can be used instead:

$.mapKey('down', function() {
  // Keyboard shortcut event support goes here

I always try to add keyboard shortcuts to my apps, so rather than my
hokey homebrew keyboard code I might give this a try. One thing to
remember when supporting hotkeys is to be specific -- if a letter key is
pressed should this still trigger when the shift or metakeys are held


bValidator is a client-side validation library with extensive form control support and configuration
options. Custom attributes can be used to define the required
validations on a field:

This can be changed when setting up the plugin:

('#form').bValidator({ validateActionsAttr: 'class' })