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]

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]

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]

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]

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]

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]

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]

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]

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]

Expliación detallada de qué es la vulnerabilidad "tabbabbing" y cómo solucionarla en todos los navegadores. [Más]