0

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;
}
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.

0

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
Fontello

Sunset in Cape Town at Signal Hill
Fontello

Kids playing in Soweto
Fontello

0

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!

0

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) {
    e.preventDefault();
    // Process the event here (such as click on submit button)
  }
}, false);
0

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!

 

Fontello

0

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!

0

Kitesurfing, SUP, nature and more on Rügen

Two weeks ago, I took some time off and went to the island Rügen in the Baltic Sea with my good friend Chris.

With us were also Kati and Ria who where ex-colleagues and now also good friends from Jimdo. Haiko, Kati’s boyfriend and a very lovely guy, owns the kite school ProBoarding on Rügen. You can learn kitesurfing, SUP (Standup paddleboarding) or start learing how to windsurf there.

We did some SUP and kitesurfing in the nice weather and had so much fun. I have also created a video. Enjoy watching and see you soon Rügen!

158-201406050938

018-201405292217

054-201405290012