Share
För de som är obekanta, är TextExpander en fantastisk produktivitetsapp för Mac som har potential att spara dig hundratals timmar under ett år, och med den senaste versionen av Version 4 är det nu bättre än någonsin. Grundidén är enkel: låta användaren tilldela förkortningar, som kommer att utvidgas till större textsträngar. Men när du verkligen gräver in i appen kommer du att upptäcka hur kraftfull det kan vara för webbutvecklare.
Sponsrat innehållDetta är en sponsrad recension eller giveaway av en produkt / tjänst som är särskilt relevant för våra läsare.
Innan vi gräver i några av de roligare teknikerna, låt oss först granska den grundläggande användningen för appen.
Låt oss säga att du vill spara lite tid när du skapar HTML. Snarare än att manuellt skriva:
... du vill istället bara ange Block citat, och få den texten att expandera till HTML-koden ovan. I TextExpander är det en film.
Vi börjar med att skapa ett nytt utdrag.
Därefter kan vi, i fönstret "Innehåll", klistra in i hela texten och ange en förkortning.
Lägg märke till hur vi, i bilden ovan, också angav, via % |, där markören ska placeras efter expansion.
Vi har nu skapat en direktlänk mellan strängen, "blockquote" och HTML-kodet ovan. Nästa steg är att bestämma när vi vill att expansion ska ske. Det finns ett par val:
Personligen föredrar jag den senare; annars kan ibland oavsiktliga expansioner uppstå när du minst förväntar dig det. Om du väljer den första metoden uppmanar jag dig att tänka klokt på hur du heter dina förkortningar; kanske en särskild namngivningskonvention hjälper till.
För att ställa in en avgränsare, välj "Inställningar -> Utöka förkortningar" och välj det alternativ som bäst passar dina behov.
Nu, prova det! Öppna en text- eller kodredigerare, skriv "blockquote", följt av din angivna avgränsare (om någon) och titta på den direkt till HTML-fragmentet medan du placerar markören på rätt plats.
Excellent! Mycket bra - men vi kan göra mer.
För vårt nästa knep, låt oss föreställa oss att din blogg kräver specifik formatering när du lägger till bilder. Kanske behöver det vara en bildtext, eller kanske det borde vara omgivet av en div - som vi gör på Nettuts+.
Det enda problemet är att det här är en smärta att skriva manuellt varje gång. TextExpander till räddningen!
Skapa ett nytt utdrag, ge det en förkortning av "tutimage" och klistra in:
Det här ser lite skrämmande ut, men TextExpander hjälper dig med detaljerna. Först antar expansionen att du har källan till bilden klistrad in i urklippet. Då, när du skriver "tutimage", klistrar det innehållet i ditt urklipp som värdet av src attribut. Lägg märke till var vi lagt till % urklipp? Du använder ofta den här funktionen!
Men då är det förvirrande alt attribut del? Vi kan skilja denna logik i tre delar.
Men om du oroar dig för att det här blir svårt att komma ihåg, kan TextExpander automatiskt fylla i data för dig.
Nu, när du skapar ett nytt blogginlägg, kopiera bara källan till bilden till ditt urklipp och skriv sedan "tutimage". Eftersom vi valde för alt Text som ska fyllas i visas en popup-dialog.
Håll ihop med standard och tryck på Stiga på, eller ange ett anpassat värde för attributet. När du trycker på Stiga på, följande snipp läggs till i din redaktör:
Tjusig! Det här tricket är särskilt användbart när man till exempel kopierar en bilds källa från Amazon S3.
Det är inte så att vi gillar formulär e-postmeddelanden (vi hatar faktiskt dem), men det finns bara så många timmar på en dag. Ibland är det enklaste att klistra in i en mall och klicka på "Skicka". Låt oss ta det bästa av båda världarna istället. Vi använder en mall men personifierar den för varje person.
Skapa ett nytt utdrag, ge det en förkortning av "faktura" och lägg till:
Hej,% filltext: name = person%, Tack så mycket ditt företag. Observera att jag har bifogat en faktura till denna email för $% filltext: name = amount%. Låt mig veta om du har några andra frågor,% filltext: name = person%! Tack igen! DITT NAMN
Först noterar vi hur vi har lagt till två kommandon "filltext" som har samma identifierare: "person". Eftersom värdet för varje ska vara identiskt, när vi ange ett namn för den första inmatningen, läggs den automatiskt till den andra händelsen också.
Vi har också satt in en inmatning för fakturans belopp.
Nu när vi skriver "faktura" tillsammans med avgränsaren ser vi:
Dessa är enkla bekvämligheter, men snabbt lägger till stora besparingar under ett år.
Kanske är du en trogen Vim-användare, och vill gärna utnyttja några av de användbara tangentbordskommandona i webbläsaren - kanske när du skapar ett nytt blogginlägg.
Vårt mål är: När vi kopierar lite text och skriver "s" (för "surround"), kommer den texten att omges av en HTML-tagg. Låt oss få det att hända!
Skapa ett nytt kod, sätt förkortningen till "s" och lägg till:
<%filltext:name=Tag Name:default=strong%>% urklipp
Viktigt: För att detta ska fungera korrekt, se till att du väljer "Lämna avgränsare" i Inställningar. I annat fall kommer expansionen att behålla
Flik.
Återigen, det vi har här är verkligen väldigt enkelt. Vi låter användaren ange vad namnet ska vara (en standard på stark), och sedan sätter vi in innehållet i Urklippet i taggarna.
För att prova det, välj lite text i kodredigeraren, kopiera den med Kontroll / Kommando + C, och skriv sedan in s + Flik.
När du har angett ett taggnamn, tryck på Stiga på, och den valda texten kommer nu att omges med den angivna HTML-taggen.
Okej okej - det är lite av en gimmick; men det fungerar!
Du hatar dem så mycket som jag gör; skapa en märka, ställa in för attribut, ange texten, skapa formuläret inmatning, ställa in värde, namn, och id fält. Det är mycket tidskrävande. Låt oss fixa det med en förkortning av "forminput".
Kom ihåg att du inte behöver skriva in detta ord TextExpander ger de nödvändiga menyerna för att göra processen så enkel som möjligt.
Nu när vi skriver "forminput" får vi:
Om du funderar på det finns det mycket duplicerad text när du skapar märkas och form inmatnings. Därför kan den här tekniken vara så användbar. Ställ in den första för attributvärdet, och den texten kommer automatiskt att användas som märkas text och inmatning's namn och id värde.
Nu slutar vi med:
Så mycket lättare!
När vi går tillbaka till det tidigare tricket kan det finnas tillfällen när vi inte behöver ett inslagslista för märka och inmatning. Låt oss uppdatera snippet för att göra de valfria, med hjälp av ett "Valfritt avsnitt".
Ta bort förpackningslistan och välj "Fyll-ins -> Valfritt avsnitt".
Nyckeln är att göra både och delar valfria, men ge dem båda samma namn, så att väljarkontrollen påverkar båda.
Här är den genererade produktionen:
% fillpart: name = Wrapping List Item?: standard = ja%
Den här gången, när du utlöser "forminput", har du möjlighet att utesluta objektet för omslagslista.
Mac-användare: Vi är alla irriterad av det faktum att det inte finns något enkelt sätt att skapa en tom ny fil. Tja, här är ett litet knep. Även om du inte skriver in i en textredigerare, lyssnar TextExpander fortfarande.
Ännu bättre: vi kan även utföra Shell-skript och AppleScripts i TextExpander!
Vart kommer jag hit? Låt oss tilldela en genväg av "fil", som kommer att skapa en ny fil på skrivbordet när den utlöses.
Den här gången väljer du "Shell Script" i innehållsfönstret högst upp och klistra in i följande:
#! / bin / bash cd ~ / Skrivbordskontakt% filltext: name = filnamn: default = index.html%
Den första raden är standard för skalskript och pekar på Bash. Nästa, som du skulle göra i terminalen, CD till skrivbordet och skapa en ny fil genom att använda Rör kommando.
Det är allt; testa! Överallt på skrivbordet (även utanför en textredigerare), skriv "fil" tillsammans med avgränsaren som du angav. En dialogruta kommer popup, med en standard på index.html; När du slår ange, har den nya filen skapats!
Problemet med språk, som Markdown, är att vi blir beroende av dem. När jag är tvungen att skriva regelbunden HTML, oavsett om det finns en webbläsare eller en ordbehandlare, tänker jag tyst på tankar. Vad händer om vi skulle kunna hålla fast vid samma bekvämligheter som Markdown erbjuder, samtidigt som du direkt lägger ut HTML? Vi kan - med lite trickery.
Låt oss överväga användningen av Github-stilkoden.
"php echo" någon kod ";"
Låt oss skapa en förkortning, ", som kommer att expandera till vad som helst HTML krävs för att visa syntaxmarkering för din kod. För Nettuts + använder vi [Språk] CODE [/ språk], men din plattform kan använda pre taggar. Låt oss ta hand om den senare metoden.
Klistra in:
% |
Och det är allt! Skriv nu ", fyll i önskat språk, och nödvändig HTML kommer att matas ut. Skölj och repetera för alla andra Markdown-funktioner du använder.
En stor del i de inledande stadierna för att skapa webbplatser är att ställa platshållare, vare sig det är den generiska "lorem ipsum" -texten eller bildplatshållare.
"Lorem ipsum" -delen kommer att vara en film. Låt oss slå ut det just nu.
Innan vi gör det är det viktigt att du anta ett system så att du kan komma ihåg dessa genvägar. För mina projekt följer alla platshållarutdrag en namngivningskonvention: ordet "plats" och namnet på snippet.
Så, för att placera en enda punkt i "lorem ipsum" -texten, skulle jag använda en förkortning av "placelorem1". Och, för två stycken, "placelorem2." Om jag istället lägger till en platshållarbild, så är den korrekta förkortningen "placeimage".
Jo det var lätt. Skölj och upprepa för så många stycken som du behöver.
För platshållare bilder utnyttjar vi den utmärkta Placehold.it-tjänsten. Det enda problemet är att jag ofta glömmer vad den korrekta webbadressen är. Om vi istället använder TextExpander blir det ett icke-problem.
Medan vi har ställt in en standard bildstorlek på 350x150, kommer popup-menyn att tillåta dig att åsidosätta den inställningen, om det behövs. Nu kan vi lägga till platshållare bilder till våra projekt på några sekunder.
Om du tänker på den tidigare platshållaren, när det gäller bildtjänster finns det många av dem! Varför ändrar vi inte "placeimage" så att användaren istället kan välja från en mängd olika val. Som av TextExpander v4 är det nu möjligt.
Förutom enkelsidiga inmatningar erbjuder TextExpander också några andra, inklusive en popup-meny.
Detta gör att vi kan tillhandahålla en nedrullningslista med potentiella invändningar.
Ovan klistrade jag helt enkelt in rätt webbadresser för flera olika platshållartjänster.
Och nu när vi utlöser "platsbilder" får vi:
Så cool! Allt som låter mig tänka mindre, och jobba snabbare är en bra sak.
Om du är som jag, även med ett navigeringssystem på plats, ibland läcker våra hjärnor, och vi kan inte ta reda på vad vi heter ett visst utdrag. TextExpander erbjuder några användbara snabbtangenter för att föreslå utdrag, skapa nya och mer.
Här är vad jag har ställt för de två som jag brukar oftast använda.
Om jag inte kan komma ihåg vad jag kallade ett visst utdrag, trycker jag på Alternativ + Kommando + s ("s" för att föreslå), och nu kan jag söka efter det. Om du arbetar tillsammans skriver du "plats" och ser sedan vilka förslag den presenterar.
När du har hittat rätt kod, tryck på Kommando tillsammans med rätt nummer, och ditt stycke kommer att klistras in.
Jag anser att TextExpander är en av krafthusets appar i min utvecklingsverktyg. Det tar bara en snabb topp i TextExpander-statistiken för att visa att jag har sparat en galen tid som ett resultat. Ge det ett försök om du inte har det; Nettuts + ger det en stor tumme upp!
Redaktörens anteckning: Denna handledning sponsrades av Smile Software.
Accentsconagua
