Wenn du ein Web- oder Programmentwickler bist, kennst du sicherlich die CodePen-Dienste. Aus diesem Grund möchten wir dir von Neoteo aus die besten Tipps vorstellen, um das Beste aus dieser Plattform herauszuholen. So kannst du Projekte in HTML, CSS und JavaScript in Echtzeit erstellen und bearbeiten.
Für diejenigen, die die Funktionen von CodePen nicht kennen, geben wir einen kurzen Überblick, damit du es in deine Entwicklungswerkzeuge integrieren kannst. CodePen ist eine Plattform, um Tests durchzuführen, bearbeiten, üben und kleine Web- oder Frontend-Projekte teilen (Pens) in HTML, CSS und JavaScript (es unterstützt Metasprachen). Auf diese Weise können du und die Community Verbesserungen in Echtzeit vornehmen.
Run-Button
Wenn du einer derjenigen bist, die mit der Codeausgabe während der Entwicklung nicht zufrieden sind, kannst du die Option Auto Update Preview verwerfen und stattdessen einen Run-Button erhalten. Auf diese Weise kannst du jedes Mal, wenn du das Design aktualisierst, auf den Button klicken und das Design aktualisieren.
Settings – Behavior – (Deaktivieren) AUTO UPDATE PREVIEW
Dies empfehlen wir für schwere Entwicklungen mit einer großen Menge an Code und einer Mischung aus Sprachen.
Exportieren
Sobald du den Pen gespeichert hast, kannst du ihn als ZIP-Datei mit allen Sprachen (HTML, CSS und JS) exportieren. Es gibt aber auch eine Option, als GitHub-Gist zu speichern.
Export - Save as GitHub Gist
Auf diese Weise hast du deine Arbeit als GitHub-Repository.
Suchen und Ersetzen
Suchen und Ersetzen ist eine der wichtigsten Aktionen auf der Plattform, weil Entwickler sehr häufig Namen, Variablen und andere Elemente ändern.
Ctrl + Shift + F (aktiviert die Suche) – Du gibst das zu ersetzende Wort in das Feld Replace ein – Enter – Du gibst ein, was du einfügen möchtest, in das Feld With – Enter – Dann klickst du auf Yes und All.
Einzelne Codedateien abrufen
Wenn du einen Pen auf herkömmliche Weise exportierst, erhältst du die drei Dateien (HTML, CSS und JS). Wenn du aber eine der drei benötigst, musst du diese Aktion verwenden.
Change View – Direct Code Links: Hier wählst du die gewünschte Sprache – Und du kannst sie aus einem Browser-Tab speichern.
Pen als Vorlage
Wenn du fast alle deine Pens mit derselben Vorlage verwendest, kannst du jeden Pen, den du erstellst, mit der Vorlage aktivieren, die du normalerweise nutzt. Aber zuerst musst du ihn als Vorlage speichern.
Settings – Einen Titel für den Pen eingeben – Die Option Template auswählen
Wir hoffen, dass dir die Tipps, die wir dir gegeben haben, um deine Arbeit in CodePen zu optimieren, helfen, mehr aus der Plattform herauszuholen und deine Entwicklungen zu verbessern.
Wenn du einen zweiten Teil des Artikels möchtest, freuen wir uns auf deine Kommentare.
