senäh

Es ist schon toll. Dank dem immer weiter verbreitetem Open-Source-Gedanken und dem Servicewahn der modernen Internetwelt profitieren auch wir Web-Nerds von dem, was dabei rumkommt. Konkret meine ich damit diese kleinen, nützlichen Helferlein namens One-Page-Apps.

Was sind One-Page-Apps?

One-Page-Apps sind einfache Services, die bestimmte oft wiederkehrende Aufgaben erleichtern. Das ist zumindest meine Definition davon

Bestes Beispiel: Fülltext. Wie oft benötigt man mal ein bisschen Lorem Ipsum? Ich google dann immer schnell und finde irgendeinen Generator. Wahrscheinlich sollte ich mir aber einfach mal ein Plugin/Makro/Snippet in meinen Komodo reinhauen, hehe.

Aber es gibt auch durchaus wichtigere Anwendungsfälle. Durch diese One-Page-Apps kann man eine Menge Zeit sparen. Ich habe dazu gerade diesen Artikel von Chris Coyier auf CSS-Tricks (kennste, ne?) gefunden. Neben seinen eigenen Ausführungen dazu habe ich auch mal einen Blick in die 114 Kommentare (Stand: jetzt gerade) geworfen und möchte nun hier mal die meiner Meinung nach nützlichsten Tools zusammenfassen.

Ein Klassiker – AJAX-style loading.gif-Generator

Kennen sicherlich viele von euch schon, aber trotzdem wichtig: ein Tool zum Generieren des in Zeiten von AJAX & Co typischen Ladekreises. Man klicke hier, suche sich Stil aus (angenehm große Auswahl), gebe Vor- und Hintergrundfarbe (bzw. -Transparenz) ein und schon ist der Drops gelutscht.

CSS3 Browser-Kompatibilität

CSS3 ist was feines, wie die nachfolgenden Beispiele noch demonstrieren werden. Allerdings gibt es durch die fehlenden Standards viel Mehraufwand auf Seiten eines Webentwicklers. So wird im Allgemeinen nicht die rohe Eigenschaft implementiert (z.B. border-radius), sondern bekommt je nach Browser entsprechende Präfixe (z.B. -moz-border-radius für den Firefox). Das nervt. Aber ist nun mal so.

Um sich nicht alle Präfixe und die damit einhergehenden Abweichungen in der Syntax merken zu müssen, gibt es “CSS3, please!“. Dort gibt es das aktuell notwendige Markup für die Cross-Browser-Kompatibilität diverser CSS3-Eigenschaften, z.B. border-radius, box-shadow, background-image und und und. Prädikat “äußerst nützlich”.

Kleiner Tip dazu: statt die veränderlichen (=unterstrichenen) Werte manuell einzugeben, kann man sie auch einfach auswählen und über Scrollen (nach oben und unten) verändern. Die Live-Vorschau des Elements dazu funktioniert natürlich einwandfrei

Einen kleinen Nachteil hat diese One-Page-App allerdings: was ist, wenn ich mal verschiedene Radien der abgerundeten Ecken haben möchte? There’s an One-Page-App for that! Sie nennt sich…

CSS Border Radius Generator

Ist ziemlich selbsterklärend. Einfach an jeder Ecke einen Wert eingeben, bis man hat, was man möchte.

Button Maker

Jetzt mal noch 2 Sachen, die wesentlich mehr in die WYSIWYG-Richtung gehen. Hier erstmal der Button Maker von Chris Coyier.

Dem aufmerksamen Blogleser wird auffallen, dass es sich hierbei um denselben Typen handelt, den ich oben bereits in der Einleitung verlinkt hab. Jopp, jopp, jopp, der Kerl ist ordentlich dabei Aber hier mal ein Screen vom besagten Button Maker.

Einer der großen Vorteile von CSS3 ist ja, dass mehr den Client ausgelagert wird. Dadurch wird die Datenübermittlung vom Server als Flaschenhals umgangen, um so die allgemeine Performance einer Webseite zu verbessern. Bahnhof? Ok, etwas Nicht-Nerd-freundlich: alle Bilder, die euer Browser über CSS3 von Grund auf selbst rendern kann, brauchen nicht vom Server geladen werden. Das bedeutet für euch einen schnelleren Seitenaufbau und für den Server ein wenig Entlastung. Win-Win-Situation nennt man sowas, oder?

Will man einen stylishen Button ohne allzu viel Tamtam zaubern, ist der Button Maker dafür prädestiniert.

Layer Styles

Wer das Ganze allerdings etwas Photoshoppiger und mit mehr Optionen mag, der schaut mal bei Layer Styles vorbei. Hammer-Service, wie ich finde. Ohne Umgewöhnung die wesentlichen Eigenschaften des Elements zurecht friemeln und am Ende kommt CSS Code bei raus. Mein Favorit unter den hier vorgestellten Tools.

Einziges Manko, was ich sehe: das Einstellungsfester ist nicht skalierbar. So kommt es auf meinem 13″ Display dazu, dass jenes Fenster eigentlich immer einen Teil der Box verdeckt. Nicht weiter wild, hätte man aber einfach durch ein dezentraleres Ausrichten der HTML-Box ändern können

Noch 2: CopyPasteCharacter und CSS Font Stack

Ersteres ist zum einfachen Kopieren und Einfügen von Sonderzeichen (⌥, , †, ½, ♫, …) in Texte, Tweets oder wozu man sie halt einfach gerade benötigt, gedacht. Einfach Sonderzeichen suchen und zum Kopieren draufklicken. Simple und supi. Stammt übrigens aus einer skandinavischen Schmiede namens “Konst & Teknik & Martin”

Letzteres habe ich vorhin erst gefunden und stelle ich mir recht nützlich vor. Ziel: man will seine Webseite in einer bestimmten Schrift darstellen. Problem: Abwärtskompatibilität sowohl zu älteren Versionen des eigenen Betriebssystems als auch zu fremden. Helvetica gibt’s auf Windows nicht, Calibri auf’m Mac ebenso wenig. Diese Seite bietet die naheliegendsten Alternativen an, damit man sich selbst keine Platte machen muss und auf wichtigere Sachen konzentrieren kann.

Fehlt was?

Wie findet ihr die Tools? Kennt ihr noch nützliche Links? Muss hier noch unbedingt etwas herein? Immer her damit!