Accentsconagua

Schneller Tipp Noch schnelleres Markup mit Sparkup

Code
Share

Die meisten von uns sind inzwischen mit dem beliebten Programm Zen Coding vertraut. Für diejenigen, die dies nicht tun, wird das Erstellen komplexer Markierungen zu einem CSS-ähnlichen Selektor. Dies kann Ihnen außerordentlich viel Zeit sparen. Es gibt jedoch einige Mängel. Glücklicherweise löst Sparkup, inspiriert von Zen Coding, diese Probleme und steigert Ihre Produktivität noch weiter!

Bevorzugen Sie ein Video-Tutorial?

Warten Sie ... Was ist Zen-Codierung??

Betrachten Sie das folgende Markup:

Dies ist ein ziemlich häufiges Markup, das Sie für jede neue Website erstellen. Vorausgesetzt, Sie haben dies noch nicht als Snippet gespeichert, können Sie es mit Zen Coding innerhalb von Sekunden erneut erstellen. 

#container> nav> ul> li * 4
  • Ziel Ids und Klassen mit dem # und . Selektoren.
  • Verwenden Sie die > um den Baum zu filtern und untergeordnete Elemente zu erstellen.
  • Fordern Sie mit der Taste mehrere Elemente an * Symbol.
  • Verwenden Sie die + Symbol, um Geschwister zu erstellen.

Raum für Verbesserung

Leider gibt es einige Probleme, die ich mit Zen Coding habe.

  • Nach meinem besten Wissen gibt es keine einfache Möglichkeit, den Baum wieder hinaufzugehen. Zum Beispiel, wenn ich ein ul> li * 4 Selector, ich weiß nicht, wie ich zurück zum filtern kann ul, und dann ein Geschwisterelement erstellen.
  • Es gibt keine Möglichkeit zuzuweisen innerHTML zu einem Element. Wäre es nicht toll, wenn ich tippen könnte?, ul> li Text hier?
  • Ich glaube nicht, dass es einen Weg gibt Tab Zwischen den Stopps, nachdem Sie expandiert haben.

Glücklicherweise behebt ein von Zen Coding inspiriertes Dienstprogramm alle oben aufgeführten Probleme. Es ist vorwärtskompatibel - das bedeutet, dass all Ihr Zen-Coding-Wissen nahtlos übertragen wird.

Verfügbarkeit

Zum Zeitpunkt dieses Schreibens ist Sparkup für TextMate, Vim und für die allgemeine Verwendung über die Befehlszeile verfügbar. Es ist ziemlich einfach zu installieren. Weitere Informationen finden Sie im obigen Screencast.

Klettere den Baum hoch

Mit Sparkup können wir den Baum wieder hochfahren.

Die Syntax 
ul> li * 3> a < < + #contents

Beachten Sie, wie wir das verwenden < den Baum hinauffahren. Vom Anker-Tag eins < bringt uns zum Listenpunkt, und ein anderer bringt uns zur ungeordneten Liste zurück, an der wir ein Geschwister mit dem erstellen können + Symbol. Sehr hilfreich!

Die Ausgabe

Text zu Elementen hinzufügen

Mit geschweiften Klammern können wir Werte zuweisen oder innerHTML zu den Elementen, die wir schaffen. Diese Funktion wurde dringend benötigt.

Die Syntax 
ul> li> p Mein Text hier
Die Ausgabe 
 
     
  •  
     Mein Text hier 
     
    •

Tab Stoppt

Mit Sparkup können wir Tab über die erforderlichen Stopps, damit wir unsere Attribute / Werte so schnell wie möglich manuell eingeben können. Mit MacVim können Sie, wie im Screencast gezeigt, verwenden Steuerung + N und Strg + P zwischen den Haltestellen wechseln.

Auf diese Weise müssen Sie nicht auf zahlreiche Richtungstasten zurückgreifen, sondern Sie werden mit einem einzigen Befehl dorthin geführt, wo Sie sein müssen. Ein Beispiel finden Sie im Screencast.

Also was denkst du? Wirst du den Wechsel machen??

Code
×