XHR mit CORS

Manchmal habe ich das Gefühl ich werde langsam alt. Obwohl ich meine, so ziemlich jede neue Technik aus dem Hause HTML5, Javascript und CSS3 auf dem Schirm zu haben, tendiere ich doch zeitweise noch zu konservativer Herangehensweise bei Projekten. Der alte Zwang Browser wie IE7 oder gar 6 unterstützen zu müssen sitzt einem scheinbar als schlechter Berater im Nacken. Aber can I use hilft dem gerne ab.

Bei einem aktuellen Projekt haben wir nun, weil der Kollege gegenüber nicht geschlafen hat, das erste Mal CORS eingesetzt und ehrlich gesagt, ich bin von den Socken. Seit uns das Modewort AJAX begegnet ist, schlagen wir uns ja nun mit Same-Domain-, Same-Server- kurz Same-Origin-Policies herum, die einem Crossdomain-XHR verbieten. Alle Bestrebungen, diese Regeln zu umgehen: reines Gehacke. Mit dem Einsatz von CORS ist das vorbei. CORS ist dabei nicht mal neu, aber erst jetzt so langsam anwendbar.

Wenn man Zugriff auf die Server hat, die an der Kommunikation beteiligt sind, ist die Sache so einfach, als würde man einem Kind den Lutscher klauen. Hier mal eben der nötige Code für die Apache Konfiguration:

Header set Access-Control-Allow-Origin *

Der Server sendet eine Headerzeile mehr (in der einfachsten möglichen Konfiguration), und der Browser (alles moderne nach IE7, mit kleinen Einschränkungen bei IE9) weiss: Kommunikation erlaubt. Und dann klappt’s auch mit dem AJAX, so wie man sich das immer vorgestellt hat. Eins! Setzen! Weitermachen!

Sublime Text 2

Als Chuck Norris Webdeveloper braucht man meiner Meinung nach, neben einer ordentlichen Shell und einem modernen Webbrowser, nur noch einen vernünftigen Texteditor. Ein guter Browser ist heutzutage leicht zu finden und auf der Shell kann man die nötigen Dateiübertragungen durchführen. Nur mit dem Texteditor tun sich viele nicht so leicht. Dort ist man vielmehr auf einer ewigen Suche.

Speziell bei Macusern tritt bei diesem Thema in letzter Zeit der Angstschweiss auf die Stirn. Schuld daran ist Textmate, bzw. Textmate 2. Die unbeliebte, bisher nur als Alpha erhältliche, Nachfolgeversion des bislang beliebten Texteditors Textmate, wurde zu Open Source erklärt. Nach der langen Zeit ohne sichtbare Weiterentwicklung, wohl eher ein schlechtes Zeichen für die Zukunft des Programms.

Sich an einen Texteditor zu gewöhnen erfordert bekanntermaßen viel Zeit und Geduld. Entwickler und Editor sind nur schwer voneinander zu trennen. Wobei der geneigte Entwickler zwar gerne neues ausprobiert, selten aber wirklich wechselt, da er meist feststellt, dass die über Jahre eintrainierten Tastenkombinationen – die Combos der Webentwicklung sozusagen – neu gelernt werden müssen. Und Texteditoren können, trotz des zunächst eingeschränkt wirkenden Anwendungsgebietes, wirkliche Featuremonster sein. Nur nutzen einem diese Features nichts, wenn sie auf unbekannten Tastenkombos liegen oder solchen, die man sich für andere Aktionen gemerkt hat. Außerdem muss der Editor im Umgang mit dem Entwickler den richtigen Ton treffen. Kein Witz: Codecompletion wird gern genommen, aber bitte ohne die Geschwätzigkeit einer Monster-IDE wie bspw. Eclipse. Bei solchen Programmen ist man ja nie sicher, ob man noch selbst programmiert, oder schon selbst programmiert wird. Und dann soll alles natürlich auch noch chick und slick aussehen…

Getrieben von dem sich abzeichnenden Ende der Textmate-Ära hatte ich vor Wochen mal Sublime Text 2, einen Editor, den es sowohl für Mac, als auch für Windows und Linux gibt, angetestet. Sublime Text 2 (ST2) ist anders, das muss man schon zugeben, und vor allem in der Art, wie man Einstellungen vornimmt, überhaupt nicht Mac-OS-like, man braucht einfach ein wenig Anlauf um zu verstehen, das darin ein Monsterfeature liegt.

In ST2 kann man alles konfigurieren. Wirklich alles. Alle Einstellungen, vom Theme bis zur Zuweisung von Tastenkürzeln, werden in JSON-Dateien verwaltet. Und nun kommt das non-macianische: man editiert direkt diese JSON-Dateien, um Einstellungen vorzunehmen. Das schränkt den Nutzerkreis natürlich zunächst mal ein wenig ein. Konfigurationen können auf verschiedenen Ebenen vorgenommen werden, bspw. per User, per Projekt oder auch per Programmiersprache. Erweitert wird ST2 mit Plugins, die dann wieder mit eigenen Einstellungsdateien daherkommen.

Durch die Konfiguration auf Dateiebene entsteht nicht nur der Vorteil, dass man seine Config wunderbar backuppen und über mehrere Rechner teilen kann (bspw. per Dropbox), sondern man kann sie auch anderen Leute, zum Beispiel Kollegen im Projekt weitergeben. So kann man bspw. in einem Projekt die Codingstyles mithilfe voreingestellter Einrückungen und dem Plugin Sublime Linter und der Weitergabe dessen Einstellungsfiles vorgeben. Wie genial ist das bitte?

ST2 kann Textmate Themes und Bundles übernehmen. Man findet relativ schnell ansprechende Themes und Plugins kiloweise. Aber auch ohne Erweiterungen kann ST2 einige Dinge, die andere Editoren nicht hinbekommen, bspw. multiples selektieren und editieren von Text, ausgefeilte Suchfunktionen, eine gute Projektverwaltung und wenn man wirklich will, kann man ST2 auch Vim emulieren lassen. Es gibt eine , aber die unoffizielle Doku ist noch besser.

TL;DR: Sublime Text 2 ist ein guter Texteditor mit unglaublichen Einstellungsmöglichkeiten. Die Einstiegshürde ist hoch, aber nach kurzer Zeit überwindbar, was auf jeden Fall ein lohnenswerter Zeitaufwand ist.

Offline

Als Alternative zur Apptisierung des mobilen Internets wird immer wieder die Webapp genannt. Ebenso oft wird betont, dass native Apps den Webapps in UI und Features überlegen sind. Die Browser holen jedoch langsam auf, z.B. mit der Möglichkeit Geodaten zu lesen, oder auch Zugriff auf eine im Smartphone integrierte Kamera zu erhalten. Und dann ist das noch das Feature der offlinefähigkeit. Im folgenden will ich einige Techniken dazu kurz anreissen, zum einen um (mir) einen Überblick zu verschaffen, zum anderen um feststellen zu können, wie weit wir denn technologisch heute sind, in Sachen offline. Zum über den Onlinezustand hinaus gehenden Speichern von Daten stehen im wesentlichen drei Techniken zur Verfügung.

Offline weiterlesen

Prototyp

Ein Prototyp (altgr. protos ,der Erste‘ und typos ,Urbild, Vorbild‘) stellt in der Technik ein für die jeweiligen Zwecke funktionsfähiges, oft aber auch vereinfachtes Versuchsmodell eines geplanten Produktes oder Bauteils dar. Es kann dabei nur rein äußerlich oder auch technisch dem Endprodukt entsprechen.

Wenn der Prototyp das Licht der Welt erblickt, dann hat es „Klick“ gemacht, dann ist das Team aufgestanden vom Konzepttisch und hinüber gegangen an die Werkbank. Und wenn schon nach kurzer Zeit erste Ergebnisse zu sehen sind—Sachen die sich bewegen, auf die man klicken kann—dann weiss man, dass es nun losgeht, das jetzt etwas gebaut wird, an dem man bald Freude haben wird. Der erste Schritt ist getan. Fehlen nur noch 99%.

Hinter dem mobilen Proxy

Ich hatte jüngst großen Spaß mit dem mobilen Proxy der Telekomiker und—würde es nicht immer eine besonders störungsanfällige Nutzerschar treffen—ich würde glatt darüber lachen. Denkt man allerdings die Gutsherrenartigkeit mit der alle Mobilprovider mit unseren Websites im mobilen Netz umgehen konsequent zu Ende, wird einem leider Angst und Bange.

Erste Erfahrungen damit, das im mobilen Internet der Sourcecode einer Website beim Nutzer nicht so ankommt, wie man ihn am Server losgeschickt hat, hatten wir kurz nach dem Launch unserer iPad-Website. Eins der zahlreichen Scripte auf der Seite nutze einen <meta>-Eintrag im Head der Seite, um zu erfahren, in welchem Ressort es sich gerade befand. Informationen, die man zwischen Datenbasis und Frontend sicherlich auch bspw. mit Hilfe einer Klasse am <body>-Element übertragen hätte können. Aber unsere Templatehasen haben uns einst einen dicken <head> mit massig Informationen über die Seiten unserer Anwendung gegeben, warum sollte man die nicht nutzen und auslesen? Weil im mobilen Netz (zum Zwecke der Geschwindigkeitserhöhung) von den diversen mobile proxy alle <meta/> herausgefiltert werden, zum Beispiel.

Ok, das kann man ja noch verstehen, steht ja auch nichts drin, was so ein Handy, iPhone oder auch iPad im 3G-Betrieb brauchen könnte. Der zuckt der Entwickler kurz mit den Schultern und programmiert drum herum. Ein wenig komplizierter wurde es, als wir feststellten, dass im mobilen Netz nicht nur Daten aus dem <head> entfernt werden, es werden auch welche hinzugefügt. Dort verlinkte Javascripte bspw. werden komprimiert und direkt in den <head> ausgegeben. Das ist ja nett. Ich nehme mal an, ein derart aufbereitete Seite wird dann so gecached, spart ja auch reichlich Verbindungen. Technisch alles durchaus verständlich.

Und wenn man sich denn darauf verlassen könnte. Aber bspw. die Telekomiker verbessern ihre Systeme natürlich auch und da dieses Treiben nur wenig oder gar nicht dokumentiert ist, gibt es natürlich auch keine Releasetermine, keine Vorwarnung. Dass man wieder in die 3G-Falle gelaufen ist, merkt man genau dann, wenn der erste Nutzer sich meldet.

Dazu ein kurzer murphyesker, aber logischer Merksatz: Fehler am Livesystem werden immer zuerst von einem Nutzer entdeckt, niemals vom Entwickler.

Vor kurzem hatte also mein Lieblingsprovider wieder an seinem Proxy herumgespielt und folgendes Verhalten hinzugefügt: ähnlich wie die Javascripte wurden nun auch CSS statt wie vorgesehen verlinkt zu werden, direkt in den <head> geechoet, schick auf eine Zeile komprimiert. Das sollte weiter nicht stören, es sei denn man nutzt eine Technik zum Austauschen von verlinkten Styles zur Ladezeit. Dieser Hack um Stylesheets bei Bedarf zu dis- und/oder enablen funktioniert dann so gar nicht mehr.

Und wenn diese Technik dann für die Seite wichtig ist, dann kann man schon mal ins Schwitzen kommen. Die Lösung war in diesem Fall recht einfach: schreibt man statt <link rel="stylesheet" href="../styles.css"/> genauer <link rel="stylesheet" href="../styles.css" media="screen"/>, zeigt sich der Proxy derzeit gütig und lässt die Styles in Ruhe. Mal davon abgesehen, dass sich das leider morgen ändern kann, kann man nun auch keine @media innerhalb des CSS mehr machen.

Im Grunde ist das ja auch alles nicht so schlimm, so lange der Mobilprovider sich nicht auch noch am Inhalt der Seite zu schaffen macht. Es zeigt aber, dass eine iPad-HTML-Anwendung sehr viel defensiver gebaut werden müsste, als ich es bisher getan habe. Vielmehr muss man berücksichtigen, dass ein Tablet eben auch ein mobiles Device sein kann und dann eben den gleichen Restriktionen unterliegt, wie das schnöde Handy in meiner Tasche. Hier klafft imho noch eine mobile-Web-Smartphone-und-Tablet-Lücke, die sich auch darin zeigt, wie drastisch niedrig die Datenmengen von den Providern beschränkt werden (statt die Infrastruktur auszubauen oder die Technik zu verbessern). An Seiten, die eine Tonne wiegen und zwei Minuten Ladezeit bei UMTS auf die Ur bringen, hat der Nutzer in zweierlei Hinsicht wenig Freude.

One Web ist gar nicht so einfach.

Mein Werkzeugkasten

Über die Jahre hat sich in meiner Toolbox ganz schön was angesammelt.
Foto: Some rights reserved by See-ming Lee 李思明 SML

Schon vor ewig hatte der gute Frank Bueltge einen Artikel über seine WordPress Entwickler Toolbox gepostet und seitdem habe ich einen ähnlichen Artikel in die Pipe gelegt, der nun endlich fertig ist. Die Frage, womit ich dieses Blog entwickle lässt sich von der Frage, womit ich auch professionell arbeite, nicht trennen. Dieses Blog (und die anderen zuvor) ist ja immer die Spielwiese für das, was ich auf Arbeit mache und umgekehrt, setze ich im Arbeitsleben Gelerntes hier gerne ein und um. Von daher kann ich nur meinen globalen Werkzeugkasten präsentieren, für das, was ich so mache… Digitalkreativer und Internethandwerker.

Betriebsystem(e)

Ganz grundsätzlich arbeite ich seit Jahren fast nur noch mit Apple-Rechnern, namentlich zur Zeit einem MacBook Pro (2.66 GHz Intel Core 2 Duo, 4GB RAM). Zu Hause steht noch ein kleiner Mac mini. Vor kurzem wurde allerdings zusätzlich ein Samsung Netbook angeschafft, dessen mitgeliefertes Windows 7 Stalker geplättet und durch das aktuelle Netbook-Ubuntu ersetzt. Mein Arbeitgeber stellt mir zusätzlich ein iPhone und zum Testen auch regelmäßig ein iPad. Entwickelt wird bei mir aber eigentlich ausschließlich auf dem MacBook Pro.

Editor/IDE

Ich weiss gar nicht wirklich, ob es derzeit ein sinnvolles IDE für HTML und CSS auf dem Mac gibt. Ich habe in den Jahren viel ausprobiert, Aptana, NetBeans, Espresso, Coda, am Ende des Tages bin ich immer wieder zu meinem heißgeliebten Textmate zurückgekehrt. Textmate ist eben ausdrücklich keine IDE, sondern ein Texteditor, der praktisch alles kann.

Ja, das ist richtig, ich mache alles mit dem Texteditor, bis hin zu kleineren jQuery-Projekten. Unterstützt wird dies durch viele viele Textmate-Bundles, die beispielsweise JS Lint integrieren, für ordentliche Formatierung sorgen, gegen den W3C Validator checken, SVN (oder Git oder Mercurial) bedienen und so weiter und so fort. Hinzu kommen Templates und eine prima Projektverwaltung.

Serverkontakt

Obwohl ich gerne bis zur letzten Sekunde lokal entwickle (Server zur Verfügung gestellt von MAMP), kommt man natürlich ohne Serverkontakt nicht aus. Wenn ich dabei auf das vorsintflutliche und leider noch viel zu verbreitete FTP angewiesen bin, dann nutze ich dazu @work Transmit und sonst gerne Cyberduck. Viel lieber mag ich allerdings entfernte Dateisysteme mounten, mit MacFusion und MacFUSE. Ich kann aber auch eine Shell bedienen und direkt auf dem Server mit vi. Ich habe auch schon mal mit macvim gespielt, für vi-Abhängige am Mac jedenfalls das Richtige. Meine terminal.app erreiche ich übrigens mit dem coolen Visor, aber das ist natürlich nur Spielerei.

Grafik, Konzept

Da ich mir privat kein Photoshop leisten will und kann, und im Beruf nicht zu denen gehöre, die standardmäßig damit ausgestattet sind, habe ich mir vor einiger Zeit schon Acorn zugelegt. Das macht zumindest alles, was man im Blogalltag so braucht und öffnet sogar PSDs (was auch im Büro manchmal hilfreich ist). Zum Webdesign eignet es sich aber weniger. Hin und wieder spiele ich mit GIMP, aber mal ehrlich… naja.

Zur graphischen Analyse von Webseiten (und damit ich mir die Standardpixelwerte von zeit.de nicht merken muss), habe ich mir xScope gekauft. Dieses wirklich grandiose Tool misst alles am Bildschirm aus, zeigt Farbwerte, macht globale Hilfslinien, Grids und und und…

Im Beruf brauche ich noch zusätzlich Helfer für die Visualisierung von Seiten, Abläufen, etc., bspw. bei der Konzeption. Standardmäßig nutzen wir Omni Graffle, was ich auch sehr mag. Trotzdem habe ich mich schon an Balsamiq versucht, da ich Mockups, die aussehen wie Mockups für pädagogisch sinnvoll halte. Zumal wir dann sehr schnell zu HTML-Prototypen übergehen, da muss man Grenzen ziehen. In Omni Graffle nutze ich deswegen das Web Sketch Interface Stencil.

Firefox ist immer noch die Nummer 1.

Browser, Virtualisierung

Ich entwickle nach wie vor im Firefox. Ich habe mit Chrome geliebäugelt, aber es geht doch nichts über Firefox mit Firebug. Dazu habe ich noch ein paar Addons am Start: natürlich die Web Developer Extension, den User Agent Switcher, den Fangs Screenreader und die Selenium IDE und die passenden Selenium IDE Buttons. Natürlich habe ich trotzdem zusätzlich jede Menge Browser auf dem Rechner installiert, zum Testen eben.

Dafür betreibe ich auch gezwungenermaßen Virtualisierung und zwar mit VirtualBox, wo diverse Auswüchse der Windows-Ära zu Hause sind und diverse Browserversionen von IE verfügbar machen.

Und sonst so?

Puh, das war ja eine lange Liste. Aber alle diese Programme und Tools brauche ich für meinen gelungenen Arbeitsalltag. Und es werden immer mehr. Seitdem ich zum Beispiel viel mit dem iPad zu tun habe, nutze ich immer öfter Simplenote zusammen mit Notational Velocity und gerne auch in Kombination mit Dropbox, mit dessen Hilfe ich Dateien zwischen meinen verschiedenen Rechnern share. Und man will ja auch kommunizieren, obwohl sich immer alle beschweren, dass ich viel zu selten mein Adium am Start habe. Und Gmail und Tweetie und Skype…

Web Inspector Updates

A number of exciting new features have been added to the Web Inspector since our last update. Today we would like to highlight some of those features! […] If you would like to play with most of these features you will need to be running a recent WebKit Nightly.