JASoft.org

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

MENÚ - JASoft: JM Alarcón

Encontrar caracteres acentuados y emojis con expresiones regulares en JavaScript

Como digo siempre aquí y en todas partes, las expresiones regulares son una de las herramientas más útiles que podemos aprender como programadores (y sin ser programadores). Les puedes sacar partido para casi cualquier cosa que se te ocurra que involucre cadenas de texto, y no sólo programando. El problema que tienen es que son muy "anglosajonas" (como casi todo en este mundillo) y hay cosas que no hacen bien por defecto si usas caracteres que no sean anglosajones. En este detallado artículo te cuento qué opciones tienes para manejar expresiones regulares más complejas que tengan en cuenta letras acentuadas, alfabetos extranjeros como el japonés o el ruso, símblos, emojis... y todo tipo de caracteres Unicode. [Más]

Cómo cambiar los valores de variables CSS desde código JavaScript

Ya he hablado en este blog hace mucho tiempo acerca de las variables CSS y cómo nos permiten obtener una gran potencia sin necesidad de recurrir a metalenguajes como Sass/SCSS o similares solo para parametrizar los diseños. Hoy voy a comentar brevemente cómo podemos modificar dinámicamente los valores de estas variables CSS mediante JavaScript, por ejemplo para cambiar los colores de la página, sin recargarla, cambiando tan sólo el valor de las variables CSS que controlan su aspecto. [Más]

La problemática de los eventos unload, beforeunload y similares en dispositivos móviles y cómo gestionarlos

Aunque todos los desarrolladores Web tienen más o menos claro el funcionamiento de los eventos unload, beforeunload y otros similares en un navegador de escritorio, el tema de la descarga de páginas en los navegadores móviles es bastante complejo por la forma particular que tienen de funcionar respecto a un navegador de escritorio. Es largo de contar y con muchas ramificaciones, pero voy a intentar resumirlo. [Más]

JavaScript: cómo acceder y modificar pseudo-elementos como ::after y ::before

Acceder a un elemento del DOM con JavaScript es muy sencillo. Mientras esté definido en el HTML tiene un elemento JavaScript correspondiente en el DOM y hay métodos para acceder a ellos. Sin embargo, cuando se trata de un pseudo-elemento, al tratarse de elementos ficticios, la cosa cambia por completo. No somos capaces de acceder a ellos de manera directa y presentan además otros retos. En este artículo vamos a ver qué son estos pseudo-elementos, como podemos acceder a sus propiedades para leerlas o modificarlas y cómo podemos usar un "hack" para modificar una propiedad especial que, en principio, no es posible modificar. [Más]

VÍDEO: Cómo activar una clave de API para Google Maps

Aunque existen unas cuantas opciones hoy en día para poder usar mapas en tus desarrollos Webs, algunas de ellas de código abierto, de todas ellas la más conocida, completa y ampliamente utilizada es Google Maps. Se trata del servicio de mapas más popular del mundo, con una ingente cantidad de datos y funcionalidades a tu disposición, y además de uso gratuito en la mayor parte de los casos. La única "pega" que tiene es que, para usarla, debes dar de alta un proyecto en Google Cloud y activar y configurar ciertas APIs. En este post y vídeo te cuento paso a paso cómo hacerlo. [Más]

Cómo hacer hablar a tu navegador: la API de síntesis de voz

La síntesis de voz por parte de las computadoras siempre ha sido una de las cosas más llamativas que se podían hacer. En la era de los asistentes personales por voz como Siri, Alexa o Google Home, parece una cosa trivial y que casi hemos dado por sentada, pero no era así hace tan solo unos pocos años. Por suerte ahora están tan presentes que es posible incluso implementar síntesis de voz natural (muy realista) en cualquier navegador Web moderno usando unas pocas líneas de JavaScript y peleándonos un poco con algunos pequeños detalles. En este artículo te cuento cómo conseguirlo... [Más]

Intl: la API de localización nativa de JavaScript

Como seguramente ya tengas claro, la traducción y la localización son conceptos relacionados pero muy distintos. Para traducir tu aplicación basada en Web mucho me temo que no te queda más remedio que usar archivos de lenguaje de algún tipo y alguna biblioteca especializada. Sin embargo para la localización, es decir, la adaptación de la aplicación a las particularidades de cada idioma, todo lo que necesitas viene incluido con tu navegador. Para casi todas las tareas comunes relacionadas con la localización de aplicaciones, JavaScript nos proporciona ayuda integrada y no vamos a necesitar utilizar bibliotecas externas que añaden complejidad, peso y que además con toda seguridad no serán tan buenas como el sistema operativo para estos menesteres. Vamos a conocer cómo sacarle partido... [Más]

Creando diálogos y pop-ups nativos con HTML: El elemento "dialog" de HTML 5.2

Una necesidad común en casi cualquier aplicación Web es la de mostrar diálogos al usuario. Se trata de los típicos "pop-ups" que surgen en la aplicación de vez en cuando con múltiples propósitos: notificaciones, preguntar algo al usuario, mostrar los detalles de un registro en una base de datos... Casi cualquier cosa que se te pueda ocurrir. Crear algo como esto mediante el uso de capas y un poco de JavaScript no es muy complicado, pero tiene bastantes "pegas". Por eso el W3C, encargado de los estándares Web, definió en HTML 5.2 un nuevo elemento específicamente pensado para esta tarea: <dialog> y que tiene muchas aplicaciones. Vamos a ver cómo sacarle todo el partido. [Más]

Expresiones regulares en JavaScript (y otros lenguajes): búsquedas anticipadas y retrasadas

Como ya he dicho en muchas otras ocasiones, en mi opinión las expresiones regulares son una de las herramientas más potentes que puede aprender un programador, y no solo para programar ya que sirven también en muchos entornos y herramientas. Hoy me voy a detener a explicar con detalle el funcionamiento de una característica potente e infrautilizada de las expresiones regulares y que muchos programadores no entienden bien por lo que he podido comprobar. Se trata de las búsquedas anticipadas (lookahead asssertions en inglés) y las búsquedas retrasadas (lookbehind asssertions en inglés), que colectivamente se suelen denominar "Búsquedas alrededor" (del inglés lookaround asssertions). [Más]

JavaScript: por qué obtengo fechas diferentes por consola y por pantalla

Hoy una curiosidad rápida y simple pero puede que de interés, surgida a partir de la pregunta de un alumno y que tiene que ver con la manera de gestionar la misma información que tienen los navegadores dependiendo de si se hace en la interfaz de usuario o en la consola, la cual además puede variar de un navegador a otro. Tiene poca incidencia práctica, pero puede ser interesante... [Más]