Show HN: HumanInput.js – A library for capturing human input

https://github.com/liftoff/HumanInput/?hn

by riskable • 10 years ago

24 3 10 years ago

riskable• 10 years ago

Been working on this for a few months now (spare time) and I've finally decided to share it with the world. I'd love to hear what the folks of HN think.

The core of the library handles keyboard events along with some window/document events (which are necessary for plugins and handling edge cases like alt-tab) but the rest of it is modular. You should be able to use the /lib directory with modern ES6 import syntax like so:

    import HumanInput from './humaninput/lib/humaninput.js';
    import PointerPlugin from './humaninput/lib/pointer.js';
    import IdlePlugin from './humaninput/lib/pointer.js';

Of course, there's also mechanisms to build your own version with just the features you want for traditional <script> inclusion.

The two key features I was going for when I started this project were:

  * Make a keyboard event lib that works with non-US keyboard layouts.

  * Make it *easy* for people to add user-customizable shortcuts to their web app 
    (just like regular desktop applications).

For reference, I don't think there was a single keyboard event library for JavaScript that supports non-US layouts until now. A few years ago HN had a post about Keypress (js lib):

https://news.ycombinator.com/item?id=6464138

...and the top comment was a wise warning from pyalot2 (https://news.ycombinator.com/user?id=pyalot2):

    Note that you should avoid using this (or anything else with JS)
    to emulate shortcuts.
     
    The reason is because what this usually looks like "oh nice I can
    define shortcuts people can press". What it actually means is: 
    "Ohcrap, that shortcut only works for US-US 104 keyboard layouts,
    and about 80% of people can't press that shortcut".

With HumanInput this should not be a concern!

ruler88• 10 years ago

Great work! I've always had to build this stuff in every app with hacky solutions and I always just had to guess if it is polyfill'ed or not. Your library allows for much cleaner code and easier application. Definitely gonna use this next time I come across a need to capture input events.

polygot• 10 years ago

This is a really good idea. No more if (keycode == 71 && keycode == 73 stuff), and trying to remember which is which, and having to look up each one.

Show HN: HumanInput.js – A library for capturing human input

Related Stories