Share
Voor hen die niet vertrouwd zijn, is TextExpander een fantastische productiviteitsapp voor Mac die je honderden uren in de loop van een jaar kan besparen, en met de nieuwste versie van versie 4 is het nu beter dan ooit. Het basisidee is eenvoudig: laat de gebruiker toe om afkortingen toe te wijzen, die zullen worden uitgebreid naar grotere tekstklassen. Maar als je eenmaal echt in de app graaft, zul je ontdekken hoe krachtig het voor webontwikkelaars kan zijn.
Voordat we ingaan op enkele van de leukere technieken, laten we eerst het basisgebruik van de app bekijken.
Laten we zeggen dat je jezelf een beetje tijd wilt besparen bij het maken van HTML. In plaats van handmatig te typen:
... in plaats daarvan wil je gewoon naar binnen gaan blockquote, en laat die tekst uitbreiden naar het bovenstaande HTML-fragment. In TextExpander is dat een makkie.
We beginnen met het maken van een nieuw fragment.
Vervolgens kunnen we in het venster "Inhoud" de volledige tekst plakken en een afkorting opgeven.
Merk op hoe we in de afbeelding hierboven ook via de % |, waar de cursor na uitbreiding moet worden geplaatst.
We hebben nu een directe link gemaakt tussen de tekenreeks, 'blockquote' en het bovenstaande HTML-fragment. De volgende stap is om te bepalen wanneer we willen dat de uitbreiding plaatsvindt. Er zijn een paar keuzes:
Persoonlijk geef ik de voorkeur aan het laatste; Anders kunnen incidentele uitbreidingen soms optreden wanneer u dit het minst verwacht. Als u de eerste methode kiest, raad ik u aan goed na te denken over hoe u uw afkortingen noemt; misschien helpt een speciale naamgevingsconventie.
Als u een scheidingsteken wilt instellen, kiest u 'Voorkeuren -> Afkortingen uitvouwen' en kiest u de optie die het beste bij u past.
Nu, probeer het! Open een tekst- of code-editor, typ 'blockquote', gevolgd door het door u opgegeven scheidingsteken (indien aanwezig) en kijk hoe het onmiddellijk wordt uitgevouwen tot het HTML-fragment, terwijl u de cursor op de juiste locatie plaatst.
Uitstekend! Zeer nuttig - maar we kunnen meer doen.
Laten we ons voor onze volgende truc voorstellen dat je blog specifieke opmaak vereist wanneer je afbeeldingen toevoegt. Misschien moet er een bijschrift zijn, of misschien moet het worden omringd door een div - net zoals wij dat doen op Nettuts+.
Het enige probleem is dat het een pijn is om elke keer handmatig te schrijven. TextExpander om te redden!
Maak een nieuw fragment, geef het een afkorting van 'tutimage' en plak het in:
Dit ziet er een beetje angstaanjagend uit, maar TextExpander zal je helpen met de details. Ten eerste gaat de uitbreiding ervan uit dat de bron van de afbeelding op uw klembord is geplakt. Wanneer u vervolgens 'tutimage' typt, wordt de inhoud van uw klembord geplakt als de waarde van de src attribuut. Merk op waar we hebben toegevoegd % klembord? Je zult deze functie vaak gebruiken!
Maar hoe zit het met dat verwarrend alt attribuutgedeelte? We kunnen deze logica in drie delen scheiden.
Als u zich echter zorgen maakt dat dit moeilijk te onthouden is, kan TextExpander de gegevens automatisch voor u invullen.
Wanneer u nu een nieuw blogbericht maakt, kopieert u de bron van de afbeelding naar uw klembord en typt u 'tutimage'. Omdat we hebben gekozen voor de alt tekst die moet worden ingevuld, wordt een pop-upvenster weergegeven.
Ofwel blijf bij de standaard en druk op invoeren, of stel een aangepaste waarde in voor het attribuut. Zodra u op drukt invoeren, het volgende fragment wordt toegevoegd aan je editor:
Nifty! Deze truc is vooral handig wanneer u bijvoorbeeld de bron van een afbeelding kopieert van Amazon S3.
Niet dat we van e-mails van formulieren genieten (we haten ze eigenlijk), maar er zijn slechts zoveel uren per dag. Soms is het het gemakkelijkst om in een sjabloon te plakken en op 'Verzenden' te klikken. Laten we in plaats daarvan het beste van beide werelden halen. We gebruiken een sjabloon, maar personaliseren deze voor elke persoon.
Maak een nieuw fragment, geef het een afkorting van 'factuur' en voeg het toe:
Hé,% filltext: naam = persoon%, Heel erg bedankt voor je werk. Houd er rekening mee dat ik een factuur voor deze e-mail heb bijgevoegd voor $% filltext: name = amount%. Laat me weten of je nog andere vragen hebt,% filltext: name = person%! Nogmaals bedankt! UW NAAM
Merk allereerst op hoe we twee 'filltext'-commando's hebben toegevoegd met dezelfde identifier:' person '. Omdat de waarde voor elk identiek moet zijn, wordt de naam automatisch toegevoegd aan de tweede instantie wanneer we een naam voor de eerste invulling toepassen..
We hebben ook een invulling ingesteld voor het bedrag van de factuur.
Wanneer we nu 'factuur' typen, samen met het scheidingsteken, zien we:
Dit zijn eenvoudige gemakken, maar al snel zorgen dit voor een enorme tijdwinst in de loop van een jaar.
Misschien bent u een trouwe Vim-gebruiker en wilt u graag gebruik maken van een aantal van die nuttige toetsenbordopdrachten in de browser - misschien bij het maken van een nieuw blogbericht.
Ons doel is: wanneer we een stukje tekst kopiëren en "s" typen (voor "surround"), wordt die tekst dan omgeven door een HTML-tag. Laten we het laten gebeuren!
Maak een nieuw fragment, stel de afkorting in op "s" en voeg toe:
<%filltext:name=Tag Name:default=strong%>% klembord
Belangrijk: om ervoor te zorgen dat dit correct werkt, moet je ervoor zorgen dat je "Abandon Delimiter" kiest in Voorkeuren. Anders behoudt de uitbreiding de
tab.
Nogmaals, wat we hier hebben is echt heel simpel. We laten de gebruiker opgeven wat de tagnaam zal zijn (een standaardwaarde van sterk), en dan stellen we de inhoud van het klembord binnen de tags in.
Om het uit te proberen, selecteer wat tekst in uw code-editor, kopieer het met Besturing / Command + C, en typ dan s + tab.
Zodra u een tagnaam hebt opgegeven, drukt u op invoeren, en de geselecteerde tekst wordt nu omgeven door de aangewezen HTML-tag.
Oké, oké - het is een beetje een gimmick; maar het werkt!
Je haat ze net zo als ik; Maak een label, stel de voor attribuut, stel de tekst in, maak het formulier aan invoer, stel de waarde, naam, en ID kaart velden. Het kost allemaal veel tijd. Laten we dit oplossen met behulp van een afkorting van 'forminput'.
Denk eraan: u hoeft dit woord niet letterlijk in te voeren; TextExpander biedt de benodigde menu's om het proces zo eenvoudig mogelijk te maken.
Wanneer we nu typen, "forminput", krijgen we:
Als je erover nadenkt, is er veel dubbele tekst bij het maken labels en vorm invoers. Daarom kan deze techniek zo nuttig zijn. Stel de eerste in voor attribuutwaarde, en die tekst wordt automatisch toegepast als de labelde tekst, en de invoer's naam en ID kaart waarde.
Nu eindigen we met:
Zo veel gemakkelijker!
Teruggaand naar die vorige truc kunnen er soms momenten zijn dat we geen wrappinglijstitem nodig hebben voor de label en invoer. Laten we het fragment bijwerken om deze facultatief te maken, met behulp van een 'Optioneel gedeelte'.
Verwijder het wrappinglijstitem en kies 'Fill-ins -> Optioneel gedeelte'.
De sleutel is om beide te maken en onderdelen optioneel, maar geef ze beide dezelfde naam, zodat het selectievakje voor de schakeling van invloed is op beide.
Hier is de gegenereerde output:
% fillpart: name = Wrapping List Item?: default = yes%
Deze keer, wanneer u "formulierinvoer" activeert, hebt u de mogelijkheid om het wrappinglijstitem uit te sluiten.
Mac-gebruikers: we zijn allemaal geïrriteerd door het feit dat er geen eenvoudige manier is om een leeg nieuw bestand te maken. Wel, hier is een kleine truc. Zelfs als u niet in een teksteditor typt, luistert TextExpander nog steeds.
Nog beter: we kunnen ook Shell-scripts en AppleScripts uitvoeren in TextExpander!
Waar ga ik heen? Laten we een snelkoppeling van "bestand" toewijzen, die een nieuw bestand op het bureaublad zal maken wanneer het wordt geactiveerd.
Deze keer kiest u bovenaan in het inhoudvenster 'Shell Script' en plakt u het volgende:
#! / bin / bash cd ~ / Desktop touch% filltext: naam = bestandsnaam: default = index.html%
De eerste regel is standaard voor shell-scripts en verwijst naar Bash. Vervolgens, zoals u zou doen in de Terminal, CD naar het bureaublad en maak een nieuw bestand aan met behulp van de aanraken commando.
Dat is het; probeer het! Overal op uw bureaublad (zelfs buiten een teksteditor) typt u 'bestand' samen met het scheidingsteken dat u hebt opgegeven. Er verschijnt een dialoogvenster met een standaardwaarde van index.html; Zodra je op enter tikt, is het nieuwe bestand gemaakt!
Het probleem met talen, zoals Markdown, is dat we afhankelijk worden van hen. Als ik gedwongen word om gewone HTML te schrijven, of dat nu in een browser of een Word-processor is, denk ik in stilte aan gemene gedachten. Wat als we zouden kunnen vasthouden aan dezelfde gemakken die Markdown biedt, terwijl HTML nog steeds wordt geproduceerd? Dat kunnen we - met een beetje bedrog.
Laten we eens kijken naar het gebruik van code in Github-stijl.
"php echo 'wat code';"
Laten we een afkorting maken, ", die zal uitbreiden naar wat HTML vereist is om syntax-markering voor uw code weer te geven. Voor Nettuts + gebruiken we [Language] CODE [/ taal], maar je platform zou kunnen gebruiken pre -tags. Laten we voor de laatste methode zorgen.
Plak in:
% |
En dat is het! Typ nu ", vul de gewenste taal in en de benodigde HTML wordt uitgevoerd. Spoel en herhaal voor alle andere Markdown-functies die u gebruikt.
Een groot deel van de beginfase van het maken van websites is het instellen van plaatsaanduidingen, ongeacht of dit de generieke tekst 'lorem ipsum' is of tijdelijke aanduidingen voor afbeeldingen.
Het deel "Lorem ipsum" zal een makkie worden. Laten we dat op dit moment kloppen.
Voordat we dit doen, is het echter belangrijk dat u een systeem gebruikt, zodat u deze snelkoppelingen kunt onthouden. Voor mijn projecten volgen alle tijdelijke fragmenten een naamgevingsconventie: het woord 'plaats' en de naam van het fragment.
Dus, om een enkele paragraaf van "lorem ipsum" -tekst te plaatsen, zou ik een afkorting van "placelorem1" gebruiken. En, voor twee alinea's, "placelorem2." Als ik in plaats daarvan een afbeelding voor placeholder voeg, is de juiste afkorting 'place image'.
Nou dat was makkelijk. Spoel en herhaal voor zoveel paragrafen als je nodig hebt.
Voor placeholder-afbeeldingen maken we gebruik van de uitstekende service Placehold.it. Het enige probleem is dat ik vaak vergeet wat de juiste URL is. Als we in plaats daarvan TextExpander gebruiken, wordt dat een non-issue.
Hoewel we een standaardafbeeldingsgrootte van 350 x 150 hebben ingesteld, kunt u met het pop-upmenu indien nodig die instelling overschrijven. Nu kunnen we binnen enkele seconden tijdelijke afbeeldingen aan onze projecten toevoegen.
Als u denkt aan de vorige placeholder-tip, zijn er veel van hen op het gebied van beeldservices! Waarom passen we 'place image' niet aan, zodat de gebruiker in plaats daarvan een keuze kan maken uit verschillende keuzes. Vanaf TextExpander v4 is dit nu mogelijk.
Naast enkele regelinvoervelden biedt TextExpander ook een aantal andere, waaronder een pop-upmenu.
Dit stelt ons in staat om een vervolgkeuzelijst van potentiële fill-ins te bieden.
Hierboven heb ik gewoon de juiste URL's geplakt voor verschillende placeholder-services.
En nu, wanneer we 'place image' activeren, krijgen we:
Zo cool! Alles wat me in staat stelt minder te denken en sneller te werken, is een goede zaak.
Als je bent zoals ik, zelfs met een naamgevingssysteem, lekken soms onze hersenen, en we kunnen niet achterhalen wat we een bepaald fragment hebben genoemd. TextExpander biedt een aantal handige sneltoetsen voor het voorstellen van fragmenten, het maken van nieuwe en nog veel meer.
Dit is wat ik heb ingesteld voor de twee die ik het vaakst gebruik.
Nu, als ik me niet kan herinneren wat ik een bepaald fragment heb genoemd, druk ik op Optie + Command + s ("s" voor suggestie), en nu kan ik ernaar zoeken. Als u meewerkt, typt u 'plaats' en bekijkt u vervolgens welke suggesties worden gepresenteerd.
Zodra u het juiste fragment hebt gevonden, drukt u op Commando samen met het juiste nummer en je fragment wordt geplakt.
Ik beschouw TextExpander als een van de power-house-apps in mijn ontwikkeltoolkit. Het kost maar een korte piek in de TextExpander Statistieken om te laten zien dat ik daardoor een waanzinnige hoeveelheid tijd heb bespaard. Probeer het eens als je dat niet hebt; Nettuts + geeft het een grote duim omhoog!
Opmerking van de uitgever: deze tutorial werd gesponsord door Smile Software.
Accentsconagua
