Hi, my name is Timo Ernst and I am a web expert.

Posts Tagged ‘In English’

Failed PhoneGap Update kills project

Posted on: September 17th, 2013 by Timo

Before you get the newest Cordova version for your PhoneGap project and run the update script, you better might want to back it up, or otherwise:

taylor:bin valmar$ ./update ~/dev/android/myp
An unexpected error occurred: ANDROID_BIN="${ANDROID_BIN:=$( which android )}" exited with 1
Deleting project...

Thank you, PhoneGap for deleting my project!

TwitterFacebookShare

How to hide the address bar on iPhone5 Safari browser

Posted on: April 9th, 2013 by Timo

If you created a website with 100% height, you might encounter the problem that iPhone5 doesn’t hide the address bar while iPhone 4/4s and older do hide it.

Existing solutions

There are quite some JavaScript-based solutions on this issue that use scrollTop() and add a margin at the bottom of your page, e.g.:

That’s pretty complicated and I encountered the problem that this approach can lead to whitespace at the bottom of your page.

So I found a really way easier solution.

The better approach

Since you created a website with 100% height, I assume that you applied via css:

html,body{height:100%}

Now, for iPhone5 simply change this to:

html{height:504px}
body{height:100%}

This will tell Safari that your website is just 1px taller than the maximum visible part of your html document and the browser will automatically hide the address bar. That simple :-)

Warning!

Do not apply this to any other phone except for iPhone 5!

If you need to detect iPhone5, I recommend this script: Simple iPhone 5 detection with JavaScript

So you could do:

if (isIphone5()) $("html").css("height", "504px");
else $("html").css("height", "100%");
$("body").css("height", "100%");
TwitterFacebookShare

Simple iPhone5 detection with JavaScript

Posted on: April 9th, 2013 by Timo

It’s really simple, just use this function:

function isIphone5(){
	function iOSVersion(){
		var agent = window.navigator.userAgent,
		start = agent.indexOf( 'OS ' );
		if( (agent.indexOf( 'iPhone' ) > -1) && start > -1)
			return window.Number( agent.substr( start + 3, 3 ).replace( '_', '.' ) );
		else return 0;
	}
	return iOSVersion() >= 6 && window.devicePixelRatio >= 2 && screen.availHeight==548 ? true : false;
} 

Now simply call isIphone5() which will return true if:

  • The device is an iPhone
  • and if iOS version is at least 6
  • and if the device has a retina display
  • and if the screen has a height of 548px

These conditions (currently) only apply to iPhone5.

If the user is not on iPhone5 the method will return false.

TwitterFacebookShare

Proper JavaScript OOP with inheritance for Java developers

Posted on: November 23rd, 2012 by Timo

Coming from a Java background, I really miss keywords like class or extends when I write JavaScript. Yes, I know. You can write OO-code in JavaScript but it’s really a mess using the prototype property. So I’ve been looking for a best practice for this for quite a while now. Reading through various tutorials I stumbled over some “hacks” (looked hackish to me at least) which never seemed to be really professional. Even the two JavaScript books I have here suggest two different ways of creating “class-like” constructs. However, after years of writing JavaScript now I think that I’ve found the best way to create class-like constructs including the idea of inheritance and overriding super methods which I would like to share with you.

I’ll demonstrate it with a simple

Example

Let’s say we’d wanted to create a class “Vehicle” and a subclasses “Car”. The class “Vehicle” should provide a method “bringMeTo(Location location)” which “Car” should inherit and override..

In Java it’d probably look something like this (not tested):

public class Vehicle{

  int topSpeed;

  public Vehicle(int topSpeed){
    this.topSpeed = topSpeed;
  }

  public void bringMeTo(Location location){
    // ... do what ever you want to do here
  }
}

public class Car extends Vehicle{

  public String manufacturer;
  public String color;

  public Car(int topSpeed, String manufacturer, String color){
    super(topSpeed);
    this.manufacturer = manufacturer;
    this.color = color;
  }

  @Override
  public void bringMeTo(Location location){
    // Use an engine and 4 wheels to get to location  
  }
}

Now in JavaScript

Let’s see how we can transform into JavaScript, shall we? :-)

1. Preparation

First you’ll need a little helper function from CoffeeScript. It’s very handy since there is no extends keyboard in JavaScript, so add this to the very top of your JS code. Dont’ worry if you don’t understand the code, it’ll simply do all the funky JS OOP magic for you. All you need to know is that this basically does what Java’s extends keyword would do in a similar way.

var __hasProp = {}.hasOwnProperty;
var __extends = function(child, parent){
  for(var key in parent){
    if (__hasProp.call(parent, key)) child[key] = parent[key];
  }
  function ctor(){
    this.constructor = child;
  }
  ctor.prototype = parent.prototype;
  child.prototype = new ctor();
  child.__super__ = parent.prototype;
  return child;
};

2. Class definition, inheritance and method overriding

After adding our __extends script, we’ll write our two classes. You’ll be surprised how simple, clean and a little Java-like this’ll look:

// Class Vehicle
var Vehicle = (function() {

  // Constructor
  function Vehicle(topSpeed) {
    this.topSpeed = topSpeed;
  }

  Vehicle.prototype.bringMeTo = function(location) {
    // doSomething(location);
  };

  return Vehicle;

})();

// Class Car
var Car = (function(_super) {
  __extends(Car, _super); // Cool, eh? :-) 

  // Constructor
  function Car(topSpeed, manufacturer, color) {

    // Setup public properties
    this.manufacturer = manufacturer;
    this.color = color;

    // Call super constructor
    return Car.__super__.constructor.apply(this, arguments);
  }

  // Override super method
  Car.prototype.bringMeTo = function(location) {

    // Call super method if you want
    Car.__super__.bringMeTo.call(this, location);
		
    // doSomethingElse();
  };

  return Car;

})(Vehicle);

There you go. Really simple.

Create instances by calling:

var v = new Vehicle(30);
var c = new Car(200, "Jaguar", "white");

Final notes

  • In Car, you can access the super class anytime by just using Car.__super__.
  • Override methods by adding a new function to Car.prototype
  • Don’t forget to set all public properties you need within the constructor (as shown above).

That’s it. Happy coding.

TwitterFacebookShare

Vector vs. ArrayList in multi-threaded Java applications

Posted on: April 20th, 2011 by Timo

I lately had to play around a lot with collections in multi-threaded environments and learned several new stuff that I’d like to share:

Vector vs. ArrayList

Where is the difference between both? When should you use ArrayList and when is the time to use Vector?
This is a very common question and often leads to huge discussions.
For me, the following two points are sufficient in order to decide when to use what:

  1. Vector is threadsafe. ArrayList is not.
    That means that you can have two threads accessing (and manipulating) a vector without having to worry about mutual exclusion.
  2. ArrayList is a little faster than Vector but not threadsafe.

Lists in multi-threaded environments

Now, if you have multiple threads in your application which both access collections at the same time, you might run into issues because this is simply not allowed. Think of the list as a piece of cake. Only one guy can eat it.

As mentioned above, Vector is threadsafe, so in theory you could assume that it’s perfectly alright if you only use Vectors through the whole application. That’s wrong. See the example below, which will cause a ConcurrentModificationException.

So, if you have thread 1 doing this:

List<Person> persons = new Vector<Person>();
fillList(persons);

for (Person person : persons){
	if (person.getName().equals("timo")){
		doSomething(person);
		persons.remove(person);
		break;
	}
}

.. and thread 2 does the same thing at the same time, you’ll most likely face a ConcurrentModificationException.

That’s because

  1. The “for (Person person : persons)” syntax creates an implicit iterator which is not thread safe.
  2. You cannot iterate over a collection and modify it at the same time.

Solution: Use the synchronized keyword and iterate over a copy but modify the original

List<Person> persons = new Vector<Person>();
fillList(persons);

synchronized(persons){
	List<Person> copy = new Vector<Person>(persons);
	for (Person person : copy){
		if (person.getName().equals("timo")){
			doSomething(person);
			persons.remove(person);
			break;
		}
	}
}

Wrapping the for loop into a synchronized block will synchronize access between multiple threads.
This must be done in all threads which could possibly manipulate the vector. Adding the synchronized keyword in just thread 1 will not work unless thread 2 also uses this keyword.
Also, the above code creates a copy of the original list and iterates over it. Note that the call of persons.remove(person) happens on the orignal list.

TwitterFacebookShare