Para aquellos que no están familiarizados, TextExpander es una fantástica aplicación de productividad para Mac que tiene el potencial de ahorrarle cientos de horas en el transcurso de un año y, con la última versión de la Versión 4, ahora es mejor que nunca. La idea básica es simple: permite al usuario asignar abreviaturas, que se expandirán a cadenas de texto más grandes. Pero, una vez que realmente profundices en la aplicación, descubrirás lo poderoso que puede ser para los desarrolladores web..
Contenido PatrocinadoEsta es una revisión patrocinada o un regalo de un producto / servicio que es particularmente relevante para nuestros lectores..
Antes de profundizar en algunas de las técnicas más divertidas, primero revisemos el uso básico de la aplicación..
Digamos que quieres ahorrarte un poco de tiempo al crear HTML. En lugar de escribir manualmente:
... en lugar de eso, simplemente quieres entrar blockquote, y que ese texto se expanda al fragmento HTML anterior. En TextExpander, eso es una cincha.
Comenzamos creando un nuevo fragmento..
A continuación, dentro de la ventana "Contenido", podemos pegar el texto completo y especificar una abreviatura.
Observe cómo, en la imagen de arriba, también especificamos, a través de % |, donde debe colocarse el cursor después de la expansión.
Ahora hemos creado un enlace directo entre la cadena "blockquote" y el fragmento de código HTML anterior. El siguiente paso es determinar cuándo queremos que se produzca la expansión. Hay un par de opciones:
Personalmente, prefiero este último; de lo contrario, ocasionalmente, pueden ocurrir expansiones accidentales cuando menos lo esperas. Si elige el primer método, lo aliento a que piense sabiamente cómo nombra sus abreviaturas; Tal vez una convención de nombres especial ayudará.
Para establecer un delimitador, elija "Preferencias -> Expandir abreviaturas" y elija la opción que mejor se adapte a sus necesidades.
Ahora, ¡pruébalo! Abra un editor de texto o código, escriba "blockquote", seguido de su delimitador especificado (si corresponde), y observe cómo se expande instantáneamente al fragmento HTML, mientras coloca el cursor en la ubicación correcta.
¡Excelente! Muy útil, pero podemos hacer más..
Para nuestro próximo truco, imaginemos que su blog requiere un formato específico al agregar imágenes. Tal vez es necesario que haya un título, o tal vez debería estar rodeado por un div - al igual que hacemos en Nettuts+.
El único problema es que es un dolor escribir manualmente cada vez. TextExpander al rescate!
Crea un nuevo fragmento de código, dale una abreviatura de "tutimage" y pégalo en:
Esto parece un poco de miedo, pero TextExpander te ayudará con los detalles. Primero, la expansión asumirá que tienes la fuente de la imagen pegada en tu portapapeles. Luego, cuando escriba "tutimage", pegará el contenido de su portapapeles como el valor del src atributo. Note donde agregamos %portapapeles? Usarás esta característica a menudo!
Pero que hay de eso confuso alt sección de atributos? Podemos separar esta lógica en tres partes..
Sin embargo, si le preocupa que esto sea difícil de recordar, TextExpander puede llenar automáticamente los datos por usted..
Ahora, al crear una nueva publicación de blog, simplemente copie la fuente de la imagen en su portapapeles y luego escriba "tutimage". Porque elegimos para el alt texto a rellenar, se mostrará un diálogo emergente.
Quédate con el valor predeterminado y pulsa Entrar, o establecer un valor personalizado para el atributo. Una vez que presionas Entrar, El siguiente fragmento de código se agregará a su editor:
¡Hábil! Este truco es especialmente útil cuando, por ejemplo, se copia la fuente de una imagen desde Amazon S3..
No es que disfrutemos de correos electrónicos de forma (de hecho, los odiamos), pero solo hay tantas horas en un día. A veces, es más fácil pegar en una plantilla y hacer clic en "Enviar". Vamos a obtener lo mejor de ambos mundos en su lugar. Usaremos una plantilla, pero personalízala para cada persona..
Crea un nuevo fragmento de código, dale una abreviatura de "factura" y agrega:
Hola,% filltext: name = person%, Muchas gracias por su negocio. Tenga en cuenta que he adjuntado una factura a este correo electrónico para $% filltext: nombre = cantidad%. Avíseme si tiene alguna otra pregunta,% filltext: name = person%! ¡Gracias de nuevo! TU NOMBRE
Primero, observe cómo hemos agregado dos comandos 'filltext' que tienen el mismo identificador: "persona". Debido a que el valor para cada uno debe ser idéntico, cuando aplicamos un nombre para el primer relleno, también se agregará automáticamente a la segunda aparición..
También hemos establecido un relleno para el importe de la factura.
Ahora, cuando escribimos "factura", junto con el delimitador, veremos:
Estas son conveniencias simples, pero rápidamente suman enormes ahorros de tiempo en el transcurso de un año.
Tal vez usted sea un usuario fiel de Vim, y quiera aprovechar algunos de los útiles comandos de teclado en el navegador, tal vez, al crear una nueva publicación de blog..
Nuestro objetivo es: cuando copiamos un poco de texto y escribimos "s" (para "envolvente"), ese texto estará rodeado por una etiqueta HTML. Hagamos que suceda!
Cree un nuevo fragmento de código, establezca la abreviatura en "s" y agregue:
<%filltext:name=Tag Name:default=strong%>%portapapeles
Importante: para que esto funcione correctamente, asegúrese de elegir "Abandon Delimiter" dentro de las Preferencias. De lo contrario, la expansión conservará el
Lengüeta.
Una vez más, lo que tenemos aquí es realmente muy simple. Permitimos que el usuario especifique cuál será el nombre de la etiqueta (un valor predeterminado de fuerte), y luego establecemos el contenido del portapapeles dentro de las etiquetas.
Para probarlo, seleccione un texto en su editor de código, cópielo con Control / Comando + C, y luego escriba s + Lengüeta.
Una vez que especifique un nombre de etiqueta, pulse Entrar, y el texto seleccionado ahora estará rodeado por la etiqueta HTML designada.
Está bien, está bien, es un truco; pero funciona!
Los odias tanto como yo; crear un etiqueta, selecciona el para atributo, establecer el texto, crear el formulario entrada, selecciona el valor, nombre, y carné de identidad campos. Todo esto consume mucho tiempo. Vamos a arreglar eso, usando una abreviatura de "forminput".
Recuerda: no tienes que ingresar esto textualmente; TextExpander proporcionará los menús necesarios para que el proceso sea lo más fácil posible..
Ahora, cuando escribimos, "forminput", obtenemos:
Si lo piensas bien, hay una gran cantidad de texto duplicado, al crear etiquetas y forma entradas. Es por eso que esta técnica puede ser tan útil. Establecer la primera para valor de atributo, y ese texto se aplicará automáticamente como el etiquetael texto y el entradaes nombre y carné de identidad valor.
Ahora, terminamos con:
Mucho mas facil!
Volviendo a ese truco anterior, puede haber ocasiones en que no necesitemos un elemento de lista de ajuste para el etiqueta y entrada. Actualicemos el fragmento para que sean opcionales, utilizando una "Sección opcional".
Elimine el elemento de la lista de envoltura y elija "Rellenos -> Sección opcional".
La clave es hacer que tanto la y partes opcionales, pero déles a ambos el mismo nombre, para que la marca de verificación de conmutación afecte tanto.
Aquí está la salida generada:
% fillpart: name = Wrapping List Item?: default = yes%
Esta vez, cuando active "forminput", tendrá la opción de excluir el elemento de la lista de ajuste.
Usuarios de Mac: todos estamos molestos por el hecho de que no hay una manera fácil de crear un nuevo archivo vacío. Bueno, aquí hay un pequeño truco. Incluso si no estás escribiendo en un editor de texto, TextExpander sigue escuchando.
Aún mejor: también podemos ejecutar scripts de Shell y AppleScripts en TextExpander!
¿A dónde voy aquí? Asignemos un acceso directo de "archivo", que creará un nuevo archivo en el escritorio cuando se active.
Esta vez, dentro de la ventana de contenido, en la parte superior, elija "Shell Script" y pegue lo siguiente:
#! / bin / bash cd ~ / Desktop touch% filltext: name = nombre de archivo: default = index.html%
La primera línea es estándar para los scripts de shell y apunta a Bash. A continuación, como lo harías en la Terminal., discos compactos al escritorio, y cree un nuevo archivo, usando el toque mando.
Eso es; ¡Pruébalo! En cualquier lugar de su escritorio (incluso fuera de un editor de texto), escriba "archivo" junto con el delimitador que especificó. Aparecerá un cuadro de diálogo, con un valor predeterminado de index.html; Una vez que presionas Enter, el nuevo archivo ha sido creado.!
El problema con los idiomas, como Markdown, es que dependemos de ellos. Cuando me veo forzado a escribir HTML normal, ya sea en un navegador o en un procesador de textos, pienso silenciosamente pensamientos mezquinos. ¿Qué pasaría si pudiéramos seguir con las mismas conveniencias que ofrece Markdown, mientras seguimos generando HTML de manera inmediata? Podemos - con un poco de engaño.
Consideremos el uso del código de estilo Github.
"php echo 'algún código';"
Vamos a crear una abreviatura, ", que se expandirá a cualquier HTML requerido para mostrar el resaltado de sintaxis de su código. Para Nettuts +, utilizamos [idioma] CÓDIGO [/ idioma], pero tu plataforma podría usar pre etiquetas Cuidemos el último método..
Pegar en
% |
¡Y eso es! Ahora, escriba ", complete el idioma deseado y se generará el HTML necesario. Enjuague y repita para todas las otras funciones de Markdown que usa.
Una gran parte de las etapas iniciales de creación de sitios web es establecer marcadores de posición, ya sea el texto genérico "lorem ipsum" o los marcadores de imagen..
La parte de "lorem ipsum" será muy fácil. Vamos a eliminar eso ahora mismo.
Sin embargo, antes de que lo hagamos, es importante que adopte un sistema, para que pueda recordar estos accesos directos. Para mis proyectos, todos los fragmentos de marcadores de posición siguen una convención de denominación: la palabra "lugar" y el nombre del fragmento.
Por lo tanto, para colocar un solo párrafo del texto "lorem ipsum", usaría una abreviatura de "placelorem1". Y, para dos párrafos, "placelorem2". Si, en cambio, agrego una imagen de marcador de posición, la abreviatura correcta sería "placeimage".
Bueno, eso fue fácil. Enjuague y repita tantos párrafos como necesite.
Para las imágenes de marcador de posición, aprovecharemos el excelente servicio Placehold.it. El único problema es que a menudo olvido cuál es la URL correcta. Si en cambio usamos TextExpander, eso se convierte en un problema no.
Si bien hemos establecido un tamaño de imagen predeterminado de 350x150, el menú emergente le permitirá anular esa configuración, si es necesario. Ahora, podemos agregar imágenes de marcadores de posición a nuestros proyectos en segundos..
Si piensa en la sugerencia de marcador de posición anterior, cuando se trata de servicios de imagen, ¡hay muchos de ellos! ¿Por qué no modificamos "placeimage" para que el usuario pueda seleccionar entre una variedad de opciones? A partir de TextExpander v4, esto es ahora posible.
Además de los rellenos de una sola línea, TextExpander también ofrece algunos otros, incluido un menú emergente.
Esto nos permite proporcionar una lista desplegable de posibles rellenos.
Anteriormente, simplemente pegué las URL correctas para varios servicios de marcadores de posición diferentes.
Y ahora, cuando activamos "placeimage", obtenemos:
¡Muy guay! Cualquier cosa que me permita pensar menos y trabajar más rápido es algo bueno..
Si eres como yo, incluso con un sistema de nombres en su lugar, a veces nuestros cerebros se filtran, y no podemos averiguar cómo llamamos a un fragmento en particular. TextExpander ofrece algunas teclas rápidas útiles para sugerir fragmentos, crear nuevos y más.
Esto es lo que he establecido para los dos que uso con más frecuencia.
Ahora, si no puedo recordar lo que llamé un fragmento particular, presiono Opción + Comando + s ("s" para sugerir), y ahora puedo buscarlo. Si está trabajando a lo largo, escriba "lugar" y luego vea qué sugerencias presenta.
Una vez que encuentre el fragmento correcto, presione Mando junto con el número correcto, y su fragmento se pegará en.
Considero que TextExpander es una de las aplicaciones de Power House en mi kit de herramientas de desarrollo. Solo toma un pico rápido en las estadísticas de TextExpander para demostrar que he ahorrado una cantidad de tiempo increíble como resultado. Pruébalo si no lo has hecho; Nettuts + le da un gran pulgar hacia arriba!
Nota del editor: Este tutorial fue patrocinado por Smile Software..
Accentsconagua
Share
