Archiv der Kategorie: Javascript

Best-of-the-Web 13

Publiziert am 24. Januar 2016 von david

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.
… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, Best of the Web, webdev | Hinterlasse einen Kommentar

IE11 kommt getarnt daher

Publiziert am 27. März 2013 von david

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

Die 4 Buchstaben MSIE, nach denen gerne geflitert wurde, sind verschwunden.… Den ganzen Post lesen

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

Browserscope

Publiziert am 21. Januar 2013 von david

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.

Wie funktionierts?

Sign In rechts oben mit dem Google-Account.… Den ganzen Post lesen

Veröffentlicht unter Javascript, webdev | Hinterlasse einen Kommentar

Best-of-the-Web 12

Publiziert am 24. Dezember 2012 von david

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

… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, Performance, Best of the Web, webdev | Hinterlasse einen Kommentar

Cross Domain AJAX Guide

Publiziert am 10. Dezember 2012 von david

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

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);
… Den ganzen Post lesen
Veröffentlicht unter Javascript, webdev | 18 Kommentare

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

Publiziert am 5. Dezember 2012 von david

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");
… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, webdev | 10 Kommentare

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

Publiziert am 3. Dezember 2012 von david

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");
… Den ganzen Post lesen
Veröffentlicht unter Javascript, webdev | Hinterlasse einen Kommentar

Best-of-the-Web 11

Publiziert am 3. November 2012 von david

Nach längerer Zeit mal wieder eine kleine Linksammlung.

… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, Best of the Web, webdev | Hinterlasse einen Kommentar

Dateidownload aus JavaScript mit Data-URLs

Publiziert am 24. Oktober 2012 von david

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
… Den ganzen Post lesen
Veröffentlicht unter Javascript, Quicktips, webdev | Hinterlasse einen Kommentar

html2canvas – Screenshots von Webseiten mit Javascript erstellen

Publiziert am 22. Oktober 2012 von david

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“.

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.

Das Setup

<!doctype html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
… Den ganzen Post lesen
Veröffentlicht unter php, Javascript, webdev | 1 Kommentar