Auf dunklem Hintergrund bilden vier Fenster die Basis von CodePen. In diesen Fenstern kann der CodePen-Benutzer live HTML-, CSS- und JS-Code direkt eingeben, der natürlich wie gewohnt schick und übersichtlich in Syntax-Highlighting präsentiert wird. Im dunklen Gewandt kommt CodePen optisch auf jeden Fall schonmal einen Ticken "cooler" daher als seine Konkurrenten, wie z.B. CSS-Deck oder auch das bekannte JsFiddle.
CodePen nimmt dem Nutzer eine Menge Arbeit ab
Bei HTML sind folgende Einstellmöglichkeiten vorhanden: HAML, MARKDOWN, SLIM und JADE.
Im CSS Fenster kann zwischen CSS, .sass, .scss,. LESS oder auch Stylus gewechselt werden und im JS-Fenster bietet CodePen z.B. die Bibliotheken jQuery + jQuery UI, MooTools, Prototype, Doyo und viele andere mehr an. Diese und auch eigene externe JS-Dateien können direkt eingebunden werden.
Für Feature-Detection steht natürlich auch modernizr zur Verfügung.
Das vierte Fenster im Bunde ist das Vorschaufenster. Es aktualisiert sich, je nach Einstellung, selbständig und zeigt bereits das Programmierte an.
In der Detailansicht eines CodePens erhält der Nutzer zusätzlich zu Titel und Beschreibung noch Statistiken, wie Aufrufe , Kommentare und z.B. Likes.
Einbindemöglichkeit in die eigene Website mit "Embed This Pen"
Für eine noch größere Verbreitung der Codes sorgt CodePens Features Embed This Pen. Der Nutzer kann sich Einbinde-Codes erstellen mit dem man eine schicke Ansicht seines Pens in die eigene Website integrieren kann.
Gewechselt werden kann zwischen den Entwickler-Fenstern mit Hilfe von Tabs. Ein Beispiel findet Ihr unter diesem Beitrag.
Kostenpflichtige Premiumfeatures
Wem die zahlreichen Funktionen nicht ausreichen, der kann wie heutzutage eigentlich alles gegen eine monatliche Gebühr aufpimpen.
Zusatzsfeatures sind z.B.
- Private Pens
- Mit anderen Entwicklern an einem Pen arbeiten
- mehrere Externe Dateien
- der Professor-Mode...
- Zugriff auf viele Tipps & Tricks in der Lodge und vieles mehr
Fazit
Ich finde CodePen eine tolle Sache, die ich künftig auch hier auf der Website öfter Nutzen werde, um meine Quellcodes hier interaktiv zu veröffentlichen.
Und nun bleibt nur noch: Meldet euch bei CodePen an und folgt meinem CodePen-Profil :)
