Die Kommunikation zwischen Browser und Server erinnert mich momentan irgendwie an die Schlümpfe. Es läuft immer nach dem Motto “Papa Schlumpf, wie weit ist es denn noch?” Worauf der der Server Papa Schlumpf antwortet “Nicht mehr weit.”. Das ganze wiederholt sich andauernd und hat einen entscheidenden Nachteil: Es verursacht Last auf dem Server, wo wir sie nicht wirklich benötigen.
Mit HTML5 bietet sich uns hier eine neue Möglichkeit die Kommunikation zwischen Client und Server zu realisieren: WebSockets.
Technisch betrachtet startet das WebSocket-Protokoll wie ein ‘normaler’ http-Request/Response-Zyklus, nur, dass nach der Übertragung der HTTP-Request- und Response-Header die zugrundeliegende TCP-Connection bestehen und dadurch für binäre bzw. Zeichenketten-Übertragung in beide Richtungen frei wird. Dadurch kann auch der Server zu jedem Zeitpunkt Daten zum Client schicken. Zudem wird der weitere Protokoll-Overhead im vergleich zu HTTP stark reduziert (im Idealfall nur 2 Bytes zusätzlich pro Text-Nachricht und Richtung).Wikipedia
Was für einen kleinen Blog eher uninteressant ist macht für größere Applikationen schon mehr Sinn. Noch kann man WebSockets nur mit Safari und Chrome nutzen aber wer sich ein wenig mit JavaScript auskennt kann hier eine schicke Fallback-Lösung entwickeln.
Neugierig? Ein Blick auf nettuts.com lohnt sich: Start using HTML5 WebSockets today
Foto Trevor Coulthart@flickr
So wirklich toll findest es niemand und trotzdem kommt man bei kommerziellen Projekten nicht an umfangreichen Tests vorbei. Dies gilt bei WebApplikationen nicht nur fürs backend sondern besonders auch fürs frontend. Neben den zahlreichen Tests in unterschiedlichen Browsern (speziell HTML und CSS) erfordert JavaScript nochmal besondere Aufmerksamkeit. Auf der einen Seite interpretieren Browser die Skriptsprache gerne anders als ihre Kollegen und gleichzeitig müssen wir JavaScript die gleiche Aufmerksamkeit schenken wie jeder Programmier-/ Skriptsprache.
Ben Cherry ist Frontenddeveloper bei Twitter und hat wohl schon einige Erfahrungen mit dem Testen von JavaScript gemacht die er dankenswerterweise auf seinem Blog mit uns teilt. Sicherlich einen Blick wert und ein guter Ansatz um den eigenen JavaScript Code zu optimieren.
Foto: Staci@flickr
Ein eigener “Gefällt mir”-Button auf der Seite ist schon praktisch. Facebook macht sich dran das Web zu erobern und erlaubt Webseitenbetreibern in wenigen Schritten den besagten Button in die eigene Webseite einzubauen.
Variante 1: mit iframe
<iframe src="http://www.facebook.com/plugins/like.php?href=http://domain.com&layout=standard&show-faces=true&width=500&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>
Variante 2: Facebooks JavaScript-SDK
Etwas komplizierter aber viel schöner ist es die JavaScript-SDK von facebook zu nutzen. Für diese muss man sich zwar bei facebook anmelden aber das Formular ist noch gerade so erträglich.
Eigene Seite bei facebook als Applikation registrieren
Das Forumlar unter http://developers.facebook.com/setup/ möchte von Euch nur den Namen der Seite, die URL zur Seite und Eure Sprache wissen. Mehr nicht und schon bekommt ihr nicht nur Eure App ID sondern auch gleich den Code, den ihr braucht, um das facebook JavaScript-SDK einzubinden.
facebook JavaScript-SDK einbinden
<div id="fb-root"></div><script>window.fbAsyncInit = function() {FB.init({appId: 'APP ID', status: true, cookie: true, xfbml: true});};(function() {var e = document.createElement('script');e.type = 'text/javascript';e.src = document.location.protocol + '//connect.facebook.net/de_DE/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script>
Jetzt haben wir Zugriff auf einige Methoden, die facebook uns zur Verfügung stellt. Um einen “Like”-Button in die Seite zu integrieren brauchen wir zunächst ein XFBML-Element, welches ihr an der gewünschten Stelle in Eure HTML-Datei einfügt. Eure Domain müsst Ihr entweder manuell eintragen oder mit dem CMS Eurer Wahl dynamisch einfügen:
<fb:like href="http://domain.com/" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
Für WordPress sieht das dann so aus:
<fb:like href="<?php echo urlencode(get_permalink($post->ID)); ?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light" />
Meiner Meinung nach viel schöner als ein iframe und, wenn man sich das facebook JavaScript-SDK mal ansieht, auch viel mächtiger.
Statt vieler Worte heute mal nur ein paar Zeilen Code und eine kurze Erklärung:
Wenn Ihr über die Twitter-API Nachrichten von Twitter abfragt bestehen diese nur aus Text. Schöner wären hier natürlich anklickbare Links, Hashtags und Nutzernamen, was ihr mit folgendem Code einfach bewerkstelligen könnt. Die Regulären Ausdrücke lassen sich natürlich auch in anderen Sprachen realisieren. Gefunden habe ich sie bei Andrea Olivato
var tweet = 'woohoo dank @ugotit von http://www.ugotit.de hab ich ein paar tolle #regular #expressions gefunden.';tweet = tweet.replace(/http([s]?):\/\/([^\ \)$]*)/,'<a href="http$1://$2" rel="nofollow" title="$2">http$1://$2</a>');tweet = tweet.replace(/@([a-zA-Z0-9_]*)/,'<a href="http://twitter.com/$1" title="$1 profile on Twitter" rel="nofollow">@$1</a>');tweet = tweet.replace(/\#([a-zA-Z0-9_]*)/,'<a href="http://search.twitter.com/search?q=%23$1" title="search for $1 on Twitter" rel="nofollow">\#$1</a>');
