Das Design des Codepads auf viper-7.com versprüht den mir nicht ganz unbekannten Charme eine typischen Entwickler-Website: Schlicht und praktikabel. Und praktisch ist das PHP-Codepad vor allem auch für jene Entwickler, die ihren PHP-Code schnell mal online testen wollen. Das Ganze funktioniert in unterschiedlichen PHP-Versionen, und neben einer Code-Analyse, gibt es auch einen Debugger.

Übrigens: Wenn ihr den Test für euren eingegebenen Code starten wollt, müsst ihr den Paste-Button drücken. Ich sag es nur, weil ich selbst erst mal gesucht habe.

Das Rad nicht neu zu erfinden, ist eine der universellen Weisheiten von Codern. Nur dass diese Menschen weniger an der Fortbewegung im Sinne von “Von A nach B” kommen interessiert sind, als dass sie es gerne vermeiden, Code selbst zu entwickeln, wenn es vor ihnen schon mal jemand gemacht hat. Dies gilt vor allem für getestete, dokumentierte und in der Praxis bewährten Code.

Alle die Entwickler, die jetzt zustimmende mit dem Kopf genickt haben, sollten sich mal die Code-Teil-Community codesnipp.it ansehen. Dort kann man eigenen Code speichern und ihn mit anderen teilen. Auch kann man dort die Arbeit seiner favorisierten Coder “abonnieren”, bei Twitter würde man von “ihnen folgen” sprechen.

Bei codesnipp.it findet man sowohl Code für bestimmte Sprachen, wie HTML, C++ oder Ruby, wie auch für bestimmte Systeme, wie WordPress, Joomla oder auch Linux. Das Ganze ist in der Basis-Version kostenfrei. Möchte man jedoch z.B. bestimmten Code als privat deklarieren, dann zahlt man $10 im Jahr.

via Web2null

Die neuste Browser-Generation mit Firefox 4, IE9 und Chrome 10 kommt derzeit mit Macht. Neben Verbesserungen auf Gebieten wie der Geschwindigkeit und der Sicherheit, bringen moderne Browser auch eine verbesserte Unterstützung von CSS3 mit. Dies wird sich nach und nach auch weiter auf die Gestaltung von Websites auswirken. Haben Designer auf Wunsch der umsetzenden Web-Entwickler oftmals auf nette Spielereien wie Schatten und abgerundete Ecken verzichtet, sollten diese mit der verbesserten CSS3-Browser-Unterstützung zukünftig kein Problem mehr darstellen. Zumal es Web-Angebote wie etwa den CSS3 Generator von Eric Hoffman und Peter Funk gibt.

Mit diesem Generator kann man sich Hintergrund-Elemente mittels Schiebereglern, Farbauswahl und Eingabe-Feldern gestalten und anschließend den CSS-Code dafür generieren lassen. Zunächst wartet der Generator mit einigen Basisfunktionen zur Gestaltung auf, wie etwa das Einstellen von Eck-Radien oder einem Schatten. Doch wer mag, kann bei fast allen Einstellungen tiefer einsteigen und so auch ausgefeiltere Effekte erzielen.

Wenn man das Programmieren erlernt, dann bekommt man es sofort mit Variablen zu tun. Und das auch aus gutem Grund. Besonders zu schätzen wusste ich zu Zeiten, als ich selbst noch regelmäßig programmierte, immer die globalen Variablen. Auf die war in aller Regel verlass. Da wusste man, wenn ich deren Wert an der Stelle, wo dieser zugewiesen wurde, verändere, dann kann ich sicher sein, dass das auch an allen Stellen, wo sie verwendet werden, ihre Wirkung zeigt. Bei der für das Web so immens wichtigen Stylesheet-Sprache CSS gibt es keine Variablen. Was mich schon immer gestört hat.

Darum (na gut, sicher auch noch aus anderen Gründen) verwenden einige Web-Entwickler Sass. Sass steht für Syntactically Awesome Stylesheets und ist im Prinzip eine syntaktische Vereinfachung von CSS, wie ein Beispiel zeigt, dass ich im zugehörigen Wikipedia-Artikel gefunden habe. Zunächst der Sass-Code:


!link_color = #00F
a
 :color = !link_color


Da seht ihr auch schon den Einsatz von Variablen in Sass. Und das wird daraus, wenn Sass nach dem Coden zu CSS-Code kompiliert wurde:

a {
 color: #00F
}


Sass wird in der Regel gemeinsam mit Haml (HTML Abstraction Markup Language) eingesetzt, was ihrerseits wieder eine in der Syntax vereinfachte Variante von HTML ist. Beide haben gemeinsam, dass die Sprachen nicht nur eine Vereinfachung der Syntax mit sich bringen, sondern auch noch ein paar andere nette Sachen. Bei Sass ist das z.B. das Nesting oder die Mixins. Nestings sind im Prinzip in Selektoren geschachtelte Unter-Selektoren, die bei herkömmlichem CSS unzusammenhängend auf gleicher Ebene im Code untergebracht wurden. Was meiner Ansicht nach alles andere als gut überschaubaren Code erzeugte. Mixins wiederum sind Code-Schnipsel, die man in seinem Code wiederverwenden kann, sogar mit der Möglichkeit Parameter zu übergeben. Obendrein kann man bei Sass auch die Eigenschaften bestimmtet Selektoren an andere vererben.

Alles in allem ein feine Sache, die vor allem das Schreiben von Stylesheet-Code eleganter und schlanker macht. Ambitionierte Entwickler stehen doch auf so etwas, oder?

Noch vor ein paar Jahren war es hauptsächlich der Netscape 4, der die Web-Entwickler regelmäßig zu irgendwelchen Hacks und Workarounds getrieben hat. In den letzten Jahren hat sich der Internet Explorer (IE), vor allem in der Version 6, zu dessen legitimen Nachfolger gemausert.

Eine neue Website, die Workarounds für alte IEs anbietet, ist CSS3 Pie. Derzeit ist dort nur eine Demo für einen Workaround zu Farbverläufen, Schatten und abgerundete Ecken, aber wenn ich die Ankündigung auf der Site richtig interpretieren, können wir schon bald mit weiteren Sachen rechnen.

Der Name hat sicher historische Gründe, denn auf css-tricks.com gibt es weit mehr als nur Tricks zum Thema CSS. Besonders interessant finde ich den Download-Bereich. Dort findet man feine Tools zur Gestaltung von Websites aus den Bereichen JavaScript, Layouts/Templates, PHP und natürlich CSS.

Im Bereich JavaScript gibt es zum Beispiel das oben abgebildete InfoGrid, das mir ausgesprochen gut gefällt. Es liefert nämlich einen guten Lösungsansatz für das Problem, wenn eine Info-Tabelle eigentlich zu breit für das Layout der Content-Spalte ist. Weiter gibt es etwa bei den PHP-Sachen eine schicke Darstellung von RSS-Feeds für das iPhone und die Editable CSS3 Photo Gallery liefert eine hübsche Galerie-Ansicht, die auch Menschen mit ästhetischen Ansprüchen gefallen könnte.

Alles in allem ein sehr inspirierende Site, auch außerhalb es Download-Bereichs. Denn dort finden sich interessante Artikel und Screencasts zum Themenbereich, sowie eine ganzer Haufen an so genannten Snippets; das sind kleine, hilfreiche Code-Schnipsel für Entwickler. Außerdem gibt es noch ein Coder-Forum, in das ich aber noch nicht reingeschaut habe.

Da ist mir gerade eine tolle Nachricht via uxzentrisch.de bzw. RSS-Reader rein geflattert: Für Google ist die Performance einer Website jetzt auch ein Ranking-Kriterium. Nachzulesen im Offiziellen Google-Blog.

Ich freue mich darüber, weil das im Umkehrschluss bedeutet, dass gut gecodete Websites, und hiermit dann vor allem auch sauber implementierte Systeme, eine Grundvoraussetzung fürs gut bei Google gefunden werden sind. Und ich habe in den vergangenen Jahren immer wieder erlebt, dass Website-Betreiber immer gerne bereit sind, in die Suchmaschinenoptimierung (SEO) Geld und Zeit zu investieren. Wenn sich das also herum spricht, kann das nur zu einem Qualitätsschub fürs Web bedeuten.

Auch bei der CMS-Auswahl für die eigenen Web-Projekt mit SEO-Anspruch, sollten man nun unbedingt auch auf die Code-Qualität des Systems achten. Denn gut implementierte Systeme, sind auch schneller und damit performanter.

Das iPad ist da. Und wie man so hört, ist dieser Tablet-Computer, neben dem Surfen im Web, vor allem zum Konsumieren von eBooks, Musik und Videos ausgelegt. Wobei sich für letzteres in den vergangenen Jahren im Web immer mehr Flash als Standard herauskristallisiert hat. Nun unterstützt das iPad aber kein Flash. Bei Apple scheint man diesbezüglich sehr auf HTML5 zu setzen. Und wenn das iPad sich so etabliert wie zuvor das iPhone, dann sollte HTML5 eine rosige Zukunft bevorstehen.

HTML5 Video ist aber nicht nur für das iPad interessant. Auch für Smartphones wie das iPhone oder mein Nokia 5800 könnte sich da eine Technologie-Lücke schließen.

Die Videoportale Youtube und Vimeo wie auch die Video-Plattform Brightcove haben HTML5 Video schon ins Portfolio genommen. Zudem gibt es inzwischen auch schon Videoplayer-Umsetzungen auf HTML5-Basis, die den Standard-Player erweitern und auch etwas schicker machen.

Wer sich nun mal ein bisschen mit der Umsetzung von HTML5 Video beschäftigen möchte, findet z.B. in der HTML5-Tags-Referenz von w3schools natürlich auch einen Abschnitt vom video-Tag und seinen Attributen. Weiter finde ich auch die Website html5video.org recht gelungen. Dort gibt es neben regelmäßigen aktuellen News zum Thema, auch die HTML5-Video-Library Kaltura … inkl. Demos.

Persönlich habe ich den Eindruck, dass sich HTML5 ziemlich schnell durchsetzen wird. Es gibt noch ein paar Unstimmigkeiten bzgl. der in den Browsern zugrunde gelegten Video-Codecs … von Google und Apple wird H.264 favorisiert, Mozilla und Opera setzen auf das freie Ogg Theora. Aber ich denke, dass sich H.264 als Standard durchsetzen wird, da z.B. auch Flash auf diesen Codec setzt und der Entwickler zugesagt haben, dass H.264 bis Ende 2015 frei nutzbar bleiben wird … im Web eine kleine Ewigkeit.

Die Tage wurde ich auf den Beitrag “10 Javascript Performance Boosting Tips from Nicholas Zakas” auf dem Blog von Jon Raasch gestoßen. Zunächst habe ich den Beitrag nur überflogen. Doch schon dabei bin ich auf einige Dinge gestoßen, die absolut einleuchtend waren und für die ich mir vornehme, sie in Zukunft zu beachten.

Beim anschließenden Stöbern fand ich zahlreiche weitere interessante Beiträge rum um die Themen JavaScript und Frontend-Entwicklung im Allgemeinen. Jon Raasch scheint genau zu wissen, über was er da schreibt. Er schafft es, die Inhalte verständlich aufzuschreiben und seinen Beiträgen genau die richtige Länge zu geben. Man erhält die erwarteten Informationen so portioniert, dass einen der Informationsgehalt nicht erschlägt. Möchte man mehr wissen kann man den Links folgen, die eigentlich immer zur Verfügung stehen.

Befasst man sich mit dem Entwickeln von Frontends für das Web lohnt es sich (denke ich) in jedem Fall, regelmäßig bei Jon Raasch vorbei zu schauen.

Als ich 1996 anfing meine ersten HTML-Seiten zu basteln, wurde mir von einem Freund selfHTML empfohlen. Seitdem begleitet mich mich diese Webprojekt kontinuierlich. In den ersten 10 Jahren deutlich mehr als heute, da ich heute kaum noch selbst entwickle. Aber wenn ich mal was über Web-Technologien wie HTML/CSS/etc. in der Praxis nachschauen will, dann ist selfHTML immer noch meine erste Adresse.

Darum freut es mich, dass es wieder ein selfHTML-Wiki gibt. 2006 hatten die Leute um den selfHTML-Gründer Stefan Münz schon mal ein Wiki-Test-Projekt gestartet, aber schnell wieder gestoppt. Und wie bei einem Wiki-Projekt üblich, können/dürfen/sollen nun an dem Wachsen und Gedeihen des selfHTML-Wikis mitarbeiten. Ich persönlich hoffe, dass die Web-Entwickler von dieser Möglichkeit regen Gebrauch machen werden.