CSS Stress Test

Wer kennt das nicht… man macht eine recht komplexe Seite mit vielen Elementen und dem einen oder anderen float und clear oder absolut oder relativ positionierten Elementen. Die Seite schaut super aus und alles funktioniert… DOCH dann bemerkst du das die Seite beim Scrollen in gewissen Browsern ruckelt (vermutlich irgend ein IE). weiterlesen →

Instant Blueprint – Eigenes Frontend Framework per Mausklick

Bei meinem heutigen “Was-ist-heute-auf-Twitter-cool” Check habe ich diese nützliche Webseite mit dem entdeckt.

Instant Blueprint bietet einem die Möglichkeit mit wenigen Klicks sein eigenes Frontend Framework für neue Projekte zu erstellen.

Doch was meine ich mit Frontend Framework?
Mit Frontend Framework meine ich all die benötigten CSS Dateien (Reset, Print & Style), eine Ordnerstruktur (images, css & js) und ein XHTML oder HTML Template.

Das beste Feature bei der ganzen Sache ist meiner Meinung nach aber die Möglichkeit IDs der benötigten HTML Elemente einzugeben um diese dann als Markup im XHTML oder HTML Template vorzufinden.
Schade ist eigentlich nur das man diese Elemente nicht im Vorhinein schon verschachteln kann.. also das zB. alle IDs welche auf die ID “sidebar” folgen im “sidebar” Element sind.

Natürlich kann man auch noch andere wichtige & zeitsparende Optionen einstellen.
Hier die komplette Liste:

  • Projektname (für den Namen des Projektordners)
  • HTML Doctype
  • Javascript Library (Prototype, jQuery, MooTools & YUI)
  • Das oben erwähnte Markup anhand der IDs
  • Zentrierten Div erstellen mit dem Markup drin
  • Dateiendung (.html oder .php)

Fazit: Sehr nützlich und zeitsparendes Tool aber noch ausbaubar. Verschachtlung der Elemente wäre klasse und wenn das Javascript noch das letztes Element vom <body> wäre, wäre es noch besser :)

xCSS – Objektorientiertes CSS (Eine kurze Einleitung)

Wer viel CSS schreibt kennt das Problem.. Viele Definitionen wiederholen sich immer und immer wieder und man verliert leicht die Übersicht.

Wäre Praktisch wenn man Variablen zur Verfügung hätte oder sogar Vererbung von anderen Klassen möglich wäre oder?

Alles möglich dank xCSS. weiterlesen →

Javascript & CSS Dateien komprimieren

So eben hab ich mir wieder die Mühe gemacht einige Javascript & CSS Dateien mühsam per Web zu komprimieren was zeitaufwendig und und unkomfortabel ist. Doch damit ist nun endlich schluss :) so eben bin ich über die sehr nützliche und simple App mit den Namen Minifyme gestolpert.

Einfacher kann das komprimieren von Javascript & CSS Dateien nicht mehr werden. App starten, die Datei welche komprimiert werden soll per Drag n Drop in die App ziehen und fertig. Minifyme legt dann automatisch eine komprimierte Datei an.

Wozu überhaupt komprimieren?

Ganz einfach.. um die Datenmenge welche bei einem Seitenaufruf übertragen wird zu verkleinern und somit das ganze ein wenig schneller zu machen.

Was passiert beim minmieren/komprimieren?

Beim mini resp. komprimieren werden alle Kommentare, Tabs, Absätze und Leerzeichen in einer Datei entfernt. Das entfernen der Zeichen führt dazu das die Datei kleiner wird weil diese unsichtbaren Zeichen auch Speicherplatz brauchen.

Dem Browser resp. der Javascript Engine des Browsers ist es egal ob die Datei schön formatiert ist oder nicht weil schlussendlich so oder so alle diese Zeichen entfernt werden. Das formatieren und kommentieren von Javascript und CSS Dateien dient nur dazu das Menschen den Code besser lesen können.