Monatsarchive: Juni 2012

SpritePad – Sprites super schnell online erstellen

Durch einen vorigen Artikel bin ich auf die Seiten von WeAreKISS gestoßen. Diese bieten ebenfalls eine Web-Anwendung namens SpritePad an. Sprites sind einzelne Bilder welche eine Sammlung aller Bilder einer Website darstellen. Die Einzelnen Bilder sind dann trotzdem durch „zerschneiden“ per CSS nutzbar. So müssen weniger Bilder vom Server geladen werden und die Seite lädt außerdem deutlich schneller. Ich finde es klasse und setze es auf jeden Fall in meinem nächsten Projekt ein.

Außerdem braucht man nichts zu installieren und kann direkt online starten.

Wer nutzt noch reines CSS?

Irgendwie komme ich mir gerade etwas blöd vor. Natürlich habe ich schon von SASS gehört (in Kombination mit Ruby). LESS habe ich zuvor nur mal gehört und habe es nie wirklich in Betracht gezogen. Aber irgendwie mache ich mir so langsam meine Gedanken ob es wirklich Sinn macht in Zukunft weiter reines CSS zu schreiben oder ob man damit ein wenig „retro“ unterwegs ist. Wenn man etwas sucht findet man etliche CSS-Framworks:

Sicher gibt es noch einige mehr – aber da stellt sich mir doch die Frage ob es noch Sinn macht CSS selbst zu schreiben. Gerade bei größeren Projekten stößt man doch gerne mal an die Grenzen der Übersichtlichkeit. Das Einfügen von Kommentaren und das Unterteilen der Styles auf verschiedene Dateien hilft bei der Übersichtlichkeit auch nur bedingt. Außerdem ist es sicher sinnvoll wenn weniger HTTP-Requests generiert werden.

Natürlich erzeugt so ein Framework zusätzliche Last – aber man kann ja einen Zwischenweg gehen. So könnte man beispielsweise mit lessphp das LESS-File nur neu parsen wenn es sich auch geändert hat. Da gibt es sicher auch schon bestehende Lösungen und Tutorials – davon bin ich überzeugt!

Für mein nächstes Projekte nehme ich mir also vor so viele Frameworks wie möglich zu nutzen (Beispielsweise YAML + LESS + jQuery).

LESS – Dynamische Stylesheets

Mit LESS schreibt man, wie der Name schon sagt, weniger Code als auf herkömmlichem Wege. So erlaubt das Framework beispielsweise die Verwendung von Variablen und sogenannten Mixins. Dabei kann eine andere Klasse einfach in einer anderen genutzt werden und übernimmt somit sämtliche Eigenschaften – sehr praktisch!

Noch praktischer finde ich allerdings die „Nested Rules“. Sie erlauben das Schachteln von Klassen ineinander – so wird Vererbung endlich mal sichtbar und deutlich.

Nachteil des ganzen Systems ist die Client-Seitige Ausführung. Das heißt es wird zwingend JavaScript vorausgesetzt. Das kann man aber in der heutigen Zeit eigentlich erwarten – die Statistiken meiner Website sprechen da eine eindeutige Sprache. Nichtmal 1 Prozent der Besucher hat JavaScript deaktiviert. Ob ich es in Zukunft einsetzen werde? Ich werde es auf jeden Fall mal testen.

Für WordPress gibt es auch ein Plugin für LESS. Es wird also alles getan um die Theme-Entwicklung leichter zu machen. Die Frage ist zu welchem Preis? Performance steht da sicher weit oben auf der Liste.

Wer ohne Performanceverlust mit LESS arbeiten will ist sicher mit dem Programm SimpleLESS der Firma WeAreKISS gut bedient. Ich selbst habe es nicht getestet, aber es gibt viele positive Stimmen dazu im Netz. Mir wäre damit der Workflow auch viel zu aufwändig und in zu viele Schritte geteilt – aber das muss jeder für sich entscheiden.

CodePen.io

Neulich habe ich ja bereits von jsfiddle berichtet. Einen ähnlichen Ansatz verfolgt codepen.io. Auch dort können großartige Arbeiten geteilt werden und der Quellcode (HTML, CSS & JavaScript) kann von jedem eingesehen werden. Ich könnte mich stundenlang auf der Seite aufhalten! Einfach genial was manche so mit ein paar Zeilen erreichen – top!

jQuery – LazyLoad – Bilder später laden

Auf meinem Portfolio habe ich das Problem, dass sich langsam sehr viele Bilder ansammeln. Ich finde es irgendwie zu „retro“ mich nun um die Implementierung von Paging zu kümmern – da gibt es heute wirklich bessere und angenehmere Lösungen. Ich denke da beispielsweise an das Nachladen von Bildern erst wenn sie in das Sichtfeld vom Browser gelangen etc.

Eine Komponente die diese Aufgabe erledigen soll ist das jQuery-Plugin LazyLoad. Funktioniert super und erfüllt genau seine Aufgabe. Die Verwendung ist auf der verlinkten Seite beschrieben und wirklich super einfach gemacht.