Link del día: En defensa de los hacks CSS

Para mi sorpresa, me encontré con un artículo de Mathias Bynens llamado In defense of CSS hacks – introducing “safe CSS hacks”. él habla e introduce el concepto de los hacks CSS. Permítanme hablar un poco sobre su idea.

él menciona que los CSS hacks son básicamente comportamiento especial que podemos invocar en cada navegador, algo que a veces es totalmente deseado, y no tiene por qué ser un problema o una mala práctica, sino que puede ser usado para muchas cosas. El uso más común que se le ha dado hoy en día es hacer “tweaks” específicos para la forma de renderización de cada navegador/versión y entonces lograr una visión consistente a lo largo de todos los navegadores.

Sin embargo, decir que tenemos control sobre el estilo de cada navegador y/o versión no necesariamente quiere decir que lo utilicemos sólo para lograr una vista homogénea. De hecho, gracias a ellas podemos utilizar determinadas características que hacen la exploración en un determinado navegador más natural dentro de las capacidades del mismo.

Esto, combinado con sentencias condicionales, hace que podamos tener mucho control sobre lo que el navegador utiliza de nuestro código.

Los dejo con el último ejemplo que el artículo plantea:

<!--[if lt IE 9]><html class="lte-ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
.foo {
  color: black;
}

.lte-ie8 .foo {
  color: green; /* IE8 and older */
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}

Personalmente no me encuentro de acuerdo con esta propuesta, pero veo que tiene sus fundamentos. ¿Ideas? ¿Críticas?

Soy un zorrinito hackeado.

(Read more →)

Tener una web minimalista...

… te permite hacer este tipo de cosas:

¿Acaso a alguien más le encanta la forma en la que Twitter maneja los emails? Me agrada muchísimo la idea en donde hicieron el estilo de los emails totalmente similar al de la web. Simple, clara y con la información justa.

Notesé hasta la presencia de la barra superior, al estilo de la web, cuando notificaba de la existencia del nuevo Twitter. (De hecho, por alguna razón a veces lo sigo viendo. Hay alguien que todavía no esté usando la nueva versión?)

Soy un zorrinito simplista.

(Read more →)

Link del día: Phantom, un nuevo protocolo para anonimidad

Recuerdan Freenet y cómo se basaba en el concepto de crear una internet paralela, totalmente descentralizada e indetectable? La idea sigue creciendo y el proyecto sigue obteniendo sus aportes, pero también han surgido esfuerzos paralelos, que también intentan solucionar alguno de los problemas que este proyecto tuvo.

Phantom es un proyecto similar. Básicamente plantea los mismos estándares y, para ser más precisos, lo indico desde la página de su proyecto:

  1. Completamente descentralizado
  2. Resistencia máxima a todo tipo de ataque DoS
  3. Anonimidad segura
  4. Encriptación de transporte segura de punta-a-punta
  5. Aislada completamente de la internet actual
  6. Protección máxima de identificación de uso del protocolo a través de análisis de tráfico
  7. Capaz de trabajar con altos volúmenes y buenos resultados
  8. Diseño genérico y abstraído compatible con todos los softwares de redes actuales y futuros

Por lo que vemos, no es nada de principiante, y personalmente no he podido probarlo pero sí me siento muy interesado en poder hacerlo. ¿Ustedes qué opinan?

Soy un zorrinito seguro.

(Read more →)

Link del día: JSONSelect

Para aquellos que hayan trabajado con jQuery (o con otras librerías JavaScript) sabrá que la sintaxis para usar los selectores es prácticamente algo mágico, que hace muchísimo más simple nuestro trabajo.

Alguien pensó que sería muy buena idea poder seleccionar datos en esa forma desde una estructura en JSON y, justamente, creó JSONSelect. Esta pequeña librería todavía se encuentra en una etapa muy experimental, muy poco madura, pero ya podemos ver determinadas demostraciones en vivo funcionando.

Cuando tenemos un sistema que diseñamos nosotros y elegimos transmitir la mínima cantidad de datos posibles, no tiene mucho sentido la aplicación de esta técnica. Pero si necesitamos dejar muchos datos del lado del cliente (y por qué no, decidamos hacerlo en JSON), o estemos usando servicios de terceros que nos den una estructura algo compleja, puede que JSONSelect nos haga muy fácil, intuitivo y legible la forma en que estamos accediendo a determinados de esos datos.

Soy un zorrinito selectivo.

(Read more →)

Link del día: Notas sobre HTTP Load testing

Hace poquito encontré esta serie de notas que conformaron un artículo sobre HTTP Load Testing. El artículo trata distintos puntos relativos a cómo se ve afectada la calidad del testing, a la vez de distintas técnicas para tener (o para evitar) de forma que los resultados del testing sean lo suficientemente confiables como para significar algo.

Por otro lado, siempre están esos consejos de la experiencia que podemos leer ahí también, y que si bien no tienen mucho sentido en un principio, tras haber hecho caso podemos ver la razón real de por qué se nos aconsejaba eso.

El artículo está muy interesante, incluso si están pensando en aplicarlo a load testing que no necesariamente sea HTTP, yo creo que aplicaría a cualquier tipo de testing cliente-servidor, y también varios de estos conceptos serían útiles para load testing de cualquier tipo de aplicación.

Soy un zorrinito cargado.

(Read more →)

Link del día: Mockups iPhone, funcionales!

Acordándome de cuando hablé de Create Free iPhone Apps, quería charlar sobre esta aplicación web llamada Mokk.me, una aplicación que nos permite visualmente construir elementos de un diseño gráfico para iPhone y personalizar esos elementos a gusto.

Cabe aclarar que todo este sistema funciona en nuestra máquina, quizá la única funcionalidad del servidor es guardar URLs de diseños en particular para luego poder modificarlos. El UI es bastante completo y fácil de utilizar, prácticamente todo se puede hacer con un click, así que es una experiencia muy intuitiva.

Mejor aún, del resultado que tengamos, sólo tenemos que visitar un link para verificar en nuestro iPhone cómo se ve, y luego de eso ya podemos guardar ese HTML para utilizarlo en nuestro producto. Más simple, quizá sólo sea la otra aplicación, que hace todo por nosotros.

Soy un zorrinito mobile.

(Read more →)

Link del día: Linux en tu explorador

De los creadores de Compiladores en línea y de Más compiladores online y compitiendo con Máquinas virtuales en la web nos llega un linux que podemos correr en nuestro navegador. Emulado. En JavaScript.

Así como suena, este logro interesante llamado JavaScript PC Emulator parece correr totalmente del lado del cliente, con unos 150 Ks de memoria (aunque no lo he verificado).

Parece que este es otro de los proyectos de Fabrice Bellard, aunque no el único. Si no les suena el nombre de este muchacho, él es quién comenzó qemu, ffmpeg, lzexe… palabras grandes.

En fin, la versión de Linux en el navegador parece ser totalmente funcional, aunque no tiene mucho en él, y no me he puesto a investigar de qué forma podrían extenderse sus capabilidades, tampoco he visto que detecte dispositivos de comunicación más allá del clipboard (que tenemos disponible como un textbox en la página), como para poder instalar algo. Aún así… interesante, no?

Si leemos las notas técnicas al respecto veremos otros detalles y el hecho de que esto comenzó como pura diversión, pero que fácilmente podrían encontrársele algunas aplicaciones útiles. Cómo que no! Un sistema operativo corriendo en el navegador!

Soy un zorrinito asombrado.

(Read more →)

Link del día: Herramientas para CSS3

Desde hace rato que tengo ganas de hacer algo en CSS3, y no dudo que muchos de ustedes también. La gran pregunta que todos debemos tener es “Cómo empezar?”. El qué hacer es un tema aparte, pero el cómo hacerlo es algo que seguramente podemos solucionar con algunas herramientas.

Algunas de estas herramientas están enumeradas en el artículo de Cats Who Code llamada 10 Useful tools for CSS3 development. En este pequeño artículo nos cuentan de distintas herramientas (todas muy visuales y atractivas) que nos permiten usar características de CSS3 en Internet Explorer, crear estilos desde cero, o trabajar con características en particular, como sombreados, refactorización, border-radius.

Hay dos en particular que más que herramientas son un algo especial. Una de ellas es Modernizr, del cual me sorprende no haber comentado antes: sin ningún tipo de JavaScript hace uso de selectores para utilizar condicionalmente características que pueden estar soportadas o no. (Aunque yo prefiero Selectivizr que emula esos comportamientos.),

El otro de ellos es simplemente una página de referencia, que es el HTML5 & CSS3 browser support. Su nombre ya es bastante indicativo de qué contenido tiene.

Y como extra, y como no podía ser de otra manera, un CSS3 Cheat sheet.

Soy un zorrinito CSS3.

(Read more →)

Link del día: Img to CSS

Del cajón de las utilidades curiosas y técnicas que algún día puede que utilicemos, llega la aplicación web llamada Img to CSS, que, como su nombre lo indica, transforma imágenes en CSS.

En el fondo no es taaaaaaaan verdad, porque termina generando tablas con celdas de un píxel (o más, si se trata del mismo color) que con CSS inline genera los colores para la imagen. Esto puede ser interesante para enviar en mails, y que los destinatarios puedan ver imágenes sin necesidad de aceptar la bajada de imágenes. Sin embargo, no se puede utilizar en todas las formas que usamos las imágenes comunes.

Soy un zorrinito curioso.

(Read more →)

Link del día: Performance HTML5, CSS3 y DOM, Parte 2: Performance HTML5

Hay varias formas de aproximarse a la performance de una aplicación que está construida bajo los nuevos estándares e implementaciones de HTML5, CSS3, y, por supuesto, JavaScript. Como ya lo habíamos mencionado en la parte 1 de este artículo, el tutorial de HTML5 Rocks llamado Improving the performance of your HTML5 App trata varios puntos que son importantes para lograr una buena performance y una aplicación sólida.

Repasémoslos rápidamente:

  • Delegar animaciones al browser siempre que sea posible
    • Transformaciones y trancisiones con instrucciones CSS
    • Renderización “incentivada” a ser a través del GPU con -webkit-transform: translateZ(0);
    • Separación de threads de animación con window.requestAnimationFrame
  • Profiling de JavaScript
    • Utilizar el DOM lo menos posible
    • Nombrar funciones anónimas para identificar dónde están los problemas más fácilmente
    • Refactorizar el código
    • Crear funciones definidas y autollamadas si hacer métodos más pequeños no se puede (de esa forma “nombramos” parte del código)
  • Utilización del DOM
    • Lo menos posible (nuevamente)
    • Cachear elementos cuando tenga sentido
    • Hacer lecturas, luego modificaciones, luego escrituras para evitar reflows
    • No usar el DOM dentro de loops
  • Inicialización tardía
    • Delegación de eventos en lugar de asociación de handlers

Y eso es, a muy grandes rasgos, este artículo. Realmente recomiendo que le den una leída a fondo si ustedes trabajan del lado de la web. Realmente no verán una página de la misma manera.

Soy un zorrinito performante.

(Read more →)