JavaScript con Vim: Corrigiendo el código

Los programas de análisis y correción de código son nombrados en inglés como linters. Un corrector de este tipo te ayuda a identificar errores potenciales en tu código sin necesidad de ejecutarlo, evitar patrones problemáticos e, incluso, cumplir con una guía de estilo. En JavaScript, el linter más usado se llama ESLint, y puedes instalarlo siguiendo los pasos aquí indicados. Por defecto, ESLint está configurado mediante un juego de reglas que, comprobando si el código las cumple, gestionan los problemas más comunes. Por supesto, puedes personalizar estas reglas para solucionar problemas específicos; de hecho, existen paquetes de configuración de ESLint, como Airbnb, y es posible que se ajusten a tus necesidades, ahorrándote mucho tiempo en hacer esta tarea.

JavaScript con Vim: Resaltando la sintaxis

Aunque Vim soporta sintaxis básica para JavaScript, cuando trabajes con especificaciones modernas del lenguaje o bibliotecas como React, que usa JSX, notarás que no funciona todo lo bien que esperas. Una buena opción para realatar la sintaxis de JavaScript en Vim es Polyglot, un conectable que gestiona otros conectables, de sintaxis en este caso, cargándolos bajo demanda para evitar afectar al rendimiento de tu editor de texto. Gracias a Polyglot, si cambias de framework de JavaScript, o si gestionas archivos de otro lenguaje, no es necesario que instales nuevos conectables, porque él lo gestionará de un modo sencillo.

Hugo y el buscador: Presentando el widget de búsqueda

Como ya te expliqué en este artículo, al retomar este blog quería mejorar la navegación y, para ello, decidí implementar un buscador que permitiera localizar contenido de la manera más eficaz posible. El tema con el que está generado el blog, Mainroad, incluye la posibilidad de renderizar un buscador en la barra lateral con un sencillo ajuste en el archivo de configuración de Hugo, config.toml.

[Params.sidebar]
  # Enable widgets in given order
  widgets = ["image", "search", "categories"]

La caja de búsqueda es sencilla, me gusta el estilo, pero cuando se visualiza el blog en una pantalla más pequeña la barra lateral que la contiene se muestra debajo de los primeros posts. Yo prefiero que el buscador esté siempre visible, desde el inicio, para que de este modo se pueda acceder al contenido rápidamente sin tener que navegar a la parte inferior del blog, así que probé a sacar la caja de búsqueda de la barra lateral y colocarla debajo del título, justo antes del primer artículo. Gracias a que el widget de búsqueda esta escrito en su propio partial, es sencillo probar la caja de búsqueda, en esa ubicación, añadiendo una única línea de código en la plantilla base del blog.

Hugo, generador de sitios estáticos

Hugo se presenta como el constructor de sitios web más rápido del mundo. Está escrito con Go y genera sitios de forma estática con la intención de ofrecer mejor rendimiento, seguridad y facilidad de uso. Por cada petición que recibe un sitio generado dinámicamente su servidor HTTP crea un nuevo archivo HTML. Con el tiempo estos generadores de sitios dinámicos comenzaron a almacenar algunas páginas en caché para mejorar el rendimiento. En tanto que Hugo no genera las páginas dinámicamente, sino que renderiza todos los archivos HTML en tu computadora, podemos definirlo como un generador de sitios estáticos. Es como si un generador de sitios dinámicos almacenara todas las páginas en caché. Este método te permite revisar todas las páginas en local tal cual serán enviadas al cliente y, además, el servidor HTTP las servirá usándo únicamente una fracción de cómputo y memoria de la que necesitaría un sitio generado dinámicamente.