The LinkedIn group for PHP Developers featured a jQuery tutorial on how to move elements with the keyboard. It linked to a tutorial on lessoncup.com, an ok website with various with jQuery, PHP and MySQL tutorials. I’m interested in this sort of thing so thought I’d see what technique they used in their demonstration. It was this one. I strongly disagreed with the technique so left a polite comment on the share in LinkedIn stating there may be a better way to accomplish the task. Rather than starting a constructive discussion weighing pros and cons my comment was simply removed by author so I took it upon myself to write this article.

While I appreciate the effort, this really isn’t the way to accomplish this in 2016.

So what’s the problem, why am I blogging about this? The author is loading an entire library to accomplish something simple, poorly. If you try the demo you’ll find the ladybug moves 20 pixels with each press of the arrow key. If you hold the arrow keys you’ll hear your cpu fans spin up and the ladybug keeps moving after you remove your finger from the key. If the demo performs this badly imagine how that code would affect an app. Not just any app either, an app where the user would be moving things with a keyboard, an app that likely has other bindings for other keys to do different things. Reading that tutorial felt like reading a tutorial on how to mount square wheels to your car. It’s not everyday I see a tutorial that makes me drop everything and rewrite the sample code but today was one of those days.

var bug = document.createElement('img');
bug.setAttribute('src', 'http://demos.khasimlessons.com/jquery-moving-objects-using-keys/bug.png');
document.body.appendChild(bug);

var transform = {
  x: 0,
  y: 0
};
var direction = {
  38: function() { // top
    rotate = ' rotate(0deg)';
    transform.y -= 1;
  },
  39: function() { // right
    rotate = ' rotate(90deg)';
    transform.x += 1;
  },
  40: function() { // bottom
    rotate = ' rotate(180deg)';
    transform.y += 1;
  },
  37: function() { //left
    rotate = ' rotate(-90deg)';
    transform.x -= 1;
  }
};
var stop = false,
  currentKey = 38,
  position,
  rotate,
  animationFrame;

var startMove = function(evt) {
  if (evt.keyCode) {
    stop = false;
    if (!direction[evt.keyCode]) {
      return false;
    }
  }
  if (stop) {
    return false;
  }

  animationFrame = requestAnimationFrame(startMove);
  currentKey = evt.keyCode || currentKey;
  direction[currentKey]();
  position = 'translate(' + transform.x + 'px, ' + transform.y + 'px)';
  bug.style.transform = position + rotate;
};
var stopMove = function(evt) {
  stop = true;
  cancelAnimationFrame(animationFrame);
};

document.addEventListener("keydown", startMove);
document.addEventListener("keyup", stopMove);

Demo

That’s how I would have written it. Now I’ll sit an wait for someone to come and tear my demo apart.