DailyJS

Viewport Component, grunt-saucelabs, FastClick

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries mobile grunt components

Viewport Component, grunt-saucelabs, FastClick

Posted by Alex R. Young on .
Featured

libraries mobile grunt components

Viewport Component, grunt-saucelabs, FastClick

Posted by Alex R. Young on .

Viewport Component

Viewport Component (License: MIT, component: pazguille/viewport) by Guille Paz can be used to get information about a browser's viewport. This includes the width and height as well as the vertical and horizontal scroll positions.

It also emits events for scrolling, resizing, and when the top or bottom has been reached during scrolling.

var Viewport = require('viewport')  
  , viewport = new Viewport()
  ;

viewport.on('scroll', function() {  
  console.log(this.scrollY);
});

viewport.on('top', function() {  
  console.log('Top');
});

viewport.on('bottom', function() {  
  console.log('Bottom');
});

grunt-saucelabs

grunt-saucelabs (License: MIT, npm: grunt-saucelabs) by Parashuram N (axemclion) is a Grunt task for qunit and jasmine tests using Sauce Labs' Cloudified Browsers. This is similar to the built-in qunit Grunt task, but uses the remote service provided by Sauce Labs instead.

Sauce Connect can be used to create a tunnel for testing pages that aren't accessible on the Internet.

FastClick

FastClick (License: MIT, npm: fastclick, component: ftlabs/fastclick) from the Financial Times helps remove the delay in mobile browsers that occurs between a tap and the trigger of click events.

The authors have included some simple tests, documentation, and examples. The project is extremely well packaged, including support for npm, component, AMD, and Google Closure Compiler's ADVANCED_OPTIMIZATIONS.

Internally, FastClick works by binding events to a "layer" and binding several touch event handlers. These handlers use internal properties to determine how elements are being interacted with. If certain conditions are met, then a click event will be generated, and several attributes will be added to the event to allow further tracking.

The event handlers can be easily removed using FastClick.prototype.destroy, and the project has a wide range of special cases for handling divergent behaviour in iOS and Android.