From 0afbfaee75e8480e8e0ed0a3bbd3749a4756f727 Mon Sep 17 00:00:00 2001 From: franck cuny Date: Fri, 10 Sep 2010 23:25:10 +0200 Subject: initial import --- _posts/2008-08-16-my-lifestream-page.textile | 58 ++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 _posts/2008-08-16-my-lifestream-page.textile (limited to '_posts/2008-08-16-my-lifestream-page.textile') diff --git a/_posts/2008-08-16-my-lifestream-page.textile b/_posts/2008-08-16-my-lifestream-page.textile new file mode 100644 index 0000000..51895bd --- /dev/null +++ b/_posts/2008-08-16-my-lifestream-page.textile @@ -0,0 +1,58 @@ +--- +layout: post +category: perl +title: my lifestream page +--- + +For a while I've wanted to mash-up the different services I use on a single page. My first attempt was with plagger, and publishing all the information on my google calendar. That wasn't really interesting, as I don't need to archived all this stuff. After this one, I've tried to make a static page, using the yahoo! library interface stuff. A page with tabs, each tabs for a service. The content was generated with Plagger and Template Toolkit. It was working fine, but I had to do some HTML, check why some some stuff were not working, etc. And as I'm not a designer, and as I'm incapable to think a good user interface, I was quickly fed up with this solution. + +I use yahoo! pipes for mashing some feeds, and saw that you can get a result from your feed in JSON. I've started to think about a simple page with just some javascript, a simple css, and using the JSON result. So I've created a feed that combine the services that I use (the pipe is here), created a simple HTML page, read some jquery documentation on how to read a JSON file, and created this page. The code is really simple. For the flickr stream, I use the code generated from the badge generator. I've done some modifications, like removing the table, removing some classes, altering the css, ... The remaining code is + + +{% highlight html %} +
+
+{% endhighlight %} + +For displaying the result of the JSON feed, I've found some simple code, that I've modified a bit to feet my purpose. + + +{% highlight javascript %} +$(function(){ + var CssToAdd = new Object(); + $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=NMLU4MNq3RGDW_8fpwt1Yg&_render=json&_callback=?', + function(data){ + $('div#loading-area').hide('fast'); + $.each(data.value.items, function(i,item){ + var a_class; + + try { + if (item.link.match(/last/)) { + a_class = 'lastfm'; + }else if (item.link.match(/pownce/)) { + a_class = 'lastfm'; + }else if (item.link.match(/breizhdev/)) { + a_class = 'blog'; + }else if (item.id.content.match(/google/)) { + a_class = 'greader'; + }else{ + a_class = 'delicious'; + } + }catch(err){ + a_class = 'delicious'; + } + + $('').attr('href',item.link).text(item.title).addClass(a_class).appendTo('#sample-feed-block'); + }); + $('#sample-feed-block a').wrapAll('