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.


South Africa Roadtrip Part 1

In December, I have been on a road trip through South Africa with my sister Katrin (travelblog viel-unterwegs.de) and Inka (blickgewinkelt.de).
Starting in Cape Town, we did an incredible helicopter roundtrip with NAC Helicopters flying over Cape Town down to the Cape Point and back. After the trip, we have visited the iThemba School Capricorn. The iThemba School was established by the Help Alliance to which Condor and Lufthansa belong to. About 82 kids between 3 and 6 years old go currently to this school.
At the evening, I spent my time at the Signal Hill with Anna, Eva and Tanja of the Condor crew. We enjoyed an awesome sunset over the ocean.
The next day, we flew to Johannesburg and went to Lebo’s Backpackers in Soweto. We received a warm welcome in a very pleasant area. We also did the bicycle tour through Soweto!

More about our trip can be found (in german) on viel-unterwegs.de
Enjoy the first part of my video of our trip :)

Cape of Good Hope and Cape Point

Sunset in Cape Town at Signal Hill

Kids playing in Soweto


Area 47 or a weekend at the outdoor playground in Tirol

In september, we spent a weekend in the Area 47 in Tirol again. The Area 47 is a huge outdoor playground sponsored by Red Bull, Adidas and KTM in Western Austria.  You will find there an incredible landscape and so much fun!

You can do Rafting, Canyoning, Caving, walk on the High rope course, MTB Freeriding, Climbing, Deep Water Soloing, Bouldering, Blobbing, Wakeboarding and a lot more. The Area 47 gets its name from being on the 47th parallel.

In a 15 minutes drive, you can also rodel on the Alpine Coaster in Imst, the longest summer rodeling in the world with a length of 3,5 km.

Of course, we also made a video over there. Enjoy!


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!