OmbuShop Crea Tu Tienda Online

Artículos para el mes: mayo, 2014

Iteraciones en JavaScript: for, forEach & each

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Para aquellos puristas del código y la performance, les contamos algunas alternativas para iterar en JavaScript: for, forEach y herramientas de algunas librerías.

Como sabemos, existen diversas maneras de recorrer un Array, iterando cierta programación para cada uno de sus elementos. Hemos confeccionado una serie de tests para comparar la velocidad de los métodos más conocidos:

  • for nativo
  • forEach nativo
  • for hacia atrás
  • jQuery.each
  • underscore.each
  • lodash.each
  • Lazy.each

Performance

Por el momento, las opciones relacionadas con el uso nativo del for fueron los que dieron mejores resultados (superando ligeramente en Chrome la opción en reversa), seguido de lejos en un tercer lugar por el uso de Lazy.each e inmediatamente después lodash.each.

Iterators performance

Iteraciones en Javascript – Performance

Hemos subido los tests para poder sumar estadísticas al respecto. ¡Los invitamos a ingresar a la página de los tests de iteración de JS y correrlos desde su navegador!

Legibilidad

Por otra parte, no todas las decisiones de uso deben basarse en la performance. Cuando un fragmento de código se vuelve muy críptico, esto dificulta el trabajo en equipo y el mentenimiento de dicho código a futuro.

Existen casos, entonces, donde será importante sopesar la legibilidad del código, algo que nos puede hacer ganar mucho tiempo de trabajo a futuro. La mantenibilidad del código es fundamental si queremos pensar en proyectos a largo plazo.

Invitamos a diseñadores y frontenders a continuar experimentando y midiendo resultados!

CSS: domina las sombras

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Codear sombras en CSS resulta complicado para muchos diseñadores gráficos. El código puede ser críptico a primera vista y la repetición de los vendor-prefixes no ayuda. Veamos cómo se hace!

Existen dos tipos de sombras en CSS: box-shadow y text-shadow. Como sus nombres lo indican, la primera afecta a las cajas del DOM, mientras que la segunda tiene relación al texto contenido en dichas cajas. En el primer caso la sombra proyectada imitará la silueta de la caja (sus puntas redondeadas, por ejemplo), mientras que en el otro caso la silueta proyectada será la del texto, caracter por caracter.

Veamos un ejemplo de box-shadow:

See the Pen qseAJ by Lucas Mourelle (@lucasmourelle) on CodePen.0

Y ahora uno de text-shadow:

See the Pen HftCz by Lucas Mourelle (@lucasmourelle) on CodePen.0

Los anteriores son ejemplos sencillos de lo que se puede hacer con sombras de CSS. Veremos a continuación cuáles son las propiedades que podemos manejar a la hora de utilizar sombras y algunos casos puntuales que resultan interesantes.

Box-shadow

Las sombras de la caja aceptan las siguientes propiedades: en el formato que se ve a continuación:

box-shadow: <color> <offset-x> <offset-y> <blur-radius> <spread-radius> <inset>;

Un ejemplo con datos reales podría ser:

box-shadow: #ff0000 5px 10px 7px 0px inset;

Donde el color es rojo, el offset-x es 5px, el offset-y es 10px, el blur-radius es 7px, el spread-radius es 0px y el inset está indicado.

color

Se trata del color de la sombra. Puede especificarse en cualquiera de las formas con las que podemos especificar un color en CSS. Por ejemplo podemos indicar una sombra transparente indicando el color rgba(0,0,0,0.3) .

offset-x

Es el corrimiento de la sombra en el eje horizontal. Si queremos la sombra proyectada hacia la derecha: utilizaremos números positivos; si la queremos del lado izquierdo: serán números negativos.

offset-y

El corrimiento de la sombra en el eje vertical. La sombra proyectada hacia abajo se logra con números positivos, mientras que la sombra proyectada hacia arriba se logra con números negativos.

blur-radius

Nos permite decidir cuán desenfocada está la sombra. Lograremos una sombra completamente nítida con este valor en cero.

spread-radius

Esta propiedad —cuyo default es cero— nos permite agrandar o achicar la sombra con respecto al objeto que la proyecta. Números positivos agrandarán la sombra, negativos la achicarán.

inset

Es una palabra clave que, de estar presente, indica que la sombra deberá estar en el interior de la caja (en vez de proyectada por fuera). Si la palabra no está presente (situación por default), la sombra estará por fuera de la caja.

Puedes jugar con los valores de las sombras en el código que está a continuación:

See the Pen hjpFo by Lucas Mourelle (@lucasmourelle) on CodePen.0

Text-shadow

El caso de las sombras en el texto es muy similar, pero con menos opciones, a saber:

text-shadow: <color> <offset-x> <offset-y> <blur-radius>;

Un ejemplo con datos reales podría ser:

text-shadow: #ffffff 0px 1px 1px;

Los cuatro valores permitidos en la propiedad text-shadow funcionan igual que en la propiedad box-shadow. Se trata del color, la posición (indicada por offset-xoffset-y) y el blur-radius.

A continuación, un ejemplo para jugar con los valores:

See the Pen ACuak by Lucas Mourelle (@lucasmourelle) on CodePen.0

Múltiples sombras

Algo interesante y poco aprovechado de las sombras, es que pueden aplicarse muchas sombras a un mismo objeto, cada una de las sombras se indica con todos sus valores, separada de la anterior por una coma. Por otra parte, la primera sombra en indicarse será la que estará más arriba, y la última quedará debajo de todo. Aquí algunos ejemplos:

See the Pen qkrwz by Lucas Mourelle (@lucasmourelle) on CodePen.0

See the Pen aqpfi by Lucas Mourelle (@lucasmourelle) on CodePen.0

See the Pen aHybB by Lucas Mourelle (@lucasmourelle) on CodePen.0

¡A experimentar y aplicar sombras en sitios web y tiendas online! 🙂

Ventana de mantenimiento de la plataforma

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Este lunes 12/5 estaremos realizando una actualizando a la plataforma que tomará 2 horas. Empezará a la 1:00hs. y finalizará a las 3:00hs. (Hora de Argentina)

En el transcurso de esta ventana las tiendas y el panel de administración no estarán disponibles.

El objetivo de esta actualización es mejorar el tiempo de respuesta de todas las tiendas y el panel de administración, lanzando una nueva versión de la plataforma.

Espero que sepan entender.

Documentación para diseñadores y desarrolladores web

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Sitios web bien diseñados y con información técnica de calidad para Diseñadores y Desarrolladores Web.

Encontrar sitios web con información técnica confiable sobre los estándares web, y que además estén bien diseñados y sean lo suficientemente claros para diseñadores gráficos y frontenders principantes no es fácil.

La Web está plagada de sitios web muy técnicos con información de calidad, pero en muchos casos leer esta documentación suele ser muy críptico o tedioso para la mayoría de los mortales. Un ejemplo de este tipo de sitios es el de la W3C, madre de todos los estándares. Es la fuente más confiable por tratarse de quienes regulan los estándares de la World Wide Web, pero no suelen ser aptos para diseñadores o desarrolladores que están empezando.

Otro ejemplo similar de fuente principal por ser creadores de estándares es el de la WHATWG: otro caso de sitio web críptico, muy técnico y cuyo diseño deja bastante que desear.

A continuación, nombraremos tres sitios web con información confiable y aptos para la mirada de diseñadores web!

Web Platform

Se trata de un sitio web con documentación para diseñadores y desarrolladores web. Su información es mantenida y creada por la comunidad, pero se trata de una iniciativa comenzada por una importante lista de pesos pesados de la Web: W3C, Facebook, Google, HP, Intel, Microsoft, Mozilla, Nokia, Adobe, Apple y Opera. ¡Visita el sitio de Web Platform!

Web Platform

Mozilla Developer Network

Por otro lado, Mozilla —la institución sin fines de lucro creadora del navegador Firefox— creó el sitio de excelente calidad llamado Mozilla Developer Network (MDN). El sitio tiene versiones en varios idiomas, incluyendo inglés, español y varios etcéteras, pero la mayoría del material se encuentra en inglés, como es costumbre en sitios técnicos. ¡Visita el sitio de MDN!

Mozilla Developer Network

Web Fundamentals

Por último, Google ha lanzado un sitio llamado Web Fundamentals que también promueve el aprendizaje de los estándares web que mueven nuestra querida World Wide Web. Viniendo de Google, se trata de información de calidad, curada y diseñada de forma que sus contenidos se ven sencillos y fáciles de aprender. ¡Visita el sitio Web Fundamentals de Google!

Web Fundamentals

Tres sitios web pensados para que sigas aprendiendo sobre estándares web, ¡y continúes creando más y mejores tiendas online!