Share
Als ich vor einiger Zeit über JSBin schrieb, hat es definitiv viele Diskussionen und Diskussionen darüber ausgelöst, welcher Editor für Online-Codeausschnitte der beste ist. Ein paar Alternativen wurden ausgeschieden, insbesondere CodePen.
Mit so vielen Lesern, die sich so leidenschaftlich und engagiert für ihre spezifischen Entscheidungen fühlten, wollte ich einen Bericht schreiben, der einige der Coolness von CodePen hervorhob. Ich werde sagen, dass dies kein Vergleichsartikel ist, vor allem, weil ich diese Art von Artikeln wirklich hasse. Jedes dieser Tools ist einzigartig und bietet seinen eigenen Wert, der in vielen Fällen auf die Präferenzen der Benutzer zurückgeht.
Es gibt durchaus Ähnlichkeiten zwischen den Tools, sowohl in der Benutzeroberfläche als auch in der Funktionalität. Wenn Sie sich beide Tools ansehen, werden Sie feststellen, dass die Benutzeroberfläche mit mehreren Fenstern aus gutem Grund recht häufig ist. es ist sehr intuitiv.
JSBin:
CodePen:
Dank des Ansatzes mit mehreren Fenstern können Sie alle Facetten Ihres Beispielcodes unglaublich einfach visualisieren. So können Sie Markup oder JavaScript schnell aktualisieren und sofort Ergebnisse erzielen. Und dafür sind diese Werkzeuge im Allgemeinen gedacht; Schnelles Prototyping und Testen von Code-Snippets.
Zusätzlich zu den UI-Ähnlichkeiten ermöglichen beide Editoren Benutzern:
Aus meiner Sicht sind dies alles entscheidende Funktionen für jedes Code-Bin-Tool, mit dem ein Benutzer Front-End-Code nicht nur anhand der von ihm verwendeten Assets prototypisieren kann, sondern auch auf die meisten von Entwicklern verwendeten Medien. Als technischer Redakteur ist die Möglichkeit, ein Live-Snippet einzubetten, unglaublich wichtig, da es Echtzeit-Feedback liefert, um den von mir erstellten Code zu demonstrieren, die Konzepte zu unterstreichen, über die ich schreibe, und gleichzeitig dem Leser echtes Feedback und Code gibt.
In einigen Fällen läuft die Feature-Parität auf die Kosten zurück, ob diese Features verfügbar sind oder nicht. Wenn Sie beispielsweise Kollaborationsfunktionen wünschen, bietet JSBin dies kostenlos an, während es nur für das Pro-Level-Angebot von CodePen verfügbar ist. Und um es klar zu sagen (und ich habe es schon gesagt), finde ich, dass es vollkommen in Ordnung ist, tolle Funktionen in Rechnung zu stellen. Ob das Feature kostenlos oder auf Abonnementsbasis ist, ist meiner Meinung nach irrelevant, solange es den Benutzern einen Wert bringt.
Von allen Code-bin-Tools, die ich verwendet habe, kann ich mit Sicherheit sagen, dass CodePen bei weitem das ästhetisch ansprechendste ist und ehrlich gesagt, es macht Sinn. Das Front-End-Design von CodePen wurde vom extrem talentierten Entwickler Chris Coyier entwickelt, der ein erstaunliches Auge für das Design der Benutzeroberfläche hat. Und das zeigt sich auch im polierten Look und Feel des Werkzeugs.
Es wurde viel darüber nachgedacht, einen einfachen Zugang zu einer Vielzahl wichtiger Funktionen zu bieten und gleichzeitig sicherzustellen, dass der Editor nicht überladen ist und Funktionen nicht aufdringlich sind. Dies ist wichtig, da Viewport-Immobilien in dieser Art von Benutzeroberfläche knapp sind. Beim Versuch, alles ins Gleichgewicht zu bringen, bieten Sie eine anständige Codierungserfahrung über mehrere Sprachen und liefern sofort Ergebnisse. Das ist wirklich schwierig und zwingt zum Nachdenken in Bezug auf das Layout.
Dies wird deutlich bei der Verwendung von gut platzierten Symbolen in den Kopfzeilen jedes Skriptfensters.
Anhand eines häufig verwendeten UI-Symbols für Einstellungen (eines Zahnrads) können Sie sehen, wie das CodePen-Team eine ganze Reihe wichtiger, komplementärer Funktionen konsolidiert hat, die das Prototyping-Erlebnis verbessern. Ich meine damit, dass die Benutzeroberfläche nicht aufdringlich ist: Sie bietet intuitive Abkürzungen für zusätzliche Funktionen. Aber es ist mehr als nur zusätzliche Funktionen einzufügen. Dies sind reale Werkzeuge, die Webentwickler täglich verwenden, und sie sind wichtig, um ein berechtigtes Gefühl dafür zu bekommen, ob ihr Prototyp funktioniert oder nicht.
Funktionen wie die "Einzelheiten"view zeigt, dass CodePen sich nicht nur auf eine solide Bearbeitungsumgebung konzentriert, sondern auch auf ein starkes soziales Umfeld, mit dem die Benutzer die Nützlichkeit der gemeinsam genutzten Code-Snippets besser erkennen können:
Nun, während beide Tools umfangreiche ergänzende Funktionen bieten, zeigt CodePen meiner Meinung nach eine klare Tendenz in Richtung besserer Tools für Designer durch die umfassende Unterstützung von Sass, LESS und Stylus, einschließlich Add-Ons wie Compass, Bourbon und Nib.
CodePen ist zwar in CSS und Markup aufgehellt, bietet jedoch nicht so viel wie JSBin, wenn es um die Unterstützung von JavaScript-Bibliotheken geht. Es ist nicht zu sagen, dass es nicht viele der wichtigsten Akteure umfasst, aber mit der Fülle an neuen Bibliotheken und Frameworks, die heute verwendet werden, gibt es einen klaren Unterschied in Bezug auf die integrierte Unterstützung:
CodePen:
JSBin:
Aus diesen Screenshots (die nur teilweise erfasst werden) ist ersichtlich, dass die Unterstützung für das JavaScript-Framework weitaus umfangreicher ist als CodePen, sowohl in Zahlen als auch in unterstützten Versionen. CodePen bietet zwar die Möglichkeit, eine externe JavaScript-Ressource in Ihr Code-Snippet einzubeziehen, jedoch ist es praktisch, auf ein Dropdown-Menü zu klicken und aus einem Array von JS-Frameworks auszuwählen.
Es gibt jedoch eine Funktion, die für mich absolut herausragend ist.
Stimmt. CodePen beinhaltet die Integration in eines meiner beliebtesten Browser-Testtools, BrowserStack.com. Ich habe bereits früher über den Service geschrieben und liebe ihn wegen seiner Einfachheit beim Testen und der umfassenden Browserabdeckung. Es ist daher ein großer Vorteil, dass CodePen die Integration mit diesem Dienst anbietet. Aber es ist mehr als dieser eine Knopf, der es fantastisch macht. Über das Dropdown-Menü können Sie entscheiden, welchen Browser Sie als Ziel auswählen möchten:
…, Die Sie dann mit denselben Informationen zu BrowserStack leitet:
Im Hinblick auf die Bequemlichkeit ist dies ein definitiver Gewinn für Entwickler. Beachten Sie, dass Sie von CodePen weggeleitet werden, wenn Sie auf die Schaltfläche BrowserStack klicken. Sie benötigen ein BrowserStack-Konto, um diese Funktion verwenden zu können.
CodePen ist in einer kostenlosen Edition erhältlich und bietet mehr Funktionen Profi Ausführung. Dazu gehören Funktionen für die Live-Vorschau von Code auf mehreren Geräten, die Zusammenarbeit mit anderen Entwicklern, die Themengestaltung eingebetteter Codestifte und der intuitive "Professor-Modus", der für Online-Schulungen und -Kurse sehr nützlich ist.
Von den verfügbaren Pro-Funktionen sind die beiden die nützlichsten Liveübertragung und Asset Hosting Mit letzterem können Entwickler Assets wie Bilder und Skriptdateien hochladen, die direkt im Codestift verwendet werden können.
Sie fragen sich vielleicht, warum das nützlich ist? Nun, die Alternative besteht darin, eine externe Hosting-Option wie ein CDN oder einen eigenen Server zu finden. Durch das direkte Hochladen Ihrer eigenen benutzerdefinierten JavaScript-Datei, Bilder oder Stylesheets können Sie dieses Problem lösen und diese Assets für die Verwendung in Ihren Codestiften bereitstellen. Nach dem Hochladen können Sie einfach auf das Asset klicken, die URL herausnehmen und in Ihren Code einfügen:
Allein dies verdient die $ 9 pro Monat für die Nutzung des Dienstes und scheint für CodePen einzigartig zu sein.
Der Grund gefällt mir sehr gut Liveübertragung Das Merkmal ist, dass das Testen mit verschiedenen Formfaktoren heutzutage unglaublich wichtig ist. Dazu senden Sie den Stiftlink an das Gerät, mit dem Sie testen möchten. Sie können dies tun, indem Sie es direkt in die URL-Leiste des mobilen Browsers eingeben oder den Freigabedialog von CodePen verwenden, um eine Textnachricht an ein mobiles Gerät zu senden:
Wenn der Stift auf Ihrem Computer aktualisiert wird, werden die Änderungen auf einer beliebigen Anzahl von Geräten sofort angezeigt.
CodePen ist ein großartiges Werkzeug. Es ist sehr poliert und reich an Funktionen mit fantastischer Unterstützung für Markup und CSS-Tools. Die Tatsache, dass einige Funktionen nur auf Abonnements basieren, macht mir nichts aus, da es mir nichts ausmacht, gute Software zu unterstützen. Ich werde sagen, dass einige Funktionen so aussehen, als wären sie ein Standardbestandteil des Dienstes, insbesondere die Erstellung von privaten Stiften und die Live-Vorschau, insbesondere wenn andere Dienste dies bereits kostenlos anbieten.
Meiner Meinung nach, nachdem ich sowohl JSBin als auch CodePen verwendet habe, ist es offensichtlich, dass sie sehr ähnliche Fähigkeiten haben und die Wahl des zu verwendenden Dienstes letztendlich auf persönliche Vorlieben zurückzuführen ist. Einige mögen die professionelle Benutzeroberfläche von CodePen mögen, während andere die umfangreiche JavaScript-Framework-Unterstützung in JSBin zu schätzen wissen. Es kann nur darauf ankommen, beide zu verwenden, um verschiedene Aufgaben zu erledigen, aber ich kann sagen, dass CodePen sicherlich ein lohnender Service ist, um diese zu nutzen, und ich werde es zu meinen Werkzeugen des Handels hinzufügen.
Accentsconagua