Ich mag statische Websites. Um genauer zu sein, ich mag es, sie zu bauen. Es ist etwas Reines, vor dem Bildschirm zu sitzen. Es sind nur Sie und Ihr Texteditor, die in einfachem HTML und CSS schreiben.
Versteh mich nicht falsch, dynamische Seiten machen auch Spaß. Gott weiß ich bin ein Fan von WordPress und die Benutzerfreundlichkeit, die es Benutzern bietet. Statische Seiten bringen mich jedoch zurück. Ich erinnere mich, von der WYSIWYG-Software zu einem Texteditor gewechselt zu haben. Ich erinnere mich daran, den Entwicklungsprozess mit meiner allerersten PHP-Funktion zu verschlanken: include. Das waren gute Tage, aber im Gegensatz zu vielen anderen sind sie nicht alle weg.
Der Unterschied ist, dass wir es jetzt besser machen können. Pre-Prozessoren wie Weniger und Sass hat die Erfahrung beim Schreiben von CSS erheblich verbessert. Wir können beliebig viele Skriptsprachen in unseren HTML-Code einfügen, wenn wir dies wünschen. Und dann ... haben die Leute wirklich interessante Dinge gemacht.
Ich habe das schon erwähnt Hammer App für Mac. Es ist eine App, die ihre eigenen Funktionen und Erweiterungen in guten alten HTML-Code einführt, so dass Sie eine Datei teilweise in eine andere einfügen können, und andere gute Dinge. Es kompiliert die Ergebnisse in eine reguläre statische Site, die überall gehostet werden kann. Es hat tatsächlich ein paar mehr Funktionen als das, aber dieser Artikel handelt nicht von Hammer. Warum? Es ist nur für die Mac-Plattform verfügbar.
Eingeben Harfe…
Es ist keine App, es ist eine ganze Menge mehr. Es enthält Präprozessoren für CSS. Es enthält Templating-Sprachen für HTML-Dokumente. Es ist ein Mini-Server, der für die Entwicklung verwendet oder in einen tatsächlichen Produktionsserver umgewandelt werden kann. Sie können serverseitiges JavaScript verwenden, um es in eine vollständige App umzuwandeln, da es auf Node.js ausgeführt wird. Oder, wenn Sie kein Programmierer sind, können Sie einfach Ihre statische Site erstellen und sie dann für das Hosting an anderer Stelle kompilieren.
Da es auf Node.js basiert, ist es plattformübergreifend. Es ist auch MIT lizenziert, also ist es kostenlos. Sie können sogar Änderungen vornehmen und sie neu verteilen oder weiterverkaufen, wenn Sie möchten.
Nun, Leute, die auf der Hut waren, werden bemerkt haben, dass Harfe nicht das einzige Werkzeug seiner Art ist. Viele Leute erstellen Knoten-basierte Tools, um Web-Projekte schnell zu starten. Mein Hauptproblem mit diesen ist, dass sie im Allgemeinen davon ausgehen, dass Sie ihr Lieblings-CSS-Framework, Animationsbibliothek oder HTML-Muster verwenden möchten. Harp macht keine Annahmen über den Code, den Sie schreiben möchten. Es gibt Ihnen nur die Werkzeuge, um es schneller zu schreiben.
Wohlgemerkt, es muss installiert und über die Befehlszeile ausgeführt werden. Es gibt keine GUI dafür. Aber sobald Sie es in Gang bringen - und das ist nicht schwer - überwiegen die Vorteile die Lernkurve.
Mittlerweile bin ich mir sicher, dass die meisten unserer Leser mit der Art und Weise vertraut sind, wie die Web-Industrie versucht hat, Vanilla CSS zu verbessern. Wenn der Mini-Server für Ihr Projekt ausgeführt wird, werden LESS-, SASS- und Stylus-Dateien automatisch in CSS kompiliert.
Die Zusammenstellung ist immer zufriedenstellend schnell. In allen meinen Tests haben Änderungen, die ich an meiner Website vorgenommen habe, in der Zeit zusammengetragen, die ich brauche, um meine Datei zu speichern und dann meinen Browser zu aktualisieren.
Auch enthalten sind Jade und EJS. Dies sind die beiden JavaScript-Templating-Sprachen, die Ihnen helfen sollen, erweiterte HTML-Dokumente flexibler zu schreiben / zu erstellen. Grundsätzlich können Sie HTML-Vorlagen erstellen und den tatsächlichen Seiteninhalt separat von diesen Vorlagen speichern. Es ist so ähnlich wie mit einem CMS, nur gibt es keine Datenbank (außer Sie wollen eine), und Sie müssen den gesamten Inhalt in reine Textdateien schreiben.
Der eigentliche Vorteil ist natürlich die Codepflege und all die coolen Dinge, die Programmierer mit echtem Server- und Client-seitigem JavaScript machen können. Dies sind auch die Sprachen, mit denen Sie fortgeschrittenere Systeme, wie Blogs, relativ einfach erstellen können (auch wenn Sie einen Programmierer auf der Gehaltsliste haben).
Was ist der Unterschied zwischen den beiden? Es geht hauptsächlich darum, wie Sie Ihren Code schreiben möchten.
EJS hält die Dinge einfach. Wenn Sie HTML bereits kennen, müssen Sie nur EJS-spezifische Tags hinzufügen: <% include global / header%>. Was ich dort gemacht habe? Im Grunde nahm ich einfach den HTML-Code für meinen Seitenkopf aus einer anderen Datei und importierte ihn zur Verwendung in meiner Hauptvorlage. Sie können natürlich viel komplexere Sachen machen. Hier ist, was die Harp-Dokumentation zu sagen hat über EJS.
Jade geht beim Schreiben von HTML ganz anders vor. Es sieht so aus, wie auf der Homepage des Projekts angezeigt:
bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,Das alles wird in HTML und Javascript übersetzt. Beachten Sie die Aufnahme einer if / else-Anweisung in der Mitte und die Abhängigkeit von der richtigen Einrückung.
Coffeescript ist zu JavaScript, was Jade zu HTML ist. Im Grunde genommen handelt es sich um ein vereinfachtes Format zum Schreiben von JavaScript, das dann in den normalen Inhalt kompiliert wird. Wie Jade ist es stark von der Einrückung abhängig und lässt viel von der Syntax ab.
Es sieht so aus (ein weiteres Beispiel, das schamlos von der Homepage des Projekts abgeschrieben wurde):
math =root: Math.sqrtsquare: squarecube: (x) -> x * square xUnd die Ausgabe sieht so aus:
math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};Die mit Harp erstellten Webseiten können natürlich überall gehostet werden. Es ist jedoch erwähnenswert, dass die Entwickler von Harp eine Hosting-Plattform entwickelt haben, die speziell für Dinge entwickelt wurde, die mit ihrer Software erstellt wurden. Die Preisgestaltung ist nicht schlecht, und es integriert sich mit Dropbox für einfache automatische Updates auf Ihrer Website. Schau es dir hier an: www.harp.io
Harp ist mit seinen Preprozessoren, Templating-Sprachen, schierer Geschwindigkeit und plattformübergreifender Güte eine solide Ergänzung für die Toolbox jedes Designers. Ich sage, es ist die Lernkurve wert.