Frontend Coding Tips von Jon Raasch
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.
von Katrin Schneider
Online-Tool: CSS3 Generator
Scheinbar habe ich einen kleines Faible für diese schlichten Online-Tools, die einem bei genau einer Sache helfen. Diesmal hat es mir der CSS3 Generator angetan.
Mit diesem CSS3 Generator können Basis-Layout-Elemente, wie die Schrift und Boxen quasi live gestaltet werden. D.h. nachdem man den Gestaltungsstil ausgewählt hat, kann man seine Parameter eintragen und bekommt dann zum einen einen Live-Preview und zum anderen den CSS-Code. Letzteren sogar mit den entsprechenden Browser-Hacks. Natürlich nur für die Browser, die die entsprechenden Elemente unterstützen. Das wird einem aber auch angezeigt.
von Matthias Zellmer
selfHTML jetzt auch als Wiki
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.
von Matthias Zellmer
JavaScript-Framework YUI 3.0 kann auch CSS
Mir ist die Yahoo User Interface Library, kurz YUI Library, vor allem als freies JavaScript-Framework zur Erstellung von interaktiven Web-Anwendungen ein Begriff. Doch kann es vor allem in der neusten Version 3.0 deutlich mehr, es enthält auch ein so genanntes CSS-Grid-Framework.
In einem interessanter Artikel im Dr. Web Magazin unterzieht Dieter Petereit das aktuelle YUI 3.0 CSS-Framework einem Praxistest. Prädikat: Sehr lesenswert …
von Matthias Zellmer
Ladezeiten für Websites optimieren
Ganz interessante Tipps zum Thema Performance Optimierung – Barrierefreiheit beginnt mit Ladezeiten haben David Maciejewski und Dirk Jesse zusammengetragen und in der obigen Präsentation veröffentlicht.
Sie geben anhand von Beispielen konkrete Optimierungsvorschläge für die Bereiche HTML, CSS, JavaScript, sowie bei Grafiken und im Backend.
Sehr zentral scheint für die Beiden der Punkt zu sein, dass man die CSS-Dateien per
Tag in den HTML-Code einbindet und dass die CSS-Dateien maximal 10kb groß sein sollen. Im Bedarfsfall soll man den CSS-Code lieber auf mehrere Dateien mit weniger als 10kb aufteilen.
Doch auch in den anderen Bereichen geben sie gute Ratschläge für die Praxis. Also: Einfach mal mit einem wachen Auge durchklicken …
von Matthias Zellmer
Was kann CSS3?
Ich weiß noch, welch intensives Aha-Erlebnis es war, als mir einst klar wurde, dass so genanntes Tabellen-Layout nicht (mehr) nötig ist, um einer Website eine annehmbare Struktur und Optik zu verpassen. Damals hatte mich gerade erstmals so richtig mit der Formatierungssprache CSS beschäftigt.
Inzwischen sind wir und vor allem moderne Browser weitestgehend bei CSS2.1 angekommen und CSS3 ist in der Entwicklung. Was einmal mit CSS3 möglich sein wird, kann man sich auf noupe.com ansehen: CSS3 Exciting Functions and Features: 30+ Useful Tutorials.
Was heute schon möglich ist, kann man sich recht übersichtlich in der Browserkompatibilitätstabelle von css4you.de ansehen. Am Ende der Seite kann man weitere Browserversionen zur Vergleichstabelle hinzufügen bzw. ausblenden.
von Matthias Zellmer
Wie man heute ein Webprojekt aufzieht
Gerade habe ich voller Begeisterung auf tweal.net die Beschreibung “Infos zum Projekt: tweal – ein Microdeal Twitter Mashup” gelesen. Da hat sich Sven Wiesner, der Mann hinter tweal.net, hingesetzt und einfach mal beschrieben, wie er das Projekt an den Start bekommen hat. Und zwar ohne großartige Programmierkenntnisse und im Kern nur auf Basis von WordPress und Twitter und deren Erweiterungen und Plugins, die sowieso irgendwo im Web rumliegen.
Schaut es euch an und saugt den Spirit des dort Beschriebenen in euch auf. Denn dann wisst ihr wieder ein Stück mehr von dem, was man euch unter den Schlagworten Web2.0 oder Social Web tagtäglich um die Ohren haut. Respekt Sven!
von Matthias Zellmer
Gravatare nun auch im Netzlogbuch
Gravatar steht für Globally Recognized Avatar und ist ein Web-Dienst, der die eigene E-Mail-Adresse mit einem Bild verknüpft. Registriert man also seine E-Mail-Adresse bei Gravatar, so kann man dort dazu ein Bild hochladen. Schreibt man nun in einem Blog einen Kommentar oder hinterlässt auf irgendeiner Website, die Gravatar unterstützt, diese E-Mail-Adresse, so wird das bei Gravatar hinterlegte Bild dort dargestellt.
WordPress unterstützt Gravatar von Haus aus, so dass man es im Prinzip nur noch in seinem Theme integrieren muss. Das war beim Netzlogbuch nur zum Teil geschehen, nämlich bei der Kommentar-Eingabe. Und nachdem sich sogar unserer treuer Leser Jan über diese Inkonsistenz beschwert hat, habe ich mich gestern Abend hingesetzt und Gravatar auch bei der Kommentar-Ausgabe integriert.
Ich hab das aber nicht nur für Jan getan. Ich finde auch, dass es unserem Blog eine noch mal etwas persönlichere Note gibt. Und außerdem ist Gravatar ein einfacher, aber echt cooler Dienst. Ich steh auf sowas!
Wer das Ganze nun mal ausprobieren will, ist hiermit herzlich eingeladen, unten einen Kommentar zu verfassen. Taucht da übrigens eine weiße Silhouette auf grauem Grund auf, dann heißt es, schnell zu gravatar.com und die verwendete E-Mail-Adresse mit einem schönen Bildchen registrieren.
von Matthias Zellmer
Entwickler-Bibliothek von Google
Google hat in seinem Entwicklerbereich code.google.com eine Bibliothek für Web-Entwickler eingerichtet. Bei Google Doctype soll eine Enzyklopädie des “offenen Webs” entstehen, also eine Referenz zu “HTML, JavaScript, CSS, und mehr”. Als Grund, der Masse der Nachschlagewerke für Web-Entwickler ein weiteres hinzuzufügen, gibt Google an, dass die bestehenden Quellen den eigenen Bedürfnissen nicht genau entsprachen. So seien viele der anderen Referenzen “in Stein gemeißelt”, also einmal geschrieben und dann nie aktualisiert worden.
Kernstück der Entwickler-Bibliothek ist somit auch ein Wiki, welchem durch die Mitarbeit von Web-Entwicklern Leben eingehaucht werden soll. Die Inhalte der Bibliothek stehen dann unter einer Creative-Commons-Lizenz.
Bin mal gespannt, ob sich dieses Wiki etabliert. Google ist ja zumindest dafür bekannt, dass die sich für guten und sauberen Code im Web stark machen.
von Matthias Zellmer
Auflösungsabhängige Seitendarstellung
In Zeiten, da immer mehr von Unterwegs auf das Web zugegriffen wird, wird die Frage nach einer guten Darstellung von Webseiten auch auf kleineren Displays immer wichtiger. Schrift und Bilder gut skalierbar zu gestalten ist hier ein wichtiges und richtiges Mittel. Doch auch der Lösungsansatz, den The Man in Blue mit ihrer Beispielseite für eine auflösungsabhängige Seitendarstellung anbieten, finde ich bemerkenswert.
Bei Auflösungen über 800 Pixel Breite werden die Inhalte spaltenförmig und bei kleineren Auflösungen in Form von Zeilen dargestellt. Ein mehr als interessanter Weg sich dem Problem unterschiedlich Auflösungen zu stellen.
So … und nun einfach mal auf die Beispielseite zum Thema gehen, das Browser-Fenster klein und groß ziehen und den kleinen großen Effekt beobachten.
von Matthias Zellmer
