Die Can-Do's von CodePen-Projekten

Wir haben gerade Projects, das neueste große Feature auf CodePen, veröffentlicht. Es unterscheidet sich stark vom Pen Editor. Schauen wir uns also an, was es alles kann!

Ein komplettes Dateisystem und vollständige HTML-Dateien

Mit CodePen Projects erhalten Sie eine Seitenleiste mit Dateien, in die Sie alle gewünschten Dateien einfügen können.

Das unterscheidet sich vom Pen Editor auf CodePen, der Ihnen nur den HTML-, CSS- und JavaScript-Editor zur Verfügung stellt. Das ist zwar für viele Arten von Demos sehr praktisch, kann aber einschränkend sein. Was ist, wenn Sie mehrere HTML-Dateien benötigen, um zwischen ihnen zu verlinken? Was ist, wenn Sie Partials benötigen, die nach Bedarf einbezogen werden? Was ist, wenn Sie andere Dateien hochladen müssen, um nur für diese Demo zu arbeiten?

Mit Projects haben Sie die vollständige Kontrolle über die gesamte Dateistruktur. Erstellen Sie Dateien und Ordner nach Bedarf. HTML-Dateien sind vollständige Dokumente, sodass Sie nicht auf unsere HTML-Boilerplate-Struktur beschränkt sind, wie es im Pen Editor der Fall ist.

Drag & Drop Uploading

Wenn Sie eine Datei auf Ihrem lokalen Rechner haben, die Sie auf CodePen hochladen und bearbeiten möchten, könnte es nicht einfacher sein. Die Seitenleiste eines Projekts ist Drag-and-Drop-fähig!

Dies erleichtert beispielsweise den Export eines Repos und dessen Übertragung auf CodePen, um damit zu experimentieren. Diese Dateien können HTML, CSS, JavaScript, alle von uns unterstützten Preprocessor-Typen, Bilder, Schriftarten und viele andere Arten von Assets sein. Einige Dateitypen (z. B. Backend-Sprachen wie PHP) sind vom Upload ausgeschlossen, um klar zu definieren, was CodePen Projects unterstützt und was nicht.

Verarbeiten von Sass (oder vielen anderen Preprozessoren) mit Partials

Speichern Sie Ihre Variablendeklarationen gerne in einer separaten Datei? Vielleicht gliedern Sie auch Ihr Layout-CSS in eine eigene Datei aus. Das Arbeiten mit Partials ist ein äußerst nützlicher Teil jedes CSS-Preprozessors!

Dies ist ein Beispiel dafür, wie ich gerne arbeite

Sie können die kompilierte Version anzeigen, indem Sie die "verarbeitete" Datei in der Seitenleiste öffnen. Sie verhindert jedoch, dass Sie die verarbeitete Datei bearbeiten, da Sie Änderungen verlieren würden, wenn der Preprocessor das nächste Mal kompiliert.

Mehrseitige Websites mit HTML-Includes erstellen

CodePen Projects bietet zwei Preprocessing-Sprachen, die HTML-Includes ermöglichen: Pug und Nunjucks.

In Pug verwenden Sie include file.pug (wobei `file.pug` der Dateipfad zu einer anderen Pug-Datei ist) und es wird diese Datei übernommen und eingebunden.

Dadurch können Sie Dateiteile einfach zu vollständigen HTML-Dokumenten zusammensetzen, was mehrseitige Websites erheblich erleichtert. Sie können HTML auch mit der block-Syntax zusammenfügen, die es Ihnen ermöglicht, eine Vorlage zu erstellen, in die jede "erweiternde" Datei Inhaltsblöcke einfügen kann, die diese Bereiche ersetzen.

In Nunjucks ähnelt die Syntax {% include "components/mini-header.njk" %} und funktioniert genau gleich. Sie ruft die Datei ab und fügt sie an der Stelle in die Datei ein, die sie aufgerufen hat. Nunjucks ist außerdem nicht wie Pug von der Leerzeichennutzung abhängig, es ist lediglich eine Erweiterung von regulärem HTML.

Erstellen einer Pattern Library mit Nunjucks

Dies verdient wahrscheinlich einen eigenen Artikel (bald!), aber wo wir gerade von Nunjucks sprechen: Nunjucks hat das Konzept eines „Makros“, das ein wenig wie ein Include ist, nur dass Sie Parameter daran übergeben können. Es ist eine wunderbar einfache Syntax.

Nehmen wir nun an, Sie möchten dieses Makro laden und es woanders verwenden.

{% import "pattern/_colors.njk" as macroColors %}

Sagen wir, wir erstellen Farbmuster für unsere Pattern Library. Wir können die Farben (mit Anmerkungen) als Array definieren, dann durchlaufen und das Makro mit den Daten aufrufen.

Das ist starke Sache! *Nennen Sie dieses HTML, übergeben Sie diese Parameter und streuen Sie diese Parameter nach Belieben durch das HTML.* Das könnte für alle möglichen Dinge nützlich sein. Stellen Sie sich einen modalen Dialog vor, bei dem Sie Kopfzeile und Inhalt übergeben müssen, aber auch Klassen zur Definition des Stils oder Werte, um zu bestimmen, ob bestimmte Schaltflächen angezeigt werden sollen oder nicht.

ES6-Includes über Webpack verwenden

Nehmen wir an, ich habe eine kleine Hilfsfunktion, der Sie eine HTML-Zeichenkette übergeben und die einen echten DOM-Knoten zurückgibt. In ES6 können wir eine solche Funktion exportieren, damit andere JavaScript-Dateien sie als Abhängigkeit importieren können.

export function getNodes(str) { 
  return new DOMParser().parseFromString(str, 'text/html').body.childNodes;
}

Dann in jeder Datei, die sie verwenden möchte

import { getNodes } from "./helpers";

Dies beginnt, native in Browsern zu landen, aber größtenteils wird diese Art von Dingen von Webpack gehandhabt, das alles bündelt. Und das wird normalerweise auch mit Babel gepaart, damit Sie sich ganz auf die ES6-Syntax einlassen können.

Sie können in CodePen Projects frei in beide Richtungen arbeiten. Lassen Sie es so, wenn Sie möchten, dass die Browser Dinge nativ tun, oder schalten Sie Webpack und Babel-Verarbeitung ein.

Sie können auch in TypeScript schreiben. Wir haben einige schicke Tänze mit SystemJS mit TypeScript gesehen und letztendlich Abhängigkeiten direkt von npm importiert.

Automatisch formatierter Markdown

Hat Ihr Projekt eine README? Vielleicht eine TODO-Liste für sich selbst? Sie können in CodePen Projects nicht nur Markdown schreiben, sondern das Vorschaufenster wendet auch einige Stile darauf an, sodass Sie es in einem Format betrachten können, das jedem anderen Blog-Post auf CodePen ähnelt.

Sie können auch die verarbeitete Version der Datei öffnen, um das verarbeitete HTML ohne weitere Einflüsse anzuzeigen.

Haben Sie eine Entwicklungsversion und eine bereitgestellte Version Ihres Projekts

Sie können jederzeit auf Deploy klicken und dieses Dialogfeld öffnen, das es Ihnen ermöglicht, Ihr Projekt unter einer speziellen URL bereitzustellen.

Das ist eine öffentliche URL, die Sie mit jedem teilen können. Sie hat keinerlei CodePen-UI oder Einfluss. Es ist lediglich eine exakte Kopie Ihrer Dateien, die für die Welt sichtbar gehostet wird. Sie können sie zum Testen, zur Präsentation für Kunden oder für alles, was Sie möchten, verwenden.

Ein wichtiger Punkt ist hier, dass es wie eine echte Bereitstellung funktioniert. Sie können weiterhin an Ihrem Projekt arbeiten, es speichern und nach Belieben ändern, und das wirkt sich nicht auf die bereitgestellte Version aus. Sie wird effektiv zu Ihrer Entwicklungsversion. Dann können Sie jederzeit wieder bereitstellen.

Es gibt keine Grenzen für die Anzahl der Bereitstellungen, nur für die Anzahl der verschiedenen Projekte, die Sie bereitgestellt haben.

Verwenden Sie einen benutzerdefinierten Domainnamen für Ihr Projekt

Sie haben wahrscheinlich bemerkt, dass die URL für bereitgestellte Websites etwas seltsam ist. Wir hoffen, dass wir Ihnen eines Tages erlauben werden, diese anzupassen, aber was wir heute haben (und sogar besser) ist die Möglichkeit, eine benutzerdefinierte Domain (die Ihnen gehört) zu verwenden, um auf Ihr bereitgestelltes Projekt zu verweisen.

Es ist eine Frage der Änderung von DNS "A Records" (Dokumentation), um auf einige spezielle IP-Adressen zu verweisen, die wir dafür eingerichtet haben.

Nachdem dies verbreitet wurde und ich bereitgestellt habe, ist mein Projekt unter meiner benutzerdefinierten Domain verfügbar!

Beachten Sie, dass das Beispiel HTTPS ist. Das kommt nicht automatisch, aber in diesem Fall habe ich CloudFlare eingerichtet, meine Domain-Nameserver so geändert, dass sie auf CloudFlare verweisen, und dann die A Records bei Cloudflare, um auf die CodePen-IPs zu verweisen. Kostenloses HTTPS! Das bedeutet, ich kann Dinge tun wie moderne JavaScript-Funktionen verwenden, die HTTPS erfordern, wie getUserMedia oder einen Service Worker registrieren.

Vim-Tastenkombinationen verwenden

Sicher, das können Sie. Es ist eine Benutzereinstellung auf CodePen, die Sie in alle verschiedenen Editoren begleitet. Sie können auch Tastenkombinationen wählen, die Sublime Text imitieren, wenn Sie dafür schwärmen.

Ich erwähne dies als nur *eine winzige Komfortfunktion* beim Arbeiten auf CodePen. Es gibt noch viele weitere, wie

• Autovervollständigung
• Emmet
• Auswahl des Syntaxhervorhebungs-Themes
• Wahl von Tabs/Leerzeichen und Einrückungstiefe
• Wahl der Schriftart und -größe
• Zeilenumbruch (oder nicht)
• Zeilennummern (oder nicht)
• Passende Klammern (oder nicht)
• Und die Liste geht weiter! Viele Optionen, um den Code-Editor so einzurichten, wie Sie ihn mögen.

Beginnen Sie mit einer Vorlage

Wenn Sie ein brandneues Projekt starten, haben wir die Seitenleiste mit einer Reihe von Auswahlmöglichkeiten vorab gefüllt.

Sie müssen keineswegs eine Vorlage aus dieser Liste auswählen, aber es kann Ihnen helfen, ein Gefühl für die Dinge zu bekommen oder Dinge zu beschleunigen, wenn das, was Sie bauen möchten, diese Technologien verwendet. Wir hoffen, irgendwann *viele* Vorlagen für Sie zum Starten zu haben. Wenn Sie eine interessante Vorlage erstellt haben, lassen Sie es uns wissen!

Sie können auch ganz einfach eigene Vorlagen erstellen. Aktivieren Sie in einem beliebigen Projekt den Vorlagen-Schalter in den Einstellungen.

Nun ist diese Vorlage immer verfügbar, wenn Sie ein neues Projekt starten.

Und natürlich... jedes öffentliche Projekt, das Sie auf CodePen finden, können Sie forken!

… und (warten Sie) noch viel mehr

Hier ist eine unvollständige Liste von Dingen, über die ich Ihnen keine Zeit hatte, zu erzählen: Suche nach externen Assets, Code aufräumen, Code analysieren, exportieren, teilen *(keucht nach Luft)*, globale Assets, Tastenkombinationen oder all die verschiedenen Ansichten!

Ich überlasse es Ihnen, unsere Landingpage für Projects zu besuchen und die Dokumentation zu prüfen.