JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Logpoints en Chrome: una excelente utilidad para depurar y no ensuciar el código

Una de las novedades que trae Chrome 73 es pequeña pero súper-interesante. Se trata de los Logpoints. Un logpoint es un tipo especial de punto de interrupción que podemos añadir a nuestro código JavaScript y que, en lugar de detener la ejecución del código, se limita a "loguear" a la consola lo que le digamos. Esto nos evita tener que andar metiendo console.log constantemente en el código tan solo para ver algunos valores. Te lo cuento... [Más]

Cómo instalar un certificado HTTPS en IIS Express para desarrollo en local

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]

Cómo generar certificados HTTPS para desarrollo local que no produzcan errores

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]

Qué pasa cuando escribes la dirección de una web en tu navegador y cómo simular cualquier dominio en tu equipo local para desarrollo

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]

Tutorial: ngrok - cómo publicar en Internet cualquier página o aplicación web que tengas en tu equipo local

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]

Copiado de texto al portapapeles con JavaScript - API Asíncrona

El mes pasado os hablaba aquí de una manera sencilla y soportada por todos los navegadores para acceder al portapapeles desde código JavaScript en el navegador. Es un método simple pero un poco engorroso de implementar, puesto que hay que seleccionar rangos en la página para poder copiar su contenido. Además, su implementación varía ligeramente de un navegador a otro porque no está estandarizada. Otra pega importante que tiene el método "clásico" es que es síncrono. Para solucionar todos estos problemas la W3C ha creado la Async Clipboard API. A continuación te cuento cómo sacarle partido. [Más]

Copiado de texto al portapapeles con JavaScript - Método "clásico"

Hasta no hace muchos años, facilitar programáticamente que la gente pudiera copiar (o cortar) contenido de una página para llevárselo al portapapeles no era tarea tan fácil. Es decir, si por ejemplo tenías un fragmento de código en tu página de contenidos, y querías ponerle un botón de "Copiar" para facilitar a tus visitantes su copiado al portapapeles, la cosa no era tan fácil. De hecho si querías asegurar que iba a funcionar en todos los navegadores debías recurrir al uso de Flash =:-O En la actualidad la forma de hacerlo está estandarizada y extendida, por lo que resulta más fácil, pero lo curioso es que lo complicado del caso no es tanto copiar al portapapeles sino cómo decidir qué es lo que se va a copiar, así como las pequeñas diferencias entre navegadores a la hora de hacerlo. En este artículo te lo cuento... [Más]

Variables en el lenguaje CSS: Guía de uso y abuso

CSS es un lenguaje más bien pobre: no dispone de construcciones complejas que nos permitan tomar decisiones con condicionales, repetir operaciones mediante bucles, etc... La máxima lógica que nos permite aplicar es cambiar ciertas definiciones en función del medio (pantalla, impresora...) o los anchos y resoluciones (media-queries). Esto hace que mantener hojas de estilo CSS muy grandes resulte complicado. Por ejemplo, si estamos reutilizando un color o una dimensión (ancho o alto) a lo largo de un documento CSS muy largo, no nos queda más remedio que repetir el mismo valor una y otra vez. Si más adelante decidimos cambiarlo tenemos que buscar y reemplazar con cuidado en el documento de texto. Las variables CSS son una realidad en todos los navegadores modernos desde hace muy poco tiempo, pero ya podemos sacarles todo el partido. Con este completo artículo aprenderás a dominarlas... [Más]

Cómo hacer Tooltips personalizados solamente con CSS

Los tooltips son esas ventanitas flotantes pequeñas de color amarillo que aparecen cuando pasas por encima de algunos elementos de las interfaces de usuario de muchas aplicaciones. Los controla el sistema y poco puedes hacer para controlar su aspecto o ubicación. Pero no podemos controlar el aspecto que tienen ni cómo se muestran. Mediante JavaScript es fácil detectar el movimiento del cursor sobre un determinado elemento o un trozo de texto y mostrar una capa con el aspecto que deseemos en el lugar que queramos, pero no deja de ser un trabajo pesado y tedioso, además de propenso a errores y que carga un poco más la página. En este post voy a explicar cómo podemos crear tooltips con el aspecto que deseemos, que aparezcan donde queramos y utilizando exclusivamente CSS, sin escribir nada de código... [Más]

TRUCO: Rodear un fragmento de código con etiquetas HTML en Visual Studio Code

A la hora de escribir código, ofrece multitud de ayudas. Pero una cosa de la que carece aparentemente y se echa de menos es la posibilidad de rodear una selección con etiquetas en HTML. Por ejemplo, si tienes uno o varios elementos de lista <li> y necesitas rodearlos del preceptivo <ul> o <ol> ¿cómo lo puedes hacer? Existen varias maneras, pero aquí te cuento la que creo que es la mejor y que te permitirá ahorrar mucho tiempo a lo largo del día. [Más]