Der Blog von Benny Neugebauer » JavaScript

Check for HTML5 features with JavaScript

bennyn — Thu, 17 May 2012 09:58:49 +0000

There is no magic behind checking a web-browsers support for a specific HTML5 feature. If you want to check if a browser supports the latest HTML5 WebSocket API then you just have to take care if there is an object called “WebSocket” available via the DOM:

<script>
  if('WebSocket' in window){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
script>

Nevertheless, there are still people who want to include a fancy library for such an inspection. You can do the same with Modernizr:

<script src="http://www.modernizr.com/downloads/modernizr-latest.js">script>
<script>
  if(Modernizr.websockets){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
script>

Vergleich von Tweening und Easing in KineticJS & CreateJS

bennyn — Tue, 15 May 2012 13:05:40 +0000

Die folgenden zwei Beispiele zeigen, wie das Tweening und Easing mit KineticJS und mit den CreateJS-Bestandteilen EaselJS und TweenJS funktioniert. Das Beispiel zeigt ein HTML5-Logo in der linken oberen Canvas-Ecke und transformiert dieses Logo beim Anklicken in Richtung Mitte.

CreateJS

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CreateJS: EaselJS & TweenJStitle>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
    style>
  head>
  <body>  
    <canvas id="container" width="800" height="600">canvas>
    <script src="http://code.createjs.com/easeljs-0.4.2.min.js">script>
    <script src="http://code.createjs.com/tweenjs-0.2.0.min.js">script>
    <script>
      // Set-up stage
      var container = document.getElementById("container");
      var stage = new Stage(container);
      stage.mouseEventsEnabled = true;
      // Set-up layer
      var layer = new Container();
      // Set-up image
      var image = new Image();
      image.src = "./images/html5-logo.png";
      // Append image to object
      var object = new Bitmap(image);
      object.x = 0;
      object.y = 0;
      // Recognize click on object
      object.onPress = function(event){
        // Tweening & Easing
        Tween.get(object).to({
          x: 222,
          y: 333
        },1000,Ease.bounceInOut);
      };
      // Add object to layer
      layer.addChild(object);
      // Add layer to stage
      stage.addChild(layer);
      // Render
      Ticker.setFPS(20);
      Ticker.addListener(stage, false);
    script>
  body>
html>

KineticJS

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>KineticJStitle>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
    style>
  head>
  <body>
    <div id="container">div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.4.js">script>
    <script>
      // Set-up stage
      var stage = new Kinetic.Stage({
        container: "container",
        width: 800,
        height: 600
      });
      // Set-up layer
      var layer = new Kinetic.Layer();
      // Set-up image
      var image = new Image();
      image.onload = function(){
        // Append image to object
        var object = new Kinetic.Image({
          x: 0,
          y: 0,
          image: this,
          detectionType: "pixel"
        });
        // Recognize click on object
        object.on("click touchend", function(){
          // Tweening & Easing
          object.transitionTo({
            x: 222,
            y: 333,
            duration: 1,
            easing: "ease-in-out"
          });
        });
        // Add object to layer
        layer.add(object);
        layer.draw();
        object.saveData();
      };
      image.src = "./images/html5-logo.png";
      // Add layer to stage and render
      stage.add(layer);
    script>
  body>
html>

I have chosen KineticJS because the "click touchend" still works if you use it in connection with this code (to prevent iOS bumping and scrolling on mobile devices):

<script>
  document.ontouchstart = document.ontouchmove = document.ontouchend = function(event){
    event.preventDefault();
  };
script>

The object.onPress function of EaselJS will not work with the code above.

socket.io und node.js Einsteiger-Tutorial für Windows

bennyn — Thu, 10 May 2012 14:46:56 +0000

Die Benutzung von socket.io mit node.js ist einfach aber wird oft unverständlich erklärt. Deshalb schreibe ich kurz das Wichtigste in wenigen Schritten nieder:

node.js v0.6.16 für Windows herunterladen und installieren
C:\Windows\System32\cmd.exe aufrufen
Ins Projektverzeichnis wechseln, z.B.: cd C:\my_project
npm install socket.io eingeben, wodurch socket.io im Ordner “C:\my_project\node_modules\socket.io” installiert wird

Die Datei C:\my_project\server.js mit diesem Inhalt anlegen:

var io = require('socket.io').listen(72);
 
io.sockets.on('connection', function (socket) {
  socket.emit('news', {
    hello: 'world'
  });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Die Datei C:\my_project\client.html mit diesem Inhalt anlegen:

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Testtitle>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
    style>
  head>
  <body>  
    <script src="http://localhost:72/socket.io/socket.io.js">script>
    <script>
      var socket = io.connect('http://localhost:72');
      socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
      });
    script>
  body>
html>

Folgende Befehle in der cmd ausführen:
```
cd C:\my_project
node server.js
```
C:\my_project\client.html im Browser öffnen und das Ergebnis in der JavaScript-Konsole bewundern

Error: spawn ENOTSUP when installing socket.io with npm install

bennyn — Wed, 09 May 2012 14:13:59 +0000

If you have installed node.js v0.6.16 for Windows and you want to install socket.io with the following command:

npm install socket.io

Then it could happen that you will get this error message on Windows 7 (64-Bit):

> node install.js
 
npm ERR! Error: spawn ENOTSUP
npm ERR!     at errnoException (child_process.js:483:11)
npm ERR!     at ChildProcess.spawn (child_process.js:446:11)
npm ERR!     at Object.spawn (child_process.js:342:9)
npm ERR!     at spawn (C:\Program Files (x86)\nodejs\node_mod
npm ERR!     at exec (C:\Program Files (x86)\nodejs\node_modu
npm ERR!     at Array.0 (C:\Program Files (x86)\nodejs\node_m
npm ERR!     at EventEmitter._tickCallback (node.js:192:40)

Fortunately, there is a solution! Open this file:

C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\exec.js

Replace these two lines (around line 109 & 110):

  if (!isNaN(uid)) opts.uid = uid
  if (!isNaN(gid)) opts.gid = gid

That’s all. For more information see: Error on socket.io installing on Windows 7.

With these ones:

  if (uid && !isNaN(uid)) opts.uid = +uid
  if (gid && !isNaN(gid)) opts.gid = +gid

Facebook JavaScript SDK made simple

bennyn — Sat, 28 Apr 2012 09:59:21 +0000

To work with the Facebook API you have to load the Facebook JavaScript SDK, initialize your Facebook application, authenticate the user and request an access token to then send the final Facebook API calls. In this long process chain much can go wrong. Especially because the calls happen all asnychron. You have to work with the correct callback mechanisms to reach the goal. To hide this mechanism and to make the Facebook API easier to use, I have created an abstraction, with which you can work much easier, as you can see here:

<script src="./js/simple-facebook.js">script>
<script>
  // Setup
  var fb = new SimpleFacebook();
  fb.setAppId('255100001240698');
  fb.setLocale('de_DE');
  fb.setPermissions('email,user_about_me,friends_about_me,publish_actions');
  // Usage
  fb.showUsersName();
  fb.showUsersLink();
script>

Doesn’t it look great? No more need to include a fb-root tag or many JavaScript snippets. All you need is the simple-facebook.js file, which can be expanded depending on your needs. Here is a basic version, which illustrates the concept:

simple-facebook.js

function SimpleFacebook()
{
  this.appId = '';
  this.userId = '';
  this.accessToken = -1;
  this.locale = 'en_US';
  this.permissions = '';
  this.display = 'page'; // Can be page, popup, iframe, or touch
}
 
SimpleFacebook.prototype.setAppId = function(appId){
  this.appId = appId;
};
 
SimpleFacebook.prototype.setPermissions = function(permissions){
  this.permissions = permissions;
};
 
SimpleFacebook.prototype.setLocale = function(locale){
  this.locale = locale;
};
 
SimpleFacebook.prototype.setDisplay = function(display){
  this.display = display;
};
 
SimpleFacebook.prototype.loadSdk = function(callback){
  console.log('Load Facebook JavaScript SDK asynchronously');
 
  var that = this;
 
  window.fbAsyncInit = function(){
    // Prevents: FB.login() called before FB.init().
    that.initApp();
    // Prevents: An active access token must be used to query information about the current user.
    if(typeof callback != 'undefined')
      that.executeWithAccessToken(callback);
    else
      that.executeWithAccessToken();
  };
 
  // Prevents: FB is not defined.
  (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/"+that.locale+"/all.js";
    ref.parentNode.insertBefore(js, ref);
  }(document));
}
 
SimpleFacebook.prototype.initApp = function(){
  if(typeof FB !== 'undefined'){
    FB.init({
      appId: this.appId, 
      status: true, 
      cookie: true, 
      xfbml: true
    });
  }else{
    this.loadSdk();
  }
};
 
SimpleFacebook.prototype.executeWithAccessToken = function(callback){
  console.log('Request access token...');
  var that = this;
 
  if(typeof FB == 'undefined'){
    that.loadSdk(callback);
  }else{
    if(typeof that.accessToken != 'string'){
      FB.login(function(response){
        if (response.authResponse){
          that.accessToken = response.authResponse.accessToken;
          console.log('Got access token: '+that.accessToken);
          if(typeof callback != 'undefined'){
            callback(that.accessToken);
          }
        }
      }
      ,{
        scope:that.permissions,
        display:that.display
      });
    }else{
      if(typeof callback != 'undefined'){
        callback(that.accessToken);
      }
    }
  }
}
 
/* Custom API functions */
SimpleFacebook.prototype.showUsersName = function(){
  var that = this;
 
  var callback = function(){
    FB.api('/me?access_token='+that.accessToken,function(response){
      console.log('Show user\'s name');
      alert(response.name);
    });
  }
 
  that.executeWithAccessToken(callback);
}
 
SimpleFacebook.prototype.showUsersLink = function(){
  var that = this;
 
  var callback = function(){
    FB.api('/me?access_token='+that.accessToken,function(response){
      console.log('Show user\'s link');
      alert(response.link);
    });
  }
 
  that.executeWithAccessToken(callback);
}

Process chain

The first call to fb.showUsersName(); does the following:

Request access token...
Load Facebook JavaScript SDK asynchronously
The "fb-root" div has not been created, auto-creating
Request access token...
Got access token: AAA[...]
Show user's name

Another call to fb.showUsersName(); leads to improved treatment of the process:

Request access token...
Show user's name

Simplification and optimization in one. That’s how JavaScript tools should work!