Hammer & Amboss Zwei unglaublich tolle neue Webentwicklungstools

Riot ist ein kleines Softwareunternehmen, das derzeit nur fünf Personen umfasst. Aus dem Nichts hat dieses Team zwei Webentwicklungs-Apps für Mac-Benutzer eingestellt, die mich umgehauen haben. Dies ist eine App-Kategorie, die meiner Meinung nach in den letzten Jahren keine echte Innovation erhalten hat. Offenbar wollen die guten Leute von Riot das ändern, weil ihre Ideen wirklich einzigartig und unglaublich nützlich sind.

Heute werfen wir einen kurzen Blick auf Hammer und Anvil, um zu sehen, was jeder macht und wie er gemeinsam Ihren Workflow verbessern kann, insbesondere wenn Sie Front-End-Entwickler sind, die mit statischen Sites arbeiten.

Hammer

Zuerst ist Hammer, ein echter Sprung nach vorne auf dem Gebiet der statischen Standortentwicklung. Wenn Sie die Dinge lieben, die PHP macht, aber entweder PHP nicht kennen oder sich einfach nicht mit Ihren kleinen Projekten beschäftigen möchten, werden Sie Hammer lieben.

Was ist es?

Beginnen wir mit dem Besprechen, was Hammer nicht ist. Es ist kein IDE- oder Texteditor. Sie müssen Sublime Text 2 nicht aufgeben, um ihn zu verwenden (was großartig ist), er wird direkt in Ihren vorhandenen Workflow eingefügt und arbeitet mit Ihren bevorzugten Web-Entwickler-Apps zusammen, was auch immer sie sein mögen.

Nun fragst du noch mal, was zum Teufel ist Hammer? Kurz gesagt, es ist ein Compiler. Es dient als eine Art Basis für Ihr Webdesign-Projekt. Wenn Sie Änderungen vornehmen, kompiliert Hammer Ihre Dateien. Wenn Sie beispielsweise Sass oder CoffeeScript verwenden, werden sie automatisch in CSS und JavaScript kompiliert.

Das ist es?

Nee. Hammer ist nicht nur ein weiterer Konkurrent von Codekit. Es ergänzt das Konzept eines Compilers, indem eine spezielle Syntax bereitgestellt wird, die Sie in Ihrer Arbeit verwenden können, um die Art und Weise zu steuern, in der Ihre Dateien erstellt werden.

Welche spezielle Syntax fragen Sie? Wie wäre es mit HTML-Inhalten, mit denen Sie HTML-Dokumente ohne PHP oder Serverumgebung automatisch ineinander einbetten können? Oder möchten Sie intelligente Dateipfade verwenden, um bestimmte Assets automatisch zu finden, selbst wenn sie verschoben werden? Möchten Sie eine Seite mit HTML-Variablen dazu?

?Schließ die vordere Tür? du sagst. Nein, ich werde die Tür weit aufschwenken lassen. Hammer macht das alles und noch viel mehr. Mal sehen wie.

Erste Schritte mit Hammer

Nachdem wir Hammer heruntergeladen und gestartet haben, sehen wir Folgendes:

Hier haben wir ein schönes, freundliches Startfenster, das uns dazu drängt, entweder ein neues Projekt zu erstellen oder ein bestehendes Projekt abzulegen. Ich werde ein neues Projekt erstellen, weil es eine Menge schickes Zeug gibt, das Sie sehen sollten.

Ein neues Projekt erstellen

Sobald ich auf "Neues Projekt erstellen" klicke? Ordner, wählen Sie dann einen Namen und einen Ort für das Projekt. Hammer macht sich ans Werk und erstellt ein beeindruckendes kleines Verzeichnis mit Starterdateien.

In der Hauptprojektdatei finden Sie eine index.html-Datei mit drei Ordnern: Assets, Build und Includes. Jede dieser Dateien ist mit Starterdateien gefüllt, die Ihnen den Einstieg erleichtern.

Das Hauptinteresse hier ist das "Bauen". Ordner, dies ist das Verzeichnis, in dem Ihre fertige, statische HTML-Site in all ihrem schön kompilierten Ruhm platziert wird.

Anschluss an Ihren bevorzugten Texteditor

Wie ich bereits erwähnt habe, ist Hammer darauf ausgelegt, mit Ihrem aktuellen Arbeitsablauf gut zu spielen. Nachdem Sie Ihr Projekt erstellt haben, klicken Sie auf das kleine App-Symbol oben rechts in der Benutzeroberfläche, um den Editor auszuwählen, den Sie verwenden möchten.

Wenn das Projekt in der linken Seitenleiste ausgewählt ist, drücken Sie die Tastenkombination "Befehl-E". Das Projekt wird in Ihrer ausgewählten App geöffnet, in meinem Fall "Sublime Text 2".

Freaking Awesome Features

Es ist schwierig, keinen doppelten Take zu machen, wenn Sie die Features von Hammer sehen. Sie sind gut. Wirklich sehr gut. Ich spreche von Voodoo, dass Sie nie gedacht hätten, dass Sie gute Leistungen erbringen könnten. Schauen wir uns einige der besten Teile an.

HTML enthält

Wenn wir die automatisch generierte HTML-Datei öffnen, die mit unserem neuen Projekt geliefert wurde, sehen wir Folgendes (dies ist die gesamte Datei):

Dies sollte Ihre Reaktion sein:? WTF? Wo ist der Code? Warten Sie, tut das das, was ich denke? Ja.

Ohne PHP-Kenntnisse und ohne jegliche lokale Serverumgebung können wir das Konzept der modulbasierten Entwicklung nutzen.

Wenn Sie sich so sehr an statische Websites gewöhnt haben, dass Sie keine Ahnung haben, was passiert, lassen Sie mich das aufteilen. Im Inneren des? Ordner ist eine Gruppe von HTML-Dateien. Nehmen Sie zum Beispiel die Datei _header.html. Wir haben ein Kopie davon, die in beliebig viele Seiten eingefügt werden kann. Wenn Sie es in zehn HTML-Dateien ablegen und die Master-Header-Datei aktualisieren, werden alle zehn anderen HTML-Dateien beim Kompilieren aktualisiert.

Alles, was Sie für diese beeindruckende Leistung benötigen, ist ein benutzerdefiniertes Snippet in Form eines HTML-Kommentars. Hier sind drei Beispiele:

Die Auswirkungen hier sollten Sie umhauen. Ich kann wirklich nicht ausdrücken, wie viel für einen Sprung dies für statische Websites bedeutet.

Variablen

?Aber warte!? du sagst. ? Sie können nicht in jeder Datei dieselbe Kopfzeile verwenden!? Du bist ein scharfer. Zumindest müssen Sie das Titel-Tag so anpassen, dass jede Seite anders ist. So was jetzt? Ist Captain Hammer besiegt?

Fürchte dich nicht, ich werde dir jetzt zeigen, wie man Variablen in HTML einsetzt. Anstatt einen tatsächlichen Titel in Ihre Master-HTML-Header-Datei einzugeben, können Sie einfach eine Variable wie folgt erstellen:

Wenn wir nun ein Include in unserer Header-Datei ausführen, können wir diese Variable anpassen. Wir machen dies mit einer einzelnen Zeile oben in unserer Ziel-HTML-Datei.

Die oberste Zeile in diesem Code-Snippet weist Hammer an, die $ title-Variable durch "Design Shack" zu ersetzen. Jetzt kann ich eine eingebettete Header-Datei haben, die auf Seitenbasis angepasst wird. Ich habe dir gesagt, dass dieses Ding großartig ist.

?Klug? Pfade

Als nächstes kommen clevere Wege. Diese sind einfach zu greifen und sehr praktisch.Grundsätzlich können Sie lange Dateipfade ablegen, wenn Sie Ihre verschiedenen Ressourcen mit dem @ -Pfad verknüpfen. Syntax.

<img src="//lesptitesaffairesdemayl.be/img/images_1/hammer-anvil-two-unbelievably-awesome-new-web-development-tools_8.jpg"> <p>Dies erfordert eine Nullsetzung. Klicken Sie einfach auf? Veröffentlichen? und Ihre Dateien werden hochgeladen. Eine kurze URL wird dann automatisch zur Weitergabe in Ihre Zwischenablage eingefügt.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/hammer-anvil-two-unbelievably-awesome-new-web-development-tools_9.jpg"> <h2>Amboss</h2> <p>Das fasst Hammer zusammen, jetzt sehen wir uns Anvil an. Wo Hammer ein komplexes Biest ist, das mit unglaublich tollen Eigenschaften beladen ist, ist Anvil ein einfaches, ein Trickpony? im richtigen Sinne.</p> <p>Anvil vereinfacht das Testen lokaler Standorte. Die allgemeine Idee hier ist, dass lange lokale Datei-URLs für die Arbeit ungeeignet sind. Wenn Sie also einen Site-Ordner in Anvil werfen, wird ein einfaches? .Dev? URL, mit der Sie in einem lokalen Browser auf Ihre Website zugreifen können.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/hammer-anvil-two-unbelievably-awesome-new-web-development-tools_10.jpg"> <p>Wenn ich mein Hammer-Projekt in Anvil abwerfe, wird ein kurzer Link erzeugt: hammertest.dev. Das ist alles dazu! Jetzt kann ich entweder direkt in Anvil auf die Datei klicken oder die generierte URL verwenden, um mein Projekt im Browser anzuzeigen.</p> <p>Es ist so einfach! Warum hat noch niemand daran gedacht? Das Beste an Anvil: Es ist ein vollständig kostenloser Download.</p> <h2>Aufrütteln der Webentwicklung</h2> <p>Es ist eine tolle Zeit, Webentwickler zu sein. Es scheint, dass jeder Aspekt des Web-Entwicklungsprozesses von unabhängigen, hart arbeitenden Personen, die diese Arbeit für uns alle erleichtern möchten, kritisch geprüft und überholt wird.</p> <p>Präprozessoren verändern die Art und Weise, wie wir mit CSS und JavaScript arbeiten, Projekte wie Light Table zielen darauf ab, den Texteditor so zu überdenken, wie wir ihn kennen.</p> <p>Dies ist der Hauptgrund, warum ich Hammer so sehr liebe. Hardcore-Entwickler können mit PHP, Rails und ähnlichem eine Menge wirklich großartiger Dinge erledigen, während die Low-Front-End-HTML- und CSS-Leute nur über diese Konzepte und Funktionen hinwegsehen können. Hammer versucht das zu ändern und ich applaudiere den Entwicklern dafür. </p> <p>Probieren Sie unbedingt Hammer und Amboss aus und lassen Sie uns wissen, was Sie denken. Hammer kostet $ 23.99 (es ist jeden Cent wert und es gibt eine kostenlose Testversion) im Mac App Store und Anvil ist ein kostenloser Download. </p>