Share
Für Unbekannte ist TextExpander eine fantastische Produktivitäts-App für Mac, mit der Sie im Laufe eines Jahres Hunderte von Stunden einsparen können. Mit der neuesten Version von Version 4 ist sie jetzt besser denn je. Die Grundidee ist einfach: Erlauben Sie dem Benutzer, Abkürzungen zuzuweisen, die zu größeren Textfolgen erweitert werden. Wenn Sie erst einmal in die App hineingezogen sind, werden Sie feststellen, wie leistungsfähig diese für Webentwickler sein kann.
Bevor wir uns mit einigen der unterhaltsameren Techniken beschäftigen, sollten wir zunächst die grundlegende Verwendung der App überprüfen.
Angenommen, Sie möchten sich beim Erstellen von HTML etwas Zeit sparen. Anstatt manuell einzugeben:
… Sie möchten stattdessen einfach eintreten Blockquote, und lassen Sie diesen Text auf das HTML-Snippet oben erweitern. In TextExpander ist das ein Kinderspiel.
Wir beginnen mit dem Erstellen eines neuen Snippets.
Als nächstes können wir im Fenster "Inhalt" den vollständigen Text einfügen und eine Abkürzung angeben.
Beachten Sie, wie wir im obigen Bild auch über das angegeben haben % |, wo der Cursor nach der Erweiterung platziert werden soll.
Wir haben jetzt eine direkte Verbindung zwischen dem String "blockquote" und dem obigen HTML-Snippet erstellt. Der nächste Schritt besteht darin, zu bestimmen, wann die Erweiterung erfolgen soll. Es gibt mehrere Möglichkeiten:
Persönlich bevorzuge ich letzteres; Ansonsten können gelegentlich versehentliche Ausdehnungen auftreten, wenn Sie es am wenigsten erwarten. Wenn Sie sich für die erste Methode entscheiden, sollten Sie sich klug überlegen, wie Sie Ihre Abkürzungen benennen. Vielleicht hilft eine spezielle Namenskonvention.
Um ein Trennzeichen festzulegen, wählen Sie "Voreinstellungen -> Abkürzungen einblenden" und wählen Sie die Option, die Ihren Anforderungen am besten entspricht.
Probieren Sie es jetzt aus! Öffnen Sie einen Text- oder Code-Editor, geben Sie "blockquote", gefolgt von Ihrem angegebenen Trennzeichen (falls vorhanden) ein, und beobachten Sie, wie das HTML-Fragment sofort erweitert wird, während Sie den Cursor an der richtigen Stelle platzieren.
Ausgezeichnet! Sehr hilfreich - aber wir können noch mehr.
Nehmen wir für unseren nächsten Trick an, dass Ihr Blog beim Hinzufügen von Bildern eine bestimmte Formatierung erfordert. Vielleicht muss es eine Bildunterschrift geben, oder vielleicht sollte es von einem umgeben sein div - so wie wir es bei Nettuts tun+.
Das einzige Problem ist, dass dies jedes Mal ein manuelles Schreiben ist. TextExpander zur Rettung!
Erstellen Sie ein neues Snippet, geben Sie eine Abkürzung für "tutimage" ein und fügen Sie Folgendes ein:
Das sieht ein bisschen beängstigend aus, aber TextExpander wird Ihnen bei den Besonderheiten helfen. Die Erweiterung geht zunächst davon aus, dass Sie die Quelle des Bildes in Ihre Zwischenablage eingefügt haben. Wenn Sie dann "tutimage" eingeben, wird der Inhalt der Zwischenablage als Wert von eingefügt src Attribut. Beachten Sie, wo wir hinzugefügt haben % Zwischenablage? Sie werden diese Funktion häufig verwenden!
Aber was ist das verwirrend alt Attributabschnitt? Wir können diese Logik in drei Teile teilen.
Wenn Sie jedoch befürchten, dass dies schwer zu merken ist, kann TextExpander die Daten automatisch für Sie ausfüllen.
Wenn Sie nun einen neuen Blogbeitrag erstellen, kopieren Sie einfach die Quelle des Bildes in die Zwischenablage und geben dann "tutimage" ein. Weil wir uns für das entschieden haben alt Text, der ausgefüllt werden soll, wird ein Popup-Dialog angezeigt.
Entweder bleib beim Standard und drücke Eingeben, oder legen Sie einen benutzerdefinierten Wert für das Attribut fest. Sobald Sie drücken Eingeben, Das folgende Snippet wird Ihrem Editor hinzugefügt:
Flott! Dieser Trick ist besonders nützlich, wenn Sie beispielsweise die Quelle eines Images von Amazon S3 kopieren.
Es ist nicht so, dass wir Form-E-Mails mögen (tatsächlich hassen wir sie), aber es gibt nur so viele Stunden am Tag. Manchmal ist es am einfachsten, eine Vorlage einzufügen und auf "Senden" zu klicken. Holen wir uns stattdessen das Beste aus beiden Welten. Wir verwenden eine Vorlage, die jedoch für jede Person individuell ist.
Erstellen Sie ein neues Snippet, geben Sie eine Abkürzung für "Rechnung" ein, und fügen Sie Folgendes hinzu:
Hey,% filltext: name = person%, Vielen Dank für Ihr Geschäft. Bitte beachten Sie, dass ich dieser E-Mail eine Rechnung mit $% Fülltext angehängt habe: Name = Betrag%. Lassen Sie mich wissen, wenn Sie weitere Fragen haben,% filltext: name = person%! Danke noch einmal! DEIN NAME
Beachten Sie zunächst, wie wir zwei 'Filltext'-Befehle hinzugefügt haben, die denselben Bezeichner haben: "Person". Da der Wert für beide identisch sein sollte, wird der Name des ersten Ausfüllvorgangs automatisch zum zweiten Vorkommen hinzugefügt.
Wir haben auch eine Auszahlung für den Rechnungsbetrag festgelegt.
Wenn wir nun zusammen mit dem Trennzeichen "Rechnung" eingeben, sehen wir Folgendes:
Dies sind einfache Annehmlichkeiten, die jedoch im Laufe eines Jahres schnell zu erheblichen Zeiteinsparungen führen.
Vielleicht sind Sie ein treuer Vim-Benutzer und möchten einige hilfreiche Tastaturbefehle im Browser nutzen - vielleicht beim Erstellen eines neuen Blogbeitrags.
Unser Ziel ist: Wenn wir ein wenig Text kopieren und "s" (für "Surround") eingeben, wird dieser Text mit einem HTML-Tag umgeben. Machen wir es möglich!
Erstellen Sie ein neues Snippet, setzen Sie die Abkürzung auf "s" und fügen Sie Folgendes hinzu:
<%filltext:name=Tag Name:default=strong%>% Zwischenablage
Wichtig: Damit dies richtig funktioniert, müssen Sie in den Voreinstellungen "Abgrenzung Trennzeichen" wählen. Andernfalls behält die Erweiterung die
Tab.
Was wir hier haben, ist wirklich sehr einfach. Wir lassen den Benutzer den Namen des Tags angeben (Standardeinstellung: stark) und dann setzen wir den Inhalt der Zwischenablage innerhalb der Tags.
Um es auszuprobieren, markieren Sie einen Text in Ihrem Code-Editor und kopieren ihn mit Steuerung / Befehl + C, und dann tippen s + Tab.
Wenn Sie einen Tagnamen angegeben haben, drücken Sie Eingeben, Der ausgewählte Text wird nun mit dem angegebenen HTML-Tag umgeben.
Okay, okay - es ist ein bisschen ein Gimmick; Aber es funktioniert!
Du hasst sie genauso wie ich; ein ... kreieren Etikette, stellen Sie das ein zum Attribut, setzen Sie den Text, erstellen Sie das Formular Eingang, stellen Sie das ein Wert, Name, und Ich würde Felder. Es ist alles sehr zeitaufwändig. Beheben wir das mit der Abkürzung "forminput".
Denken Sie daran: Sie müssen dieses Wort nicht eingeben. TextExpander stellt die erforderlichen Menüs zur Verfügung, um den Vorgang so einfach wie möglich zu gestalten.
Wenn wir nun "forminput" eingeben, erhalten wir:
Wenn Sie darüber nachdenken, gibt es beim Erstellen eine Menge duplizierten Textes Etikettes und form Eingangs. Deshalb kann diese Technik so nützlich sein. Stellen Sie den ersten ein zum Attributwert, und dieser Text wird automatisch als verwendet EtiketteText und die Eingang's Name und Ich würde Wert.
Nun enden wir mit:
So viel einfacher!
Wenn wir zu diesem vorherigen Trick zurückkehren, kann es vorkommen, dass wir kein Element für die Umbruchliste für das Symbol benötigen Etikette und Eingang. Lassen Sie uns das Snippet mit einem optionalen Abschnitt aktualisieren, um diese optional zu machen.
Löschen Sie das Element der Verpackungsliste und wählen Sie "Einfügen -> optionaler Abschnitt".
Der Schlüssel ist, beide zu machen und Teile optional, aber geben Sie beide den gleichen Namen, so dass das Häkchen für beide Elemente wirkt.
Hier ist die generierte Ausgabe:
% fillpart: name = Umbruchlistenelement?: default = yes%
Wenn Sie dieses Mal "Forminput" auslösen, haben Sie die Möglichkeit, das Element der Umbruchliste auszuschließen.
Mac-Benutzer: Wir sind alle irritiert darüber, dass es keine einfache Möglichkeit gibt, eine leere neue Datei zu erstellen. Nun, hier ist ein kleiner Trick. Auch wenn Sie keinen Texteditor eingeben, hört TextExpander immer noch zu.
Noch besser: Wir können auch Shell-Skripte und AppleScripts in TextExpander ausführen!
Komm, wohin ich hier gehe? Weisen wir eine Verknüpfung von "Datei" zu, die beim Auslösen eine neue Datei auf dem Desktop erstellt.
Wählen Sie diesmal im Inhaltsfenster oben "Shell Script" und fügen Sie Folgendes ein:
#! / bin / bash cd ~ / Desktop touch% filltext: name = Dateiname: default = index.html%
Die erste Zeile ist Standard für Shell-Skripte und verweist auf Bash. Als nächstes wie im Terminal, CD auf dem Desktop und erstellen Sie eine neue Datei, indem Sie die berühren Befehl.
Das ist es; Versuch es! Geben Sie an Ihrem Desktop (auch außerhalb eines Texteditors) "file" zusammen mit dem von Ihnen angegebenen Trennzeichen ein. Ein Dialogfeld wird mit dem Standard von angezeigt index.html; Sobald Sie die Eingabetaste drücken, wurde die neue Datei erstellt!
Das Problem bei Sprachen wie Markdown ist, dass wir von ihnen abhängig werden. Wenn ich regelmäßig HTML schreiben muss, sei es in einem Browser oder in einem Textverarbeitungsprogramm, denke ich stumm meine Gedanken. Was wäre, wenn wir bei den gleichen Annehmlichkeiten bleiben könnten, die Markdown bietet, und trotzdem sofort HTML ausgeben? Wir können - mit ein bisschen Trickserei.
Betrachten wir die Verwendung von Github-Code.
"php Echo 'etwas Code';"
Lassen Sie uns eine Abkürzung erstellen, ", Dadurch wird der HTML-Code erweitert, der zum Hervorheben der Syntax für Ihren Code erforderlich ist. Für Nettuts + verwenden wir [Sprache] CODE [/ Sprache], Ihre Plattform könnte jedoch verwendet werden Vor Stichworte. Kümmern wir uns um die letztere Methode.
Einfügen in:
% |
Und das ist es! Nun tippen Sie ", Geben Sie Ihre gewünschte Sprache ein und der erforderliche HTML-Code wird ausgegeben. Spülen Sie und wiederholen Sie den Vorgang für alle anderen Markdown-Funktionen, die Sie verwenden.
In den Anfangsphasen des Erstellens von Websites ist das Festlegen von Platzhaltern ein großer Teil, unabhängig davon, ob es sich um generischen "Lorem ipsum" -Text oder um Bildplatzhalter handelt.
Der Teil "Lorem ipsum" wird ein Kinderspiel sein. Lassen Sie uns das jetzt gleich ausklopfen.
Bevor wir dies tun, ist es jedoch wichtig, dass Sie ein System übernehmen, damit Sie sich an diese Verknüpfungen erinnern können. Bei meinen Projekten folgen alle Platzhalterausschnitte einer Namenskonvention: dem Wort "Ort" und dem Namen des Ausschnitts.
Um einen einzigen Absatz von "Lorem ipsum" zu platzieren, würde ich die Abkürzung für "Placelorem1" verwenden. Und für zwei Absätze "placelorem2". Wenn ich stattdessen ein Platzhalterbild hinzufüge, lautet die korrekte Abkürzung "placeimage".
Das war einfach. Spüle und wiederhole es für so viele Absätze, wie du brauchst.
Für Platzhalterbilder nutzen wir den ausgezeichneten Placehold.it-Service. Das einzige Problem ist, dass ich oft vergesse, was die richtige URL ist. Wenn wir stattdessen TextExpander verwenden, wird dies zu einem Problem.
Während wir eine Standardbildgröße von 350x150 festgelegt haben, können Sie diese Einstellung im Popup-Menü bei Bedarf überschreiben. Jetzt können wir unseren Projekten Platzhalterbilder in Sekunden hinzufügen.
Wenn Sie an den vorherigen Platzhalter-Tipp denken, wenn es um Image-Services geht, gibt es viele davon! Warum ändern wir "placeimage" nicht so ab, dass der Benutzer stattdessen aus einer Vielzahl von Auswahlmöglichkeiten auswählen kann. Ab TextExpander v4 ist dies jetzt möglich.
Neben einzeiligen Fill-Ins bietet TextExpander noch einige andere, darunter ein Popup-Menü.
Auf diese Weise können wir eine Dropdown-Liste möglicher Ausfüllungen bereitstellen.
Oben habe ich einfach die richtigen URLs für verschiedene Platzhalterdienste eingefügt.
Und jetzt, wenn wir "Placeimage" auslösen, erhalten wir:
So cool! Alles, was mir erlaubt, weniger zu denken und schneller zu arbeiten, ist eine gute Sache.
Wenn Sie wie ich sind, selbst wenn ein Benennungssystem vorhanden ist, laufen manchmal unsere Gehirne aus und wir können nicht herausfinden, wie wir einen bestimmten Ausschnitt nennen. TextExpander bietet einige hilfreiche Hotkeys zum Vorschlagen von Ausschnitten, zum Erstellen neuer Ausschnitte und mehr.
Hier ist das, was ich für die beiden am häufigsten verwendeten eingestellt habe.
Wenn ich mich nicht daran erinnern kann, was ich einen bestimmten Ausschnitt genannt habe, drücke ich Wahl + Befehl + s ("s" für suggest), und jetzt kann ich danach suchen. Wenn Sie mitarbeiten, geben Sie "Ort" ein und sehen Sie dann, welche Vorschläge er enthält.
Wenn Sie das richtige Snippet gefunden haben, drücken Sie Befehl zusammen mit der korrekten Nummer, und Ihr Snippet wird eingefügt.
Ich halte TextExpander für eine der Power-House-Apps in meinem Entwicklungs-Toolkit. Bei den TextExpander Stats dauert es nur einen kurzen Blick, um zu zeigen, dass ich als Ergebnis eine unglaubliche Zeit gespart habe. Probieren Sie es aus, wenn Sie nicht haben; Nettuts + gibt einen großen Daumen nach oben!
Anmerkung des Herausgebers: Dieses Tutorial wurde von Smile Software gesponsert.
Accentsconagua
