Cliente web de Twitter basado en @Anywhere, usando sólo HTML y Javascript

Me encanta la API de Twitter, y creo que es uno de los factores más importantes de su éxito: Twitter tiene montones de clientes e integraciones gracias a una API simple, bien documentada, accesible y pensada para ser usada en distintos entornos, aprovechando lenguajes estandarizados.

Ya escribí algo sobre @Anywhere, un grupo de herramientas creado para integrar algunas funciones de Twitter en otros sitios usando un par de líneas de código.

Desde que se lanzó, vi varios ejemplos y tutoriales para su implementación, pero pocos comentaron que @Anywhere permite mucho más que hovercards y botones: La API de javascript es tan completa que se podría usar para muchísimas cosas más… Y aprovechando la inspiración y un rato libre, me puse a probarlo.

Peeoh (intenten encontrar un nombre simple que esté disponible…) es una suerte de cliente web de Twitter basado en @Anywhere. Está creado usando HTML, CSS, Javascript y jQuery. Incorporé los plugins Date Format y timeago para mostrar las fechas, pero no son imprescindibles. (¿Hay una forma más simple de trabajar las fechas en Javascript? Yo no la encontré, y la idea era resolver todo en el momento…).

Prueben Peeoh haciendo click en la imagen, y, si tienen ganas, vuelvan a leer algunas notas al respecto.


Notas, ideas & bla

  • No estoy afirmando que este experimento sea único. No me encontré con ningún ejemplo que aproveche @Anywhere de esta forma, y quise probarlo un poco.
  • Javascript está muy lejos de ser mi especialidad. Debo haber hecho muchas cosas mal y, seguramente, el código se puede simplificar y optimizar bastante. Pero si yo pude hacer esto en un par de horas, alguien que sepa Javascript puede hacer lo que quiera.
  • Por ahora no planeo mejorar el código, ni crear un cliente web completo, ni nada por el estilo. Esto era para investigar un poco las opciones de la plataforma y quedará como base para, eventualmente, hacer cosas relacionadas.
  • Es algo bastante básico y directo, pero no deja de ser algo improvisado. Quizás algo falle. Al usarlo, estás aceptando no demandarme nunca en la vida. Por nada.
  • Al usar sólo Javascript y HTML, un sitio así no necesita estar hosteado (obviamente, sí necesita una conexión a internet para funcionar). Podría estar guardado en un par de archivos en el disco rígido del usuario, podría ser parte de un plugin (por ejemplo, de Google Chrome), podría ser parte de una app de escritorio o para otros dispositivos creada con algún framework que permita desarrollar usando HTML y Javascript (¿Air?)…
  • Trabajar un cliente así en PHP debe ser más fácil y práctico, pero seguro que hay condiciones donde hacer alguna de estas cosas en Javascript es mejor. Quizás en entornos simples donde ya está implementado @Anywhere como una forma de login se puede aprovechar para sumar funcionalidades, o para actualizar el estado de Twitter de un usuario cuando interactúa con el sitio…
  • Todo el trabajo se hace entre Twitter y el browser. Incluso la cantidad de archivos se puede reducir si hiciese falta (no usé imágenes… podría estar todo en un sólo archivo con una telaraña de código).
  • Visualmente, no tenía nada en mente cuando empecé a experimentar. El diseño es muy mejorable, lo fui improvisando sobre la marcha, pero claramente todo lo que se pueda hacer en HTML y CSS podría hacerse con esto.

Update: Luego de una primera versión, Emiliano (que sabe Javascript de verdad) me ayudó a que la actualización automática funcione de una forma menos brusca. Trabajar con esos resultados, reordenarlos (los nuevos tienen que aparecer arriba, ordenados al revés de lo que vienen), lidiar con los límites de la API… se hizo muy difícil. Finalmente hicimos algo más sencillo, agregando un elemento nuevo con updates cada vez que hay una actualización.
De paso hice que las fechas se vayan actualizando cada vez que hay un update, sino todo lo que se agrega automáticamente mostraría “hace segundos” por más tiempo que haya pasado.