10 Codepen-Tipps für Anfänger

Codepen ist eine super einfache und beliebte Seite Stift eine funktionierende Front-End-Code-Kombination jetzt sofort. Wenn Sie nicht wissen, was Codepen ist oder noch nie davon gehört hat, handelt es sich im Grunde um eine Online-Quellcode-Spielplatz (lass es uns nennen OSCP nerdier klingen) für die drei Musketiere der Front-End-Codierung; HTML, CSS und JavaScript.

Es gibt andere ähnliche OSCPs wie JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen ist definitiv einer der bekanntesten Front-End-Entwickler. Lass uns ohne weiteres in einige hinein springen grundlegende und nützliche Tipps zur Verwendung von Codepen.

1. Schaltfläche ausführen

Wenn Sie kein Fan der Art und Weise sind, wird die Ausgabe Ihres Codes in Codepen ständig aktualisiert während Sie tippen, Sie können aus der “Vorschau der automatischen Aktualisierung” Möglichkeit, und bekomme stattdessen einen Run-Button. Wenn Sie darauf klicken, können Sie die Ausgabe Ihres Codes sehen und aktualisieren wann immer du willst.

Dies ist auch eine großartige Option, wenn Sie mit einem Code arbeiten, dessen Ausgabe ausgegeben wird macht viele Layoutänderungen durch, und färbt sich bei jeder Aktualisierung neu, was zu einer Verlangsamung führt.

2. Anzahl Inkrementieren / Dekrementieren

Erhöhen oder verringern Sie die Zahlen in Ihrem Code in Codepen ohne die neuen Nummern einzugeben. Sie müssen nur die Tastenkombination Strg / Cmd verwenden und Auf- und Abwärtspfeile.

3. Mehrere Cursor

Sie können Cursor setzen mehrere Punkte im Quellcode, Geben Sie dann an allen Punkten ein oder bearbeiten Sie sie zur selben Zeit. Dies funktioniert nur, wenn Sie dieselben Informationen eingeben, und Sie müssen nicht mehr kopieren. Halten Sie einfach die Strg- / Befehlstaste gedrückt, während Sie auf diese mehreren Punkte klicken.

4. Unterschiedliche farbige Konsolenmeldungen

Das Konsole JavaScript-Objekt hat ein paar mehr Methoden Außerdem Log() um dir zu erlauben Dinge in der Webkonsole drucken.

Du kannst den ... benutzen Info(), warnen() und Error() Methoden für Information, Warnung und Error. Normalerweise färben Webkonsolen diese Meldungen typografisch ein oder zeigen neben ihnen ein entsprechendes Symbol an (wie ein Warnzeichen für die Warnmeldung). zur leichteren Erkennung.

Codepen hat eine eigene Konsole die Sie öffnen können, indem Sie auf die Konsole-Schaltfläche in der unteren linken Ecke klicken. Es ist ideal für eine schnelle Überprüfung der Konsolenmeldungen ohne die Browser-Konsole öffnen zu müssen. Diese Konsole unterscheidet die verschiedenen Arten von Konsolennachrichten mit verschiedenen Hintergrundfarben.

5. Exportieren

Einmal gespeichert, a Stift (eine einzelne Codepen-Entität) kann exportiert werden als ZIP-Datei mit allen in HTML, CSS und JS-Code in Dateien. Es gibt auch eine Option, um den Stift zu speichern als Github-Gist (ein Git-Repository). Sie finden die Export-Schaltfläche in der rechten unteren Ecke jedes Stiftes.

6. Suchen und ersetzen

Ersatz finden - Eine wichtige Operation für Leute, die ihre Variablennamen ab und zu umbenennen. Strg / Cmd + Umschalt + F ist die Tastenkombination für öffne das “Ersatz finden” Dialog.

7. Emmet Tab Trigger

Kennen Sie Tab-Trigger für die Emmet-Codierung? Emmet ist ein Produktivitätswerkzeug für Frontend-Entwickler, mit dem Sie dies tun können Geben Sie den Skelettcode ein, der später erweitert wird. Geben Sie dazu in Codepen einfach die entsprechende Abkürzung schnell in den Editor ein, drücken Sie die Tabulatortaste, und der vollständige Code wird sofort angezeigt. Nur für HTML verfügbar in Codepen.

8. Holen Sie sich individuelle Code-Dateien

Wenn Sie die zuvor erwähnte Exportoption verwenden, erhalten Sie alle drei Dateien (HTML, CSS und JS) Ihres Stiftes. Aber wenn Sie interessiert sind Nur eine oder zwei dieser Dateien, Wenn Sie sie einzeln herunterladen möchten, gibt es in Codepen auch eine Option.

Wenn Sie sich bei Codepen angemeldet haben, gehen Sie zu Ihrem Stift und klicken Sie auf die Schaltfläche Ansicht ändern in der oberen rechten Ecke. Am unteren Rand der Dropdown-Liste sehen Sie das direkte Download-Links für die einzelnen Dateien.

9. Überprüfen Sie die JavaScript-Variablen

Da die JavaScript-Konsole von Codepen eine Verbindung zu dem in Ihrem Stift gespeicherten JavaScript herstellt, können Sie es auch verwenden, um Ihr JavaScript schnell zu testen. Diese Funktion ist besonders praktisch JS-Variablen untersuchen, so wie du Sie müssen keine zusätzlichen Konsolen- oder Warnmeldungen einfügen In den Originalcode nur zu Testzwecken.

10. Verwandeln Sie den Stift in Vorlage

Wenn Sie dazu neigen, die meisten Ihrer Stifte mit der der gleiche Satz von Code, Sie können eine Vorlage dazu verwenden speichern Sie diesen sich wiederholenden Code. So verwandeln Sie einen Stift in eine Vorlage, Aktivieren Sie die Option Vorlage unter dem Menü Einstellungen. Wenn Sie später einen neuen Stift erstellen, können Sie dies tun Beginnen Sie mit Ihrer gespeicherten Vorlage Klicken Sie auf den Abwärtspfeil rechts neben der Schaltfläche Neuer Stift. Es öffnet sich eine Dropdown-Liste mit allen Ihren gespeicherten Vorlagen zur Auswahl.