Following a few discussions I had with the developer evangelism reps group lately, I just added a small update to the Developer Evangelism Handbook. In the “Work with your own company” I added a new section called Balance your personal and official channels.

This one gives advice why it is not a great plan to publish company specific information on your personal blog or social media channels but instead on the official, company sanctioned ones. That way you don’t cause internal controversy and leave yourself open to moving on without burdening yourself with maintenance of information you don’t control.

In short: your company’s products are not there to promote you or your blog. You are there to promote the products and bring people to where the up-to-date, officially maintained information is. That is what being a developer evangelist is about.

Earlier this year, I was lucky enough to speak at Beyond Tellerand in Germany. My talk Fixing the mobile web (video on Vimeo) was a passionate session on how the web is not only for the rich with the coolest, newest devices, but for everyone. Marc Thiele, the organiser of Beyond Tellerand, is not only a good friend who I have a long history with, but also fiercely passionate about making his events memorable. One of the very unique things about this event was that all talks were sampled and remixed live in the breaks between talks by the German electronica artist Baldower.

Here is what they did with my talk. You can hear the song “The Web is for everybody” by Baldower on Soundcloud.

I was first confused but then giggled at the small laugh sample at the end of the song, of course an homage to Melle Mel’s laugh in Grandmaster Flash and the Furious Five’s “The Message”, although I am pretty sure I could not get away with his style:

You can listen to all the songs from Beyond Tellerand them on Baldower’s Soundcloud page

Today I spent a few hours in the Leap motion offices talking about the web possibilities of this cool new technology. On the way back we had an internet connectivity outage, so it was a great opportunity to start playing with some of the ideas. Here is a video of what I am working on.

In essence, this means:

• Swiping your finger right will scroll the page down, left will scroll up. The speed of the swipe defines the amount of pixels scrolled
• Making a clockwise circular gesture will jump to the next link, making a counter-clockwise one to the previous link
• A tap gesture in the air will activate the link

The code is actually amazingly simple, once you use the Leap.js library:

(function(){
var linkindex = -1;
var links = document.querySelectorAll('a');
myController = new Leap.Controller("ws://localhost:6437/");
myListener = new Leap.Listener();
myListener.onFrame = function(controller) {
  var frame = controller.frame();
  var gestures = frame.gestures();
  if (gestures[0] && gestures[0]._state === 'stop') {
 
    if (gestures[0]._type === 'swipe') {
      if(gestures[0]._direction.x > 0) {
        window.scrollBy(0,gestures[0]._speed*2);
      } else {
        window.scrollBy(0,-gestures[0]._speed*2);
      }
    }
    if (gestures[0]._type === 'keyTap') {
      if (linkindex) { 
        links[linkindex].click();
      }   
    }
    if (gestures[0]._type === 'circle') {
      if (gestures[0]._clockwise === true) {
          updateIndex(1);
          if(links[linkindex]) {
            links[linkindex].focus();   
          };
        } 
      if (gestures[0]._clockwise === false) {
          updateIndex(-1);
          if(links[linkindex]) {
            links[linkindex].focus();   
          };
      } 
    }
  }
}
function updateIndex(add) {
  linkindex += add;
  if (linkindex < 0) {
    linkindex = 0;
  }
  if (linkindex >= links.length) {
    linkindex = links.length - 1;
  }
}
myController.addListener(myListener);
myController.enableGesture("keyTap", true);
myController.enableGesture("swipe", true);
myController.enableGesture("circle", true);
})();

This is now very rough and ready and I will try to wrap this is a bookmarklet to apply it on any web site.

This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. If you just use getUserMedia and connect the stream to a video element, this is what you get:

That’s not right, I would expect the video to look like this:

This is very simple to achieve. First of all, you need to flip the video element with CSS:

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

Of course, this is not enough, as the CSS transformation doesn’t change the pixels of the video. In order to flip the video pixels around when you access them with CANVAS – for example to add filter effects or generate animated GIFs you also need to transform the context:

  // ctx is the plotting canvas' context
  // w is the width of the canvas
  ctx.translate(w, 0);
  ctx.scale(-1, 1);

Doing this, makes me happy. Please do this.

I am currently in cloudy and hot Florida for SenchaCon 2013 and was asked to give a talk about “cool new technology and upcoming standards”. Instead, I gave a talk about using already available modern technology and thus making the future the today.

I published the screencast on YouTube.

The slides are online, too, but not that useful for you, watching the screencast works better and doesn’t hammer my server :)

Here are the resources mentioned in the talk:

• Jobs’ original vision – no third party native apps
• Bell Centennial
• JSGIF Bookmarklet
• http://codepo8.github.io/irregular-shape-rollover
• http://christianheilmann.com/2013/06/15/image-masking-with-html5-canvas/
• The making of Face to GIF
• Remove a stripped screw
• Remove a stripped screw
• Cubeslam

I will be at SenchaCon for another two days, then I am off to NYC and San Francisco. If you are here, come and holler!