Bananas Development Blog: share your thoughts

Motion tracking mit JS

Das nenne ich mal ne Leistung. Zwar wieder zu Lasten des Clients aber an sich eine schöne Sache:

Javascript motion tracking

Hier ist das Demo Video dazu. Da kann man live mit spielen also kein fertiges.

Asynchrones laden von Typekit

Wenn man 3.Anbieter verwendet kann es immer mal wieder vorkommen, dass diese ausfallen. Im Standart lädt sich Typekit im head Bereich der HTML Datei und blockiert den weiteren Aufbau der Seite.

Dies kann man mit verschiedenen Möglichkeiten umgehen:
Typekit, slow hosted scripts and the Flash of Unset Text
Loading Typekit fonts asynchronously

Meine liebste Lösung ist das laden mit dem async Attribut.

Dschungel SSL

Ui ui ui, da kommt ja ne Menge Spaghetti Code zusammen:

Firefox und OCSP-Fuckup ( OCSP )

Und so was soll die Sicherheit verbessern ?

Uploads mit Javascript und HTML5

Bei einem Upload einer Datei sollte er Benutzer feedback bekommen ob alles so ist wie es sein soll.
Damit der Benutzer nicht so lange warten muss bis die Datei am Server angekommen ist, kann man nun in modernen Browsern diesen Check in den Browser/Client auslagern.
( Dies ersetzt NICHT die Überprüfung auf dem Server ! )

Wie das funktioniert wird in dem folgenden Artikel beschrieben:
Reading local files in JavaScript

Die Sicherheit...

Tja, so kann es gehen mit der Sicherheit, oder was auch immer die Verantwortlichen sich dabei gedacht haben.

Safari:
CVE-2011-3230 - Launch any file path from web page

DigiTask:
DigiTask - unfähig die eigene Webseite zu schützen !

Na dann, happy hacking !

Adobe kauft nun Typekit

Ui, mal sehen was das wird:

Adobe acquires Typekit
We are thrilled. There honestly is no better place for us to continue building our platform. But perhaps even more significantly, this represents a huge step forward in bringing fonts to the web.

Ich hoffe mal, dass Typekit so schlank bleibt wie bisher, denn die Aufgeblähtheit der Abode Produkte geht eindeutig zu weit...

What was there

Das nenne ich mal eine schöne Umsetzung und Verbindung von Google Maps. Tolles Interface, dass auch funktioniert, und sehr gute Idee !

WhatWasThere
The WhatWasThere project was inspired by the realization that we could leverage technology and the connections it facilitates to provide a new human experience of time and space – a virtual time machine of sorts that allows users to navigate familiar streets as they appeared in the past.


SSL encryption Hack

Uh oh, also wenn das so ist wie beschrieben, dann haben wir ein neues Problem:

Hackers break SSL encryption used by millions of sites
Researchers have discovered a serious weakness in virtually all websites protected by the secure sockets layer protocol that allows attackers to silently decrypt data that's passing between a webserver and an end-user browser.


Addthis à la Heise

Facebook macht ja leider was es will ( Aber da die Benutzer ohne viel nachzudenken mit laufen.... ). Nun hat das deutsche Recht leider ein Problem mit der Art und Weise wie Facebook mit den Daten umgeht.

Daher hat sich der Heise Verlag für die eigene Webseite was überlegt.

Nun kann man sich die Idee kopieren und bei sich einbauen. Was aber wenn man leider schon andere Social-Share-Dienste verwendet ?

Bei der Verwendung von Addthis habe ich nun eine Lösung gefunden die das Verhalten nachbaut.

Hier ist der HTML Teil der beim ersten Aufruf der Seite geladen wird.
Klicken und aktivieren für mehr Datenschutz Klicken und aktivieren für mehr Datenschutz


Wie man sieht gibt es zwei "Blöcke". Der Erste ist der normale Addthis Teil, der die gängigen Icons anzeigt.
Der zweite Block beinhaltet erster mal nur zwei Icons die man anklicken kann. Diese Aktion wir via Javascript hinzugefügt.

Dazu kommt noch ein wenig jQuery:

$(window).load(function() {
	$("#socialMediaExtended").click(function() {
		var url = "/getSocialBarExtended";
			
		$.ajax({
			url: url,
			cache: false,
			success: function(html) {
				$('#socialFrame').html(html);
				addthisInit();
			}
		});
	});
	
	addthisInit();
});

function addthisInit() {
	var addthisScript = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
	if(window.addthis) {
		window.addthis = null;
	}
	$.getScript(addthisScript, function() { addthis.init(); });
}


Wenn die Seite geladen wurde, wird mit der Funktion "addthisInit" das JavaScript von Addthis geladen. Wichtig dabei ist der Parameter "#domread=1" am Ende der URL. Damit wird der erste Block mit den Addthis Aktionen hinterlegt und kann verwendet werden.

Wenn man nun in dem zweiten Block auf ein Icon klick wird der AJAX Aufruf ausgeführt. Das was dabei zurückkommt wird in das Element mit der ID "socialFrame" rein geschrieben. Wobei der bestehende Inhalt überschrieben wird.



Nach dem der Inhalt geladen worden ist, wir die Funktion "addthisInit" erneut aufgerufen und Addthis neu geladen und somit werden die neuen Buttons eingebunden und funktionieren.

Auf diese Weise werden die IFrames der Anbieter (Facebook, Google etc.) nur auf Wunsch geladen.

Bei Fragen einfach fragen ;-)

Warum die Frage nach Vorname und Nachname falsch ist

Erfasst man Name und Anschrift mit einem Formular, dann erstellt man fast immer zwei Eingabefelder für den Vornamen und Nachnamen.

Nun, diese Art und Weise Menschen zu benennen mag vielleicht in Deutschland so sein, aber was machen Menschen aus anderen Ländern und somit auch anderen Kulturen ?

Mit dieser Problematik hat sich auch das w3c beschäftigt und ein Dokument verfasst, dass ausführlich darüber berichtet.

Personal names around the world
People who create web forms, databases, or ontologies are often unaware how different people’s names can be in other countries. They build their forms or databases in a way that assumes too much on the part of foreign users. This article will first introduce you to some of the different styles used for personal names, and then some of the possible implications for handling those on the Web.

This article doesn't provide all the answers – the best answer will vary according to the needs of the application, and in most cases, it may be difficult to find a 'perfect' solution. It attempts to mostly sensitize you to some of the key issues by way of an introduction. The examples and advice shown relate mostly to Web forms and databases.


Web Entwicklung für unterwegs

Auf Neudeutsch "Mobile development" ;-)

Jeder der sich mit diesem Thema befasst, sollte sich diesen Artikel zu Gemüte führen. Vielleicht kann der eine oder andere noch was lernen.

Mobile development with HTML5
Although the new web standard does not do your laundry, it has features that enable the creation of powerful applications—using only HTML, CSS and JavaScript (a Rails back-end can bring additional firepower to the table). This post will go over some key concepts and features of HTML5, setting the stage for more advanced subjects.

Aktuellste Version von Firefox/Iceweasel und Thunderbird/Icedove auf Debian

Debian ist ja nicht immer das neueste aber stabil. Will man aber beim Firefox oder Thunderbird nicht das nachsehen haben, dann sollte man folgende Seite beachten.

The Debian Mozilla team provides various versions of some Mozilla related packages for use on different Debian systems. The following wizard helps you to find the packages suitable for your system.

Debian Mozilla team

Mit den Einträgen in der sources.list kann man sich die aktuellste Version von Firefox und Thunderbird installieren. Im Moment sind das ja jeweils die Version 6.0

Dabei sollte beachtet werden, dass im normalen update/upgrade die backports Pakete nicht beachtet werden ( zu mindes bei mir... ). Somit muss man den Installationsbefehl von der Website immer mal wieder manuell ausführen.


So sollte eine Website aussehen

http://teamfortress.com

Ich gönne den Erfolg Valve, haben ja auch lange dafür gebaut. Aber so solide und durchdacht war schon lange keine Website mehr.

Es ist ja nicht nur ein Blog:
Classes, Movies, History

Und hier die aktuelle Aktion des Über Updates

So machen Websiten spass !

Hut ab und meinen ganzen Respekt !
Weiter so !

Print preview im IE und HTML5

HTML5 kennt ja einige neue Tags. Nun sind die leider nicht mit IE kompatibel. Mal wieder. Aber dies ist ein anderes Thema.

Nun könnte man ja denken, dass man mit einem print CSS alles so hinbiegen kann wie man möchte. Ne. Pustekuchen.

Leider kann der IE die neuen Elemente auch nicht richtig mit CSS versehen. Wie und was genau liegt im dunkeln.

Der Weg an diesem "Problem" vorbei liegt darin, dass man einfach diese Tags mit "normalen" Tags ersetzt.

Hier ist mal ein sehr einfacher Ansatz mit Hilfe von jQuery;
window.onbeforeprint = printFix;
function printFix() {
    $("footer").replaceWith(function () {
      var attClass = $(this).attr('class');
      var attId = $(this).attr('id');
      var attStyle = $(this).attr('style');
      var add = '';
		
      if(attClass) { add = 'class="'+attClass+'"' };
      if(attId) { add = add+' id="'+attId+'"' };
      if(attStyle) { add = add+' style="'+attStyle+'"' };
		
      return "
" + $(this).html() + "
"; }); }


Je nach CSS Angaben kann es natürlich sein, dass diese Methode nicht funktioniert. Es sollte auch darauf geachtet werden, dass aus ‹footer› ein ‹div› wird. Daher sollte man für solche Tags ohne Attribute eines für das print CSS einbauen.
Würde dann so aussehen:

Wird dann zu:


Mit dieser Methode sollte man die Druckansicht der einzelnen Browser in den Griff zu bekommen.
Wer es besonders speziell will, der sollte ein Druck Layout durch einen Drucken Knopf auf der Website anbieten.


Ich weis wo Du angemeldet bist

Viele finden es ja toll immer und überall angemeldet zu sein. Ob es nun Facebook, Twitter, reddit oder digg ist. Hauptsache online.

Nun kommt aber das "Problem".
Als Client wird der Browser verwendent. Eine Anwendung für alles. Im Grunde nichts schlechtes. Aber im Grunde ein totales Sicherheitsrisiko.

Warum ?
Nun, wenn Alles über eine Anwendung läuft hat man auch einen Angriffspunkt. Alles aus einer Quelle. Alles Websites die alle über eine Art und Weise kommunizieren.
Zusammen eine große Angriffsfläche. Zu groß.

Nun ist die Wahrscheinlichkeit in so einer "Social Community" angemeldet zu sein, durch die weite Verbreitung, sehr hoch.
Nun muss der Angreifer mit einer präparierten Webseite ( verteilt via Spam ) seinen Code ausführen und bekommt den Status ob man in einer Social Community angemeldet ist oder nicht.

Was hat man von dieser Information ?
Durch die weite Verbreitung lohnt es sich für eine Social Community einen Virus zu schreiben.
Wenn dieser Erfolg hat und der Spam ankommt, hat man eine sehr zuverlässige neue Tür geöffnet.
( Da man ja fast schon gezwungen ist in einer Social Community online zu sein. )
Über diese Tür hat man nun einen fast sicheren Weg geschaffen einfach an den Client ran zu kommen und Schadcode einzuschleusen und den Benutzer/Client zu überwachen.

Es schein im ersten Moment nicht sonderlich späktakulär zu sein, aber die Infos die man so gewinnen kann sind aufschlussreich und lassen sich leicht weiter verwenden.

Abusing HTTP Status Codes to Expose Private Information

Wie umgeht man das bzw. wie sichere ich mich ab ?
Ganz einfach. Nicht Alles auf einmal machen.
Will ich was auf Facebook machen, mache ich was auf Facebook und habe nur diesen Tab offen. Alles andere ist zu.
Somit ist man auf der sicheren Seite, dass keine andere Website mich ausspionieren will ( irgendwie komisch dies im Zusammenhang mit Faceboook zu sagen... )
Das Selbe gilt auch bei Online-Backing.


Weniger ist mehr