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

Anonymous said...

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

You are a template genius.

Unknown said...

Thanks Leon and Real. I appreciate your visit.

Boston Bala said...

Looks cool & also functionally excellent!

Any plans to share the template?

Unknown said...

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

ShellyS said...

Very slick looking. I like the template.

Hoc Tro Viet 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 :)

Unknown 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.

Unknown 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!

rohit malik 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

Anonymous 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

Unknown 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.

Ajey 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.

Boy said...

this is beautiful.

can you make us some too? thanks

Bill Graber 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.

Unknown 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.

Unknown 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.

Milton Ramirez 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.

Unknown 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!!!!

Unknown 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!!!!!!!!!!!! :)

Unknown 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?

Unknown 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.

Hoc Tro Viet 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,

Unknown 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!

Unknown 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 Phanse said...

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

Unknown 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 copenhaver 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!

Nandini 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.

Unknown 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.

Unknown 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 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?

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

Rick,

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