Stream-Crossing Confusion

Soll ich WordPress oder React Hooks verwenden?
Soll ich D3 oder CSS verwenden?
Soll ich Markdown oder JSON verwenden?
Kann ich Flexbox in Gatsby verwenden?
Kann ich benutzerdefinierte Eigenschaften in Jekyll verwenden?
Soll ich HTML oder die Cloud verwenden?
Wie kann ich Dark Mode zu meiner Vue-Seite hinzufügen?

Das sind humorvoll gemeint, aber es steckt ein wichtiger Punkt dahinter. Es ist die eine Herausforderung, eine Technologie zu verstehen, und *eine weitere* Herausforderung, zu verstehen, wie Technologien zusammenpassen.

Auch wenn einige der oben genannten Technologiekombinationen verwirrend erscheinen mögen, haben Sie Glück, dass Sie genug wissen, um sie verwirrend zu finden. Das bedeutet, dass Sie die Technologien gut genug verstehen, um zu wissen, dass es sich nicht um Entweder-oder-Entscheidungen handelt oder dass nichts sie daran hindert, zusammen zu passen.

Diese Art von Verwirrung sehe ich bei Anfängern recht häufig, und es gibt keinen Grund, sich dafür zu schämen. Das gehört alles zum Prozess dazu.

Diese Art von Verwirrung sehe ich auch bei Lesern dieser Seite, da wir oft über grundlegende Webtechnologien schreiben und nicht darauf eingehen, wie diese in verschiedene Abstraktionen wie JavaScript-Frameworks oder CMS passen könnten. Schauen Sie sich zum Beispiel diesen Beitrag über das Erstellen eines Sliders an. Er berührt nicht einmal JavaScript; es ist reines HTML und CSS.

Ein erfahrener Front-End-Entwickler wird vielleicht verstehen, dass er diesen Slider-Code fast überall verwenden kann, da er von nichts anderem abhängt. Aber es gibt auch Entwickler, die sagen werden: *Es ist nicht in JSX, also kann ich es nicht wirklich verwenden*. Oder: *Ist es auf npm?* Schon seit Ewigkeiten fragen mich Leute, ob einige der Ideen und Techniken, die sie hier auf der Seite finden, auf ihrer WordPress-Seite verwendbar wären.

Wie *würde* man diesen Slider-Code also auf einer WordPress-Seite verwenden? Nun, da es sich nur um HTML und CSS handelt, könnten Sie das HTML in jedem Ihrer Templates verwenden, das CSS in die Stylesheet Ihrer Seite einfügen, und es wird funktionieren. Aber vielleicht möchten Sie die Slides irgendwie innerhalb von WordPress selbst verwalten, anstatt Template-Dateien zu bearbeiten. Vielleicht haben Sie einen benutzerdefinierten Beitragstyp "Slide" und dann eine benutzerdefinierte Seite, die den Inhalt dieser Beiträge innerhalb der divs des Sliders ausgibt. Viel komplizierter, aber im Grunde die gleiche Idee. Wenn der Slider in React funktionieren soll, geht es wahrscheinlich darum, einige class-Attribute in className zu ändern und das CSS dort einzufügen, wo Sie das Styling für Ihre React-Seite vornehmen. Wir bleiben oft bei den grundlegenden Technologien auf CSS-Tricks, weil sie die Dinge allgemeiner nützlich machen, aber es ist immer noch interessant und eine weitere Fähigkeit, zu lernen, wie man Konzepte auf andere Technologien portiert.

Ich versuche mal, auf diese Fragen einzugehen.

Soll ich WordPress oder React Hooks verwenden?

WordPress ist ein CMS, das Sie verwenden würden, um strukturierte Inhalte zu erstellen und wahrscheinlich die gesamte Website zu bauen. Sie könnten eine Website mit React erstellen, und das wird immer beliebter, ist aber immer noch nicht sehr verbreitet. React ist eine Methode, das Frontend von Websites mit Komponenten zu erstellen, die in JavaScript erstellt werden, um bei der Vorlagenerstellung und Logik zu helfen. React Hooks sind eine Methode, Funktionalität zwischen Komponenten zu teilen. Diese Frage ist also keine Entweder-oder-Frage – Sie können beides oder auch nur eines davon tun.

Soll ich D3 oder CSS verwenden?

CSS wird auf allen Websites für Styling verwendet. D3 ist eine JavaScript-Bibliothek für Datenvisualisierung. Es gibt eine gewisse Überschneidung, da Sie zum Beispiel ein Balkendiagramm nur mit HTML und CSS erstellen könnten oder dasselbe Balkendiagramm in D3 erstellen könnten. Aber im Allgemeinen führt D3 sehr ausgefallene Zeichnungen durch, die CSS nicht kann, und CSS kümmert sich um das Layout von Elementen auf einer Website, wofür SVG (was D3 ausgibt) nicht geeignet ist.

Soll ich Markdown oder JSON verwenden?

Markdown ist eine Sprache zum Schreiben von Inhalten, die zu HTML kompiliert wird. Sie könnten zum Beispiel einen Blogbeitrag in Markdown schreiben, weil es übersichtlicher zu schreiben und anzusehen ist und Sie davon abhält, an einer Stelle zu viel mit HTML zu machen, wo Sie es nicht sollten. JSON ist ein Format zur Speicherung von Daten in einem Format, mit dem viele Programmiersprachen, insbesondere JavaScript, leicht umgehen können. JSON hat eine verschachtelte Schlüssel-Wert-Paar-Syntax, die ziemlich intuitiv ist. Sie könnten Markdown innerhalb von JSON einfügen, wenn es nützlich wäre, die Daten auf diese Weise zu speichern. Es gibt interessante Überschneidungen, da es spezielle Varianten von Markdown gibt, die Metadaten als Teil der Datei haben können, sogenanntes Front Matter. Diese Front-Matter-Daten liegen ebenfalls im Schlüssel-Wert-Paar-Format vor, wenn auch mit einer etwas anderen Syntax. Dennoch sind dies im Allgemeinen ziemlich unterschiedliche Technologien. Eine API gibt üblicherweise JSON zurück, aber kein Markdown, und Sie würden üblicherweise in Markdown bloggen, nicht in JSON.

Kann ich Flexbox in Gatsby verwenden?

Sicher. Flexbox ist eine CSS-Funktion und Gatsby ist ein React-Framework. Gatsby ist es egal, welches CSS Sie auf der Website verwenden. Da Gatsby auf React basiert, gibt es eine ganze Welt von CSS-in-JS-Bibliotheken, die ebenfalls verwendet werden könnten. Wenn Sie also Probleme haben, könnte es etwas damit zu tun haben. Wenn das Styling beispielsweise über ein JavaScript-Objektformat gesetzt wird, müssen Sie möglicherweise etwas wie flexGrow anstelle von flex-grow und ähnliches verwenden.

Kann ich Custom Properties in Jekyll verwenden?

Jekyll ist ein Ruby-gestützter Static-Site-Generator, der hauptsächlich zur Erstellung von Blogs aus Markdown-Dateien dient. Ähnlich wie Gatsby sich nicht um Ihr CSS kümmert, tut es auch Jekyll nicht. Custom Properties sind eine CSS-Funktion, sodass Sie sie frei in Ihrem CSS verwenden können, das wiederum Teil Ihrer Jekyll-Website ist.

Soll ich HTML oder die Cloud verwenden?

„Die Cloud“ hat eine eher nebulöse Bedeutung, bezieht sich aber im Allgemeinen auf Server, die mit dem Internet verbunden sind. Und nicht nur ein einzelner Server, sondern ein großes Netzwerk davon mit einer starken Fähigkeit zur Skalierung und Redundanz. HTML ist die Basissprache von Websites. Jede Website beginnt mit einer Anfrage nach dem HTML von einem Webserver. Sie hängen zusammen, insofern als Cloud-basierte Server diese Anfragen nach HTML-Dateien bedienen könnten! Aber es ist keine Entweder-oder-Sache. Sie könnten HTML schreiben, das von einem Server bedient wird, der nicht besonders „cloudig“ ist, und Sie könnten einen Cloud-Server für etwas verwenden, das nichts mit HTML zu tun hat (wie die Speicherung großer Datendateien).