Archive for the ‘Javascript’ Category
International PHP Conference 2011: Tag 1
Es gibt nicht viele Tage im Jahr wo ich so früh aufstehe wie heute: 4:30 Uhr (Nachts!). Aber heute ist der erste reguläre Tag der International PHP Conference 2011 (IPC11) wenn man vom Workshop-Tag am Sonntag absieht, und dafür stehe ich auch nach 3 Stunden Schlaf wieder auf.
Trotz vieler Baustellen auf den 300km Strecke bis nach Mainz bin ich 8:50 Uhr an der Rheingoldhalle und kann einchecken. Kurz darauf beginnt bereits die Opening-Keynote. Die erste Session ist für mich „Client Security im Web 2.0 und mit HTML5“, vorgetragen von Carsten Eilers, einem Consultant, Trainer und Autor spezialisiert auf IT-Sicherheit. Im Talk geht es um Probleme mit dem Local Storage, Session Storage, Clickjacking, Buttonjacking, Framebuster, und natürlich am Rande um XSS und CSRF. Insgesamt eine solide Session mit einigen neuen Sicherheitsproblemen über die ich noch nicht nachgedacht habe. Bin ja auch eigentlich kein Frontendler 😉
Fast by Default – O’Reilly Media’s Velocity Konferenz kommt nach Berlin!
Velocity, die erfolgreiche Web Performance and Operations Konferenz produziert von O’Reilly Media, kommt zum ersten Mal nach Europa! Am 8. und 9. November trifft sich die internationale Web Developer Szene im Berliner Maritim proArte Hotel, um ihr Wissen über Skalierbarkeit, Zuverlässigkeit und Schnelligkeit von Webseiten auszutauschen.
Auf die Teilnehmer warten zwei spannende Tage mit exzellenten Keynote Rednern und intensiven Workshops. Die Gastgeber Steve Souders (Google) and John Allspaw (etsy.com) haben Experten wie Theo Schlossnagle (OmniTI) und Jeff Veen (Typekit) eingeladen, die ihre Erfolgsgeschichten präsentieren und auch die kniffligsten Fragen zu Themen wie Ajax, CSS, JavaScript und Performance auf mobilen Geräten beantworten werden.
Was sind die neuesten Tools und Trends im Web Development? Erfahrungsaustausch und praktische Anwendungen stehen im Vordergrund bei der Velocity Europe. Ivo Teel (SPIL GAMES), Mike Shaver (Mozilla Firefox), Jon Jenkins (Amazon.com), Schlomo Schapiro (ImmobilienScout24) und weitere maßgebliche Vordenker der Branche stellen ihre Ideen vor und diskutieren die neuesten Entwicklungen.
Jeff Veen, CEO von Typekit, betont die entscheidenden Faktoren für erfolgreiche Webseiten: „I’ve been working on the design and user experience of web sites for 15 years, and I keep coming back to this: performance and reliability is the bedrock for building products people love. The diversity of speakers at Velocity Europe is a testament to how important speed at scale has become.“
Informationen zu allen bestätigten Sprechern unter:
http://velocityconf.com/velocityeu/public/schedule/speakers
Weitere Highlights des englischsprachigen Programms sind:
Weiterlesen »
2-Klick-Empfehlungsbuttons von Heise und Plugin
Ihr habt es ja wahrscheinlich in den letzten Tagen gelesen und gehört, dass es einen kleinen Streit zwischen Heise Online und Facebook gab. Es ging um die Einbindung einer Social Media Leiste auf den Seiten von Heise Online, wobei die Buttons von Facebook, Twitter und Google+ jedoch nicht normal eingebunden wurden (Javascript von den jeweiligen Anbietern einbinden), sondern es werden erstmal nur inaktive Buttons angezeigt, die der Besucher selbst aktivieren und dann nutzen kann. Denn diese Einbindungen wie sie die Anbieter haben möchten senden schon beim Besuch der Seite wertvolle Informationen an die Anbieter, sodass diese die Surfgewohnheiten usw. schön tracken können. Das ist mit dem Datenschutzgesetz hier in Deutschland nicht vereinbar, sodass eigentlich die Buttons entfernt werden sollten. Mit der 2-Klick-Strategie geht man einen Mittelweg der die Besucher erstmal schützt, sie selbst können entscheiden ob die Buttons aktiviert werden sollen oder nicht.
Linkpool Nummer 20
Serverseitige interne Informationen aus PHP-Applikationen im Client anzeigen, .NET macht vor was möglich ist:
PHP Sessions in node.js speichern:
Verteiltes Map-Reduce:
Cross Browser Test Tool Übersicht
HTML5 und CSS3 Features schön animiert gezeigt:
Ausflug in die Spieleentwicklung mit Javascript und dem Canvas Element:
Gute Zusammenfassung zu sicheren Login-Formularen und Dingen drumherum wie Passwort vergessen Funktionen etc:
Der Stand von HTML5
Da viele von uns wahrscheinlich bereits HTML5 Webseiten erstellen oder ältere Seiten um HTML5-Features erweitern ist es wichtig zu wissen welcher Browser welches Feature unterstützt, um abschätzen zu können wieviel Prozent der Besucher das neue Feature nutzen können und wie viele nicht.
Die wohl korrekteste Methode das herauszufinden ist auf die aktuelle Webseite ein paar Javascript-Zeilen hinzuzufügen die die entsprechende Feature-Unterstützung testet, die sogenannte Feature Detection. Die Liste mit unterstützten bzw. nicht unterstützten Features schickt man via AJAX zum Server zurück. Nur so hat man aktuelle und auf die eigenen Besucher abgestimmte Zahlen.
Man müßte also ähnlich wie hier für das canvas-Element einen Test schreiben:
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
Aber es gibt schon große Bibliotheken, die hunderte von solchen Tests kennen und wo man einfach eine Funktionalität testen kann, wie hier beispielsweise mit Modernizr:
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
Modernizr ist der bekannteste Vertreter, es ist auch möglich die unterstützten Codecs des <video> und <audio> Tags abzufragen und vieles mehr.
Es gibt aber auch Webseiten und Tabellen, die allgemein darstellen welche Browser-Versionen welche Features unterstützen. Wenn man diese Tabellen nimmt und ungefähr mit der Browser-Verteilung der eigenen Besucher verrechnet kommt man auch zu einem Ergebnis.
Die bekanntesten Seiten sind:
- http://html5test.com/results.html bzw. http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBiBsqYGDA
Wenn man nun das Ergebnis erhält dass bereits 85% der Besucher das Feature X unterstützt gilt es Entscheidungen zu treffen. Ist es noch zu früh, das Feature einzubauen? Was macht man mit denjenigen, die noch einen alten Browser haben? Versucht man das fehlende Feature nachzubilden? Für diese Nachbildungen gibt es Sammlungen von sogenannten Polyfills und Shims. Wenn der Browser also beispielsweise das placeholder-Attribut noch nicht unterstützt ist trotzdem möglich, sie mittels Javascript hinzuzufügen. Das geht natürlich nicht für alle neuen Features, aber für viele gibt es Nachbauten. Aber dieses zusätzliche Javascript bläht natürlich die Webseite auf und es ist auch nicht so schnell wie die native Unterstützung des Browsers. Aber was tut man nicht alles dafür, neue Features nutzen zu können ohne einen Teil seiner Besucher zu verärgern.
Hier eine schöne Liste der aktuell verfügbaren Polyfills und Shims:
