Archiv der Kategorie: Javascript

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 php, Javascript, Best of the Web, 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 php, Javascript, Performance, Best of the Web, webdev | Hinterlasse einen Kommentar

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 | 16 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 php, Javascript, 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

Best-of-the-Web 11

Nach längerer Zeit mal wieder eine kleine Linksammlung.

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

Dateidownload aus JavaScript mit Data-URLs

Aufbauend auf dem letztens erschienenen Post zu html2canvas soll es heute nochmal um Data-URLs gehen. Letztens in aller Munde: xlsx.js – mit Javascript Excel-Dateien erstellen und auch wieder auslesen. Zum Experimentieren bieten sich die erstellten jsFiddles zum Erzeugen einer Excel-Datei aus Javascript und dem Einlesen einer Excel-Datei per Javascript an.

Aufbauend auf letztgenanntem Fiddle nun hier folgendes Beispiel:

<script>
function dl()
{
	var content = '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';
	return 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,'+ content;
}

window.location = dl();
</script>

Lädt einfach mal eine Excel-Datei herunter. Das klappt natürlich nur, wenn der Browser mit dem Format nicht zurechtkommt, d.h. es nicht inline darstellen kann. Selbes Beispiel mit einer PNG-Datei:

<script>
function dl()
{
	var content = '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';
	return 'data:image/png;base64,'+ content;
}

window.location = dl();
</script>

Veröffentlicht unter Javascript, Quicktips, webdev | Hinterlasse einen Kommentar

html2canvas – Screenshots von Webseiten mit Javascript erstellen

Auf einigen Webseiten wird dem Nutzer die Möglichkeit geboten, Feedback zu geben. Bei Youtube läuft das bspw. so, dass man als „feedbackwilliger“ Nutzer einen Bereich der Webseite markiert und diesen dann kommentieren kann. Nachzuvollziehen ist das über den versteckt im Footer der Seite platzierten Link „Programmfehler melden“.

Youtube-Feedback

Youtube-Feedback

Durch das Projekt html2canvas lässt sich nun sowas ganz ohne Flash lösen: Es wird in einem Canvas das DOM der Seite rekonstruiert und dann mittels der Funktion canvas.toDataURL() ein Datenstream erstellt, der sich dann mit Hilfe eines serverseitigen Scripts in ein vollwertiges Bild umwandeln lässt. Aber der Reihe nach.

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