Riot es una pequeña empresa de software compuesta actualmente por solo cinco personas. De la nada, este equipo ha dejado caer dos aplicaciones de desarrollo web para usuarios de Mac que me han sorprendido. Esta es una categoría de aplicaciones que, en mi opinión, no ha recibido mucha innovación verdadera en los últimos años y, aparentemente, la buena gente de Riot está dispuesto a cambiar eso, porque sus ideas son realmente únicas e increíblemente útiles.
Hoy analizaremos Hammer y Anvil para ver qué hace cada uno y cómo pueden mejorar colectivamente su flujo de trabajo, especialmente si es un desarrollador de front-end que trabaja con sitios estáticos.
Martillo
En primer lugar está Hammer, un verdadero salto adelante en el área del desarrollo de sitios estáticos. Si amas el tipo de cosas que hace PHP, pero o no sabes PHP o simplemente no quieres meterte con ellas en tus pequeños proyectos, te encantará Hammer.
¿Qué es?
Comencemos discutiendo lo que Hammer no es. No es un editor de texto o IDE. No tienes que renunciar a Sublime Text 2 para usarlo (lo cual es increíble), se conecta directamente a tu flujo de trabajo existente y funciona junto con tus aplicaciones de desarrollo web favoritas, cualquiera que sea.
Ahora, vuelves a preguntar, ¿qué diablos es Hammer? En resumen, es un compilador. Sirve como una especie de base de operaciones para su proyecto de diseño web. Mientras haces cambios, Hammer compila tus archivos. Por ejemplo, si usa Sass o CoffeeScript, se compilarán automáticamente en CSS y JavaScript.
¿Eso es?
No Hammer no es solo otro competidor de Codekit. Se agrega al concepto de compilador al proporcionar una sintaxis especial que puede usar en su trabajo que rige la forma en que se construyen sus archivos.
¿Qué tipo de sintaxis especial pides? ¿Qué hay de HTML incluido que le permite incrustar automáticamente documentos HTML entre sí sin PHP o un entorno de servidor? ¿O tal vez le gustaría usar rutas de archivos inteligentes que localicen automáticamente activos específicos, incluso cuando se mueven? ¿Te gustaría un lado de las variables HTML con eso?
?¿Cierra la puerta delantera? tu dices. No, voy a mantener la puerta abierta de par en par. Hammer hace todo esto y más. A ver cómo.
Empezando con Hammer
Después de descargar y lanzar Hammer, esto es lo que vemos:
Aquí tenemos una ventana de inicio agradable y amigable que nos impulsa a crear un nuevo proyecto o soltar un proyecto existente. Voy a crear un nuevo proyecto porque hay muchas cosas extravagantes que suceden que deberías ver.
Creando un Nuevo Proyecto
Una vez que hago clic en 'Crear nuevo proyecto' carpeta, luego elija un nombre y una ubicación para el proyecto, Hammer se pone a trabajar y crea un pequeño directorio impresionante de archivos de inicio.
Dentro del archivo principal del proyecto, encontrará un archivo index.html con tres carpetas: activos, compilación e incluye. Cada uno de estos se rellena previamente con archivos de inicio para ayudarlo a comenzar.
El área principal de interés aquí es la? Construir? carpeta, este es el directorio donde se colocará su sitio HTML estático y terminado en todo su esplendor bien compilado.
Conectar con su editor de texto favorito
Como mencioné anteriormente, Hammer está diseñado para jugar bien con tu flujo de trabajo actual. Después de crear su proyecto, haga clic en el pequeño icono de la aplicación en la parte superior derecha de la interfaz para seleccionar el editor que usará.
Ahora, con el proyecto seleccionado en la barra lateral izquierda, presione Comando-E y ese proyecto se abrirá en su aplicación seleccionada, Sublime Text 2 en mi caso.
Increíbles características impresionantes
Es difícil no hacer una doble toma cuando ves las características de Hammer. Ellos son buenos. Realmente muy bien. Estoy hablando vudú de que nunca pensaste que serías capaz de tener un buen desempeño. Echemos un vistazo a algunas de las mejores partes.
HTML incluye
Si abrimos el archivo HTML generado automáticamente que venía con nuestro nuevo proyecto, esto es lo que vemos (este es el archivo completo):
Esta debería ser tu reacción: ¿WTF? ¿Dónde está todo el código? Espera, ¿es eso haciendo lo que creo que está haciendo? Sí.
Sin ningún conocimiento de PHP y sin configurar ningún tipo de entorno de servidor local, podemos aprovechar el concepto de desarrollo basado en módulos.
En caso de que esté tan acostumbrado a los sitios estáticos que no tenga idea de lo que está sucediendo, permítame desglosarlo. Dentro de la? Incluye? carpeta es un conjunto de archivos HTML. Por ejemplo, tome el archivo _header.html. Tenemos uno Copia de esta que se puede insertar en tantas páginas como queramos. Si lo coloca en diez archivos HTML, luego actualice el archivo del encabezado maestro, los otros diez archivos HTML se actualizarán en la compilación.
Todo lo que necesitas para realizar esta impresionante hazaña es un fragmento personalizado que viene en forma de comentario HTML. Aquí hay tres ejemplos:
Las implicaciones aquí deberían estar soplando tu mente. Realmente no puedo expresar cuánto de un salto adelante esto representa para los sitios estáticos.
Variables
?¿¡Pero espera!? tu dices. ? No puedes usar el mismo encabezado exacto en cada archivo? Eres un agudo Como mínimo, deberá personalizar la etiqueta del título para que cada página sea diferente. ¿Y ahora qué? ¿Está el capitán Hammer derrotado?
No temas, estoy a punto de mostrarte cómo usar las variables en tu HTML. En lugar de escribir un título real en su archivo de encabezado HTML maestro, simplemente puede crear una variable como la siguiente:
Ahora, cuando ejecutamos una inclusión en nuestro archivo de encabezado, podemos personalizar esa variable. Lo hacemos con una sola línea en la parte superior de nuestro archivo HTML de destino.
La línea superior de este fragmento de código le dice a Hammer que reemplace la variable $ title con "Design Shack". Ahora puedo tener un archivo de encabezado incluido que se personaliza por página. Te dije que esto era increíble.
?¿Inteligente? Caminos
El siguiente es caminos inteligentes. Estos son simples de agarrar y super prácticos.Básicamente, puede deshacerse de rutas de archivo largas cuando se vincula a sus diversos recursos en favor de usar el? @Path? sintaxis.