December 19, 2006

Unveiling the new Hackosphere

Welcome to my Web 2.0 blog. The new Hackosphere is very different from any other blog. In other blogs, everytime you click on a permalink, the entire blog reloads i.e everything in the sidebars, not just the post that you want. But here, you can read the entire blog (pretty much) without reloading the page ever. The difference is that my blog is now driven by the power of JSON feeds. End result is that you can navigate faster through the blog.

I divide the blog into 3 sections - labels, posts under a label and a particular post (each in a different column). You start by choosing a label upon which the list of posts under that label is asynchronously loaded. Then, you pick one of the posts and the post along with its comments are displayed (instantaneously, no page reload). I have used JSON version of label feeds and per-post comment feeds to do this. Using the feed for comments enables me to do two things:
1. Showing the comments from newest to oldest. So, you can easily find my response to the comment you made within the past few days.
2. Paginate the comments. Many of my posts have received more than 50/100 comments and so, I now show the comments in multiple pages with 10 comments each. This helps me to avoid insanely lengthy display.

I have also attempted to improve the aesthetic appeal with rounded corners (only in Firefox) and pleasant colors. I call this template Neo (yes, there's a Matrix inspiration in the template). It is based on Minima but lot of the code has been rewritten. Browse through the blog and let me know what you think. If you find any problems, let me know so that I can fix them. And I will be adding things like Backlinks, links to other hacker blogs etc in the coming days.

On this auspicious day :), the new Blogger is also out of beta. What I have been able to do in this blog is a testimonial of the power of new Blogger. I also thank Hoctro for his vertical tabs hack that I have used in this blog.

52 comments:

Mentiroso said...

Congratulations!
The new Hackosphere looks beautiful and functional.
Leon

Real said...

WOW!!!!!!!!!!!!!!!!!
Now I feel like my blog is not worthy.

You are a template genius.

Ramani said...

Thanks Leon and Real. I appreciate your visit.

Boston Bala said...

Looks cool & also functionally excellent!

Any plans to share the template?

Ramani said...

Wow, nice to have you here Baba! I will email you.

Shelly said...

Very slick looking. I like the template.

Hoctro said...

Ramani!

I'm speechless!!! This is way too cool!!! and our source code is very lightweight too!

You're setting the pace for others to follow suit now, you know that! :)

It's really 2.0! It's so fast moving from one post to another.

Probably not so great for blogs that use adsense though, but then again, we're not hacking for that, right?

Cheers and congratulations! Now that's what I call stretching JSON and expanding the hacking horizon :)

Ramani said...

Hoctro,

Yes, I am quite happy with what I have done. Ever since I got the idea on Saturday, I couldn't stop until I made it into reality.

You are right. It's not suitable for increasing page impressions. But for Web 2.0, people are considering other ways to measure the hit rate.

lova said...

Absolutely brilliant. You have saved my blog from total putridity.I linked here to my blog and hope that many other will come find what they need.

咖啡鱼 said...

So beautiful!!!
And so cool!!!

LOUI$$ said...

Wow....Another evolution for hackosphere....i love the header bro, because i m a fans of matrix, damn cool~!Anyway i'm back to learn new things from master ramani! How can my frontpage appear only 1 post and appear "post a comments" like you? IS very interesting i see there!wish my master can teach again!(please don't mind i call you master, you are worth for it!)

From your student!^-^

Jason Heath said...

Great new design, Ramani. Love the blog!

大地 said...

SO COOL!!!how you do that!!please tech us !!

can't wait to flow you!

rohitsahib said...

hi,

Are labels available for ftp publishers?

And Nice template! ; - )

Just some modifications & i'll love to use something like this template.

Cheers, Rohit

bloggergo@gmail.com said...

it's so cool!!!excellent work!

Any plans to share the template?

LOUI$$ said...

bro,i have write a blog about you,visit here.Please give some comments!thanks!

Efendi said...

great ! simplicity !

Volker said...

Hey Ramani,

congrats to the new look. I love Web 2.0 and of course I love your hacks who help "settling in this new world" even for people like me ;)

Meanwhile I am working on a better version of my BBHF site for more customable feed hubs.

Best,

Volker

Rahul Prasad B said...

Nice update overall, though I didnt quite like color scheme and the matrix type logo. Cheers!

Vivek Sanghi said...

Excellent design Ramani. I like the head section with that numbers affect. Why don't you make it an animation like the matrix screensaver thinggy :) Congratulations on this gr8 new look.

Franky said...

your template is really nice. It seems you are also matrix fan like me

Raquel said...

You're so cool Ramani...I like this new layout and all the new hacks intalled. Very impressive about the without reloading the page. I love it! Congratulations!

Oh btw, good news, just last night my blog is in a new version now. I am already far behind will all of your hacks.

gentletouchee said...

this is beautiful.

can you make us some too? thanks

Paula the Surf Mom said...

Very cool my Blog Guru... Now I will have to re-work everything I have bee doing for the last 3 week on my blog.

Ramani said...

Thank you everybody who congratulated me. Many of you have asked for the template. I have to make some more modifications in the template and check if it will work in other blogs. As I have put in a lot of work in the template, I have not yet decided if I will give it out for free.

Ramani said...

Loui$$,

Calling me master is kinda wierd :) Thanks for the nice post about my blog.

Rohitsahib, I think labels are available in classic template too (that you use for FTP). Blogger has some help page for that.

TonNet said...

Great CSS show! Keep being on top of good design! Looks pretty good, man!

Anonymous said...

I like the way you favor cute javascript tricks over good design.

or

I think you are are having way too much fun with javascript and are completely forgetting good design, which is kind of sad. You're a role model and you're convincing others that bad design is cool.

The two don't have to be mutually exclusive.

Ramani said...

Funny comment, Anonymous! Anybody who really understands Web 2.0 will appreciate this design. AJAX and JSON ARE the future. All the bigshots such as Google and Yahoo are promoting them.

a.k.a. Blandly Urbane said...

Absolutely gorgeous!!!!

Ramani said...

Once again, I thank Vivek, Raquel and everybody else who commented here. Your encouragement is what drives me to do these hacks.

Waz said...

wow, zis is sooooo freaking cool!
i've been asking me flatmate about this same hack the other week!!!!
any plans on sharing it with the sphere?

btw, Merry Christmas and Happy New Year!!!!!!!!!!!! :)

Ramani said...

Waz,

It's not just a hack, but several template changes and javascript functions make this possible. It took me a lot of work. Would you be interested to buy the template for a low price?

protesto said...

Ramani, great web 2.0 work, congratulations ! But I have question, what about SEO? Is your template search engine friendly? As far as I know search engines can't follow javascript links. I think a sitemap is a must to make item pages indexed by search engines. What do you think?

Ramani said...

Protesto,

Good question. Post pages are still there and permalinks will still work. I will add permalinks to the post title/footer too. So, I think this won't affect search engines.

Raquel said...

Ramani, can I hire you to work my template, hehehe. Just tired of digging up all your archives, as I said I am far behind.

I'm serious Ramani, just name your price. Just tell me if you're interested having business with me. I will email all the details if you want me too.

Hoctro said...

Ramani,

I think I could understand what "Anonymous" is coming from, it's just that he/she doesn't make it clear enough.

I think he/she mixes up the two terms "good design" and "usability", in the old meaning of it.

I'm thrilled with the new 2.0 way, at the same time I'm not sure how your blog would look like on a browser without javascript support. To be honest, I didn't think about this either, as the majority of my hacks are javascript-based as well. Maybe you need to add code such that the template would degrade gracefully and show your old blog design, when your code detected that javascript is not enabled on the end-user?

Anyway, something to think about, I guess.

Cheers,

Ramani said...

Hahaha, Raquel, you gotta try it first. Just add the hacks one by one everyday. Don't do it in one stretch. If you get stuck somewhere, let me know. I will help.

Cyber-Buff said...

the nicest template I have ever come across!

Ramani said...

Hoctro,

Good point. But I really wonder how many people have Javascript disabled. So many websites in Internet depend on Javascript for basic stuff. I can understand if somebody has Java disabled.

Cyber-buff, that's a nice compliment!

Spicc said...

Ramani - you are an awful guy. I implement your's and other's hacks and believe i am at the good level with my blog. And you come with this matrix!
This is not fair! Can't you tranfer your know-how into my brain directly, similarly to matrix guys. That would simplify the world:)

Milind said...

Wonderful job, Ramani. Your blog looks very impressive and sleek.

Ramani said...

Hahaha Spicc, yes, that would be easy for me too. But this time, it's not a simple hack that you can add to your blog. It's a totally different template.

Janet C. said...

Very nice. I like it.

Vivek Sanghi said...

OMG you have really modified every thing. Wonder how much time it might have taken. I took some time to figure out how your comments are displaying and initially thought there's a bug. So you have the latest comments displaying first and nicely divided into pages. Gr8! May be you can have a footer at the bottom too, showing the page numbers and "post a comment" link there. As I am used to the classic style, I automatically reach for the bottom of the page looking for the comment post link. Also, I see a horizontal scroll bar for your blog with firefox. Thought I will just let you know. All the best. Gr8 work!

Wendelin said...

Dude are you selling this template? I'd defiitely be interested! Let me know - wendelinATgmailDOTcom

protesto said...

Ramani,

Search engines start indexing from the main page and then go deeper by following other links on this mage. So I think you should add a sitemap or blogger's classic archive wigdet to make item and label pages visible for SE bots.

Ramani said...

Hi Wendelin,

Yes, I have made this to work with any blog. I have decided to sell it for a low price. Just wait for my next post.

Ramani said...

Hi Vivek,

Yes, it took a few days from the idea to execution. The reason I don't show pages at the bottom is because when they click them, they may not realize that the display has changed asynchronously. At the top, it is easily noticeable. Also, it shows only 10 comments so not much to scroll up.

Protesto, yes, people can add archive widget to this template too. Also, I have added permalinks to post titles. There have always been blogs with just one post in main page. And I believe search engines crawl your blog once in a while and pickup the latest post.

Rick Warren / Helen Barker said...

Ramani, can you please look at www.garylindstrom.com (neo template). When you click on a recent post, the post title and date change but the post contents do not unless you then click on post-title. I noticed that the entry does not have a postcontent label. This was working properly until a couple days ago. I added pee-a-boo but don't think that is the problem. I also changed from garylindstrom.blogspot.com to custom domain www.garylindstrom.com. Posting where made prior to this change. Could this be the problem? I changed it back but still posting do not work properly.

Archive post work properly.

Any ideas?

Ramani said...
This comment has been removed by the author.
Ramani said...

Rick,

The peekaboo code is not compatible with Neo. So, please change it back replacing with the Neo code and it should work.