Alcanzar y manipular pseudo-elementos CSS con JavaScript

Alcanzar y manipular pseudo-elementos CSS con JavaScript
Los pseudo-elementos (y pseudo-clases) son selectores CSS virtuales que no existen esplícitamente en el árbol de DOM. Pero aparte de esa característica, puede ser manipulado con propiedades CSS como cualquier otra, a excepción que agrega una nueva propiedad content la que permite ingresar texto al pseudo-elemento.
Leer más →

Sobre pseudo-clases y pseudo-elementos

Sobre pseudo-clases y pseudo-elementos
Las pseudo-clases y los pseudo-elementos son tipos de selectores CSS que permiten alcanzar estados y elementos que no están en el DOM original. La lista de pseudo-clases es amplia, la de pseudo-elementos no ha crecido hasta la actual versión de CSS3 (aunque en CSS4 se vienen varios más):
Leer más →

Star-Rating sólo con CSS

Star-Rating sólo con CSS
Cualquier sistema de votación (star-rating system) requiere de los 3 componentes básicos de todo sitio web: HTML, CSS y JavaScript. Pero a medida que la tecnología avanza, es posible dejar la ayuda que JavaScript brindó por mucho tiempo mientras CSS no entraba de lleno a la capa de interacción, principalmente a través de CSS3. Pero existen propiedades CSS2 que siempre han permitido cierto grado de complejidad pero que por culpa de IE6 y su hermano mutante y deforme IE7 no eran posible utilizarlos. Con soporte IE8+ ya podemos utilizar tranquilamente -por ejemplo- selectores avanzados de atributos y descendientes, los que precisamente son los protagonistas de este artículo.
Leer más →

Hover Intent moderno en menues dropdown

Hover Intent moderno en menues dropdown
La utilidad (y poca accesibilidad) de los menúes dropdown son conocidos e incuestionables. Pero existe un pequeño problema cuando el usuario navega sobre ellos, el cual se puede apreciar a continuación:
Leer más →

Selects con estilo

Selects con estilo
Estamos en pleno año 2015, la humanidad está trabajando para llevar humanos a Marte y todavía no podemos dar estilos CSS crossbrowsing a las etiquetas <select> Y para qué mencionar los <input type="checkbox"> y <input type="radio">…
Leer más →

Autocomplete nativo con datalist

Autocomplete nativo con datalist
Un intersante y poco conocido elemento HTML5 es <datalist>, con el cual permite crear de forma nativa un campo de input con autocomplete, y con nativo me refiero sin JavaScript.
Leer más →

Detectando media queries con JavaScript

Detectando media queries con JavaScript
Hace varios años tuve la inquietud de poder trabajar con el ancho y alto del viewport y sus cambios mediante jQuery, logrando crear un plugin para ello. BrowserSizr fue pionero en una época donde responsive no existía como palabra ni concepto. Desde entonces se ha masificado y estandarizado este comportamiento, y el DOM ya permite detectar y probar los resultados de media queries mediante JavaScript.
Leer más →

Detectar Blur / Focus a la ventana

Detectar Blur / Focus a la ventana
Este pequeño snippet permite detectar y realizar alguna acción mediante JavaScript cuando una ventana/tab esté activa (focus) ó desactiva (blur). Algunas aplicaciones útiles que se me ocurren: Guardar datos si el usuario está en un formulario. Iniciar/detener animaciones que quieras que el usuario vea. A pesar de actualmente existir una API para Page Visibility sabemos que su soporte para IE es escaso. En este caso se utilizarán los eventos onfocus y onblur los que tienen buen soporte (IE8+).
Leer más →

Workflow Moderno para Proyectos Front-end

Workflow Moderno para Proyectos Front-end
Hace unas semanas preparé una pequeña presentación mostrando mi más nuevo proyecto personal: un workflow, una nueva manera de trabajar proyectos front-end. Lo he utilizado y perfeccionando a medida que encuentro mejoras, y aquí les comparto los slides de la presentación. Básicamente muestro herramientas de automatización que ayudan a optimizar el flujo de trabajo y por ende minimizar errores, como GruntJS y de mantenimiento de librerías como Bower, además de mi boilerplate y cómo utilizarlos en tu ambiente de desarrollo local.
Leer más →

Conoce cómo funciona el browser y optimiza tu código frontend

Conoce cómo funciona el browser y optimiza tu código frontend
Hace no más de 2 años que la tendencia de los usuarios de internet han visto cómo han crecido de manera indirecta las siguientes afirmaciones:
Leer más →