JASoft.org

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

MENÚ - JASoft: JM Alarcón

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]

Nueva y útil funcionalidad en Chrome 60: identificadores de terceras empresas

En la actualidad es extremadamente raro encontrarse una página cuyo contenido esté albergado en su totalidad en el dominio original. Basta con que se use Google Analytics, un vídeo embebido de YouTube o cualquier otra utilidad de terceros (sin mencionar a las redes de anuncios), para que tengamos código HTML, CSS y JavaScript que puede salir de varios sitios de terceras empresas. Hasta ahora las herramientas del desarrollador de Chrome permitían ordenar y filtrar por dominio, pero en Chrome 60 han incorporado una funcionalidad más interesante que consiste en mostrar de manera visual, con unos identificadores (badges en inglés) de dónde vienen ciertas peticiones y códigos, cuando provienen de servicios reconocidos por el navegador. Esto nos ayuda a identificar de manera más sencilla y visual el impacto real que puede tener incluir un servicio externo en la página, tanto en tiempos y "peso" de las descargas, como en rendimiento a la hora de renderizar la página y procesar JavaScript. [Más]

Minimizar y ofuscar JavaScript desde el menú contextual del Explorador de Windows

En este artículo vemos la manera de poder utilizar Uglify-JS para poder minimizar y también ofuscar el código fuente JavaScript, tanto desde la línea de comandos, como de manera mucho más cómoda usando un menú contextual desde el explorador de archivos de Windows, solo cuando lo pulses con la tecla de mayúsculas apretada, para que no moleste en el día a día. Además de explicar cómo montarlo "a mano", también se entrega un archivo para incorporar esta opción automáticamente. [Más]

La manera correcta de actualizar npm en Windows

npm, el gestor de paquetes de Node.js, se ha convertido con el tiempo en una herramienta absolutamente indispensable para cualquier desarrollador Web, especialmente para desarrolladores Front-End y, obviamente, para los que usen Node.js para el backend. A través de este gestor de paquetes y automatizador de scripts es posible instalar todo tipo de utilidades y herramientas, y es la base del tooling moderno utilizado para desarrollar (desde minimizar archivos hasta crear complejos procesos de automatización y bundling). El problema es que actualizarlo en Window siempre ha sido bastante problemático debido a la idiosincrasia de las rutas globales en este sistema operativo. Si quieres saber cómo actualizar npm sin problemas, sigue leyendo... [Más]

Exportando tablas a Excel, CSV y otros formatos desde una página HTML en JavaScript puro

Una necesidad muy habitual en todo tipo de desarrollos Web es la de poder exportar información que tenemos en la página a archivos descargables que el usuario pueda utilizar.
Para solucionar este problema, muchas veces se recurre a que, cuando el usuario pulsa el botón de exportar, lanzamos una nueva petición al servidor, y el documento descargable se genera al vuelo en el backend, siendo devuelto al usuario a través de Internet. Esto está bien y de hecho es indispensable a veces, según el tipo de información y el formato del archivo que nos interese. Sin embargo, lo que muchos programadores Front-End no saben, es que es posible generar archivos para descarga directamente desde el navegador, usando tan solo JavaScript. Y eso precisamente es lo que voy a explicar hoy en este artículo... [Más]

Una opinión personal sobre la gestión de Angular 2

Como seguramente sabrás, se acaba de presentar Angular 2, llamada a ser según algunos el futuro del desarrollo web. A continuación os comento mi punto de vista sobre esta tecnología, pero no sobre si es buena, mala o regular, o las ventajas y desventajas que tiene, sino sobre cómo pienso que lo han hecho de mal respecto a gestionar la comunicación del proyecto. Y es que algo como esto es crucial si estás gestionando una tecnología utilizada por millones de personas, como es el caso. [Más]

¿Detectar dispositivos móviles mediante código? Una mala idea...

Hace poco alguien me preguntó cómo podía hacer, mediante JavaScript, para detectar si el dispositivo que estaba usando un usuario era o no un móvil. La idea era adaptar la interfaz y parte del JavaScript a ese caso concreto, para mostrar una interfaz y funcionalidad diferente para dispositivos móviles respecto a la "versión" de escritorio de la aplicación web. De entrada, detectar el dispositivo es una práctica muy poco recomendable. Hace ya bastantes años era lo habitual, pero en los últimos años, con la proliferación de dispositivos, navegadores, factores de forma, etc... y la velocidad con la que cambian las características soportadas por todos ellos, hacer una detección de tipo de dispositivo o navegador es una mala idea. La cadena de agente de usuario: mala idea Lo que se hacía hace mucho tiempo para detectar el tipo de dispositivo era utilizar la cadena de agente de usuario (User Agent) de los navegadores, para determinar el tipo de navegador, su versión y el sistema operativo... [Más]

Midiendo el rendimiento de nuestro código JavaScript de manera sencilla desde la consola

Hace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.Cronometrar códigoUna necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera ne... [Más]