Combining data sources without control structures

Inspired by a tweet of Dominikus Herzberg (@denkspuren), I have created a small JavaScript which combines location data with Google Maps to show the current location of the ISS above the ground in almost real-time without any control structures in the code.

1. Create Map and Marker

var map;
var marker;

// init google map and marker after window.load
google.maps.event.addDomListener(window, "load", function () {
    // init map
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 0, lng: 0},
        zoom: 5
    // init marker
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(0, 0),
        map: map,
        icon: "http://www.lizard-tail.com/isana/tracking/image/iss.png"

2. Add timer

This can be seen as some kind of control structure. But it is just a timer for refreshing the map every x milliseconds.

// refresh map every 1000 miliseconds
var t=setInterval(updateMap, 1000);

3. Get current location of the ISS and refresh map and marker

var issLocationApi = "https://api.wheretheiss.at/v1/satellites/25544";

// callback function for refresh
function updateMap() {
    $.getJSON(issLocationApi, function( data ) {
        // set new center of Map
        map.setCenter({lat: data.latitude, lng: data.longitude});
        //set new Marker position
        marker.setPosition(new google.maps.LatLng(data.latitude, data.longitude));


You can find the whole code on JSFiddle


Adblocker detection when using Google Doubleclick for DFP and tracking to Google Analytics

A lot of websites operate on ad revenue. But also a lot of people have installed adblockers so the website owner will get no money. It is very interessting how many people use adblockers so we are going to track this with Google Analytics event tracking.

Doubleclick for DFP has this one global var gadsize which is undefined when an adblocker is installed and activated. So after the page has finished loading, we check if gadsize is defined. If yes, no adblocker is installed.


window.onload = function() {
    // little delay
    setTimeout(function() {
        if (typeof _gaq !== 'undefined')
            if (typeof gadsize !== 'undefined')
                _gaq.push(['_trackEvent', 'Adblock', 'No', undefined, undefined, true]);
                _gaq.push(['_trackEvent', 'Adblock', 'Yes', undefined, undefined, true]);
    }, 1000); // run 1 seconds after page has loaded

Timelapse of the sun eclipse with the help of python

On the 20th March 2015, there was a partial sun eclipse. I wanted to make a timelapse. I put my camera on a tripod, placed the sun in the lower left corner of the display and started the timelapse mode which made a photo every 5 seconds. After 20 muinutes, I realized that the sun will soon move out of the picture.
Because the sun eclipse took a little bit more then 2 hours, I had to readjust the tripod every 30 minutes. Now I had 1600 pictures. A timelapse of these images will show a bouncing sun. Not really good. So I had to align the images. Manually, this whould have been a lot of work. So I wrote a small Python script which cuts the sun out so the images will be aligned.


– You will need the jpeg files in the correct order in one folder.

– Python 2 (with PIL installed)

The Python script

Enter the inputDir (your jpeg files) and outputDir (where the cropped images should be saved) manually in the script. Then save the script, execute and let the magic happen.
The script searches in the first image for the border of the sun and calculates its size. Since this was a partial sun eclipse, the bottom of the sun will always be visible so we can use this point as reference. Also, everything will be black. Now we crop around the sun with a border of 200px and save the image with the same filename in the outputDir folder.
When the script is done, we have wonderful aligned images of the sun. Load the images in your video editing software and create the timelapse.

import os, sys
from PIL import Image, ImageOps
from os import path
import imghdr

inputDir = "img/input"
outputDir = "img/output"
sunSize = 0

def treshold(x):
    if x < 100:
        x = 0
    return x

def suncrop(image, border):
    sunBorders = image.point(treshold).getbbox()
    global sunSize
    if sunSize == 0:
        sunSize = sunBorders[3] - sunBorders[1]
        print "Sunsize %d px" % sunSize

    sunBorderBorders = (sunBorders[0]-border, sunBorders[3]-sunSize-border, sunBorders[2]+border, sunBorders[3]+border)
    return image.crop(sunBorderBorders)

sunSize = 0
files = [f for f in os.listdir(inputDir) if f.endswith(".jpg")]

for img in files:
    im = Image.open("%s/%s" % (inputDir, img))
    imtrim = suncrop(im, 200)
    outfile = "%s/%s" % (outputDir, img)
    print "Saving to %s" % outfile

Update 22.Apr. 2015:

I have changed the script to be more accurate. You can find it here.


Anchor link with a fixed header

If you have an anchor link on a page with a fixed header, the element linked to will disappear behind the fixed header. To fix this, you will have to add an invisible element before the element you are linking to with a height of the fixed header.

Here is an example element for a header with a width of 80 pixels:

:before {
    content: "";
    display: block;
    height: 80px;
    margin: -80px 0 0;


Flexible and easy website monitoring with updown.io

During our trip in South Africa, my sister’s blog viel-unterwegs.de went offline after an update of a WordPress plugin. The bad thing: We noticed this one day later.

I started looking for a cheap and flexible website monitoring SaaS and stumbled over updown.io. Updown.io is a small startup located in Paris, France.

You can enter an url, a text and a time period. After each time period, updown.io sends a http request to the url. When everything went ok (http response code 200), it will check if the entered text appears somewhere on the respone. If this is true, updown.io assumes that everything is ok. If not, you will receive an email and if you want, also a SMS notification. You will also get nice statistics with user satisfaction by average site loading time.

Screen Shot 2015-01-19 at 15.24.00

For each check, you will have to pay one credit. So lets say you would like to check 4 different urls every 10 minutes, you will need 200.000 credits for 11 months and 17 days which would cost you 5 euros. You can also pay with bitcoins. After sign up, you will receive 100.000 credits for free which is also very nice.


Overwrite CMD+S and CTRL+S in Javascript

Do you often work with backend forms in your web application scrolling endless down to the submit button? Why not overwrite the submit button with the common use save keyboard hotkeys CMD+S (Mac) and CTRL+S (Win) with Javascript?

At first, we need to catch the event when a key is pressed:

document.addEventListener("keydown", function(e) {

}, false);

Second we need to get the key code for the S key – it is 83. Mac’s CMD key is represented by metaKey and Windows’s CTRL key is represented by ctrlKey. You can differentiate between the operating system by evaluating the property of window.navigator.platform.

Don’t forget to prevent the default executing of the shortcut by calling preventDefault() on the submitted event!

Complete Javascript code

document.addEventListener("keydown", function(e) {
  if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)  && e.keyCode == 83) {
    // Process the event here (such as click on submit button)
}, false);

Fontello or how to master icon fonts in web development

1. Icon fonts were great

Using icon fonts in web development have many advantages instead of using CSS sprites:

  • Vectors scale with retina displays
  • Manipulation with CSS (size, color, shadow,…)

2. Icon fonts were bad

Mostly, one icon font does not have included all icons you will need for your application. So you will need a second or third one. You will also usually not use all icons included in one font. So the main problem is that your users will have to download icons in your font which will never be displayed and so too much traffic will be generated.

3. The solution: Fontello.com

With Fontello, you can create your own icon font. You can choose from lots of other icon fonts by just clicking on the icon you want to add. After choosing the icons, you can give your new font a name and download the whole stuff. Also add the config.json file in the package to your repository – you can upload it later and add or remove stuff from your font!




Some technical things to know when going online multilingual

When you are successful with your web application, there will be the day when you decide to deploy the application in more than your native language. Before we decided to go online with a multilingual version of diginights.com, I thought about challenges and also stumbled over some other problems later. I decided to share them so here they are:

1. Change URL according to language

When your user changes the language of the website, the url should also be changed. Especially search engines do not like different content due to user settings on the same url. You can change the domain or add another query parameter to the url. But do not change the url for the already existing language! Change the url only for languages you will add!

By domain:

For native: http://example.com
For german: http://example.de

By query param:

For native: http://example.com
For german: http://example.com/de/

2. Add alt-lang in header

In order to enable search engines to determine which page is connected to the same page in another language, you have to add a small snippet in your header. This will be used to show the correct url for the matching language in search results and also prevents search engines for marking these connected pages as duplicate content. You will also have to add the current page.

For the current url “http://example.com/”, the correct snippet for english and germand would be look like

<link rel=”alternate” hreflang=”de” href=”http://example.com/de/” />
<link rel=”alternate” hreflang=”en” href=”http://example.com/” />

More information can be found on the Google Blog

3. Do not redirect (for not authenticated users)

Do not redirect the user by IP or browser language. Think about where the search engine bots will be redirected to. Instead of, you can suggest the user to switch. More important is to provide the correct link for the user one step earlier (SEO, Facebook). Of course, you can redirect authenticated users to their language chosen in settings.

4. E-Mail language by target user

When user A executes an action which ends in an email delivery to user B, the email language should be in the language of user B of course.

5. Language selector to the current page in different language

Yes, I have seen websites taking you to the homepage instead of the current page in the chosen language. This is not very user friendly.

6. Adjust your robots.txt

When you have already existing rules in your robots.txt and you have chosen to add a query parameter for additional languages, do not forget to watch for matching rules!

When you already have “Disallow: /profile”, you will also have to add “Disallow: /en/profile” for english and all other languages.


Happy going online in additional languages!


Share a local web project with ngrok

Did you ever need to share a web project in your local development environment with somebody over the internet? Maybe you did set up port forwarding in your firewall or you did establish ssh tunnels every time.

There is now a very easy way to share your project over the internet: ngrok


Some features

  • Secure On-Demand Tunnels
  • Request Inspection
  • Custom Subdomains
  • TCP Tunneling
  • Password Protection
  • Multiple Simultaneous Tunnels
  • Tunnel your own domains
  • Reserved Subdomains
  • pay-what-you-want service
  • Open source

How to use

Download and run it

./ngrok 80

This will open a tunnel to localhost on port 80. The url the project will be available on will be shown now including some other details:

Screen Shot 2014-05-16 at 12.55.45


Resize a LVM partition in a Debian VirtualBox

Have you ever developed in a Debian VirtualBox running out of space? This happened to me some days ago when I have imported the live database for debugging. Following this step by step tutorial, you can increase the disk space.

Increase VirtualBox HardDisk

Open a terminal and go to the folder* of the VirtualBox instance in which you want to resize the partition. You will either find a VMDK or a VDI file. Close VirtualBox before you continue.

For VMDK format

You first have to convert the vdmk file to a vdi file:

VBoxManage clonehd --format vdi filename.vmdk filename.vdi

After this we increase the vdi to 30000 megabytes:

VBoxManage modifyhd filename.vdi --resize 30000

Then we convert the vdi back to vdmk:

VBoxManage clonehd --format vmdk filename.vdi filename.vmdk

For VDI format

We increase the vdi to 30000 megabytes:

VBoxManage modifyhd filename.vdi --resize 30000

Increase partition with a live cd

Since the partition in a VirtualBox is mostly the root partition, we have to boot with a live cd including GParted (Download). Include the CD in your VirtualBox and boot into the live distribution.

Screen Shot 2014-03-27 at 20.29.41

Open GParted, open the partition and resize the space. Now save and click on Apply.

Screen Shot 2014-03-05 at 09.25.24

Power off the maschine and remove the live cd.

Increase the LVM in Debian

Boot into your Debian VirtualBox and extend the LVM with the following command. My LVM was 10 GB before so i had to increase the LVM by 20.

lvextend -L+20G /dev/mapper/vagrant-root
  Extending logical volume root to 29.21 GiB

When you have reached the maximum size, you finally have to resize the filesystem.

resize2fs /dev/mapper/vagrant-root

Your LVM partition is resized now.


* You can find the folder when you open VirtualBox -> File -> Virtual Media Manager