8 Awesome CodePen-Funktionen für die Programmierung und Webentwicklung

Der Einstieg in die JavaScript-Webentwicklung kann ein frustrierender Prozess sein, es gibt jedoch Tools, die dies erleichtern.

CodePen.io ist eine In-Browser-Codierungsumgebung, die sowohl zum Erlernen von Code als auch zum schnellen Prototyping von Ideen mit minimalem Aufwand entwickelt wurde.

In diesem Artikel betrachten wir einige Funktionen der Website und wie sie Ihnen helfen können, ein besserer Programmierer zu werden.

Was ist CodePen??

CodePen bietet etwas namens a Stift, Es umfasst drei verschiedene Fenster für HTML, CSS und JavaScript sowie ein Vorschaufenster, das während der Eingabe in Echtzeit aktualisiert wird.

Sie wird häufig von Webentwicklern zur Präsentation von Ideen für Websites verwendet, ist aber auch ein großartiger Ort, um die Grundlagen der Front-End-Webentwicklung zu erlernen. Hier sind die wichtigsten Funktionen, die Sie bei der Verwendung von CodePen kennen müssen.

1. Vorprozessoren

Präprozessoren sind interpretierte oder kompilierte Sprachen, die die Codierung vereinfachen. Sie können einer Sprache zur Vereinfachung Funktionen hinzufügen und das Lesen von Code erleichtern. In der Webentwicklung wird eine Kombination von Präprozessoren für HTML, CSS und JavaScript verwendet, um reinen Code schnell zu erstellen.

Wenn Sie Web-Entwicklung erlernen und verschiedene Präprozessoren ausprobieren möchten, können Sie mit CodePen die Präprozessoren im laufenden Betrieb wechseln und den in Echtzeit kompilierten Code anzeigen. Jeder der drei Bereiche der CodePen-App verfügt oben rechts über ein Dropdown-Menü. Wählen Kompiliertes HTML / CSS / JS anzeigen um zu sehen, wie der Code interpretiert wird.

In diesem Stift haben wir eine einfache Site mit erstellt Haml und Sass um den Kopfzeilentext zu gestalten. Auswählen Kompiliert anzeigen zeigt das Standard-HTML und CSS. In diesem Beispiel ist der Unterschied minimal. Beim Erlernen einer neuen Sprache kann es jedoch nützlich sein, zu sehen, wie der vorverarbeitete Code nach dem Kompilieren aussieht.

2. Externe Ressourcen

Neben der systemeigenen Unterstützung für Vorprozessoren unterstützt CodePen externe Skripts. Dies macht es zum idealen Ort, um praktische Erfahrungen mit Bibliotheken für persönliche Projekte zu sammeln oder beliebte Web-App-Bibliotheken wie React 7 Best Free Tutorials für das Lernen von Reacts und das Erstellen von Web-Apps 7 zu testen Web-Apps Kostenlose Kurse sind selten so umfangreich und hilfreich - aber wir haben mehrere React-Kurse gefunden, die hervorragend sind und Ihnen den Einstieg in den richtigen Weg ermöglichen. Weiterlesen .

Um eine externe Bibliothek hinzuzufügen, öffnen Sie die die Einstellungen auf dem Stift und gehen Sie zur Registerkarte JavaScript. Es gibt zwei Möglichkeiten, Ressourcen hinzuzufügen, indem Sie die Ressourcen-URL manuell hinzufügen oder suchen.

Wir haben diese Funktion in unserem Artikel zur Webanimation mit mo.js zusammen mit der Babel-Vorverarbeitung verwendet.

Siehe das Pen Mojs MUO-Beispiel von Ian (@Bardoctorus) auf CodePen.

Ja, CodePen-Stifte können eingebettet werden! Klicken Sie oben im Vorschaubereich, um die Ergebnisse des Mo.js-Lernprogramms anzuzeigen!

Andere Stifte können ähnlich wie externe Bibliotheken importiert werden. Dies bedeutet, dass Sie Elemente aus zuvor geschriebenen Stiften verwenden können, um sie wie Module in Ihren neuen Stiften zu verwenden. Der CodePen-Benutzer Adams Simple Poll-Stift ist ein gutes Beispiel dafür.

3. Vorlagen

Wenn Sie neue Konzepte erlernen oder neue Ideen testen, verwenden Sie häufig ähnliche Komponenten und wiederholen die gleichen Schritte, bevor Sie beginnen. CodePen ermöglicht die Erstellung von Schablonenstiften, die die Wiederholung ausschalten und Sie direkt zum Punkt bringen können.

Um eine Vorlage zu erstellen, öffnen Sie einen neuen Stift, nehmen Sie Ihre Änderungen vor und wählen Sie die Option aus Vorlage Schieberegler im Einstellungsmenü.

Bis vor kurzem konnten kostenlose Benutzer nur drei Vorlagen erstellen. Jetzt können alle Benutzer so viele Vorlagen in ihrem Konto haben, wie sie möchten. Perfekt für den Einstieg in eine neue Idee mit minimaler Verzögerung!

4. Kollaborationsmodus

Die Fähigkeit, mit CodePen zusammenzuarbeiten und zu unterrichten, kann sein größtes Kapital sein. Es gibt bereits eine Vielzahl großartiger Tools für die Zusammenarbeit für Programmierer, aber CodePens Ansatz ist einfach und intuitiv.

Professionelle Benutzer von CodePen können einen neuen Stift erstellen und ihn für die Zusammenarbeit unter öffnen Ansicht ändern Speisekarte. Dadurch wird der Link des Stifts in eine gemeinsam benutzbare Einladung umgewandelt, die je nach CodePen Pro-Plan eine skalierbare Anzahl von Personen beherbergt.

In diesem Fall habe ich HTML geschrieben, während ein Freund das CSS in Echtzeit aktualisiert und einen beschrifteten Cursor an seiner Arbeitsstelle angezeigt hat.

Jeder, der über den Link verfügt, kann der Chat-Funktion im Browser beitreten und diese verwenden, unabhängig davon, ob er ein professioneller Benutzer ist oder sogar ein CodePen-Konto hat. Vorausgesetzt, die automatische Speicherung ist deaktiviert, kann nur der Besitzer des Stiftes Änderungen speichern. Dies macht es möglich, Ihren Code ohne Risiko für andere Benutzer zu öffnen.

Die Offenheit dieses Modus ist für Anfänger von Vorteil, da Sie fast jeden in Ihren Stift einladen können, um Sie durch ein schwieriges Konzept zu führen. Es ist auch ein praktischer Modus, um sich zu orientieren, da er sich hervorragend für die Befragung potenzieller Mitarbeiter eignet und auf diese Weise bereits professionell eingesetzt wurde!

5. Professor Modus

Im Professor-Modus kann ein Pro-Benutzer einen Raum hosten, in dem nur er den Code bearbeiten kann. Je nach Pro-Plan des Hosts können 10-100 Benutzer zuschauen und chatten.

Der Professor-Modus ermöglicht Flexibilität zwischen dem Lernen im Klassenzimmer und Fernunterricht oder einer Kombination aus beiden. Der Professor-Modus ermöglicht es den Leuten am Ende der Klasse, die gleichen Erfahrungen mit denen an der Front zu machen und dem Lehrer Bugfixes zu zeigen, die in Echtzeit aktualisiert werden.

6. Präsentationsmodus

Der Präsentationsmodus ist wenig überraschend auf die Darstellung von Code ausgelegt. Die App wird in einer vereinfachten Ansicht angezeigt, die für die Verwendung mit Overheadprojektoren entwickelt wurde. CodePen hat den Präsentationsmodus für langsame Internetverbindungen und schwächere Hardware optimiert.

Kluge Leser haben möglicherweise bereits erkannt, dass die kostenlose Version von CodePen genau diese Funktion bietet, obwohl der Pro-Modus einige nützliche Funktionen bietet. Layout, Schriftgröße und Designs können im Handumdrehen an nahezu jede Einstellung angepasst werden. Wenn Sie den Link zum Stift anzeigen, wird eine verkürzte URL im Jumbo-Format angezeigt, die das Teilen des Projekts vereinfacht.

Diese kleinen Änderungen sowie die Möglichkeit, das Vorschaufenster an Ihre Vorstellungen anzupassen, machen den Präsentationsmodus sowohl für Lehrer als auch für Entwickler ideal, die Ideen an Kollegen weitergeben. Der Präsentationsmodus ist auch eine saubere und einfache Möglichkeit, Code zu präsentieren, wenn Sie sich für eine Programmierposition interviewen möchten. So bereiten Sie sich auf ein Programmierinterview vor. Wie bereiten Sie sich auf ein Programmierinterview vor? Jedes Interview kann entmutigend sein. Wissen Sie genug, um durchzukommen? Werden Ihre Lösungen gut genug sein? Was ist, wenn du würgst? Wenden Sie diese fünf Tipps an. Weiterlesen .

7. Muster

Die Suche nach Inspiration wird durch die Design Patterns-Kollektionen von CodePen wesentlich vereinfacht.

Jede Kategorie ist eine Sammlung von Beispielcode, der von CodePen-Benutzern für bestimmte Aufgaben bereitgestellt wird. Suchen Sie nach einer Möglichkeit, dynamische Schaltflächen für Ihre Website zu erstellen? Akkordeon-Menüs? Es gibt eine Vielzahl von Kategorien, die in fast jedes Beispiel passen.

Diese Muster sind auch eine großartige Möglichkeit, um zu erfahren, wie interaktive Schaltflächen funktionieren und wie dynamische Benutzeroberflächen funktionieren.

8. Emmet

Emmet, früher unter dem Namen Zen Coding bekannt, wird allgemein als die größte Zeitersparnis für die HTML- und CSS-Entwicklung angesehen. Das Plugin nimmt einen Teil des Codes, den Sie häufig selbst schreiben, und konvertiert sie in einfache Abkürzungen.

Es ist besser, es in Aktion zu sehen, als es zu erklären. Nehmen Sie daher die üblichen Einstellungen für ein HTML-Dokument vor:

Das Hinzufügen zu jedem HTML-Dokument wurde auf zwei Aktionen reduziert. Geben Sie mit Emmet ein ! und drücken Sie die Tab Schlüssel. Zauber!

Emmet ist standardmäßig in CodePen aktiv und besonders nützlich, wenn Sie ein neues Konzept in JavaScript erlernen möchten und die unterstützenden HTML- und CSS-Elemente schnell erstellen müssen.

Entwickeln Sie mit CodePen für ein besseres Erlebnis

CodePen ist ein hervorragendes Werkzeug für Webentwickler, und das Feld wächst stetig. JavaScript ist eine großartige Sprache für die Zukunft der Webentwicklung.

Es gibt einige großartige Tutorials und Kurse für Leute, die mit JavaScript anfangen möchten. Really Learn JavaScript mit 5 Top Udemy-Kursen Really Learn JavaScript mit 5 Top Udemy-Kursen JavaScript ist die Programmiersprache des Webs. Wenn Sie einen Grund haben, JavaScript zu lernen, könnten diese fünf hervorragenden Kurse von Udemy der ideale Ort für Ihre Codierungsreise sein. Lesen Sie mehr und CodePen ist eine großartige Umgebung, um Ihre neuen Fähigkeiten zu testen.

Erfahren Sie mehr über: CSS, HTML, JavaScript, Webentwicklung.