Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for July, 2013.

Archive for July, 2013

Playing with Leapmotion for accessibility

Wednesday, July 31st, 2013

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:

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) {
      } else {
    if (gestures[0]._type === 'keyTap') {
      if (linkindex) { 
    if (gestures[0]._type === 'circle') {
      if (gestures[0]._clockwise === true) {
          if(links[linkindex]) {
      if (gestures[0]._clockwise === false) {
          if(links[linkindex]) {
function updateIndex(add) {
  linkindex += add;
  if (linkindex < 0) {
    linkindex = 0;
  if (linkindex >= links.length) {
    linkindex = links.length - 1;
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.

Flipping the image when accessing the laptop camera with getUserMedia

Friday, July 19th, 2013

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.

Senchacon 2013 – HTML5 and beyond

Thursday, July 18th, 2013

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:

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!

Quickie: A scriptless, imageless, no-third party code Twitter share button for WordPress

Tuesday, July 9th, 2013

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{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="
           ?url=<?php the_permalink();?>
           &text=<?php the_title();?>
           &via={your twitter name}" target="_blank">
    share on twitter

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.

Five presentation traps to avoid in technical talks

Tuesday, July 9th, 2013

Speaking on stage and in meetings is all about doing it and repeating it until you are more confident and good at it. Yes, you can rehearse the one talk to rule them all and repeatedly deliver it but I promise it will be much more rewarding to you and your audiences to mix it up and do different things for different audiences. the terror of speaking to a room

Watching your own work is painful but excellent if you want to get better. You can be very critical about yourself without being hurtful – as others would be if they said the same things you say in your head. When watching some of my talks I found a few traps I fall into that I want to avoid in the future to get better. And here I listed five of them that a lot of speakers fall into without knowing the effects this may have on the talk overall and the audience.

The “little bit extra” trap

transformers story structureI fall for this a lot (and I can point it out in some of my talks and cringe when I see the videos): you’ve written a nice talk, with a good narrative structure and then you remember that one other thing that is funny, interesting, or current and you add it in and make it somehow work. In my case I do that a lot off the cuff on stage. This is actually for you, and not for the audience. For them it might be a quick “ha-ha” or “ah-hah!” moment but all in all distracts from the overall message. Whenever you feel the need to add yet another thing that might need some persuasion to fit in the overall picture, don’t. Instead re-evaluate what you have, maybe change the order of your examples a bit, and pace yourself more on stage.

Three things, delivered with conviction and passion and explained well are better than ten things for the audience to pick and mix. More likely they’ll have forgotten the second one by the time you reach the seventh.

The “let me tell you about myself” trap

Introducing yourself is important, both in “real life” communication and on stage. You should however consider the context. At an unconference, where nobody knows who speaks where and when, having a slide telling people who you are and how to contact you is incredibly important and a good start for a career as a presenter. At a conference and when you are already known, less so. First of all, every conference has a speaker bio on the conference page and in the printouts attendees get. If really nobody reads them, why do we bother adding them? Secondly, most conferences will have an MC who introduces speakers and talks about housekeeping and such. Talk to the MC instead to introduce you properly and you can skip the “here’s me, here’s where I work, here’s where I am from, here is what I did in the past” and use the short time you have on stage for something the audience benefits from right now instead.

The “I must show, not explain!” trap

This is a tricky one, as – especially in the tech world – live demos are very successful with audiences and people are incredibly excited to see people they look up do showing live coding magic on stage. If that is what you want to do, also be aware that at this moment you are not speaking at a conference. Instead you are performing.

This can be done amazingly well – Seb Lee-Delisle being someone who immediately springs to mind. But it can also go horribly wrong, where you see someone spending most of their talk covering “waiting for wireless to connect” or “I need to start the server” or “oh, that crashed, let’s try that again!”. Yes, live demos are amazingly impressive, but we should also question how much more than just a show they are for the audience. How much will be repeatable? Probably not much. There is nothing wrong with showing a screencast of a perfectly working example and narrate over it. There is also nothing wrong about explaining the “why” instead of the “how” from time to time. You are a speaker, not necessarily a performer.

It is very strange, actually. A lot of people will say they love speakers do live coding, as that means they are not sales guys just promising things. On the other hand I have seen far too many “product walkthroughs” that looked liked live code, but have been scripted and in some cases even simulated. Suspension of Disbelief works in movies and on stage – any stage.

The “just look at this video with me” trap

Videos are cool, and a very simple way to convey a lot of information in a very short amount of time. They achieve that by being very demanding to the person watching them – all your senses (except for touch, but we are working on that) are catered to. This also means that showing a video with sound on will steal the audience from you. You become a spectator with them and it needs quite some skill to reel them back in. Think about that. Starting or ending with a video is easier and less of a disruption but seeing that video can always be an issue with external projectors, you might just want to give it a miss and show a screenshot of the video instead with its URL and tell people to watch it in their own time.

The “code, code, glorious code” trap

sleep sheepShowing code on stage makes it a much more technical talk than not showing code. But showing unreadable code or overwhelming people with it doesn’t make it technical talk – it makes it an exercise in frustration. Try to keep your code examples short and sweet. In contrast to articles where completeness of code samples is incredibly important – as people copy and paste them verbatim – nobody is going to copy your codes from the slides. It is a bit of technical info and needs your narration to make it understandable.

Five or six lines should be enough – make sure to use colour coding and have a nice, big, readable font. Line numbers are also very useful (even when it is only five lines). A cute little idea when just explaining that code is what you cover right now is to use instacode which gives you Instagram style filtered screenshots of code.

Just a reminder, nothing to be afraid of

None of these are really show-stoppers and it is OK to have them, but being aware of the effects they might have can never hurt. Now go out there and talk!