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

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!




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!