The JavaScript blog.


mobile modules npm touchscreen

Interdimensional, Package Quality

Posted on .


Interdimensional (GitHub: vodkabears/Interdimensional, License: MIT, npm: interdimensional, Bower: interdimensional) by Ilya Makarov is a library for responding to gyroscope events on devices that support the deviceorientation event. The demo site will start responding to tilts when you tap the polygon icon at the bottom-left of the screen.

The library's behaviour can be tweaked by changing the PPD option (pixels per difference between tilts), and there's also an insensitivity option for the minimum difference between tilts.

To start using spatial scrolling, call Interdimensional.charge. The library will emit events on the document object, so you can detect when the feature is enabled (interdimensional:charge), and if it wasn't possible to enable it (interdimensional:fail).

Package Quality

Package Quality

Package Quality by Alex Fernández is a service that evaluates npm packages based on npm and GitHub metrics. It's ideal if you want to quickly compare several competing packages.

The source is on GitHub (alexfernandez/package-quality) and the project is written with Express and MongoDB. The readme for the project has more details about how package quality is determined. The authors admit that any such measurements are potentially problematic, but they explain how version, downloads, and repo quality is measured so you can see what the numbers really mean.


testing mobile touchscreen laptops chrome-os

Mobile Testing on the Chromebook Pixel

Posted on .

The Pixel.

Last week I was invited to a "secret workshop" at one of the Google campuses in London. Knowing that Addy Osmani works there I expected something to do with Yeoman or AngularJS, but it turned out to be a small launch event for the Chromebook Pixel. I ended up walking out of there with my very own Pixel -- no, I didn't slip one into my backpack and run off wearing a balaclava, each attendee was given one to test.

Looking at this slick metallic slab of Google-designed hardware I was left wondering what to do with it as a JavaScript hacker. It runs Chrome OS and has a high density multi-touch display. That made me wonder: how useful is the Pixel as a multi-touch, "retina" testing device? My personal workflow for client-side development is to preview sites on my desktop or laptop, then switch to testing with mobile devices towards the end of the project. I may occasionally have a tablet or phone close by for experimental work or feasibility studies, but generally I leave the device testing until later.

By using a Pixel early in development the potential is there to work "touch natively" -- focusing on touch as a primary input mode rather than a secondary option.

If you're working on mobile sites, responsive designs, or browser-based games, then how well does the Pixel function as a testing machine? With one device you get several features that are useful for testing these kinds of sites:

  1. The touchscreen. Rather than struggling with a tablet or phone during early development you get a touchscreen and the standard inputs we're more used to.
  2. The screen's high resolution is useful for testing sites that optionally support high density displays.
  3. Chrome's developer tools make it easy to override the browser's reported size and user agent which is useful for testing mobile and responsive designs.

I've been using the Pixel with several mobile frameworks and well-known mobile-friendly sites to see how well these points play out in practice.

Testing Mobile Sites with Chrome

Pressing ctrl-shift-j opens the JavaScript console on a Chromebook. Once you're in there, selecting the settings icon opens up some options that can be used to simulate a mobile browser. The 'Overrides' tab has a user agent switcher which has some useful built-in browsers like Firefox Mobile and Android 4.x. There's also an option for changing the resolution, which changes the resolution reported to the DOM rather than resizing the window.

The Screen and Multi-Touch

The screen itself is 2560x1700 and 3:2 (239 ppi). It's sharp, far better than my battle-worn last gen MacBook Air. One of the Google employees at the event said the unusual aspect ratio was because websites are usually tall rather than wide, so they optimised for that. In practice I haven't noticed it -- the high pixels per inch is the most significant thing about it.

I tried Multitouch Test and it was able to see 10 unique points -- I'm not sure what the limit is and I can't find it documented in Google's technical specs for the Pixel.

The Touchpad

This article isn't intended to be a review of the Pixel. However, I really love the touchpad. I've struggled with non-Apple trackpads on laptops before, but the Pixel's touchpad is accurate and ignores accidental touches fairly well. The click action feels right -- it doesn't take too much pressure but has a satisfying click. I also like the soft finish, which makes it feel comfortable to use even with my sweaty hands.

Testing Mobile Frameworks

I tested some well-known mobile frameworks and sites purely using the touchscreen. I set Chrome to send the Android browser user agent, and I also tried Chrome for Android and Firefox Mobile.

The Google employees at the event were quick to point out that everything works using touch. It seems like a lot of effort has been put into translating touches into events that allow UI elements to behave as expected.

That made me wonder if sites optimised for other touch devices would fail to interpret touch events and gestures on the Pixel -- perhaps reading them as mouse events instead -- but all of the widgets and gestures I tried seemed to work as intended. I even ran the touch event reporting in Enyo and Sencha Touch to confirm the gestures were being reported correctly.

During the event, I opened The Verge on my phone just to check what the press was saying about the Pixel. There was mention of touchscreen interface lag, and Gruber picked this up on Daring Fireball. I don't have any way of measuring the lag scientifically myself (I hope to see a Digital Foundry-style analysis of the device), but in practice it feels like a modern tablet so I haven't had a problem with it. I'm not sure where Gruber gets "janky" from, but as the Pixel will be sold in high street stores across the UK and US you should be able to try it out in person.

jQuery Mobile worked using the touchscreen for standard navigation, and also recognised swipes and dragging.

jQuery Mobile's widgets worked with touch-based gestures.

Enyo also seemed to recognise the expected gestures.

Enyo worked as it would on a touchscreen phone or tablet.

The Sencha Touch demos behaved as they would on a mobile device.

Sencha Touch, showing the event viewer.

Bootstrap's responsive design seemed to cope with different sizes and touch gestures.

Bootstrap on the Pixel.

Testing Mobile Sites

The Guardian's mobile site running on the Pixel.

I tested some sites that I know work well on mobile devices, and used the touchscreen to interact with them. Again, this was with Chrome's user agent changed to several mobile browsers.

Development Test

The way I write both client-side projects and server-side code is with Vim, tmux, and command-line tools. This doesn't translate well to Chrome OS -- it can be done by switching the machine into developer mode, but this requires some Linux experience. The Pixel supports dual booting, and Crouton seems worth checking out if you're a Chromebook user.

I wrote this article primarily for client-side developers, so I imagine you'd prefer to use the OS as it was intended rather than installing Linux. With that in mind, I tried making some small projects using jQuery Mobile and Cloud9 IDE. Cloud9 worked well for the most part -- I had the occasional crashed tab, but I managed to get a project running.

Cloud9 IDE with its HTML preview panel.

One quirk I found was I used the jQuery Mobile CDN assets served using HTTP, whereas Cloud9 is always served over SSL. When I tried to preview my HTML files the CDN assets were blocked by Chrome, and only a small shield icon in the address bar indicated this so it wasn't immediately obvious.

Also, Cloud9 might not fit into your existing workflow. While it supports GitHub, Bitbucket, SSH, and FTP, it takes a bit of effort to get an existing project running with it.

If you were sold on using the Pixel as a high DPI touchscreen testing device, then the fact you can at least get some kind of JavaScript-friendly development going is useful. However, prepare to make some compromises.

Other Notes

Chrome syncs quickly. Try signing in with Chrome on multiple computers and installing apps or changing themes to see what I mean. The upshot of this is the Chromebook is reliable when syncing with Google's services. You lose this somewhat with other services depending on how they're built. Cloud9 IDE, for example, has an offline mode, but I haven't tested it well enough to see how resilient it is at syncing the data back again.

Switching accounts on a Chromebook isn't much fun. Chrome OS doesn't support anything like fast user switching, and I use a ridiculously long password stored in a password manager, so I'll do anything to avoid typing it in. Also, 1Password doesn't have an extension for Chrome OS -- you can use the HTML version (1Password Anywhere), but that is limited and isn't particularly friendly. Last Pass works though.


I love the look of the Pixel, it exudes luxury, and the OS is incredibly low maintenance. As for a mobile development testing rig -- it does the job, but you may find Chrome's remote debugging tools and a cheap tablet to work well enough. Being able to dip into Chrome's developer tools on a local device and use a keyboard and mouse is natural and convenient: it makes mobile testing feel like cheating!

Chromebooks are designed to sync constantly, which means you technically don't have to worry about losing data if yours gets damaged or stolen. As it stands it's a trade-off: you lose the ability to install your standard development tools but gain a lower maintenance and potentially more secure OS.

While I respect Cloud9 IDE, I feel like there are people clamouring for a product close to the Pixel that better supports developers. Perhaps Native Client will make this possible. We are the ultimate early adopters, so sell us machines we can code on with our preferred tools!


jquery plugins images touchscreen zoom textarea

jQuery Roundup: 1.9, Touch-box, Elevate Zoom, textareaHelper

Posted on .

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

jQuery 1.9

jQuery 1.9 has been released. This version retains legacy browser support, but "slims down" the API somewhat. jQuery 2.0 meanwhile will not support Internet Explorer 6-8, but it will have the same API.

jQuery Migrate can be used to migrate to 1.9 or 2.0.


Dannie Hansen sent in Touch-box (GitHub: danniehansen / Touch-box, License: GPL), a plugin for resizing and dragging elements on touchscreen devices. Although the documentation mentions iPad, I tested it on Android Chrome and both seemed to work well.

Dannie suggested an interesting idea for a gallery, where the resize event could automatically cause higher resolution images to be fetched through a callback:

  resize: true,
  drag: true,
  callback_touches: function(touches) {
  callback_change: function() {

Elevate Zoom

Elevate Zoom's tint feature.

Elevate Zoom (GitHub: elevateweb / elevatezoom, License: MIT/GPL) by Andy Eades is an image zoom plugin that has FancyBox support. It has some cool features like "tinting", where the unzoomed portion of the image is tinted -- demos are available for each of the main features.


textareaHelper by Amjad Masad and Codecademy transparently copies a textarea's contents into a div, so it can be manipulated in ways not supported by textarea. It will try to copy the styles from the textarea as well, and can fetch the caret's position.

Mocha tests have been included, which includes a setSelectionRange implementation to test the caret handling.


jquery games touchscreen modal tiling

jQuery Roundup: Knob, OmniWindow, bPopup, Pageflipper, Tiler

Posted on .

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

jQuery Knob

jQuery Knobs

jQuery Knob (GitHub: aterrien / jQuery-Knob, License: MIT/GPL) by Anthony Terrien is a nice and configurable dial widget.

It can be configured to exhibit a wide range of behaviours, from value range entry to an iPod clicker-style "infinite" wheel. The value that is displayed can be directly manipulated as well, and it works with scroll wheels and touchscreens.


OmniWindow (GitHub: 0x000000 / OmniWindow, License: MIT) by Alexander Rudenko is a fairly small modal window plugin, and the author has attempted to target it at programmers rather than designers.

The documentation is good and covers the main use-cases, and despite stating that the plugin doesn't support tonnes of options, it includes enough to keep it flexible.

It's based around events, so it can be used like this:


And it allows class names to be overridden, in case you want to integrate it with an existing project:

  overlay: {
    selector: '.custom-overlay', // don't forget the period symbol! 
    hideClass: 'custom-overlay-closed'
  modal: {
    hideClass: 'custom-modal-closed'


bPopup by Bjørn Klinggaard is another modal plugin that is simply triggered by calling $('element_to_pop_up').bPopup(). By default it'll reposition the popup when the browser's size is changed.

For full details on the available downloads and source code, see 21.04.12: New release, bPopup version 0.7.0.


Pageflipper (GitHub: wtw-software / pageflipper, License: MIT) from wtw-software uses CSS3 transitions to creative a native-feeling page sliding effect. It looks like something that would appeal to mobile web developers, but will also work with a mouse.

It can also be controlled programmatically:



Tiler (GitHub: borbit / tiler, License: MIT) by Serge Borbit is a library for working with infinite grids of tiles. This could be used to display map content, but the author has designed it with games in mind.

It feels more like a standard JavaScript library than a jQuery plugin (although jQuery is a dependency), so using it requires creating an instance of a Tiler object:

var tiler = new Tiler($('#viewport'), {  
  tileSize: 200,

  sync: function(options, callback) {
    var tosync = options.tosync;

    tosync.forEach(function(tile) {
      var img = new Image();
      var x = tile[0];
      var y = tile[1];

      img.onload = function() {
        callback([[x, y, $('<img/>').attr('src', img.src)]]);

      img.src = 'image_' + x + '_' + y + '.png';

QUnit tests are included.


jquery templating jqueryui touchscreen

jQuery Roundup: Jewel, Custom Drag and Drop, TouchTouch, BetterExamples.js

Posted on .

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


Jewel (License: MIT) by Vadim Demedes is an ActiveRecord-inspired DOM query API:

var Post = Jewel.define('#posts', {  
  keys: {
    title: 'h1'
  , body: 'p'

  template: function(fields) {
    return '<div class="post"><h1>' + fields.title + '</h1><p>' + fields.body + '</p></div>';

// Get all of the posts
var posts = Post.all;

// Create a new post
var post = new Post();  
post.title = 'Latest post';  
post.body = 'Latest content';  
post.save(); // Will be prepended to #posts  

It actually combines templating and querying, which seems to work quite well. The author has included some Mocha unit tests, and he's tested it in everything except IE.

Custom Drag and Drop with Mouse

Roll your own drag-and-drop handling, with help from jQuery UI by Jo Liss is a tutorial that explains how to build customised drag-and-drop interfaces using the jQuery UI Mouse widget.

It's interesting because I've struggled to get Draggable to do what I wanted in more complex or unique situations, and building on Mouse seems to offer the flexibility some projects demand.



TouchTouch (GitHub: martinaglv / touchTouch, License: MIT, Demo by Martin Angelov is an image gallery that's also touchscreen-friendly. It features a responsive interface with CSS3 animations and gestures like swiping.

All it needs is a list of images with links: $('#thumbs a').touchTouch();


BetterExamples.js (GitHub: willemmulder / BetterExamples.js, License: CC BY-SA 3.0) by Willem Mulder is an attempt to make JavaScript code examples more interactive.

It'll display both logging and errors, next to the code that generated them. This is something that I'd like to succeed because even with great tools like jsFiddle I feel like it's still difficult to create easy to follow interactive code examples.