Juni 22, 2012

Frontend Entwickler Tools

Wir Frontend Entwickler haben es ja nicht immer leicht, unzählige Zeilen CSS und HTML Code will geschrieben werden auf dass ihr Benutzer das beste Erlebnis auf einer Webseite habt. Ihr dagegen seid alles andere als entgegenkommend. Ständig benutzt ihr die unnötigsten Browser die es nur gibt und erwartet auch noch, dass die Seite sauber funktionieren. Wir Frontend Entwickler haben es echt nicht leicht. :)

Doch zum Glück gibt es Tools für uns, die unsere Arbeit ein wenig erträglicher machen. Ganz vorne mit dabei ist natürlich der W3C Validator. Mit diesem kann man sein HTML auf Validität überprüfen lassen und bekommt alle Fehler mit Zeilenangabe und einem Hinweis Text zur Verbesserung.

Ein von mir bei so ziehmlich jedem Projekt eingesetztes Tool ist der Ultimate CSS Gradient Generator. Mit diesem Tool lässt sich der CSS Code für Farbverläufe für jeden aktuellen Brwoser erstellen. Man gibt einfach zwei oder mehr Farben ein und das Tool stellt den entsprechenden Code zusammen. Mit einem klick kopiert man dann den Code in die Zwischenablage und dann in die CSS Datei. Einfacher lassen sich Farbverläufe wirklich nicht erstellen.

Auch sehr beliebt ist der border-radius Generator. Ein extrem schlichtes Tool, dass einfach den CSS Code für abgerundete Ecken generiert. Sehr praktisch für gut aussehende Buttons.

Eines der üblichen Probleme, die wir Entwickler haben, ist der fehlende Content. Man arbeitet an einer Seite und hat erst mal überhaupt keine Inhalte. Um trotzdem zu testen, wie die Seite später aussehen könnte, benutze ich einen Blindtext Generator. Damit ist man zunächst nicht auf Inhalte vom Kunden angewiesen, bekommt aber eine ungefähre Vorstellung von dem Endprodukt.

Ich entwickele neue Seiten meistens im SR Ware Iron, einem Google befreitem Chrome, weil die Entwickler Tools hier im Moment am besten und der Brwoser am schnellsten funktioniert. Um die Seite dann auch für den Internet Explorer anzupassen verwende ich den Internet Explorer Version 9 und seine weniger praktischen Entwickler Tools. Über die Taste F12 öffnet man diese im Internet Explorer und kann so zum Beispiel auch auf ältere Versionen umschalten. Die praktische Erfahrung hat mir aber gezeigt, das dies aber auch nicht immer zuverlässig funktioniert. Die sicherste Variante um zu prüfen, wie die Seite mit einer älteren IE Version aussieht, ist immer noch die entsprechende Version zu installieren, bzw. einen Rechner parat halten auf dem die gewünschte Version installiert ist.

Das waren jetzt erst mal mit meinen Lieblings-Tools. Die sollten eigentlich den meisten Entwicklern bekannt sein, aber für Neulinge sind das wirklich brauchbare Dienste.

Blindtext Generator Border Radius Generator Gradient Generator W3C Validator IE 9 Entwicklertools

kkthxbb