Alpha&#039;s Manifesto

Tags: desarrollo web, documentación, JavaScript, jQuery

September 29, 2011

09:00

Link del día: Trucos de consola de Chrome

De parte de la gente de HTML5 Rocks! tenemos un pequeño post con dos videos cortos (7 minutos cada uno), llamado 7 minute videos: Javascript Console Protips & newish DOM APIs, en donde Paul Irish nos cuenta sobre determinados truquillos que podemos utilizar para debuggear JavaScript, mayormente en Chrome (aunque dos de los trucos se aplican a Firefox y a Opera).

Personalmente no me encuentro desarrollando mucho JavaScript pero creo que adoptaré alguno de estos trucos, especialmente el $0 que hace las cosas terriblemente más fácil, junto con keys(), console.time() y copy(). A ver si puedo ponerlos en mi navaja suiza diara.

Soy un zorrinito loggeado.

Tags: consola, desarrollo web, Google Chrome, JavaScript, video

September 20, 2011

09:21

Link del día: Chirpy

Ayer hablé un ratito más con JH y siendo que no hay una sola charla que pueda tener con él en donde no aprenda algo, me comentó de su más reciente descubrimiento: Chirpy.

Chirpy es un proyecto open source de un plugin para Visual Studio que nos permite trabajar con archivos js, css, .less y T4 de forma casi nativa. Además, nos genera minimizaciones, hojas de estilo y transformaciones a medida que vamos guardando los archivos, casi “real time” a como estamos trabajando. Básicamente, nos permite extender la cantidad de herramientas que disponemos en tiempo de diseño.

No lo he probado personalmente, y no sé si es que introduzca algo de lentitud al entorno pero parece realmente convenir para tener una más variedad de posibilidades al momento de desarrollar, ahorrándonos tiempos de pruebas e integración.

Soy un zorrinito integrado.

Tags: CSS, desarrollo, desarrollo web, JavaScript, plugin, Visual Studio

August 12, 2011

12:27

Link del día: CSS Semántico

Desde CSS Tricks (muy buen sitio de referencia, por cierto) me llegó un artículo llamado What Makes for a Semantic Class Name? Este tema parece algo tonto desde su concepción básica: “cómo nombrar clases de CSS”. En un principio, realmente no importa cómo se llamen, si el estilo está bien, se verá bien y será como nosotros queremos.

La situación se pone realmente interesante cuando estamos planeando nuestro sitio para el cambio, y entonces una clase como “hd24ba” no tiene mucho sentido (menos aún si la generó algún software nefasto de web development). Ahí es donde – la buena práctica dice – lo conveniente es trabajar con nombres de clases semánticos, que representen el real hecho de por qué son clases. Una clase de qué están representando, un tipo de qué objeto están estilizando.

Por supuesto que esta definición es algo vaga y entonces es difícil determinar cuál es el punto específico de abstracción es realmente semántico y cuando excedemos un punto límite que hace que no estemos hablando de nada.

Yo creo, aún así, que estas prácticas son bastante discutibles, y que las reglas se pueden torcer un poco. ¿Qué opinan?

Soy un zorrinito semántico.

Tags: best practices, CSS, desarrollo web, web semántica

June 20, 2011

11:36

Link del día: Minify

Tratando de retomar la periodicidad de los links del día, hoy quiero hablar de Minify. Minify es una librería PHP de código abierto autocontenida que podemos utilizar para minimizar, unificar, cachear y definir nombres propios para recursos que queremos utilizar y mejorar la performance de nuestro sitio.

La librería no sólo soporta el trabajo con CSS, JS y HTML, minimizándolo completamente, sino que además puede ser utilizado para minimizar recursos bajo un solo nombre, y mejor aún, también es extensible para que podamos servir cualquier tipo de contenido de cualquier otra fuente. De hecho, lo probé cacheando y sirviendo recursos desde un sitio propio cuando los recursos en realidad son leídos de un lugar ajeno. Las ventajas de eso son el poder servir todo el JavaScript/CSS junto incluso aunque no nos pertenezcan, y ahorramos pedidos, y evitamos que el cliente deba acceder a múltiples dominios.

Y lo mejor, ni siquiera tenemos que andar haciendo referencia a los nombres de los archivos (aunque es la forma más fácil), ya que podemos definir grupos con nombres y utilizarlos. Eso nos brinda la ventaja de poder jugar mucho con eso y con el dinamismo de nuestra aplicación.

Pero en fin, lo interesante es la forma en la que minimiza, y lo simple que es de usar. ¡Dénle un intento!

Soy un zorrinito minimizado.

Tags: CSS, desarrollo web, JavaScript, librería, performance, PHP

1 comentario

June 13, 2011

12:12

Link del día: Spine.js y cómo utilizarlo

Building JavaScript Web Apps with MVC and Spine.js es un artículo muy explicativo de cómo debe ser la estructura de una aplicación MVC junto con herramientas de Spine.js que nos permitirán hacer más sólidas nuestras aplicaciones. Para aquellos que no sepan qué es MVC, aquí tienen una corta y buena explicación, y para los que no sepan cómo se usa Spine.js, también tienen un buen ejemplo.

Personalmente me gusta que la aproximación presentada es bastante limpia y lo suficientemente simple como para ser entendible sin confundir distintos conceptos. Recordemos que, aunque poco funcional, es un ejemplo para aprender de qué se trata.

Como extra, y para los más interesados, el artículo incluye una entrevista con uno de los desarrolladores de Spine y varios otros ejemplos.

Soy un zorrinito MVC.

Tags: artículo, desarrollo web, JavaScript, MVC

June 9, 2011

11:49

Link del día: HTML5 Front End Framework

Para todos aquellos que necesitábamos una forma de fácilmente comenzar con trabajos en HTML5, tenemos la opción de comenzar con algo ya estructurado sobre lo que podemos hacer nuestras modificaciones a gusto.

Me he encontrado principalmente con dos opciones muy interesantes. La primera de ellas es HTML5 BoilerPlate, del cual habíamos hablado algún momento en el pasado. Básicamente es un template que podemos utilizar para arrancar rápidamente con la configuración básica de una aplicación HTML5. Ya incluye un poco de configuraciones para cacheo, optimizaciones para mobile, un framework de testing y varias cosas más.

La segunda opción es G5 Framework, que bajo el mismo concepto tiene también varios elementos sobre los que podemos pararnos para impulsar nuestro proyecto. Este además ya tiene una buena cantidad de librerías incluidas con lo que podemos inmediatamente comenzar a constriur sobre ellas, y sobre un framework CSS, útil como siempre.

Quisiera ver qué trabajos se logran con estos frameworks.

Soy un zorrinito HTML5.

Tags: CSS, desarrollo web, framework, HTML, HTML5, librería, proyecto

June 3, 2011

13:55

Link del día: Normalize CSS

A pesar de lo que parece, Normalize CSS no es lo mismo que reset CSS. El reset común vuelve todos los valores que los navegadores por defecto tienen distinto a 0, para que cualquier cambio que hagamos tenga el valor que nosotros asignemos.

Sin embargo, hay quienes realmente defienden la diferencia de estilos que cada navegador utiliza por defecto, para dar una experiencia del usuario distinta (y todavía me falta crear un post sobre el tema para exponerlo en detalle). Para ellos, Normalize CSS tiene mucho más sentido, porque no se fuerzan las propiedades a tener determinados valores, sino que sólo se normaliza todo a un estado consistente, desde el cual cada navegador utiliza sus valores por defecto.

Como extra, esta librería en cuestión también corrije varios errores comunes, o bugs que los navegadores pueden tener, y agrega ciertas mejoras de las que podemos aprovecharnos.

Soy un zorrinito normalizado.

Tags: cross-browser, CSS, desarrollo web, experiencia del usuario, user experience

June 2, 2011

11:28

Link del día: CSS Crush

Siguiendo con la seguidilla de links sobre CSS, hoy les traigo CSS Crush. En este caso en particular, se trata de una librería php que muy gentilmente se encarga de extender nuestras capacidades sobre CSS para evitar la repetición de código, mientras que la información que se envía al cliente es totalmente distinta.

El artículo que lo explica lo compara con otros pre-procesadores CSS que se han probado, y aparentemente CSS Crush sería el más completo de todos ellos. Debe ser server-side, debe tener la posibilidad de cachear, de utilizar variables a gusto, y CSS Crush provee todo eso y un poco más, permitiendo una generación de código muy consistente.

Soy un zorrinito preprocesado.

Tags: CSS, desarrollo web, PHP, preprocesador, server-side

May 26, 2011

12:05

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.

Tags: datos, desarrollo web, JavaScript, jQuery, JSON, librería