Google Fonts es un recurso maravilloso y gratuito para acceder a decenas o centenares de fuentes tipográficas de manera rápida y con rendimiento, ya que además se sirven desde la CDN de Google. Sin embargo algunas personas prefieren servir las fuentes desde su propio servidor, sin depender de los servidores de Google. Aunque yo te recomiendo encarecidamente que uses las fuentes desde los servidores de Google y no desde el tuyo propio, dado que me lo han preguntado, voy a explicar cómo conseguir "gorronear" esas fuentes y utilizarlas desde tu propio servidor o en local. [Más]

Una de las cosas que más utilizo en el sistema operativo es el portapapeles. Para mi es básico, y supongo que para la mayoría de los usuarios también. Poder copiar/cortar algo y duplicarlo en cualquier otro lado es uno de los inventos más útiles que se han dado en la informática moderna, pero como lo tenemos tan interiorizado ni siquiera le prestamos atención. Aprovecho para reivindicarlo.
El caso es que, para mi, una de las mayores limitaciones que ha tenido el portapapeles de Windows es que solo recuerda lo último que has copiado, pero nada de lo anterior. Y lleva siendo así desde Windows 1.0. No me explico cómo no han solucionado el tema antes. Aunque ha habido intentos (Office tiene algo así), no es hasta ahora cuando por fin lo han hecho. Te cuento cómo activarlo y cómo sacarle partido. [Más]

En CSS se expresan los colores de diversas maneras, pero las más comunes son dos: RGB y HSL. Tradicionalmente todos hemos aprendido a manejar colores basándonos en un principio muy simple sacado de la naturaleza: la combinación de colores. En el colegio aprendimos que todo color se puede expresar como la combinación de otros tres colores básicos: el rojo, el verde y el azul. En esto es en lo que se basa la notación RGB. Sin embargo esta notación presenta varios problemas, entre ellos que no es nada intuitiva. La notación HSL, por el contrario, es mucho más fácil de visualizar y utilizar en el día a día. En este post te explico en qué consiste cada una de ellas y cómo sacarles partido. [Más]

En mi último post te contaba cómo podías generar un certificado HTTPS válido para poder hacer desarrollo en local usando conexiones seguras (necesarias para usar ciertas APIs de HTML5), incluso simulando el dominio real que se usará en la aplicación final. El método vale para cualquier sistema operativo y genera certificados válidos solo para la máquina local, por lo que son perfectos para desarrollo. Ahora toca ver cómo montar ese certificado en tu servidor local de desarrollo. Cada uno tiene su método. Yo me voy a ocupar de IIS Express. [Más]

El uso de conexiones seguras se está volviendo imprescindible también a la hora de desarrollar. El principal motivo es que cada día más APIs de HTML5 requieren el uso de HTTPS para poder funcionar. Por ejemplo, la API de geolocalización, la de notificaciones o la de service workers entre otras muchas. Debido a ello, si necesitamos desarrollar aplicaciones con ciertas características, no nos queda más remedio que utilizar también HTTPS en nuestros equipos de desarrollo para poder probar y afinar el código. En este artículo te voy a contar cómo puedes montar un entorno de desarrollo que utilice HTTPS contra localhost, de manera sencilla en cualquier sistema operativo de escritorio (Windows, Mac y Linux). [Más]

Lo que voy a contar hoy es algo de "cultura general", pero también es cierto que muchas personas lo desconocen todavía, sobre todo si están comenzando en el mundo de la programación web. Empezaré repasando cómo es el funcionamiento básico desde el momento en el que escribimos una dirección web en un navegador y hasta que empieza a solicitarse la página de verdad, y luego explicaré un sencillo proceso que te permite simular que cualquier dominio de internet, exista o no, está en cualquier servidor que tu quieras. ¡Vamos allá! [Más]

Cuando estamos depurando paso a paso, poniendo puntos de interrupción en ciertas líneas para luego ir ejecutando el código instrucción por instrucción, no tiene mucho sentido que, de repente, se nos abra el código fuente de algunas bibliotecas estándar que están muy probadas y son robustas (jQuery, lodash, Angular, Vue...), pues no vamos a depurarlo. Y mucho menos si lo estamos usando ya minimizado y listo para producción, puesto que encima no veremos gran cosa tampoco. Vamos a ver cómo hacer que el depurador de Chrome se salte archivos completos que no nos interesa depurar, ahorrando tiempo y ganando productividad. [Más]

Hace unos días os hablaba de un plugin sencillo para jQuery que había creado que permite añadir un tooltip basado en CSS a las imágenes y otros objetos, que va siguiendo el puntero del ratón para facilitar dar información sobre éstos. Otro añadido que hice al blog al mismo tiempo fue un sistema para realizar zooms a las imágenes y que puedes comprobar en cualquiera de los artículos que tengan alguna imagen un poco más grande del espacio disponible. Esta funcionalidad se la otorga un plugin de jQuery llamado jQuery.pan. Os lo presento a continuación. [Más]

Si eres seguidor habitual de este blog, habrás notado que desde hace unos días las imágenes muestran la información de una manera más clara, en concreto utilizando un "tooltip" o capa de información que persigue al cursor y que muestra el texto asociada a la misma de una forma visible. Este tooltip es una capa especial creada con JavaScript y CSS y para que funcione así he creado un plugin gratuito y open source para jQuery que funciona con cualquiera de sus versiones y que permite generar ese tooltip para cualquier elemento que disponga de un atributo title o alt, pero que está pensado fundamentalmente para imágenes. En este post te cuento sus características, cómo ponerlo a andar y cómo personalizarlo. [Más]

Está claro que si queremos publicar un sitio o aplicación web de manera permanente debemos configurar y gestionar un servidor web, o contratar algún tipo de servicio básico (hosting) o avanzado (Cloud PaaS) para hacerlo. Pero en muchas ocasiones lo único que queremos es poder exponer temporalmente hacia el exterior de manera sencilla un desarrollo que hemos hecho y que tenemos en nuestra máquina local. Existen muchos casos en los que esto es interesante. Para suplir estas necesidades, una herramienta estupenda y cada vez más utilizada es ngrok (pronunciado "en-groc"). Como me gusta mucho y le saco mucho partido, m he decidido a crear este tutorial para que tú también puedas exprimirle toda su utilidad. ¡Allá vamos! [Más]