CodePen: Erstellen, Testen, Freigeben und Entdecken von HTML, CSS und JavaScript

Codepen: Erstellen, Testen und Erkennen von Front-End-Code

Eine Herausforderung bei einem Content-Management-System besteht darin, Skript-Tools zu testen und zu erstellen. Während dies für die meisten Verlage keine Voraussetzung ist, teile ich als Technologiepublikation gerne von Zeit zu Zeit Arbeitsskripte, um anderen Leuten zu helfen. Ich habe geteilt, wie man es benutzt JavaScript zur Überprüfung der Kennwortstärke, Wie man Überprüfen Sie die Syntax der E-Mail-Adresse mit regulären Ausdrücken (Regex) und zuletzt hinzugefügt Taschenrechner zur Vorhersage der Umsatzauswirkungen von Online-Bewertungen. Ich hoffe, Dutzende von Tools auf der Website hinzufügen zu können, aber WordPress ist für eine Veröffentlichung wie diese nicht gerade förderlich. Es ist ein Inhaltssystem, kein Entwicklungssystem.

Damit meine kleinen Skripte funktionieren, verwende ich sie gerne CodePen. CodePen ist ein übersichtliches Tool mit einem HTML-Bereich, einem CSS-Bereich, einem JavaScript-Bereich, einer Konsole und einer Veröffentlichung des resultierenden Codes. Jedes Bedienfeld enthält Informationen, wenn Sie mit der Maus über Elemente fahren, damit Sie verstehen, was möglich ist, sowie eine Farbcodierung von HTML, CSS und JS, um das Bearbeiten und Schreiben zu vereinfachen.

CodePen ist eine soziale Entwicklungsumgebung. Im Kern können Sie Code in den Browser schreiben und die Ergebnisse beim Erstellen anzeigen. Ein nützlicher und befreiender Online-Code-Editor für Entwickler aller Fähigkeiten, der sich insbesondere für Benutzer eignet, die das Codieren lernen. CodePen konzentriert sich hauptsächlich auf Front-End-Sprachen wie HTML, CSS, JavaScript und Vorverarbeitungssyntaxen, die sich in diese Dinge verwandeln.

Über CodePen

Mit CodePen konnte ich alle notwendigen Arbeiten erledigen Veröffentlichen Sie den Rechner Ich habe in die Site eingebettet. Die meisten Kreationen auf CodePen sind öffentlich und Open Source. Sie sind Lebewesen, mit denen andere Menschen und die Gemeinschaft interagieren können, von einem einfachen Herzen über das Hinterlassen eines Kommentars bis hin zum Gabeln und Ändern für ihre eigenen Bedürfnisse.

CodePen - Rechner zur Vorhersage der Umsatzauswirkungen von Online-Bewertungen

Mit CodePen können Sie Ihre Ansicht ändern, wenn Sie möchten, dass sich die Fenster während der Arbeit links, rechts oder unten befinden, oder den HTML-Code in einer neuen Registerkarte anzeigen. Die Side-by-Side-Ansicht eignet sich hervorragend zum Testen Ihrer Reaktionseinstellungen, da Sie die Größe des sichtbaren Bereichs anpassen können.

Sie können jedes Ihrer Arbeitsskripte in Stiften organisieren, in Projekten (Editor für mehrere Dateien) kombinieren oder sogar Sammlungen erstellen. Es handelt sich im Grunde genommen um eine funktionierende Portfolio-Site für Front-End-Code, auf der Sie anderen Autoren folgen, andere öffentlich freigegebene Projekte in Ihre eigenen umwandeln und sogar lernen können, wie man durch Herausforderungen lustige Dinge macht.

Sie können als GitHub Gist speichern, in eine Zip-Datei exportieren und sogar einbetten der Stift in einem Artikel wie diesem:

Sieh den Stift
Voraussichtliche Auswirkungen von Online-Bewertungen auf den Umsatz
by Douglas Karr (@ Douglaskarr)
on CodePen.


Eine der Einschränkungen des Pen-Editors ist das schiere Codevolumen. Möglicherweise stoßen Sie nie auf dieses Problem, da der Editor mit Hunderten oder sogar Tausenden von Codezeilen in Ordnung sein sollte. Wenn jedoch 5,000 bis 10,000 oder mehr Codezeilen angezeigt werden, schlägt der Editor fehl. Sie können jedoch externe Verweise auf Stylesheets oder JavaScript hinzufügen, die an anderer Stelle gehostet werden!

Ich würde Sie ermutigen, sich anzumelden. Sie werden ihre wöchentliche E-Mail abonniert und können den Feed auch zu Ihrem RSS-Feed hinzufügen, damit Sie neu veröffentlichte Stifte sehen können. Und wenn Sie dort anfangen, die öffentlichen Stifte zu durchsuchen oder zu durchsuchen, werden Sie einige unglaubliche Projekte finden… die Benutzer sind ziemlich talentiert!

Folgen Douglas Karr auf Codepen

Die kostenpflichtige Version CodePen Pro bietet eine Vielzahl zusätzlicher Funktionen für verbesserte Funktionen oder Teams - einschließlich Zusammenarbeit, Prozesse, Hosting von Assets, private Ansichten und sogar bereitgestellte Projekte mit Ihrer eigenen Domain oder Subdomain. Und natürlich bietet CodePen ein großartiges Repository mit Github-Integration, in dem Ihr gesamtes Team arbeiten kann. Wenn Sie nur einfachen Code wie ich testen möchten, ist CodePen ein unschätzbares Werkzeug.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.