Share
For de ukjente er TextExpander en fantastisk produktivitetsapp for Mac som har potensial til å spare deg hundrevis av timer i løpet av et år, og med den nyeste versjonen av versjon 4, er det nå bedre enn noensinne. Den grunnleggende ideen er enkel: la brukeren tilordne forkortelser, som vil bli utvidet til større tekststrenger. Men når du virkelig graver deg inn i appen, vil du oppdage hvor kraftig det kan være for webutviklere.
Sponset innholdDette er en sponset anmeldelse eller giveaway av et produkt / en tjeneste som er spesielt relevant for våre lesere.
Før vi graver inn i noen av de morsomme teknikkene, la oss først vurdere grunnleggende bruken for appen.
La oss si at du vil spare deg litt tid når du oppretter HTML. Snarere enn å skrive manuelt:
... du vil i stedet bare skrive inn blockquote, og få den teksten til å utvide til HTML-kodebiten ovenfor. I TextExpander, det er en cinch.
Vi begynner med å lage en ny utdrag.
Deretter kan vi i innholdsvinduet lime inn i fulltekst og angi en forkortelse.
Legg merke til hvordan, i bildet ovenfor, vi også spesifisert, via % |, hvor markøren skal plasseres etter utvidelse.
Vi har nå opprettet en direkte kobling mellom strengen, "blockquote" og HTML-koden ovenfor. Det neste trinnet er å bestemme når vi vil at utvidelsen skal skje. Det er et par valg:
Personlig foretrekker jeg sistnevnte; ellers kan tilfeldigvis utilsiktede utvidelser oppstå når du minst forventer det. Hvis du velger den første metoden, oppfordrer jeg deg til å tenke klokt om hvordan du kaller dine forkortelser; kanskje en spesiell navngivningskonvensjon vil hjelpe.
For å angi en avgrensare, velg "Innstillinger -> Utvid forkortelser", og velg det alternativet som passer best for dine behov.
Nå, prøv det! Åpne en tekst- eller koderedigerer, skriv "blockquote", etterfulgt av din angitte delimiter (hvis noen), og se den øyeblikkelig utvide til HTML-fragmentet mens du plasserer markøren på riktig sted.
Utmerket! Veldig hjelpsom - men vi kan gjøre mer.
For vårt neste triks, la oss forestille oss at bloggen din krever spesifikk formatering når du legger til bilder. Kanskje det må være en bildetekst, eller kanskje det burde være omgitt av a div - mye som vi gjør på nettuts+.
Det eneste problemet er at dette er en smerte å skrive manuelt hver gang. TextExpander til redning!
Opprett en ny utdrag, gi den en forkortelse av "tutimage" og lim inn:
Dette ser litt skummelt ut, men TextExpander vil hjelpe deg med detaljene. For det første antar utvidelsen at du har kilden til bildet limt inn i utklippstavlen. Da, når du skriver "tutimage", vil det lime inn innholdet i utklippstavlen som verdien av src Egenskap. Legg merke til hvor vi la til % utklippstavlen? Du bruker denne funksjonen ofte!
Men hva med det forvirrende alt attributt seksjon? Vi kan skille denne logikken i tre deler.
Men hvis du bekymrer deg for at dette blir vanskelig å huske, kan TextExpander automatisk fylle ut dataene for deg.
Nå, når du lager et nytt blogginnlegg, kopier du bare kilden til bildet i utklippstavlen, og skriv deretter "tutimage". Fordi vi valgte for alt Tekst som skal fylles inn, vises en popup-dialog.
Du kan enten stave med standard og trykke Tast inn, eller angi en egendefinert verdi for attributtet. Når du trykker på Tast inn, Følgende utdrag vil bli lagt til redaktøren din:
Kjekk! Dette trikset er spesielt nyttig når du for eksempel kopierer et bildes kilde fra Amazon S3.
Det er ikke at vi liker form e-post (faktisk vi hater dem), men det er bare så mange timer på en dag. Noen ganger er det enklest å lime inn i en mal, og klikk "Send". La oss få det beste fra begge verdener i stedet. Vi bruker en mal, men tilpasser den for hver person.
Opprett en ny utdrag, gi den en forkortelse av "faktura", og legg til:
Hei,% filltext: name = person%, Takk så mye for bedriften din. Vær oppmerksom på at jeg har vedlagt en faktura til denne e-posten for $% filltext: name = amount%. Gi meg beskjed hvis du har andre spørsmål,% filltext: name = person%! Takk igjen! NAVNET DITT
Merk først på hvordan vi har lagt til to kommandoer med "filltext" som har samme identifikator: "person". Fordi verdien for hver skal være identisk, når vi bruker et navn for den første innfyllingen, blir den automatisk lagt til den andre forekomsten også.
Vi har også angitt en utfylling for fakturaen.
Nå, når vi skriver "faktura" sammen med avgrenseren, ser vi:
Disse er enkle bekvemmeligheter, men legger raskt opp til store besparelser i løpet av et år.
Kanskje du er en trofast Vim-bruker, og vil gjerne dra nytte av noen av de nyttige tastaturkommandoene i nettleseren - kanskje når du oppretter et nytt blogginnlegg.
Målet vårt er: Når vi kopierer litt tekst og skriver "s" (for "surround"), blir teksten omgitt av en HTML-kode. La oss få det til å skje!
Opprett en ny utdrag, sett forkortelsen til "s", og legg til:
<%filltext:name=Tag Name:default=strong%>% utklippstavlen
Viktig: For at dette skal fungere riktig, må du sørge for at du velger "Abandon Delimiter" i Innstillinger. Ellers vil utvidelsen beholde
Tab.
Igjen, det vi har her er veldig veldig enkelt. Vi lar brukeren spesifisere hva merkenavnet vil være (en standard på sterk), og deretter setter vi innholdet av utklippstavlen i merkene.
For å prøve det, velg litt tekst i kodeditoren, kopier den med Kontroll / kommando + C, og skriv deretter inn s + Tab.
Når du har angitt et tagnavn, trykker du på Tast inn, og den valgte teksten vil nå være omgitt av den angitte HTML-taggen.
Ok, ok, det er litt av en gimmick; men det fungerer!
Du hater dem så mye som jeg gjør; lage en merkelapp, sett til attributt, sett inn teksten, opprett skjemaet inngang, sett verdi, Navn, og id Enger. Det er alt veldig tidkrevende. La oss fikse det ved å bruke en forkortelse av "forminput".
Husk: du trenger ikke å skrive inn dette oversatt; TextExpander vil gi de nødvendige menyene for å gjøre prosessen så enkelt som mulig.
Nå, når vi skriver, "forminput", får vi:
Hvis du tenker på det, er det mye duplisert tekst når du lager merkelapps og skjema inngangs. Derfor kan denne teknikken være så nyttig. Sett den første til attributt verdi, og den teksten blir automatisk brukt som merkelapps tekst, og inngang's Navn og id verdi.
Nå slutter vi med:
Så mye enklere!
Hvis du går tilbake til det forrige trikset, kan det være tider når vi ikke trenger et innpakningsliste for merkelapp og inngang. La oss oppdatere koden for å gjøre de valgfrie, ved hjelp av en "Valgfri seksjon."
Slett pakningslisten, og velg "Fyll-ins -> Valgfri seksjon."
Nøkkelen er å lage begge og deler valgfritt, men gi dem begge samme navn, slik at vekselspenningen påvirker begge deler.
Her er den genererte produksjonen:
% fillpart: name = Wrapping List Item?: standard = ja%
Denne gangen, når du utløser "forminput", har du muligheten til å ekskludere pakkelisten.
Mac-brukere: Vi er alle irritert av det faktum at det ikke er noen enkel måte å lage en tom ny fil på. Vel, her er et lite triks. Selv om du ikke skriver inn et tekstredigeringsprogram, lytter TextExpander fortsatt.
Enda bedre: Vi kan også utføre Shell-skript og AppleScripts i TextExpander!
Få hvor jeg skal hen? La oss tilordne en snarvei med "fil", som vil opprette en ny fil på skrivebordet når den utløses.
Denne gangen, i innholdsvinduet øverst, velg "Shell Script," og lim inn følgende:
#! / bin / bash cd ~ / Desktop touch% filltext: name = filnavn: default = index.html%
Den første linjen er standard for shell-skript, og peker på Bash. Neste, som du ville gjøre i terminalen, cd til skrivebordet, og opprett en ny fil ved å bruke ta på kommando.
Det er det; Prøv det! Overalt på skrivebordet (selv utenfor tekstredigeringsprogrammet), skriv "fil" sammen med avgrenseren du angav. En dialogboks vil popup, med en standard på index.html; Når du har slått inn, har den nye filen blitt opprettet!
Problemet med språk, som Markdown, er at vi blir avhengige av dem. Når jeg blir tvunget til å skrive vanlig HTML, enten det er i en nettleser eller en tekstbehandler, tenker jeg stille tanker. Hva om vi kunne holde med samme bekvemmeligheter som Markdown tilbyr, mens du fremdeles straks sender HTML ut? Vi kan - med litt trickery.
La oss vurdere bruk av Github-stilkode.
"php echo" noen kode ";"
La oss lage en forkortelse, ", som vil utvide til hva som helst HTML er nødvendig for å vise syntaksutheving for koden din. For Nettuts +, bruker vi [Språk] KODE [/ språk], men plattformen din kan bruke pre tags. La oss ta vare på sistnevnte metode.
Lim inn:
% |
Og det er det! Skriv nå ", fyll inn ønsket språk, og den nødvendige HTML vil bli sendt ut. Skyll og gjenta for alle de andre Markdown-funksjonene du bruker.
En stor del i begynnelsen av å skape nettsteder er å sette plassholdere, enten det er den generiske "lorem ipsum" -teksten eller bildet plassholdere.
"Lorem ipsum" -delen vil være en cinch. La oss slå det ut akkurat nå.
Før vi gjør det, er det imidlertid viktig at du vedtar et system, slik at du kan huske disse snarveiene. For mine prosjekter følger alle stedholderutdrag en navngivningskonvensjon: ordet "sted" og navnet på utdraget.
Så, for å plassere et enkelt avsnitt av "lorem ipsum" -tekst, ville jeg bruke en forkortelse av "placelorem1". Og for to avsnitt, "placelorem2." Hvis jeg i stedet legger til et plassholderbilde, vil den riktige forkortelsen være "plassering".
Vel det var lett. Skyll og gjenta for så mange avsnitt som du trenger.
For plassholderbilder vil vi dra nytte av den utmerkede Placehold.it-tjenesten. Det eneste problemet er at jeg ofte glemmer hva den riktige nettadressen er. Hvis vi i stedet bruker TextExpander, blir det et ikke-problem.
Selv om vi har satt en standardbilde på 350x150, vil popup-menyen tillate deg å overstyre denne innstillingen, om nødvendig. Nå kan vi legge til plassholderbilder til våre prosjekter i løpet av få sekunder.
Hvis du tenker på forrige plassholder tips, når det gjelder bildetjenester, er det mange av dem! Hvorfor endrer vi ikke "plassering" slik at brukeren i stedet kan velge mellom en rekke valg. Som av TextExpander v4 er dette nå mulig.
I tillegg til enkeltlinje-utfyllinger, tilbyr TextExpander også noen få andre, inkludert en popup-meny.
Dette gir oss mulighet til å gi en rullegardinliste over potensielle utfyllelser.
Ovenfor klistret jeg rett inn på de riktige nettadressene for flere forskjellige stedholdertjenester.
Og nå, når vi utløser "plassering", får vi:
Så kult! Alt som gjør at jeg kan tenke mindre, og jobbe raskere, er en god ting.
Hvis du er som meg, selv med et navngivningssystem på plass, noen ganger lekker vår hjerne, og vi kan ikke finne ut hva vi heter en bestemt utdrag. TextExpander tilbyr noen nyttige hurtigtaster for å foreslå snippets, lage nye, og mer.
Her er det jeg har satt for de to som jeg bruker oftest.
Nå, hvis jeg ikke kan huske hva jeg ringte en bestemt utgave, trykker jeg på Alternativ + Kommando + s ("s" for å foreslå), og nå kan jeg søke etter det. Hvis du jobber sammen, skriv inn "plass" og se hvilke forslag det presenterer.
Når du har funnet riktig utdrag, trykker du på Kommando sammen med det riktige nummeret, og koden din blir limt inn.
Jeg anser TextExpander å være en av krafthusene i utviklingsverktøyet mitt. Det tar bare en rask topp på TextExpander-statistikkene for å vise at jeg har reddet en vanvittig tid som et resultat. Gi det en prøve hvis du ikke har det; Nettuts + gir det en stor tommelen opp!
Redaktørens notat: denne veiledningen ble sponset av Smile Software.
Accentsconagua
