Was wäre, wenn es eine Plattform gäbe, auf der Sie Code bearbeiten, eine Bibliothek, ein Framework oder eine Komponente testen und die Änderungen direkt vor Ihren Augen beobachten könnten? Und was wäre, wenn Sie Ihre Experimente mit anderen Entwicklern teilen oder von ihnen kopieren könnten, um Ihre Programmierkenntnisse zu verbessern, Ihre Arbeit schnell zu debuggen und sich inspirieren zu lassen?
Ich habe ein Tool ausprobiert, das das Leben von Softwareentwicklern viel einfacher macht: Code Pen, selbst beschrieben als „ein Umfeld für soziale Entwicklung für Frontend-Designer und Entwickler“.
Dieser Artikel erklärt was ist CodePen, was du damit machen kannst und wie, und warum es so sein kann ein sehr nützliches Tool, um Ihre Frontend-Entwicklung zu beschleunigen.
CodePen ist eine Entwicklungsplattform, auf der Jeder kann Frontend-Sprachen wie HTML, CSS und JavaScript von seinem Browser aus bearbeiten ohne Software herunterzuladen.
Das Beste daran ist, dass die Ergebnisse in Echtzeit angezeigt werden können, was ein schnelleres Debuggen ermöglicht. Entwickler und Designer können auch Codefragmente (sogenannte Stifte) erstellen und mit dem Rest der Welt teilen.
Dank der großartigen Community, die CodePen aufgebaut hat, gibt es Tausende von Benutzern erstellen und teilen ihre Ideen von Frontend-Komponenten, Animationen und sogar fast fertige Layouts von Webseiten. Wenn Sie eigene Ideen haben, die für andere Frontend-Profis nützlich sein könnten, ist dies der perfekte Ort, um sie zu teilen. Sie müssen lediglich sicherstellen, dass Ihr Code frei von Urheberrechten.
Wenn Sie nicht daran interessiert sind, den Code anderer Leute zu verwenden, können Sie jederzeit den Online-Code-Editor von CodePen verwenden, um erstellen Sie den Stil für Ihre Projektkomponenten. Auf diese Weise können Sie sicherstellen, dass Ihre Daten nicht durch Code beeinflusst werden, der zum Stylen anderer Komponenten bestimmt ist. Sie können es sich vorstellen als leere Leinwand.
Ich empfehle, für jede Komponente einen Stift zu erstellen, da Sie jedes Mal mit weniger Code arbeiten müssen. Auf diese Weise vermeidest du Fehler (wie das Ändern des Codes für eine Komponente, die eine andere zerstört) und merkst es erst am Ende.
Der browserbasierte Editor von CodePen ist ein großartiges Tool, um ein neues Framework oder eine neue Bibliothek zu testen und auszuführen. Sie müssen nicht jedes Mal eine neue Umgebung einrichten, wenn Sie sehen möchten, ob Ihre Änderungen funktionieren. Die Editor-Ansicht zeigt gleichzeitig die drei Bearbeitungsbereiche und die Vorschauund aktualisiert die Endergebnisse jedes Mal, wenn sich etwas ändert.
Nachdem Sie nun wissen, wofür CodePen verwendet wird, wollen wir untersuchen, wie es funktioniert. Die Plattform ist sehr benutzerfreundlich und bietet viele Funktionen. Einige können sogar unbemerkt bleiben, auch wenn Sie sie bereits mehrmals verwendet haben.
Direkt auf der Hauptseite erhalten Sie einen Einblick in das, was Sie suchen können: bestimmte Stifte, Menschen, Projekte oder Kollektionen. Sie können auch die CodePen-Vorschläge überprüfen (es ist eine großartige Option, um den Code anderer Leute zu sehen und einige Tricks zu lernen), oder Sie können die Suchleiste drücken, um nach etwas Spezifischerem zu suchen. Wenn du schnell schreibst und die Eingabetaste drückst, wirst du das wahrscheinlich nicht bemerken du kannst Themen erkunden! Sie sind in drei verschiedene Kategorien unterteilt:
Zu jedem Thema gibt es eine Seite, auf der Sie Stifte, Vorlagen und Ressourcen erkunden können. Die Themenliste ist geschlossen, aber Sie können ein Formular ausfüllen und nach einem bestimmten Thema fragen.
Wenn du dir die Beispiele ansiehst, siehst du zu schnell einen Screenshot des Stifts Vorschau des Endergebnisses und überlege, ob es etwas ist, das dein Interesse wert ist.
Dann kannst du entweder direkt auf den Stift klicken und den Editor-Ansicht (wo du mit dem Code spielen kannst) oder klicke auf die Erweiterungspfeile in der rechten oberen Ecke, um den Detailansicht. In dieser Ansicht können Sie den Stift kommentieren, den Autor liken und ihm folgen, ihn sehen und interagiere damit, wie dieser Stift, wo du Xylophon spielen kannst.
Sie können es auch anheften, um es zu sehen oder später zu verwenden. In der Navigationsleiste in der Dein Abschnitt, diese Stifte werden in der Gruppe der angehefteten Elemente angezeigt.
Das Code-Editor ist mein Lieblingsteil von CodePen. Mit diesem Tool können Sie sehen HTML-Editor, das CSS-Editor, und die Javascript-Editor gleichzeitig mit der Vorschau, dass wird automatisch aktualisiert, wenn Sie den Code ändern.
Es ist nicht erforderlich, zwischen Datei- und Browser-Tabs zu wechseln, was den Codierungsvorgang beschleunigt. Wenn Sie einen dieser Abschnitte nicht benötigen, können Sie ihn außerdem ausblenden, indem Sie seine Größe anpassen.
Du kannst immer Passen Sie das Layout Ihres Stifts an. Die Standardansicht hat die drei Codeabschnitte oben und die Vorschau unten. Wenn Sie jedoch mehr Höhe in Ihrer Vorschau benötigen, wie bei einer mobilen Version einer Web-App, können Sie das Layout unter dem Ansicht ändern Menü und richten Sie die Codeabschnitte vertikal aus.
Wie ich bereits erwähnt habe, Mit CodePen können Sie mit mehr als nur reinem HTML, CSS und Javascript arbeiten. Um ein anderes Framework, eine Bibliothek oder einen Präprozessor einzubeziehen, gehen Sie zu Einstellungen. Für jeden der Codeabschnitte finden Sie eine Registerkarte mit Optionen für ändere den Präprozessor und füge externe Quellen hinzu, wie Stylesheets oder Skripte.
Wenn Sie zufällig mit Haml besser vertraut sind als mit reinem HTML, wählen Sie Haml im ersten Dropdownmenü aus. Wenn Sie Bootstrap auf Ihrem Stift verwenden möchten, gehen Sie zu den externen Stylesheets des CSS-Bereichs, geben Sie „Bootstrap“ ein, wählen Sie die Option aus, die Sie verwenden möchten, und fügen Sie so viele Quellen hinzu, wie Sie benötigen! Es ist wirklich sehr einfach, einen Stift einzurichten.
In den Einstellungen können Sie auch:
Darüber hinaus haben Sie weiterhin Zugriff auf andere Funktionen des Code-Editors, darunter Ressourcen für professionelle Nutzer, ein Debug-Konsole, und die vollständige Liste der Projektexportoptionen.
Eine der interessantesten und unbemerktesten Schaltflächen im Code-Editor ist“Schlüssel„. Hier findest du vollständige Liste der Tastenkürzel verfügbar auf CodePen, einschließlich der Automatisch vervollständigen Funktion, von der Sie wahrscheinlich, genau wie ich, dachten, dass sie nicht existiert.
Wenn du ein CodePen Pro Benutzer, das Hinzufügen eines Bilds erfolgt in drei Schritten:
Wenn Sie, genau wie ich, die verwenden kostenlose Version von CodePen, du musst dein Foto irgendwo online hosten, um einen Link zur Verwendung bereit zu haben. Einige der verfügbaren Optionen sind Imgur , imgBB aber es gibt viele andere Websites, die kostenloses Hosting für Ihre Fotos anbieten. Laden Sie das Bild hoch, das Sie verwenden möchten, und kopieren Sie den Link. Jetzt kannst du es als platzieren img src, Hintergrundbildusw.
Der einfachste Weg, Ihren Stift herunterzuladen, ist kopieren & einfügen den Code in dein Projekt. Das mache ich normalerweise. Nichtsdestotrotz kannst du Export der Stift als Zip-Datei oder als Zusammenfassung von Github.
„Exportieren“ ist die zweite Schaltfläche, die von rechts in der Fußzeile zählt (falls Sie sie nicht sehen können, speichern Sie zuerst Ihren Stift). Klicken Sie darauf und wählen Sie Ihre Lieblingsoption aus.
Wenn du fragst „Kann ich React auf CodePen verwenden?“, die Antwort lautet „Ja!“. Wenn Sie eine andere JavaScript-Bibliothek verwenden, lautet die Antwort in fast 100% der Fälle ebenfalls Ja.
Um React auf CodePen zu verwenden, müssen Sie auf den Einstellungen Ihres Stifts und wählen Sie den JS-Tab. Wenn Sie es öffnen und sich die Optionen des ersten Dropdownmenüs ansehen, werden Sie nicht React sehen, sondern nur die sofort verfügbaren Präprozessoren.
Um React zu Codepen hinzuzufügen Sie müssen das Kombinationsfeld auswählen „Externe Skripte/Stifte hinzufügen“ und schreibe „React“, um alle verfügbaren Optionen anzuzeigen. Wählen Sie die aus, die Sie benötigen, und schon können Sie programmieren!
Auf CodePen ist es auch möglich um Flutter und Vue zu verwenden, aber du wirst sie nicht so auswählen können, wie du es mit React getan hast. Erinnere dich an die Themen als ich es erklärte wie man auf CodePen sucht? Nur durch sie können Sie darauf zugreifen Personalisierte Editoren von Vue und Flutter.
Gehen Sie zur Seite „Themen erkunden“, wählen Sie das gewünschte aus, und in der rechten oberen Ecke finden Sie die „Editor öffnen“ knopf. In diesen Editoren gibt es nur zwei Abschnitte: einen für den Code und einen für die Vorschau.
Machen Sie sich keine Sorgen, wenn Sie SCSS anstelle von CSS verwenden, aber Ihr Projekt unterstützt nur reguläres CSS. Sie haben die Möglichkeit transformieren Sie es mit nur einem Klick.
Auf dem Pfeil in der rechten oberen Ecke Ihres ausgewählten Codeabschnitts haben Sie die Möglichkeit „Kompiliert anzeigen...“. Alles was Sie tun müssen, ist darauf zu klicken und schon ist es erledigt.
Hab keine Angst davor; du kannst es wieder ändern. Wenn Sie den Code herunterladen, wird auch ein Ordner mit der kompilierten Version angezeigt.
CodePen eignet sich hervorragend, um Code zu bearbeiten und die Ergebnisse in Echtzeit zu sehen. Gleichzeitig ermöglicht es Ihnen, Code effektiv zu lernen. Wenn Sie ein neues Frontend-Entwicklungsprojekt starten, finden Sie hier Die Hauptgründe, warum Sie CodePen verwenden sollten.
Was muss ich noch sagen? Du kannst alles tun, was ich oben erwähnt habe ohne etwas bezahlen zu müssen. Wenn du willst, kannst du Werde Profi und zahlen Sie ein monatliches Abonnement, um auf zusätzliche Funktionen wie private Stifte, personalisierte Screenshots, Ressourcen und weitere Layouts zuzugreifen.
Ich habe ein kostenloses Konto und habe diese zusätzlichen Funktionen bisher nicht benötigt.
Wenn Sie kein Konto erstellen möchten, müssen Sie das nicht tun. Sie können den Code-Editor weiterhin suchen und verwenden. Allerdings du wirst nicht speichern können deine Stifte, um sie später noch einmal zu lesen. Wenn Sie also nur ein paar Dinge testen möchten, können Sie das auch ohne Konto tun.
Einer der Hauptvorteile von CodePen ist die Fähigkeit alles auf einem einzigen Bildschirm sehen. Wenn ich nicht durch Browser-Tabs oder Datei-Tabs blättern muss, wird meine Codierung schneller und einfacher. Darüber hinaus gibt es eine Vorschau in Echtzeit, was die Zeit verkürzt, in der Seiten jedes Mal neu geladen werden müssen, wenn wir das Ergebnis der Codeänderungen sehen müssen.
CodePen ist ein Tool zur Codebearbeitung, mit dem wir vorgefertigte Präprozessoren, Bibliotheken und Frameworks verwenden können, um uns das Leben zu erleichtern. Wir können das mit nur wenigen Klicks tun und richte einen Stift ein mit welcher Sprache wir auch immer verwenden wollen. Wie toll ist das?
Wenn Sie Beispiele für etwas finden müssen, das zuvor getan wurde, werden Sie sie wahrscheinlich finden! Animationen, Elemente, ganze Seiten, was auch immer. CodePen hat es!
CodePen war eine enorme Hilfe für mein Dissertationsprojekt, bei dem ich ein ganz neues Frontend für ein bestehendes Projekt erstellen musste. Ich verwende es jedes Mal, wenn ich etwas Neues wie React und Animations lernen oder eine Bibliothek/ein Framework/eine Komponente isoliert testen möchte.
Wenn ich CodePen verwende, mache ich mir keine Sorgen um vorhandenen Code. Es gibt mir die Freiheit zu kreieren UI-Komponenten Machen Sie es sich bequem und wenden Sie sie risikofrei auf den Code des Projekts an.
Als Softwareentwickler beim Imaginäre Wolke, ich denke, dies ist eines dieser Tools, mit denen Sie Ihre Entwicklung als Programmierer wirklich beschleunigen können. Probiere es aus!
Webentwickler mit einer besonderen Liebe zum Frontend. Mutter von Katzen. In meiner Freizeit versuche ich, den Planeten zu retten, indem ich umweltfreundliche Alternativen teile.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
