DailyJS

DailyJS

The JavaScript blog.


Tagtouch
Featured

mobile touch

Hammer.js: touch-action fix

Posted on .

Hammer.js has been updated, and the authors have written a notice about the scrolling behaviour in Chrome 35 and IE10. The touch-action CSS property controls how regions are scrolled with touch events -- think panning and zooming.

In older versions of Hammer, this property was set to none, so it blocked scrolling. You can change the default behaviour using the behavior.touchAction property:

<script src="hammer.js"></script>  
<script>  
// enable only vertical scrolling on browsers that support touch-action
// for 1.0.x this is at the stop_default_behavior object
Hammer.defaults.behavior.touchAction = 'pan-y';

// ...your hammer code...etc...
var mc = new Hammer(document.body);  
</script>  

Realising that this would confuse people, the Hammer authors have written How to fix Chrome 35 and IE10 scrolling, so you can update your Hammer-based sites to work correctly in newer browsers.

Featured

libraries oo touch commonjs

Caress, cjs2web, zoe.js

Posted on .

Caress

Caress (GitHub: ekryski / caress-server, License: MIT, npm: caress-server) by Eric Kryski converts TUIO events to browser events (W3C Touch Events version 2), allowing desktop browsers to be driven by multitouch devices. This includes Apple's Magic Trackpad, Android, and iOS devices.

Caress uses Node and Socket.IO to send TUIO messages to the browser -- this is usually done using UDP, but Node and Socket.IO seem to work well. Since Caress can be used with the Magic Trackpad, it might work well as a shortcut for testing touch-based interfaces during development.

cjs2web

cjs2web (GitHub: cjs2web, License: MIT, npm: cjs2web) by Alex Lawrence is a CommonJS module-to-browser translation tool. It currently supports mapping local modules, and the exports object (including module.exports). It doesn't support Node's process and global modules, so it's useful for lightweight porting of browser-friendly code. This is in contrast to something like OneJS that actually aims to create a Node-like environment in the browser.

Jasmine specs are included, and the Grunt build script used to run them.

zoe.js

zoe.js (GitHub: zestjs / zoe, License: MIT, npm: zoe, component: zestjs/zoe) by Guy Bedford is a Node/AMD/browser library for working with multiple inheritance:

The basic principle is that inheritance is a form of object extension. A core object is extended with a number of implemented definitions. When that object is extended, a new object is created implementing the core definitions as well as any new definitions. This is the inheritance system of zoe.create.

Objects created this way can be configured with "function chains", which allows the library to support asynchronous code and various forms of the observer pattern.

Basic object extension uses zoe.create:

var baseClass = {  
  hello: 'world'
};

var derivedClass = zoe.create([baseClass], {  
  another: 'property'
});

If an _extend property is supplied, zoe will use it to apply various rules. In this example, chaining is used which will cause both greet methods to run:

var greetClass = {  
  _extend: {
    greet: 'CHAIN'
  },
  greet: function() {
    return 'howdy';
  }
};

var myClass = zoe.create([greetClass], {  
  greet: function() {
    alert('greeting');
  }
});

myClass.greet();  

Featured

jquery mobile plugins touch email promises

jQuery Roundup: Touch Patents, Standalone Deferred, Mailcheck.js

Posted on .

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

Touch Patents

In Getting Touchy About Patents on the official jQuery blog, the relationship between Apple and W3C's efforts to standardise touch events is discussed. At the end of the aritcle, there are several calls to action, some of which DailyJS readers can help with:

We would also encourage the community to experiment with Touch and MSPointer. Play with the APIs, build apps, and provide feedback.

If you know of any prior art for multi-touch/touch lists, even outside of the Web, please get in touch with the W3C.

The distinctions between pointer events and touch events are also explored. This comment in particular is interesting:

It's conceivable that in a few years developers could use Pointer Events as the only event model for pointers, leaving Mouse Events as a thing of the past.

Standalone Deferred

Standalone Deferred (License: MIT) by Otto Vehviläinen is a standalone implementation of jQuery.Deferred. The Deferred object is a chainable API based on the CommonJS Promises/A specification.

The project is distributed with Jasmine tests, and features the expected methods including when, then, resolve, and reject. The author has rewritten the library using CoffeeScript, so it's not a quick and dirty extraction from jQuery's code.

Mailcheck.js

mailcheck.js (License: MIT) by Derrick Ko and Receivd, Inc., is designed to help reduce email address typos by checking input field values against a list of popular email providers:

var defaultDomains = ["yahoo.com", "google.com", "hotmail.com", "gmail.com", "me.com", "aol.com", "mac.com",  
                      "live.com", "comcast.net", "googlemail.com", "msn.com", "hotmail.co.uk", "yahoo.co.uk",
                      "facebook.com", "verizon.net", "sbcglobal.net", "att.net", "gmx.com", "mail.com"];
var defaultTopLevelDomains = ["co.uk", "com", "net", "org", "info", "edu", "gov", "mil"];  

The author has written a post that claims this reduced confirmation email bounces by 50%.

Featured

frameworks libraries touch android iOS

Gestures, Scopeleaks, Wink, JLS, JavaScript Blogs

Posted on .

The Node tutorials will continue next week, in the meantime I have a
backlog of news from our Twitter friends to catch up with.

Gestures

When I was writing gesture event support for the Let's Make a
Framework
series, quite a few readers got in touch to say gesture
recognition had been a sticking point for them during development of
web-based iOS or Android apps. Tait Brown, who made my favourite jQuery
UI theme Aristo,
has now made
Gestures which is a proof-of-concept library for gesture recognition.

The Gesture demo
shows how the library works -- gestures are recognised as shapes. At the
moment this is based on the \$1 Unistroke Recognizer in
JavaScript
.

I'm hoping Tait can add a simple multitouch API and release Gestures as
a library soon.

scopeleaks.js

scopeleaks.js by Rui Lopes is a browser and CommonJS module for detecting global variable leaks. Once
loaded with a script tag or through a require, the global
variable state can be recorded and analysed:

var snapshot = scopeleaks.snapshot();
scopeleaks.leaks(snapshot);

It's a simple library but might be useful for giving scripts a once-over
before release.

A similar project is
detect-global by Juriy Zaytsev (kangax).

Wink 1.2.3

Jérôme Giraud sent me a note that Wink
1.2.3
has been released, which adds
support for Android (2.2, 2.3) devices. Jérôme wrote a Wink
tutorial
for DailyJS back
in September.

JavaLikeScript

JavaLikeScript, or jls, is an interesting framework based on Prototype that runs on NSPR and
SpiderMonkey for Windows and Linux. It includes a GUI library, CommonJS
modules, file system access, a unit testing framework, and a network
library.

The author hasn't yet released the native source code yet, but it looks
like he's just preparing the build chain and documentation before
releasing it. The API
documentation
gives an
overview of the APIs if you'd like to dig a little deeper.

ecmazing JavaScript Blogs

Šime Vidas wrote in to let us know about ecmazing JavaScript Blogs, a JavaScript blog viewer. It
feels very fast and makes it easy to quickly switch between blogs. Of
course, most of those blogs are in my news reader, but I thought the
fact it's all client-side might interest readers who are front-end
developers.

Featured

tutorials frameworks lmaf touch

Let's Make a Framework: Touch Part 2

Posted on .

Welcome to part 24 of Let's Make a Framework, the ongoing series about
building a JavaScript framework. This part continues the discussion on
touchscreen devices.

If you haven't been following along, these articles are tagged with
lmaf. The project we're creating is called Turing and is available on GitHub:
turing.js.

It might seem like 24 parts is a lot for a series like this. It would
seem like a daunting figure if you wanted to read through all of them.
Perhaps a professionally edited epub or pdf version would be more
appropriate? We'll see!

Events

Last week I explained how to detect orientation changes. This is
actually very simple once you know how to interpret
window.orientation. Other events, like multi-touch
gestures, take a bit more work.
jQTouch, which is one of the leading frameworks in this area, makes this easier by offering helper
events like swipe and tap. The
swipe event also makes it easy to detect the direction of
the swipe.

The jQTouch source also has a joke about touch events:

// Private touch functions (TODO: insert dirty joke)
function touchmove(e) {

The "real" events, as far as Safari is concerned, are:

  • touchstart
  • touchmove
  • touchend
  • touchcancel

The callback methods are passed event objects with these properties:

  • event.touches: All touches on the page
  • event.targetTouches: Touches for the target element
  • event.changedTouches: Changed touches for this event

The changedTouches property can be used to handle
multi-touch events.

State

The way I handle tap and swipe events is by recording the state at each
event.

  • If there's just one event and the position hasn't changed, it's a tap event
  • If touchmove fired, work out the distance of the movement and how long it took for a swipe

I'm fairly sure that only horizontal swipes make sense, seeing as
vertical movement scrolls the browser window.

From the developer's perspective, the API should look like this:

turing.events.add(element, 'tap', function(e) {
  alert('tap');
});
turing.events.add(element, 'swipe', function(e) {
  alert('swipe');
});

We can watch for all the touch events inside the library, then fire tap
or swipe on the event's target element. The library registers for events
like this:

turing.events.add(document, 'touchstart', touchStart);
turing.events.add(document, 'touchmove', touchMove);
turing.events.add(document, 'touchend', touchEnd);

The touchStart and similar methods are our own internal
handlers. That's where tap and swipe events are detected. I've actually
put these "global" handlers in a method called
turing.touch.register because I don't yet have a good way
of adding them unless they're needed.

I thought it might be nice if turing.events.add could allow
other libraries to extend it, so the touch library could say "hey, if
anyone wants events called tap or touch, run register first."

State and Pythagoras

When touchStart is fired, I store the state of the event:

function touchStart(e) {
  state.touches = e.touches;
  state.startTime  = (new Date).getTime();
  state.x = e.changedTouches[0].clientX;
  state.y = e.changedTouches[0].clientY;
  state.startX = state.x;
  state.startY = state.y;
  state.target = e.target;
  state.duration = 0;
}

Quite a lot of things are recorded here. I got the idea of working out
the duration of events from jQTouch -- it makes sense to do things based
on time when working with gestures.

Single taps are a simple case:

function touchEnd(e) {
  var x = e.changedTouches[0].clientX,
      y = e.changedTouches[0].clientY;

  if (state.x === x && state.y === y && state.touches.length == 1) {
    turing.events.fire(e.target, 'tap');
  }
}

Moves are a bit more complicated. I use Pythagoras to calculate how far
the finger has moved. This probably isn't really required, but I like
bringing highschool maths into my tutorials if possible:

function touchMove(e) {
  var moved = 0, touch = e.changedTouches[0];
  state.duration = (new Date).getTime() - state.startTime;
  state.x = state.startX - touch.pageX;
  state.y = state.startY - touch.pageY;
  moved = Math.sqrt(Math.pow(Math.abs(state.x), 2) + Math.pow(Math.abs(state.y), 2));

  if (state.duration < 1000 && moved > turing.touch.swipeThreshold) {
    turing.events.fire(e.target, 'swipe');
  }
}

I calculate turing.touch.swipeThreshold based on screen
resolution. I was thinking about scaling up the minimum distance
considered a swipe to the iPhone 4's high resolution, but then I found
out that it treats the browser as if it was the old iPhone resolution,
so this wasn't actually required.

The state object isn't global, it's wrapped up inside a
good old closure, like the rest of the class. You can check it all out
in
turing.touch.js