Wenn Sie Chris Coyier auf Twitter folgen, haben Sie in den letzten Monaten zweifellos einige Erwähnungen eines nicht so geheimen Projekts namens CodePen gesehen. Chris hat uns versprochen, dass dieses neue Tool zu den Reihen von jsFiddle und Tinkerbin gehören würde und als eine Art Online-Spielplatz dient, um mit CSS-, HTML- und JavaScript-Demos zu experimentieren.
Wie ein Kind im Dezember, das ängstlich auf den Weihnachtstag wartet, wollte ich unbedingt wissen, was Chris und sein Team dazu bringen würden. Zum Glück ist Weihnachten da. CodePen ist ein Live-Projekt und ich kann es kaum erwarten, Ihnen alles darüber zu erzählen.
Gute Firma
Kürzlich habe ich einen Artikel geschrieben, der die fünf besten Online-Spielplätze für HTML, CSS und JavaScript vergleicht. In diesem Artikel ging ich auf die Funktionsweise der folgenden Lösungen ein und skizzierte, was ich an jeder von ihnen mache und nicht mag:
- CSSDesk
- JS Bin
- jsFiddle
- Dabblet
- Tinkerbin
Diese Tools sind eine leichte Sucht für mich und ich kann einfach nicht genug davon bekommen. Wie Sie sehen, ist der Markt voll von wirklich großartigen Optionen, die alle ihre eigenen Stärken und Schwächen haben.
Angesichts der Tatsache, dass die vorhandenen Tools bereits so großartig waren, war ich sehr gespannt auf die eindeutige Richtung, in die CodePen gehen würde, und ob es meine Standardapplikation für schnelle Web-Experimente werden würde. Mal sehen, ob es dieser Hoffnung gerecht wird.
Treffen Sie CodePen
Wie Sie in der Abbildung oben sehen können, ist CodePen eine gut aussehende Website. Bei der Aufnahme der dunklen Benutzeroberfläche fühlt sich die CodePen-Farbpalette sehr ähnlich wie die von Photoshop CS6, wobei einige apfelähnliche Leinentexturen für ein gutes Maß eingefügt wurden.
Außerdem ein großer Hat-Tipp an die talentierten Designer und Entwickler hinter dieser Site, die den zusätzlichen Schritt der Reaktionsfähigkeit machen.
Eine mehr soziale Erfahrung
Was an CodePen sofort offensichtlich ist, ist, dass diese Website den Fokus ein wenig verlagert, wenn sie mit den anderen in ihrer Klasse verglichen wird. Bei jeder anderen Site, die ich so gesehen habe, wird die Redaktion auf der Startseite angezeigt. Der Schwerpunkt liegt darauf, dass Sie die Codierung erhalten, sobald die Seite geladen wird. Es gibt Freigabefunktionen, die Freigabe erfolgt jedoch direkt durch das Einfügen von Links.
CodePen greift jedoch den Dribbble-Ansatz auf. Die Homepage enthält aktuelle Beispiele für Benutzer, die Sie durchsuchen und anpassen können. Momentan stehen drei Feeds zur Auswahl: Editor's Picks, Popular und Recent.
Wie Sie sehen können, genau wie Dribbble, jeder? Pen? wird mit zwei Statistiken angezeigt: mal angesehen und mal geliebt. Genauso wie Sie es erwarten würden, können Sie Benutzern folgen, die Inhalte posten, die Ihnen gefallen.
Für mich ist dieses Modell unendlich viel häufiger anzunehmen und abzuheben. Anstatt sich auf die einzelnen Entwickler zu konzentrieren, konzentriert sich diese App auf einen starken Community-Fokus, der sicherstellt, dass die Benutzer daran interessiert sind, wöchentlich oder sogar täglich wiederzukommen, um zu sehen, wie großartig die Bekanntheit anderer Nutzer ist.
Außerdem kann niemand der Verlockung widerstehen, seine eigenen Zahlen steigen zu sehen, wenn sie etwas veröffentlichen, so dass talentierte Autoren einen klaren Grund haben werden, weiterhin neue Beiträge zu schreiben.
CodePen verwenden
Als ich den CodePen-Editor zum ersten Mal sah, war ich sofort begeistert. Es ist sauber, attraktiv und nutzt den verfügbaren Platz einfach hervorragend aus.
Layout
Die anderen Websites für den Code-Spielplatz haben versucht, das perfekte System für die Anzeige Ihres Codes und Ihrer Vorschau zusammen zu knacken, aber um ehrlich zu sein, bin ich aus irgendeinem Grund frustriert. CodePen scheint jedoch den Ball aus dem Park geschlagen zu haben.
Wie Sie sehen, gibt es ein dreispaltiges Layout für HTML, CSS und JavaScript, das sich auf einer Live-Vorschau in voller Breite befindet, die ohne manuelle Aktualisierungen aktualisiert wird.
Tolle Funktionen
Jedes Codemodul kann so erweitert werden, dass es die gesamte Breite der drei Spalten einnimmt, wodurch die anderen Module mit einer kurzen Tastenkombination ausgeblendet werden. Leider stimmen diese Tastenkombinationen nicht mit den in Safari eingebauten Tastenkombinationen überein. Sie können aber auch auf die ?? 1? Text, um die Spalte zu erweitern, damit es keine große Sache ist.
Die Jungs hinter CodePen haben alles dafür getan, um sicherzustellen, dass Ihnen die neuesten Codier-Highlights zur Verfügung stehen. Das HTML-Modul ermöglicht beispielsweise die Verwendung von HAML, Markdown und Slim. Meine Lieblingsfunktion hier ist eigentlich völlig verborgen: CodePen unterstützt ZenCoding! Das war meine einzige Feature-Anfrage für dieses neue Werkzeug und ich bin begeistert, dass es den Schnitt gemacht hat.
Wenn Sie zum CSS-Modul wechseln, haben Sie hier Zugriff auf LESS, Sass und SCSS sowie verschiedene Reset-Optionen und Prefix Free, mit denen Sie CSS3 ohne den Einsatz von Browser-Präfixen verwenden können. Eine weitere tolle Funktion: Die Live-Vorschau wird auch dann automatisch aktualisiert, wenn Sie Preprocessors verwenden (Tinkerbin nicht).
Schließlich können Sie mit dem JavaScript-Modul CoffeeScript verwenden und in einigen gängigen Bibliotheken wie jQuery und MooTools werfen.
Wenn Sie in die Kontoeinstellungen springen, können Sie tatsächlich alle Ihre Standardeinstellungen anpassen, sodass Sie Ihren Workflow nicht jedes Mal neu einrichten müssen. Machen Sie SCSS zu Ihrer Standard-CSS-Sprache, wechseln Sie zu einem hellen Farbschema oder wählen Sie immer Modernizr.
Weitergehen
Wenn Sie Ihre eigene kleine Demo programmieren, bietet CodePen vier Optionen am oberen Rand des Bildschirms: Aktualisieren, Gabel, Details und Teilen (der Stift eines anderen enthält die Schaltflächen Fork, Share und Love). Das CodePen-Kontosystem basiert auf der GitHub-API, sodass Git-Fans sich wie zu Hause fühlen werden.
In der oberen rechten Ecke der Benutzeroberfläche befindet sich ein Schalter, der Sie von der Editoransicht zur Detailansicht führt. Letzteres ist unten gezeigt:
Hier können Sie eine vollständige Beschreibung des Stiftes erhalten, interessante Statistiken anzeigen und "schön" verlassen. Bemerkungen.
Was ist das Urteil?
Ich hatte große Hoffnungen in CodePen, Erwartungen, die für jedes freie Produkt schwierig zu erfüllen wären.Zum Glück ist es alles, was ich wollte und mehr. Wie ich schon sagte, ich habe alle früheren Versuche mit einer App wie dieser geliebt, aber sie schienen alle ein wenig abgeneigt und waren auf ihre eigene Art frustrierend.
Im Gegensatz dazu ist CodePen einfach zu verwenden. Es ist nicht nur das am besten aussehende Werkzeug seiner Art, sondern auch das höchst funktionale. Alle kleinen Funktionen und Optionen, die ich verwenden möchte, sind vorhanden und einfach zu implementieren. Durch den sozialen Aspekt wird die gesamte Erfahrung viel mehr als das, was ich mir vorstellen kann. Genau aus diesem Grund wird diese Website enorm.
Was denkst du?
Nun, da Sie meinen Spruch gesehen haben, springen Sie zur CodePen-Site, machen Sie einen Dreh und kommen Sie zurück, um mich wissen zu lassen, was Sie davon halten.
Ist es das beste Hilfsmittel seiner Art? Wie ist es besser als die anderen fünf oben genannten? Wie ist es schlimmer Ich würde gerne deine Gedanken hören!