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!