Smoother/Faster CSS Animations

If you have ever experienced slow/”buffering” CSS animations then it’s probably because you don’t know about this article. Basically, instead of animating the position properties “top”, “right”, “bottom” and “left”, you animate “transform: translate”. On most browsers this activates hardware acceleration, meaning it will use the computers graphic chip instead of the CPU and will therefore produce smoother animations.

How we fixed the -webkit-overflow-scrolling: touch; bug on iOS

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute can be very useful on mobile sites. It basically changes the awkward scrolling behavior into the normal, expected behavior.

When you dynamically add content to a div with -webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having an inner div, that triggers the scrollbar because its 1px higher than the outer div:

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

Please note that calc() only works in newer browsers.

Sidebar Design for our newest Project

UI Screenshot

A friend and I are creating a new ERP software for smaller companies. I am currently designing the UI components while he programs them using AngularJS directives. The whole thing should fit into the iOS 7/8 ecosystem and will be a fully responsive web application. More updates and information on this interesting topic will follow!

NeedThis – Your Personal Must-Have List

Screenshot

Fiona Muff, professional hand model

“Hey, what’s that movie we wanted to see called again?” – “Uhm…”

NeedThis is a website where you can create lists. Those lists are saved server-side and you can share the link to your list with your friends. Entries have three attributes: Name, Link and Status (Not released, Available, Downloading and Completed).

I’ve written NeedThis in Node.js. The lists are stored in a NoSQL database and on the frontend runs Backbone.js MVC. There’s really not much code behind it, but I couldn’t find a similar service on the internet that fits my needs.

Run JavaScript live on your Website

I’ve just written coderunner.js. It allows you to write standard <pre> tags and then convert them into executable code that your users can run on their computer. Here is an example:

for (var i = 0; i < 10; i++) {
  console.log('Number ' + i);
}

You can start coderunner.js by including the file itself, the stylesheet and then initializing like this:

document.addEventListener('DOMContentLoaded', function() {
  var autoRunner = new CodeRunner({ autorun: true });
  autoRunner.makeExecutable('pre.executable.autorun');

  var runner = new CodeRunner({ autorun: false });
  runner.makeExecutable('pre.executable:not(.autorun)');
});

coderunner.js has no dependencies and is about 2 KB in size (uncompressed). It is currently only tested in WebKit and has no issues with prettify by Google.

Observer Pattern in JavaScript

Here is a simple, straight-forward observer implementation in JavaScript that you can use in any modern JavaScript environment. Please note that IE8 and below cannot use Array.prototype.filter and Array.prototype.forEach.

var Observable = {
  listeners: [ /* { event: String, fn: Function } */ ],
  _addListener: function(event, fn) {
    this.listeners.push({ event: event, fn: fn });
  },
  _removeListener: function(event) {
    this.listeners = this.listeners.filter(function(listenerObj) {
      return listenerObj.event !== event; 
    });
  },
  on: function(event, fn) {
    this._addListener(event, fn);  
  },
  off: function(event) {
    this._removeListener(event);  
  },
  listenTo: function(target, event, fn) {
    target._addListener(event, fn);
  },
  trigger: function(event) {
    this.listeners.filter(function(listenerObj) {
      return listenerObj.event === event; 
    }).forEach(function(listenerObj) {
      listenerObj.fn(listenerObj.event); 
    });
  },
};

You can set this object to a prototype of any of your classes:

// new class Person
var Person = function(name) {
  this.name = name;
};

// inherit from Observable
Person.prototype = Observable;

// define getName method
Object.defineProperty(Person.prototype, 'getName', {
  writable: false,
  value: function() {
     return this.name;  
  }
});

Any object that you instantiate from “Person” now is observable. This means you can easily do the following:

var jon    = new Person('Jon Snow');
var tyrion = new Person('Tyrion Lannister');

jon.listenTo(tyrion, 'greeting', function(event) {
  console.log('Received a ' + event + ' from ' + tyrion.getName());
});

jon.on('bye', function(event) {
  console.log('Received a ' + event + ' from ' + jon.getName());
});

tyrion.trigger('greeting'); // "Received a greeting from..."
jon.trigger('bye'); // "Received a bye from..."

jon.off('bye'); // unbinds all 'bye' listeners
jon.trigger('bye'); // does not fire anything

The syntax is very similar to Backbone, but of course without any dependencies. This code works best in a modern NodeJS environment where you do not need to support old JavaScript implementations. Bitbucket repository.

This code makes no sense.. Or does it?

[!+[]+!+[]]+[+[]]+[+!+[]]+[!+[]+!+[]+!+[]+!+[]]

Beautiful right? This messy line of brackets, exclamation points and plus signs evaluates to the string “2014”. You can try it by pasting it into your browsers console or using Node.js.

Let’s have a closer look at the first part of it:

[!+[]+!+[]]

This produces an array with one entry: 2. If we break it down even further, it starts to make sense:

+!+[]

This code consists of four elements (differently colored). On the right we got a simple, empty array. The plus sign in front of it automatically casts it into a number, because that’s how loosely typed languages work. We can prove it by running this:

Number(new Array())

Alright, so casting an array into a number results in 0.  The next element we need to look into is the exclamation point. The “!” operator inverts a boolean. But our 0 from above is not a boolean. No problem, JavaScript just casts it into one like we would expect it to do in “normal” code. We are now left with this:

!+[]

All we have to do now is simply cast true back into a number by using the plus operator:

+!+[]

Now if we chain two of those together, we get our first value of “2014”; “2”!

+!+[]+!+[]

And that’s the whole magic. The rest is pretty much the same, I won’t explain it all here. There is a site called JSFuck.com which can produce this kind of code. Quite interesting!

Weekend Project: Display a website on my TV when a League of Legends player starts a game

Introduction

I really like the MOBA League of Legends which is currently the most played game in the world. In LoL there are two teams of five people fighting on a big map in order to destroy the enemy nexus. After starting a game, many people will visit lolnexus.com during the loading screen, a site that provides live game details. You get insight into their ranking , runes and masteries which can possibly help you to win the game.

For my weekend project I wanted an application to do the following tasks for me:

  • Check if player “x” is in a game every 20 seconds
  • Start TV using CEC
  • Start a web browser and point it to lolnexus.com
  • Wait until game is over and turn off TV

Sounds simple right?

Turning a TV on using CEC

Consumer Electronics Control (CEC) is used to control a TV over the HDMI cable. I found a library called libCEC (Tutorial) that compiles on Raspbian. LibCEC installes the command line utility cec-client that I used in my application.

echo "on 0" | cec-client -s

Piping “on 0″ into cec-client turns the TV on.  You can use “standby 0″ to turn it off. Now I need to find out how I can start a web browser on the Raspberry Pi.

Starting a browser in kiosk mode

Kiosk mode means starting it in fullscreen with no visible controls. I used the pre-installed browser Midori for this. But before you can start a browser, you need to start a graphical interface:

startx &

The “&” is used to start the process in background. “startx” should now have started a GUI on display :0. Now let’s start the browser:

midori -e Fullscreen --display :0 -a http://lolnexus.com/...

That’s it. Using this knowledge I created a simple application to turn my TV on whenever I started a new game and display lolnexus. Since I often get snacks during loading screen and have to walk past my TV, I can now simultaneously prepare myself for the game.

The application (written in Node.js) can be found on Bitbucket.