Best-of-the-Web 13

Nach längerer Downtime wieder eine Reihe an lesenswerten Materialien querbeet. Durch meine neuen Aufgaben im Job wird das Spektrum etwas breiter und entfernt sich perspektivisch vom Fokus der reinen Webentwicklung. Aber dazu später noch mehr.

  • More Responsive Tapping on iOS – Aktuelle Entwicklungen im Safari bezogen auf das Click-Delay. Auf Arbeit verwenden wir übrigens bei geeigneten Projekten zur großen Zufriedenheit Crosswalk zusammen mit Cordova. Crosswalk bringt die Blink Engine von Chrome/Chromium mit und integriert diese gewissermaßen in die App. Das führt auf Android Geräten dazu, dass auf allen Geräten die gleiche, moderne Rendering-Engine zum Einsatz kommt. Und das auch, wenn bspw. auf einem Android 2.3 Gerät sonst der mittlerweile ausgemusterte „Android Browser“ für die Webview zum Einsatz kommen würde. Das alles gibt’s für etwa 20MB mehr App-Gewicht in der finalen APK.
Veröffentlicht unter Best of the Web, Javascript, php, webdev | Hinterlasse einen Kommentar

PHP Hashes und ihre Probleme

Ein schon ein etwas älteres Phänomen, welches mir demletzt erneut über den Weg gelaufen ist und ich es deswegen für „verbloggenswert“ halte:

if (md5('240610708') == md5('QNKCDZO'))
{
	echo "yep equal";
}

Ups? Eine MD5-Kollision? Nein. Eine Eigenart von PHP.

var_dump(md5('240610708')); //string(32) "0e462097431906509019562988736854"
var_dump(md5('QNKCDZO'));   //string(32) "0e830400451993494058024219903391"

2 verschiedene Strings, die aber laut PHP-Vergleich identisch sein sollen? Genau da liegt der Knackpunkt: Die Strings sind gleich, aber nicht identisch. Da beide mit 0e anfangen, werden sie als Exponentialdarstellung einer Zahl aufgefasst. Und da 0irgendwas immer 0 ergibt, sind die beiden Hashes im Vergleich auch gleich.

Das „Problem“ lässt sich einfach lösen, indem mit === verglichen wird. Dann evaluiert PHP den Zahlenwert des Strings nicht mehr. Oder indem strcmp verwendet wird:

Veröffentlicht unter php, Quicktips, Security, webdev | 1 Kommentar

PHP 7 Migration

Nun war es also Zeit, diesen beschaulichen Server auf PHP7 zu heben.

Die Installation

… lief straight forward, wie man es gewohnt ist. Hier läuft ein Apache 2 mit mod_php auf (aktuell) Ubuntu 15.04, also das absolute Standardsetup. Da PHP7 standardmäßig noch nicht in ubuntu enthalten ist, müssen wir vom ppa von ondrej Gebrauch machen, welches sowohl PHP5.6 als auch PHP7 beinhaltet und regelmäßig aktualisiert wird.

apt-get -y purge php5 libapache2-mod-php5 php5 php5-cli php5-common
apt-get --purge autoremove
apt-get update
apt-get install python-software-properties
add-apt-repository ppa:ondrej/php-7.0
sudo apt-get install php7.0 php7.0-dev php7.0-mysql php7.0-gd php7.0-curl php7.0-sqlite php7.0-intl
php -v
service apache2 restart

Läuft, bei mir folgende Ausgabe:

PHP 7.0.1-4+deb.sury.org~vivid+1 (cli) ( NTS )
Copyright (c) 1997-2015 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2015 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2015, by Zend Technologies

Probleme & Fallstricke

Imagemagick

Da es noch kein php7.0-imagemagick gibt, war eine händische Installation nötig:

apt-get install imagemagick
cd /tmp
wget http://pecl.php.net/get/imagick-3.4.0RC2.tgz
tar xvzf imagick-3.4.0RC2.tgz
cd imagick-3.4.0RC2
phpize
./configure
make install
echo extension=imagick.so >> /etc/php/7.0/cli/php.ini
echo extension=imagick.so > /etc/php/7.0/apache2/conf.d/20-imagick.ini
service apache2 restart

Veröffentlicht unter php, webdev | Hinterlasse einen Kommentar

IE11 kommt getarnt daher

Browser melden sich traditionell und historisch bedingt mit ziemlich kryptischen Namen. Mein aktueller Chrome z.B.:

Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22

Der Brauch, so viel wie möglich Buzzwords in den String navigator.userAgent zu packen entspringt dem Browsersniffing. Sollte ein Webentwickler nach Gecko (Rendering-Engine von Firefox) suchen und dann einen gewissen Inhalt ausliefern, wären andere Browser benachteiligt. Und deshalb finden sich eben in jedem Browsername alle Bezeichnungen wieder.

Im neuen IE11 aus der geleakten Windows Blue-Version springt jetzt auch Microsoft auf den Zug auf:

Mozilla/5.0 (IE 11.0; Windows NT 6.3; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) like Gecko

Veröffentlicht unter Javascript, Quicktips, webdev | 1 Kommentar

Browserscope

Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers.

So zumindest der Hersteller. Im Grunde geht’s darum: Ich packe mir ein kleines Script von Browserscope auf die Webseite und kann diesem dann verschiedene Parameter übergeben, die typischerweise etwa A/B-Tests sind oder Browser-Feature-Prüfungen der Benutzer meiner Webseite. Die Informationen werden dann an Browserscope übertragen und schön übersichtlich dargestellt. Super, wenn ich etwa testen will, wann ich ein Feature für alle Besucher meiner Webseite freischalten kann.

Veröffentlicht unter Javascript, webdev | Hinterlasse einen Kommentar

Best-of-the-Web 12

Neue Linkwelle, gab ja so einige spannende Sachen seit der letzten…

Veröffentlicht unter Best of the Web, Javascript, Performance, php, webdev | Hinterlasse einen Kommentar

Quicktip: Mehrere Attribute auf einmal anlegen

Erspähte ich neulich im Quellcode von Symfony 2 – mir war vorher nicht bewusst, dass das möglich ist.

class Foo
{
	protected $var1 = "1234", 
			  $var2 = "4567", 
			  $var3;
			  
	public $var4, 
		   $var5 = false;
		   
	private $var6;
}

Gefällt mir besser als die mehrfache, wiederkehrende Verwendung des gleichen Schlüsselworts. Nur unpraktisch bezogen auf Docblocks.

Veröffentlicht unter php, Quicktips, webdev | 2 Kommentare

Cross Domain AJAX Guide

As it is widely known, AJAX Requests are only possible if port, protocol and domain of sender and receiver are equal. This means, that the following requests generally won’t work:

  • Requesting https://foo.bar/target.php from http://foo.bar/source.php
  • Requesting http://sub.foo.bar from http://foo.bar
  • Requesting http://foo.bar:5000 from http://foo.bar
Failed remote AJAX

Failed remote AJAX

Having this cleared out, we will cover ways around this restriction.

CORS

CORS stands for Cross-origin resource sharing and has to be supported on the server side. If we take jQuery, the requesting side will look like this:

$.ajax({
    type: 'POST',
    url: 'http://d1303.de/remote/cors.php',
    crossDomain: true,
    data: "my_request_is=foo",
    dataType: 'json',
    success: function(responseData, textStatus, jqXHR) 
	{
        console.log(responseData);
    },
    error: function (responseData, textStatus, errorThrown) 
	{
		console.warn(responseData, textStatus, errorThrown);
        alert('CORS failed - ' + textStatus);
    }
});

Veröffentlicht unter Javascript, webdev | 19 Kommentare

Facebook „ordered friends“ – Eure Freunde/Stalker nach „Wichtigkeit“ ausgeben

Update: Timon hat mich in den Kommentaren darauf aufmerksam gemacht, dass die Auflistung umbenannt wurde und nun InitialChatFriendsList heißt. Auch die Sortierung hat sich bei mir geändert.

Im Javascript-Quelltext der Facebook-Profilseite befindet sich der Abschnitt „OrderedFriendsListInitialData“. Hierdrin sind die Profil-IDs aller eurer Freunde nach zugemessener „Wichtigkeit“ absteigend geordnet.

Wie Facebook dies genau bemisst, bleibt natürlich im Verborgenen. Höchstwahrscheinlich wird anhand dessen auch justiert, wieviel ihr von welchem Freund im Stream seht. Da wir mit den Profil-IDs alleine natürlich wenig anfangen können, musste ein kleines Script her, welches die Auflösung übernimmt:

$friends = array("1234567891011", "23456789101112", ...);

foreach ($friends as $i => $friend)
{
	$c = file_get_contents("http://graph.facebook.com/$friend");
	$c = json_decode($c, true);
	echo $c['name'] . "\n";
}

Dann am besten per CLI ausführen.

Veröffentlicht unter Javascript, php, webdev | 10 Kommentare

Javascript Array-Handling: inArray, löschen, kopieren

Suchen im Array

Sowas wie eine in_array Funktion gibts bekanntermaßen nicht in Javascript. Man kann sich das natürlich nachbauen, indem man durch das ganze Array iteriert und jeden Wert vergleicht – aber eher uncool!

Wers noch nicht wusste: indexOf klappt nicht nur mit Strings, sondern auch mit Arrays:

["foo", "bar", 1, 2, 3].indexOf("bar"); //1
["foo", "bar", 1, 2, 3].indexOf("foobar"); //-1

Geht leider nicht mit dem IE <= Version 6, wer den wirklich noch unterstützen muss, kann zumindest den Array-Prototyp erweitern und sowas verwenden:

Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}
Handling ist dann:
["foo", "bar", 1, 2, 3].contains("foobar"); //false
["foo", "bar", 1, 2, 3].contains("bar"); //true
Vorsicht dabei allerdings, weil beim Iterieren über das array mittels for/in – Loop der prototype mitkommt, wenn man dies nicht mittels hasOwnProperty abfängt.

Selektives Löschen von Elementen des Arrays

Was nimmt man so klassischerweise? null setzen?

var arr = ["foo", "bar", 1, 2, 3];
arr[2] = null;
console.log(arr); //["foo", "bar", null, 2, 3]
console.log(arr.length); //5

Tut genau das, was man erwartet: Das Array behält seine Länge, nur der Wert wird eben null gesetzt. Oft nicht das gewünschte Ergebnis.

Veröffentlicht unter Javascript, webdev | Hinterlasse einen Kommentar