Marketing WerkzeugeSocial Media & Influencer-Marketing

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

Eine Herausforderung bei einem Content-Management-System ist das Testen und Erstellen von Skripttools. Während dies für die meisten Verlage keine Voraussetzung ist, teile ich als Technologiepublikation gelegentlich gerne funktionierende Skripte, um anderen Leuten zu helfen. Ich habe erklärt, wie man mit JavaScript die Passwortstärke überprüft, wie man die Syntax von E-Mail-Adressen mit regulären Ausdrücken (Regex) überprüft, und habe kürzlich diesen Rechner hinzugefügt, um die Verkaufsauswirkungen von Online-Bewertungen vorherzusagen. Ich hoffe, der Website Dutzende von Tools hinzufügen zu können, aber WordPress eignet sich nicht für eine solche Veröffentlichung … es ist ein Content-System, kein Entwicklungssystem.

Um meine kleinen Skripte zum Laufen zu bringen, verwende ich gerne CodePen. CodePen ist ein übersichtliches Tool mit einem HTML-Panel, einem CSS-Panel, einem JavaScript-Panel, einer Konsole und einer Veröffentlichung des resultierenden Codes. Jedes Panel enthält Informationen, wenn Sie mit der Maus über Elemente fahren, damit Sie verstehen, was möglich ist, sowie eine Farbcodierung Ihres HTML, CSS und JS, um Ihnen das Bearbeiten und Schreiben zu erleichtern.

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 es in die Seite 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 zu Forks und Veränderungen 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 Ihre Arbeitsskripte in Stiften organisieren, sie in Projekten kombinieren (Multidatei-Editor) oder sogar Sammlungen erstellen. Es handelt sich um eine funktionierende Portfolio-Site für Front-End-Code, auf der Sie anderen Autoren folgen, andere öffentlich geteilte Projekte zum Ändern in Ihr eigenes einbinden und sogar lernen können, wie man durch Herausforderungen einige lustige Dinge macht.

Sie können es als GitHub Gist speichern und in eine exportieren Reißverschluss Datei, und sogar einbetten der Stift in einem Artikel wie diesem:

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

Eine der Einschränkungen des Pen-Editors ist die schiere Menge an Code. Dieses Problem wird möglicherweise nie auftreten, da der Editor mit Hunderten oder Tausenden von Codezeilen zurechtkommen sollte. Aber wenn sie anfangen, 5,000 – 10,000 oder mehr Codezeilen zu erreichen, werden Sie feststellen, dass der Editor nicht mehr funktioniert. 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 deren wöchentliche E-Mail abonniert und können den Feed zu Ihrem RSS-Feed hinzufügen, um neu veröffentlichte Stifte zu sehen. Und wenn Sie dort mit der Suche oder dem Durchstöbern der öffentlichen Pferche beginnen, werden Sie einige unglaubliche Projekte finden … die Benutzer sind ziemlich talentiert!

Folgen Sie uns Douglas Karr auf Codepen

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

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.
Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.