Heute gibt es mal einen Schwang aus der Welt des Frontend Developments.
Als HTML, CSS und Javascript Jongleur komme ich oftmals in die Situation, dass ich kleine Skripte oder Elemente austesten, in kleinem Rahmen Prototypen oder Module entwickeln oder einfach anderen Leuten Code zeigen möchte. Damit man sich dafür nicht mit lästigen Nebensächlichkeiten wie der Dateiverdrahtung, einem korrekten HTML Dokument oder Preprozessoren umherschlagen muss, gibt es inzwischen mehrere Webapps, die einem den Großteil an Arbeit dafür abnehmen.
Die Mutter aller Online Prototyping Tools ist jsfiddle.net. Hier gibt es die Möglichkeit direkt im <body>-Tag mit HTML loszulegen, einfach Bibliotheken hinzuzufügen oder Javascript zu coden mit einer integrierten Ergebnisvorschau. So sieht das ganze aus:
Nun nutze ich jsfiddle schon einige Zeit, in der mir aber immer wieder störende Kleinigkeiten aufgefallen sind. So ist die Aufteilung in vier Boxen etwas umständlich zu handhaben, das Speichern ist langwierig, man kann nur umständlich Meta-Tags in den <head> Bereich einfügen, die Performance ist recht schlecht, usw. Also habe ich mir mal unter anderem mit Hilfe dieses Artikels einen Überblick über den aktuellen Status Quo verschafft und mich nach einer noch besser funktionierenden Alternative umgesehen.
Und siehe da: Mein neues jsfiddle heißt ab sofort CodePen!
Es sei noch kurz erwähnt, dass es noch einige weitere Online Editoren gibt, die gegebenenfalls für andere Nutzer besser passen. Wen die Materie interessiert, dem empfehle ich diese bereits oben verlinkte Übersicht.
Die für mich persönlich wichtigsten Vor- und Nachteile
Vorteile von CodePen
- Live Preview während des Tippens
- Die JS-Bibliothek Prefix-free kann hinzugeladen werden und erlöst einen von der Vendor-Prefix-Hölle
- Die HTML, CSS, JS Boxen sind einfach zu handhaben
- Die Vollbildvorschau ist einfacher aufzurufen
- Elemente wie Meta-Tags können einfach in den <head> eingefügt werden. Bei jsfiddle gibt es nur die Möglichkeit eines Hacks im CSS-Fenster
- Modernizr wird von Haus aus unterstützt
- Der Editor ist in Font und Farben anpassbar! So habe ich online fast die gleiche Ansicht wie bei meinem lokalen Editor Sublime Text 2.
- Das Speichern geht viel einfacher von Hand, da es keine Revisionen gibt. Ein Klick auf
savegenügt, während bei jsfiddle einupdateundset as basenötig war, um das Projekt unter derselben URL zu aktualisieren. - CodePen ist viel schneller als jsfiddle!
- Eine Kleinigkeit, aber trotzdem wichtig: Es werden 2 Zeichen statt 4 Zeichen für einen Tab gesetzt.
- Das Konto kann einfach über ein Github Login erstellt werden.
- einiges an Social Schickimicki, wie z. B. die Möglichkeit zu folgen, Likes in Form von mehrstufigen Herzen zu verteilen, usw.
- Premium Features, wie kollaboratives Arbeiten sind möglich. Für mich noch nicht relevant.
Nachteile von CodePen
- Es kann nur die aktuellste Version einer Javascript Bibliothek ausgewählt werden. Sollen ältere Versionen geladen werden, müssen diese per URL angegeben werden. Für mich nicht weiter schlimm.
- Es gibt keinen Button, der die Ausgabe im Fullscreen anzeigt. Benutzt man einen Web-Inspektor wird der Platz schnell knapp.
- Der Fullscreen Modus besteht im Gegensatz zu jsfiddle aus einem iFrame Container, der sich nicht umgehen lässt.
Insgesamt bin ich bisher sehr zufrieden, die Arbeit mit CodePen macht auf jeden Fall Spaß. Wer neu in der Materie ist und sich einen Überblick verschaffen möchte, dem sei dieser Screencast ans Herz gelegt:
Bei CodePen findet ihr mich hier.
Schreibe einen Kommentar