9 Gründe, die Sie CodePen verwenden sollten

Key Takeaways

• codepen.io ist eine vielseitige Plattform, mit der Benutzer „Stifte“ oder Sätze von HTML, CSS und JavaScript erstellen können, die jederzeit angezeigt, bearbeitet und erhalten werden können, was es zu einem idealen Tool zum Testen macht Fehler, Zusammenarbeit und Inspiration finden.
• CodePen bietet eine Vielzahl von Funktionen, die die Codierungseffizienz wie die CSSLINT -Integration, die Unterstützung verschiedener Geschmacksrichtungen von HTML, CSS und JavaScript, Toolkits wie Emmet für eine schnellere Entwicklung und unterschiedliche Ansichten für Stifte, einschließlich einer Pro -Version mit zusätzlichen, verbessern. Ansichten.
• Die Plattform sticht aufgrund ihres starken Aspekts der Community, mit der Fähigkeit, konstruktive Kritik und ihre Rolle als Inspirationsquelle zu teilen und zu empfangen, und zeigt beeindruckende Stifte, Artikel und Sammlungen auf der Homepage, um die Arbeit der Benutzer zu verbessern und Kenntnis von HTML, CSS und JavaScript.

Bei CodePen.io beschreiben sie sich als „Spielplatz für die Front-End-Seite des Webs“. Codepen eignet sich hervorragend zum Testen, Zusammenarbeit und der Suche nach neuen Inspirationen. Es ermöglicht Ihnen, „Stifte“ zu erstellen, bei denen es sich um Sätze von HTML, CSS und JavaScript handelt. Sie können diese Stifte dann in Ihrem Profil anzeigen, Feedback einnehmen und diese Stifte jederzeit weiter bearbeiten.

Wie viele Live-Code-Spielplätze können Sie in CodePen in einer Open-Source-Umgebung lernen, eine Live-Vorschau der Codeänderungen anzeigen und sogar Ihre Codepen-Demos auf eine beliebige Webseite einbetten.

.

Siehe den Stift voll CSS NES von einem Div (@onediv) auf CodePen.

In diesem Artikel werde ich über die gerade erwähnten Funktionen hinausgehen, um einige der Dinge zu erklären, von denen ich denke, dass sie Codepen über seine Konkurrenz stellt, und warum Sie es überprüfen sollten, wenn Sie dies noch nicht getan haben.

Während ich diese Funktionen erklärt, werde ich auch einige zufällige, aber coole Stifte in jeden Abschnitt einbuhen, damit Sie es überprüfen können.

1. CSS -Optionen

CodePen enthält einige fantastische Funktionen, um CSS schneller zu schreiben. Sie können auswählen, um Normalize.css oder Reset.css in Ihr CSS einzuschließen, indem Sie einfach auf ein Optionsfeld klicken. Sie können auch -Prefix -frei oder autoprefixer verwenden. Auf diese Weise müssen sich keine Zeit nehmen, um mit einer externen Datei zu verlinken (was auch möglich ist, wenn Sie wollten).

Was ist, wenn Sie sich nicht sicher sind, dass einige Ihrer CSS -Techniken verwendet werden? Mach dir keine Sorge; CodePen hat eine CSSLINT -Integration, um Ihren CSS -Code zu durchsuchen und Sie zu warnen, ob es Fehler, Warnungen, schlechte Browserunterstützung usw. gibt.

2. Aromen von HTML, CSS und JavaScript

CodePen unterstützt Tonnen von Aromen von HTML, CSS und JavaScript. Für HTML können Sie HAML, Markdown, Slim oder sogar Jade verwenden. Für CSS unterstützen sie SASS und SCSS (sowohl mit einem optionalen Kompass- als auch mit einem Bourbon-Add-On) sowie weniger und Stift.

Im Menü JavaScript können Sie CoffeeScript oder LivesScript auswählen. Es gibt auch ein Dropdown-Menü, in dem Sie die neueste Version von Dingen wie JQuery und AngularJS haben können.

3. Emmet und Vimbindung

CodePen dreht sich alles um eine schnellere und reibungslosere Entwicklung. Aus diesem Grund verwenden sie Toolkits wie Emmet, um Projekte in Bewegung zu halten. Mit dem CodePen-Editor können Sie VIM-Tastenbindungen verwenden, bei denen die Befehlszeilen-Tastaturverknüpfungen sind. Beide Tools zusammen können dazu beitragen, einen schnelleren Workflow zu erstellen.

Um mehr über Emmet zu erfahren, können Sie den Artikel schneller Workflow lesen: Mastering Emmet.

4. Sammlungen und Tags

Sie können Ihren Stiften Tags hinzufügen, die dann durchsuchbar werden. Durchsuchen von Tags wie „Loader“ und „Form“ zeigt tonnenweise hilfreiche Inspiration.

Wenn Sie möchten, können Sie sogar Sammlungen von Stiften erstellen, die sich auf ein bestimmtes Thema beziehen. Chris Coyier, einer der Mitbegründer von Codepen, hat Sammlungen wie „Pfadzeichnung“ und „Wiederholungsmuster“ erstellt.

5. Verschiedene Stiftansichten

Codepen hat insgesamt 8 verschiedene Ansichten für Stifte. Jede Ansicht hat ihre eigenen Vorteile.

Editor -Ansicht - Dies ist die Standardansicht für die Bearbeitung von Stiften. Sie können die Größe des Codevorschriftens anpassen und auswählen, welche Sprachen angezeigt werden sollen.

Detailansicht - Mit dieser Ansicht können Sie die Tags, Herzen, Kommentare, Stifte des Stifts sehen. Dies enthält die meisten sozialen Funktionen für CodePen.

Volle Seitenansicht-Dies ist ziemlich selbsterklärend. Es macht Ihren Stift in einem Iframe Vollbild und hinterlässt nur eine Codepen-Fußzeile.

Debug-View-Debug-View ist eine Vollbildansicht, obwohl mit zusätzlichen Funktionen. Es entfernt die IFrame- und Codepen -Fußzeile für den einfacheren Zugriff auf die JavaScript -Konsole. Dies eignet sich hervorragend zum Testen von Code, von dem Sie glauben, dass CodePen möglicherweise stört.

6. Codepen Pro Views

Wenn Sie ein CODEPEN -Pro -Benutzer sind, haben Sie Zugriff auf weitere Ansichten:

Präsentationsmodus - Dieser Modus wird speziell für Overhead -Projektoren vorgenommen. Es entfernt den Header, um Ihnen mehr Platz zu bieten, und ermöglicht es Ihnen, die Schriftgröße und die Farben des Codeditors schnell zu ändern. Sie können auch die Größe des Vorschiffs ändern, ohne den Code zu ändern.

Live-Ansicht-Mit CodePen Live View haben Sie eine Vollbild-Anzeige Ihres Stifts. Wenn Sie diesen Stift bearbeiten, wird automatisch aktualisiert, wenn Sie eingeben. Dies wird häufig beim Testen auf mehreren Geräten verwendet.

Professor-Modus-Mit diesem Modus können Menschen Sie in Echtzeit codieren. Es gibt auch ein Chatfenster, in dem der Professor und die Schüler chatten können.

COUTSION -MODE - Der Collab -Modus ermöglicht es mehr als einem Programmierer, gleichzeitig Änderungen an einem Stift vorzunehmen. Es gibt auch ein Chat -Fenster, genau wie im Professor -Modus.

7. Blogging

Blogging ist eine neue Funktion auf CodePen, mit der Sie wie in einem regulären Blog problemlos über Code schreiben können. Sie können mit Markdown schreiben und ein spezielles Einbettungswerkzeug verwenden, um Ihren Stift einzubetten, wenn Sie dies benötigen. Sie können Ihren Beiträgen benutzerdefinierte CSS hinzufügen, und es gibt eine super einfache Vorschau, um Ihren Beitrag zu testen.

8. Community

Das ist es, was CodePen vor der Konkurrenz um einen langen Schuss stellt. Die Community war von Anfang an ein großer Teil von Codepen. Durch Kommentare und Teilen können Menschen konstruktive Kritik geben und empfangen und gemeinsam lernen. Gruppen wie 4AE9b8 und Bullgit haben mit Gesprächen über Codepen begonnen. Die Gründer haben darüber gesprochen, was sie über die Codepen -Community im Codepen -Podcast halten.

9. Inspiration

beeindruckende Stifte werden immer auf der Homepage sowie auf tolle Artikel und Sammlungen angezeigt. Stifte posieren sowohl Inspiration als auch eine unterhaltsame Art zu lernen. Durch die Suche nach fantastischen Stiften können Sie Ihre eigene Arbeit verbessern und Ihr Wissen über HTML, CSS und JavaScript verbessern.

unten finden Sie einige herausragende Demos, die Sie auschecken können:

• Canvas Farkle Light Trial von Jack Rugile
• Star Wars Eröffnung Crawl aus dem Jahr 1977 von Tim Pietrusky
Makisu CSS 3D Dropdown -Konzept von Justin Windle
CSS 3D X-Wing von Julian Garnier
soziale Schaltflächen mit schweber von Marius Balaj
WebGL -Demo von Anand
reißbare Stoff durch Suffick

Schlussfolgerung

Die Verwendung von CodePen kann letztendlich dazu beitragen, schneller zu lernen und Teil einer großen Gemeinschaft zu werden. Artikel auf SitePoint verwenden CodePen häufig, um Code für Tutorials einzubetten. Und wenn Sie an mehr großartigen Funktionen von CodePen interessiert sind, lesen Sie diese:

• Lesezeichen
• WordPress Plugin
• OEMbed
• Mieten Sie mich Button

häufig gestellte Fragen (FAQs) zur Verwendung von CodePen

Was sind die wichtigsten Merkmale von CodePen, die es zu einer bevorzugten Wahl für Entwickler machen? Es bietet eine Live-Sicht auf die Codeänderungen, was bedeutet, dass Entwickler die Änderungen in Echtzeit erkennen können. Diese Funktion beschleunigt den Entwicklungsprozess erheblich. CodePen unterstützt auch Pre-Processoren wie SCSS, Less und Stylus, was den Entwicklern helfen kann, effizientere Code zu schreiben. Es bietet auch einen Zusammenarbeitsmodus, mit dem mehrere Entwickler gleichzeitig an demselben Projekt arbeiten können. Diese Funktion ist besonders nützlich für Teamprojekte und Paarprogrammierung.

Wie kann ich CodePen zum Testen und Debuggen verwenden? Es bietet eine isolierte Umgebung, in der Sie Ihren Code schreiben, testen und debuggen können, ohne Ihr Hauptprojekt zu beeinflussen. Sie können Ihre „Stifte“ problemlos mit anderen teilen und es zu einem großartigen Werkzeug für Feedback und Hilfe beim Debuggen machen. CodePen unterstützt auch Console.log, das sehr hilfreich sein kann, um JavaScript zu debuggen. Codepen ist ein großartiges Werkzeug für das Lehren und Lerncodieren. Lehrer können „Stifte“ erstellen, um Codierungskonzepte zu demonstrieren, und die Schüler können diese „Stifte“ zum Experimentieren und Lernen verlieben. Codepen hat auch einen 'Professor -Modus', der es Lehrern ermöglicht, Live -Coding -Demonstrationen bereitzustellen. Verschiedene Gerätegrößen direkt im Editor. Diese Funktion erleichtert das Erstellen von Designs, die in allen Gerätegrößen gut funktionieren. Sie können CodePen offline verwenden, um an Ihren 'Stiften' zu arbeiten, aber Sie müssen online gehen, um Ihre Änderungen zu speichern. Codepen ist einfach. Sie können die URL Ihres „Stifts“ teilen oder Ihren Stift auf eine andere Website einbetten. CodePen bietet auch einen „Präsentationsmodus“, der perfekt für Live -Demonstrationen oder Präsentationen geeignet ist. Sie können Ihre Arbeit teilen, Feedback erhalten, von anderen lernen und sogar an Projekten zusammenarbeiten. Die Gemeinschaft ist ein großartiger Ort, um als Entwickler zu lernen und zu wachsen.

Kann ich CodePen für kommerzielle Projekte verwenden?

Ja, Sie können CodePen für kommerzielle Projekte verwenden. Es ist jedoch wichtig zu beachten und JavaScript-Präzessoren? Babel und Typenkript. Dies bedeutet Es gibt mehrere Alternativen, die Sie in Betracht ziehen könnten. Dazu gehören JSFiddle, Plunker und Panne. Jedes dieser Werkzeuge hat seine eigenen Stärken und Schwächen, daher hängt die beste Wahl von Ihren spezifischen Bedürfnissen und Vorlieben ab.

Das obige ist der detaillierte Inhalt von9 Gründe, die Sie CodePen verwenden sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!