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!

Pestered by my colleague Jason Weathersby (“you should have a share button on your blog, I don’t want to copy and paste the title and the URL”) I just added a “share on Twitter” button at the end of all my posts here on the blog. I looked at a few plugins and the official buttons and was not impressed as they all meant a lot of external JS and CSS and HTTP requests. That is not needed. So here is a Twitter Share button without any extra resources from the outside.

JS Bin

It is simple enough:

• The structure of a “share on Twitter” URL is http://twitter.com/share?url={url to share}&text={text to share}&via={twitter name}
• In WordPress you get the title of the current post in PHP with the_title() and the permalink of the post with the_permalink()
• Put them together and you are done:

<p class="tweetthis">
  <a href="http://twitter.com/share
           ?url=<?php the_permalink();?>
           &text=<?php the_title();?>
           &via={your twitter name}" target="_blank">
    share on twitter
  </a>
</p>

Add some styling and we’re in the business. Want to add more sharing buttons without JS? Toby Osbourne has a good post on more URL structures of social sites.