Geo location and reverse geocoding

It’s very easy to get the address data from a website visitor. At first you need the geo location javascript to get the users lat and lng data. After that you can get the address by reverse geocoding using the google maps api.

1. Including JS

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
    <script src="js/geo-min.js"></script>

2. Geo location

if(geo_position_js.init()){
    geo_position_js.getCurrentPosition(success_callback,error_callback);
}
else{
    do something else;
}
function success_callback(p) {
    see 3.
}
function error_callback() {
    alert('error');
};

3. Reverse geocoding

function success_callback(p) {
    var lat = p.coords.latitude;
    var lng = p.coords.longitude;

    // reverse geocoding - get address by lat lng
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                document.getElementById('address').innerHTML = '<span>Your address: ' + results[0].formatted_address + '</span>';
            } else {
                document.getElementById('address').innerHTML = '<span>No address found.</span>';
            }
        } else {
            document.getElementById('address').innerHTML = '<span>Geocoder failed due to: ' + status + '</span>';
        }
    });
}

Here you’ll find a working example: geo-location.html

 

Using Foundation Modular Scale in em

For a new project i use the amazing Foundation framework to build an large responsive website. And i love it! The framework includes the modular scale approach by Tim Brown. You’ll find more informations here: http://foundation.zurb.com/docs/typography.php

A drawback for responsive websites is, that Foundation using px to define all font sizes. But we want different font-sizes for different devices and screens. So we have to teach Foundation to speak in em. And that’s the way:

1. Define the modular scale parameters

Set the variables in your _settings.scss file

$ratio: 1.5;
$baseFontSize: 14px;
$importantModNum: 40px;
$base-size: $baseFontSize $importantModNum;

and add these variables for the modular scale function by Scott Kellum.

$round-pixels: false;

The last variable is missing in the Foundation settings file. But it doesn’t work correctly without. By default all numbers are floored and that means sometimes you get identical values back.

2. px2em function

The modular scale function returns only px values. You need a simple SASS function to convert px to em:

@function px2em ($font_size, $base_font_size: $baseFontSize) {
  @return ($font_size / $base_font_size) + em;
}

I used my px2em function and just change the base-font-size variable. In your .scss files use now px2em(ms(0)) for example to get 1em and px2em(ms(2)) to get 1.5em. Here is a list of all values depending on my parameters: http://modularscale.com/scale/?px1=14&px2=50&ra1=1.5&ra2=0

3. Reset all font sizes to em

Last of all you must change the Foundation font settings to em. By default it’s your $baseFontSize. Just add this line in your app.scss:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td, section, article, footer, header, nav {
   font-size: 1em;
}

and set

html {
   font-size: $baseFontSize;    
}

After that you can write your media queries for example like that to increase the font size on very large screens:

@media only screen and (min-width: 1441px) { /* aka very large */
    html {
        font-size: 18px;
    }
}

Here you can check some different modular scale values: http://modularscale.com/

New project online: kuechenstud.io

After a long time of planing and working yesterday the new “Küchenstudio” website was launched. Now the 4 podcasts, produced by Philip Banse, have a new home. “Küchenradio”, “Medienradio”, “Studienwahl-TV” and “Datenschau” are now under one platform with the same straight and clear design.

The whole website was done in association with kosmar and we used the “Podlove Podcast Publisher” by eteubert.

My work was to create a WordPress Theme with Podlove Podcast Publisher integration. Setup a Multisite WordpPress installation and migrate all the content from the old websites including comments, ratings etc. One important part was to make sure, that after the launch all old links to media-files, episodes and feeds working well. So at least I configured the rewrite on the old servers.

It’s still something to do but have a look: kuechenstud.io

Küchenstudio

KüchenradioMedienradioStudienwahl.tvDatenschau

Placeholder services for everyone!

Here comes my list of the best online placeholder services. Thanks to @kosmar and @paulchrablass!

1. Highly customizable: cambelt

http://cambelt.co/

cambelt

<img src="ttp://cambelt.co/200x150/Cambelt?color=234653,eeeeee&font_size=24">

Options: format, text, color, size, font-size, text-color, font-family, https, icons

2. Fit and proper by categories: lorempixel

http://lorempixel.com/

lorempixel

<img src="http://lorempixel.com/200/150/city/2/lorempixel" width="200" height="150">

Options: color/greystyle, size, category, image number, text

3. Fit and proper by tags: flickholdr

http://www.flickholdr.com/

flickholdr

 <img src="http:://www.flickholdr.com/200/150/berlin/4">

Options: size, tag, image number

4. The quick and simple way: placehold.it

http://placehold.it/

placehold.it

<img src="http://placehold.it/200x150.png/cccccc/333333&text=placehold.it">

Options: format, text, color, size

5. For dog lovers at random: placedog

http://placedog.com/

placedog.com

<img src="http://placedog.com/200/150" >

Options: color/greystyle, size

6. For cat lovers: placekitten

http://placekitten.com/

placekitten.com

<img src="http://placekitten.com/200/150" >

Options: color/greystyle, size

7. For cute puppy lovers: placepupy

http://placepuppy.it/

placepuppy.it

<img src="http://placepuppy.it/200/150&n=2" >

Options: size, image number, text, text-bg-color, text-color

To be continued!

Responsive youtube or vimeo content

Today it’s very easy to embed some youtube or vimeo content into your website. Just copy and paste the embed code in your HTML files or CMS editor. This works well for static pages, because you can define your custom video dimensions.

But this is not suffient for responsive websites and, if you just define the iframe max-width: 100% by CSS, you still have a problem with the height. The solution is a wrapper around the iframe:

<div class="video-container">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/sftuxbvGwiU" frameborder="0" allowfullscreen></iframe>
</div>

and just a simple basic CSS:

.video-container {
  position: relative;
  padding-bottom: 56,25%;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The video-container has a fluid width and height. The height defines the ratio 16:9. If you need 4:3 just set the padding-bottom: 75%.

If you can’t wrap the iframe content in your editor, or if you have a lot of old content, it’s possible to add the wrapper with jQuery:

$jQuery('iframe[src*="youtube"], iframe[src*="vimeo"]').wrap('<div class="video-container">');

This works for youtube and vimeo content.