Share
Per chi non ha familiarità, TextExpander è una fantastica app per la produttività per Mac che ha il potenziale per farti risparmiare centinaia di ore nel corso di un anno e, con l'ultima versione della Versione 4, è ora migliore che mai. L'idea di base è semplice: consentire all'utente di assegnare le abbreviazioni, che saranno estese a stringhe di testo più grandi. Ma, una volta che hai esplorato l'app, scoprirai quanto può essere potente per gli sviluppatori web.
Contenuto sponsorizzatoQuesta è una recensione sponsorizzata o omaggio di un prodotto / servizio che è particolarmente rilevante per i nostri lettori.
Prima di approfondire alcune delle tecniche più divertenti, esaminiamo innanzitutto l'utilizzo di base per l'app.
Diciamo che vuoi risparmiare un po 'di tempo, quando crei l'HTML. Invece di digitare manualmente:
... tu invece vuoi semplicemente entrare blockquote, e lascia che il testo si espandi allo snippet HTML sopra. In TextExpander, è un gioco da ragazzi.
Iniziamo creando un nuovo frammento.
Successivamente, all'interno della finestra "Contenuto", possiamo incollare il testo completo e specificare un'abbreviazione.
Notate come, nell'immagine sopra, abbiamo anche specificato, tramite il % |, dove il cursore dovrebbe essere posizionato dopo l'espansione.
Abbiamo ora creato un collegamento diretto tra la stringa "blockquote" e lo snippet HTML sopra. Il prossimo passo è determinare quando vogliamo che si verifichi l'espansione. Ci sono un paio di scelte:
Personalmente, preferisco quest'ultimo; altrimenti, occasionalmente, si potrebbero verificare espansioni accidentali quando meno te lo aspetti. Se scegli il primo metodo, ti incoraggio a pensare saggiamente al modo in cui dai il nome alle tue abbreviazioni; forse una convenzione di denominazione speciale aiuterà.
Per impostare un delimitatore, seleziona "Preferenze -> Espandi abbreviazioni" e scegli l'opzione più adatta alle tue esigenze.
Ora provalo! Apri un editor di testo o di codice, digita "blockquote", seguito dal delimitatore specificato (se presente) e guardalo espandersi immediatamente nel frammento HTML, posizionando il cursore nella posizione corretta.
Eccellente! Molto utile - ma possiamo fare di più.
Per il nostro prossimo trucco, immaginiamo che il tuo blog richieda una formattazione specifica, quando aggiungi immagini. Forse ci deve essere una didascalia, o forse dovrebbe essere circondata da un div - molto come facciamo su Nettuts+.
L'unico problema è che questo è un dolore da scrivere manualmente ogni volta. TextExpander in soccorso!
Crea un nuovo snippet, dagli un'abbreviazione di "tutimage" e incolla in:
Questo sembra un po 'spaventoso, ma TextExpander ti aiuterà con le specifiche. Innanzitutto, l'espansione assumerà che tu abbia la fonte dell'immagine incollata negli appunti. Quindi, quando si digita "tutimage", verrà incollato il contenuto degli appunti come valore di src attributo. Nota dove abbiamo aggiunto % appunti? Utilizzerai spesso questa funzione!
Ma che dire di questo confuso alt sezione attributo? Possiamo separare questa logica in tre parti.
Tuttavia, se ti preoccupi che ciò sia difficile da ricordare, TextExpander può compilare automaticamente i dati per te.
Ora, quando crei un nuovo post sul blog, copia semplicemente la fonte dell'immagine nei tuoi appunti, quindi digita "tutimage". Perché abbiamo scelto per il alt testo da compilare, verrà visualizzata una finestra di dialogo a comparsa.
O rispetta il valore predefinito e premi accedere, o impostare un valore personalizzato per l'attributo. Una volta premuto accedere, il seguente frammento verrà aggiunto al tuo editor:
Nifty! Questo trucco è particolarmente utile quando, ad esempio, si copia la sorgente di un'immagine da Amazon S3.
Non è che ci piacciono le email (infatti, le odiamo), ma ci sono solo tante ore al giorno. A volte, è più semplice incollare un modello e fare clic su "Invia". Prendiamo il meglio da entrambi i mondi. Useremo un modello, ma lo personalizzeremo per ogni persona.
Crea un nuovo snippet, dagli un'abbreviazione di "fattura" e aggiungi:
Ehi,% filltext: name = person%, Grazie mille per la tua attività. Si noti che ho allegato una fattura a questa email per $% filltext: name = amount%. Fatemi sapere se avete altre domande,% filltext: name = person%! Grazie ancora! IL TUO NOME
Innanzitutto, nota come abbiamo aggiunto due comandi "filltext" con lo stesso identificativo: "persona". Poiché il valore di ciascuno deve essere identico, quando applichiamo un nome per il primo fill-in, esso verrà automaticamente aggiunto anche alla seconda occorrenza.
Abbiamo anche impostato una compilazione per l'importo della fattura.
Ora, quando digitiamo "fattura", insieme al delimitatore, vedremo:
Si tratta di comodità semplici, ma si sommano rapidamente a enormi risparmi di tempo nel corso di un anno.
Forse sei un utente Vim fedele e vorresti approfittare di alcuni di questi utili comandi da tastiera nel browser - forse, quando crei un nuovo post sul blog.
Il nostro obiettivo è: quando copiamo un po 'di testo e digitiamo "s" (per "surround"), quel testo sarà quindi circondato da un tag HTML. Facciamolo accadere!
Crea un nuovo snippet, imposta l'abbreviazione su "s" e aggiungi:
<%filltext:name=Tag Name:default=strong%>% appunti
Importante: affinché funzioni correttamente, assicurati di scegliere "Abbandona il delimitatore" in Preferenze. Altrimenti, l'espansione manterrà il
linguetta.
Di nuovo, quello che abbiamo qui è davvero molto semplice. Lasciamo all'utente specificare quale sarà il nome del tag (un valore predefinito di forte), e quindi impostiamo il contenuto degli Appunti all'interno dei tag.
Per provarlo, seleziona del testo nel tuo editor di codice, copialo con Controllo / Comando + C, e quindi digitare S + linguetta.
Una volta specificato il nome di un tag, premere accedere, e il testo selezionato verrà ora circondato con il tag HTML designato.
Ok, okay: è un po 'un trucco; ma funziona!
Li odi tanto quanto me; creare un etichetta, impostare il per attributo, imposta il testo, crea il modulo ingresso, impostare il valore, nome, e id campi. È tutto molto tempo. Risolviamolo, usando un'abbreviazione di "forminput".
Ricorda: non devi inserire questo testuale; TextExpander fornirà i menu necessari per rendere il processo il più semplice possibile.
Ora, quando digitiamo "forminput", otteniamo:
Se ci pensi, c'è un sacco di testo duplicato, durante la creazione etichettas e forma ingressoS. Ecco perché questa tecnica può essere così utile. Imposta il primo per valore attributo e quel testo verrà automaticamente applicato come etichettaIl testo e il ingresso'S nome e id valore.
Ora, finiamo con:
Molto più facile!
Tornando a quel trucco precedente, potrebbero esserci momenti in cui non abbiamo bisogno di un elemento della lista di wrapping per il etichetta e ingresso. Aggiorniamo lo snippet per renderlo facoltativo, utilizzando una "Sezione facoltativa".
Elimina l'elemento della lista di wrapping e scegli "Fill-in -> Sezione facoltativa".
La chiave è rendere entrambi i e parti opzionali, ma dare loro entrambi lo stesso nome, in modo che il segno di spunta agisca su entrambi.
Ecco l'output generato:
% fillpart: name = Wrapping List Item?: default = yes%
Questa volta, quando attivi "forminput", avrai la possibilità di escludere l'elemento della lista di wrapping.
Utenti Mac: siamo tutti irritati dal fatto che non esiste un modo semplice per creare un nuovo file vuoto. Bene, ecco un piccolo trucco. Anche se non stai scrivendo in un editor di testo, TextExpander è ancora in ascolto.
Ancora meglio: possiamo anche eseguire script di shell e AppleScript in TextExpander!
Vai dove sto andando qui? Assegniamo un collegamento a "file", che creerà un nuovo file sul desktop quando attivato.
Questa volta, nella finestra del contenuto, in alto, seleziona "Shell Script" e incolla quanto segue:
#! / bin / bash cd ~ / Desktop touch% filltext: name = nome file: default = index.html%
La prima riga è standard per gli script di shell e punta a Bash. Quindi, come faresti nel Terminale, CD al desktop e creare un nuovo file, usando il toccare comando.
Questo è tutto; Provalo! Ovunque sul desktop (anche al di fuori di un editor di testo), digitare "file" insieme al delimitatore specificato. Apparirà una finestra di dialogo, con un valore predefinito di index.html; una volta premuto Invio, il nuovo file è stato creato!
Il problema con le lingue, come Markdown, è che diventiamo dipendenti da loro. Quando sono costretto a scrivere HTML normale, che si tratti di un browser o di un elaboratore di testi, penso silenziosamente a pensieri mediocri. Cosa succederebbe se potessimo mantenere le stesse comodità che offre Markdown, mentre emettiamo immediatamente l'HTML? Possiamo - con un po 'di inganno.
Consideriamo l'uso del codice in stile Github.
"php echo 'un codice';"
Creiamo un'abbreviazione, ", che si espanderà a qualsiasi HTML è richiesto per visualizzare l'evidenziazione della sintassi per il codice. Per Nettuts +, usiamo [Lingua] CODICE [/ lingua], ma la tua piattaforma potrebbe usare pre tag. Prendiamoci cura di quest'ultimo metodo.
Incolla in:
% |
E questo è tutto! Ora, digita ", inserisci la lingua desiderata e verrà visualizzato l'HTML necessario. Risciacqua e ripeti per tutte le altre funzioni di Markdown che usi.
Una parte importante nelle fasi iniziali della creazione di siti Web è l'impostazione di segnaposto, che si tratti del testo generico "lorem ipsum" o di segnaposto immagine.
La parte "lorem ipsum" sarà un gioco da ragazzi. Buttiamolo fuori adesso.
Prima di farlo, però, è importante adottare un sistema, in modo che tu possa ricordare queste scorciatoie. Per i miei progetti, tutti gli snippet di segnaposto seguono una convenzione di denominazione: la parola "luogo" e il nome dello snippet.
Quindi, per inserire un singolo paragrafo del testo "lorem ipsum", utilizzerei un'abbreviazione di "placelorem1". E, per due paragrafi, "placelorem2". Se invece aggiungo un'immagine segnaposto, l'abbreviazione corretta sarebbe "placeimage".
Bene, è stato facile. Risciacquare e ripetere per tutti i paragrafi necessari.
Per le immagini segnaposto, trarremo vantaggio dall'eccellente servizio di Placehold.it. L'unico problema è che spesso dimentico qual è l'URL corretto. Se invece usiamo TextExpander, diventa un non-problema.
Mentre abbiamo impostato una dimensione dell'immagine predefinita di 350x150, il menu popup ti consentirà di ignorare questa impostazione, se necessario. Ora, possiamo aggiungere immagini segnaposto ai nostri progetti in pochi secondi.
Se pensi al suggerimento del segnaposto precedente, quando si tratta di servizi di immagini, ce ne sono molti! Perché non modifichiamo "placeimage" in modo che l'utente possa selezionare da una varietà di scelte. A partire da TextExpander v4, questo è ora possibile.
Oltre ai fill-in single-line, TextExpander ne offre anche altri, incluso un menu a comparsa.
Questo ci consente di fornire un elenco a discesa di potenziali riempimenti.
Sopra, ho semplicemente incollato gli URL corretti per diversi servizi segnaposto.
E, ora, quando attiviamo "placeimage", otteniamo:
Così bello! Qualunque cosa mi permetta di pensare meno, e lavorare più velocemente è una buona cosa.
Se sei come me, anche con un sistema di denominazione, a volte il nostro cervello perde, e non riusciamo a capire cosa abbiamo chiamato un particolare frammento. TextExpander offre alcuni utili tasti di scelta rapida per suggerire snippet, crearne di nuovi e altro ancora.
Ecco cosa ho impostato per i due che uso più frequentemente.
Ora, se non riesco a ricordare quello che ho chiamato un particolare frammento, premo Opzione + Comando + s ("s" per suggerire), e ora posso cercarlo. Se stai lavorando, digita "luogo" e poi vedi quali suggerimenti presenta.
Una volta trovato lo snippet corretto, premere Comando insieme al numero corretto e il tuo frammento verrà incollato.
Considero TextExpander come una delle app power-house nel mio toolkit di sviluppo. Ci vuole solo un rapido picco su TextExpander Stats per mostrare che ho salvato una quantità folle di tempo come risultato. Fai un tentativo se non l'hai fatto; Nettuts + dà un grande pollice in alto!
Nota dell'editore: questo tutorial è stato sponsorizzato da Smile Software.
Accentsconagua
