Me gustan los sitios estáticos. Para ser más preciso, me gusta construirlos. Hay algo puro acerca de estar sentado frente a tu pantalla; es solo usted y su editor de texto, escribiendo en simple antiguo HTML y CSS.

No me malinterpreten, los sitios dinámicos también son divertidos. Dios sabe que soy fanático de WordPress y de la facilidad de uso que ofrece a los usuarios. Los sitios estáticos me traen de vuelta, sin embargo. Recuerdo haber cambiado del software WYSIWYG a un editor de texto. Recuerdo simplificar el proceso de desarrollo con mi primera función de PHP: incluir. Esos fueron días buenos, pero a diferencia de tantos otros, no todos se han ido.

La diferencia es que ahora podemos hacerlo mejor. Pre-procesadores como Menos y Hablar con descaro a mejoró enormemente la experiencia de escribir CSS. Tenemos varios lenguajes de scripting para mezclar en nuestro HTML, si así lo elegimos. Y luego ... entonces la gente hizo algunas cosas realmente interesantes.

Ya mencioné anteriormente Martillo aplicación para Mac. Es una aplicación que presenta sus propias funciones y expansiones a un buen HTML antiguo, lo que le permite incluir un archivo como parcial en otro y otras cosas buenas. Compila los resultados en un sitio estático regular que puede alojarse en cualquier lugar. En realidad tiene bastantes características más que eso, pero este artículo no es sobre Hammer. ¿Por qué? Solo está disponible para la plataforma Mac.

Entrar Arpa…

Presentando Harp

No es una aplicación, es mucho más. Incluye preprocesadores para CSS. Incluye plantillas de idiomas para documentos HTML. Es un mini servidor que se puede usar para el desarrollo o se puede convertir en un servidor de producción real. Puede usar el JavaScript del lado del servidor para convertirlo en una aplicación completa, ya que se ejecuta en Node.js. O bien, si no es un programador, puede simplemente construir su sitio estático y luego compilarlo para alojarlo en otro lugar.

Debido a que está basado en Node.js, es multiplataforma. También tiene licencia de MIT, así que es gratis. Incluso puede hacer cambios y redistribuirlos o revenderlos si lo desea.

Ahora, las personas que han estado vigilando se habrán dado cuenta de que Harp no es la única herramienta de este tipo. Mucha gente está creando herramientas basadas en Node para que los proyectos web comiencen rápidamente. Mi problema principal con estos es que generalmente suponen que desea utilizar su marco de CSS favorito, biblioteca de animación o texto repetitivo HTML. Harp no hace suposiciones sobre el código que desea escribir. Simplemente te da las herramientas para escribirlo más rápido.

Eso sí, debe instalarse y ejecutarse a través de la línea de comandos. No hay GUI para esto. Pero una vez que lo haces funcionar -y eso no es difícil en absoluto- los beneficios superan la curva de aprendizaje.

Las herramientas

Preprocesadores CSS

Por ahora, estoy seguro de que la mayoría de nuestros lectores están familiarizados con las formas en que la industria web ha tratado de mejorar el CSS estándar. Cuando se ejecuta el mini servidor para su proyecto, los archivos LESS, SASS y Stylus se compilan automáticamente en CSS.

La compilación es siempre satisfactoriamente rápida. En todas mis pruebas, los cambios realizados en mi sitio web se han compilado en el tiempo que me lleva guardar mi archivo, y luego actualizar mi navegador.

Lenguajes de programación

También se incluyen Jade y EJS. Ambos son lenguajes de plantillas JavaScript diseñados para ayudarte a escribir / generar documentos HTML más avanzados con más flexibilidad. Básicamente, puede crear plantillas HTML y almacenar su contenido de página real por separado de esas plantillas. Es como usar un CMS, solo que no hay una base de datos (a menos que lo desee), y debe escribir todo el contenido en archivos de texto sin formato.

La verdadera ventaja es, por supuesto, el mantenimiento del código, además de todas las cosas interesantes que los programadores reales pueden hacer con el servidor real y el JavaScript del lado del cliente. Estos son también los idiomas que le permiten crear sistemas más avanzados, como blogs, todos de forma relativamente fácil (nuevamente, si tiene un programador en la nómina).

¿Cuál es la diferencia entre los dos? Se trata principalmente de cómo prefiere escribir su código.

EJS mantiene las cosas simples. Si ya conoce HTML, solo se trata de agregar etiquetas específicas de EJS, como por ejemplo: <% include global / header%>. ¿Qué hice allí? Básicamente, acabo de tomar el HTML para el encabezado de mi página de otro archivo y lo importé para usarlo en mi plantilla principal. Puedes hacer muchas cosas más complejas, por supuesto. Esto es lo que la documentación de Harp tiene que decir sobre EJS.

Jade tiene un enfoque muy diferente al escribir HTML por completo. Se ve así, como se muestra en la página de inicio del proyecto:

bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is pretty cool,

Todo eso se traduce a HTML y Javascript. Tenga en cuenta la inclusión de una instrucción if / else justo en el medio de todo, y la dependencia de la sangría adecuada.

Coffeescript

Coffeescript es para JavaScript lo que Jade es para HTML. Básicamente, es un formato simplificado para escribir JavaScript, que luego se compila en las cosas normales. Al igual que Jade, depende mucho de la indentación y elimina gran parte de la sintaxis.

Se ve así (otro ejemplo descaradamente descifrado de la página principal del proyecto):

math =root:   Math.sqrtsquare: squarecube:   (x) -> x * square x

Y la salida se ve así:

math = {root: Math.sqrt,square: square,cube: function(x) {return x * square(x);}};

La plataforma

Los sitios web creados con Harp se pueden alojar en cualquier lugar, por supuesto. Vale la pena mencionar, sin embargo, que los creadores de Harp crearon una plataforma de alojamiento específicamente diseñada para cosas construidas con su software. El precio no es malo, y se integra con Dropbox para actualizaciones automáticas fáciles de su sitio. Compruébalo aquí: www.harp.io

Conclusión

Arpa, con sus preprocesadores, lenguajes de plantillas, velocidad absoluta y bondad multiplataforma, es una adición sólida a la caja de herramientas de cualquier diseñador. Yo digo que vale la pena la curva de aprendizaje.