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 鈫

Recorrer arreglos en pre-processors

Recorrer arreglos en pre-processors
Hace unos 4 proyectos atr谩s, me enfrent茅 al dilema de crear y recorrer un array de elementos -en este caso colores en hexacrom铆a- y crear clases CSS din谩micamente a partir de cada uno de los colores contenidos en el arreglo. Algo sencillo de lograr en JavaScript pero que curiosamente tiene diferentes soluciones por cada tipo de [pre-processor][1]. Mientras SCSS y Stylus son m谩s sencillos, con LESS es necesario un poco m谩s de c贸digo para lograr lo mismo, pero que se espera se solucione en una pronta versi贸n.
Leer m谩s 鈫

Bordes Doblados Flat 鈥 LESS mixin

Bordes Doblados Flat 鈥 LESS mixin
El siguiente es un mixin para [LESS][1] que cre茅 que genera el efecto de bordes doblados dado un elemento HTML y con colores s贸lidos asociados.
Leer m谩s 鈫