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.

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.

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+).

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.

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:

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.

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.

En desarrollo front-end se da a menudo que tengamos etiquetas y selectores que se repitan varias veces, con la misma o diferentes clases ó valores que vayan en incremento/decremento. Pero como HTML y CSS no son lenguajes de programación (no tienen lógica asociada) esto no lo podemos automatizar.

Un pequeño efecto que realicé para este nuevo diseño de CSSLab fue agregar borde a un caracter dentro de los blockquote, pero este efecto puede aplicarse a textos de cualquier tipo y con cualquier fuente, incluso si son @font-face. Entre las soluciones que encontré, existen principalmente 2:

En iOS, cuando intentamos utilizar un elemento nos vemos obligados a que el player del dispositivo se haga cargo. No podemos aplicar autoplay ni responder a su comportamiento, ya que es intrínseco del sistema operativo y no del browser. Felizmente iOS implementó un callback el cual responde a eventos del video y en este caso, responde cuando el video termina. Cuando tocamos un video podemos saber el final de éste y aplicar algún evento mediante [JavaScript][1].