31 January 2007

'Don't-leave-the-page' labels widget

Onset of labels sure did kill off the greatest playground of hackers. No more hacking with Del.icio.us to get a list of posts tagged or 'labelled' under a particular category. So what do we do now? Find ways of making Blogger Labels asynchronous ofcourse. There are quite a few hacks out there that do this nicely, but I just had to do it my way :)

The hack

This little code creates an asynchronously loaded list of the posts classified under a particular label, sorted by last update time, and shows it right below it. You can see it in action in the sidebar on the right. Click on any one of the topics. It also removes the list if it's open, and you can open up more than one category at one time. I was experimenting with a few functions I made and DOM functions, so this should work in all modern browsers without too much hassles (I don't care about IE).

The elements are all lists, so you need to just create a CSS class for postList, and style it as you see fit. I haven't included code to show a 'Loading...' type message because this is quite fast, so many people won't get any lag time. I've managed to integrate it with the Blogger Labels widget, so you just need to make a little change to the widget code. Yes, you'll have to expand the widgets (sorry!).

The code

Wrap the following in <script> tags and put it in your <head> area:

//<![CDATA[
function $(){
  for( var i = 0, node; i < arguments.length; i++ )
    if( node = document.getElementById( arguments[i] ) )
      return node;
}

var _id = '';
function showLabel(name){
    _id = name;
    if($(name+'-expanded')) {
    $(name+'-expanded').parentNode.removeChild($(name+'-expanded'));
    $(name).style.textDecoration = 'none';
        }
    else {
    $(name).style.textDecoration = 'underline';
    var script = document.createElement('script');
    script.src = 'http://<BLOGNAME>.blogspot.com/feeds/posts/summary/-/'+name+'?alt=json-in-script&callback=makeList';
    script.type = 'text/javascript';
    
    document.getElementsByTagName('head')[0].appendChild(script);
    }
}

function makeList(json){
var d = document.getElementById('Label1');
var i=0, j=json.feed.entry[i];
var list = document.createElement('ul');
list.id = _id+'-expanded';
list.setAttribute('class','postList');
var frag = document.createDocumentFragment();

  while(i<json.feed.entry.length){
    j=json.feed.entry[i];
     var t_link = document.createElement('a');
         t_link.href = j.link[0].href;
    if(j.title.$t.length>37)
        t_link.appendChild(document.createTextNode((j.title.$t).slice(0,37)+'...'));
    else 
        t_link.appendChild(document.createTextNode(j.title.$t));

      var title = document.createElement('span');
     title.setAttribute('class','postTitle');
         title.appendChild(t_link);

    var li = document.createElement('li');
    li.appendChild(title);      
    frag.appendChild(li);
    i++;
      }
    list.appendChild(frag);
    $(_id).parentNode.insertBefore(list, $(_id).nextSibling);    
}
//]]>

All you need to do is replace the <BLOGNAME> with the name of your blog. I'll explain the various parts of it at the end, so that you can change it to suit your needs. The next bit of code is where it gets a little ugly. Expand the template, and then go looking for your Labels widget. Once you find it, replace the entire widget with this code:

<b:widget id='Label1' locked='false' title='Topics' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul class='elegantList'>
    <b:loop values='data:labels' var='label'>
      <li expr:id='data:label.name'>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a href='#category' onclick='javascript:showLabel(this.innerHTML)'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Do this only if you're widget hasn't been tinkered away from the default Blogger widget, which should be the case in most of the situations. That's it, you're done! :) Reap the benefits!

Explanation and further tinkering

This uses the dynamic script tag method to get a list of posts from the label feed. It then proceeds to form a list out of the post titles, and then using my home-made method of inserting a node, puts the list after the node specified by the 'id' of the parent node of the clicked link.

It also slices the post title to keep in within 40 characters, so that it doesn't wrap to the next line and take up unnecessary lines in your sidebar. You can change this by changing the '37' in the if statement, and line following it. However, this number should satisfy most cases. To style the list, as I said before, define a CSS class for ul.postList and then proceed to style the lis under this.

Once again, this will not work on a preview page, so you'll have to save it and then test it. I hope you get it working without too many hassles!


30 January 2007

Unveiling: The Last Word (Gold Edition)

I am still keeping the blog in beta, because as has become quite obvious, changes will keep coming and going! There are a few changes I've made to the layout, and the way the blog functions now.

There is more than one post on the main page now for one, so less clicking. I've also revamped the bottom area. It'll contain the comment on the post pages, and a list of recently updated posts otherwise. The sidebar makes a return, with three widgets for now Updated to five - A colophon and the blog archives. The 'Topics' widget will be updated for asynchronous loading of the post list of a particular label has been updated with this new hack. I'll release it soon. I've removed smilies, they were becoming a little distraction. The hack still exists though, so no need to worry there :)

A good side-effect of the building from scratch is that I removed things that were unnecessary, and that's made the loading much faster. Also, as a friend pointed out, this is not exactly the 'minimalistic' that some people might have thought. To be very honest, while it had started off as minimal, I just kept on adding things which I liked, and ultimately ended up with this. This is by no means the final product, and my bad habit compels me to keep making small changes here and there. I am aware that the codes for my hacks don't show up properly. I'll be switching to a better way of displaying them, so I had to take out the old version. Please bear with me This is now fixed. Thanks to Dan Webb for the excellent code highlighting script. I've had my eyes on this one for a while :)

I think is a nice warm template to welcome the spring and summer time (it's a little far away, but I like to be prepared :) ). Hope you like it!


28 January 2007

Another design change

You might have noticed some sluggishness in my posting. Posts are few and far apart (although they're generating quite a lot of traffic :) ). That's because I'm home on my college vacations (1st semester got over), so I'm busy with family and friends!

Don't worry, work is going on behind the scenes as well! :) I promise a 'completely' new look and more posts in the coming weeks. People might say that this look is better than 'that' one, but I am making a change for a good reason! I'll give just one clue to the new look ... 'minimalistic'. Hehe! :D

So, do not worry! All is good here! I will return in full glory very soon! Thanks for hanging around.

P.S. While you're at it, fire of a few hundred more mails to Avatar, will you? I don't know what it'll take to get Bloggeratto off it's ass! Maybe your mails will do the trick?


22 January 2007

A date to behold!

I have updated the code with a much cleaner one, which can be changed easily if you want to alter the order or anything else. If you have one, you don't need to update, but first time users might as well take the new one.

Also, if someone has trouble finding the correct date format, see the picture below. It's the second last format in the list :)


This was something that I wanted to have when I saw it on Lifehacker. Their dates look, well, different, and I thought it'd be really cool to let your dates stand out than the normal one line dates that Blogger forces us to have. It is basically a function that takes in the Blogger date as an input, does some fancy splitting and slicing, and outputs the day, the month and year in it's own seperate line, or if you like it, as a picture. There is a catch to the niceness.

Before you jump in

If you want to use pictures, like I have, you'll have to put in some time and photoshop work. Since there is no scripted way of generating pictures (not without much hallabaloo at least), you will have to make the picture for all days, months, and a few years. That means, you will need a picture with the numbers 1-31, month names January to December, and a few years from 2006-2008 (or from whenever you started your blog). This can be quite a job, so I'll suggest you go with the first method.In case you want the pictures, you'll need to modify the document.write statement to output image tags, with the source set to in a format of url/"+array-element+".png. This will generate an image for every value held in the array. That will take a bit of template modding as well, with some knowledge of CSS to make the styles. Don't say I didn't warn ya! :P

The code

Let's get hacking. Begin by changing the date format output of your dates from the blog settings. Change it to show dates as '23 January 2007' (with the spaces, no commas). Then put in this bit of code in your <head> area:

<script>
function date_replace(d){
 var da = d.split(' ');
 day = "<span class='theDate'>"+da[0]+"</span>";
 mon = "<span class='theMonth'>"+da[1].slice(0,3)+"</span>";
 year = "<span class='theYear'>"+da[2]+"</span>";
  document.write(day+mon+year);
}
</script>

Now, you'll need to find the place where the date tag is in your template. The date tag looks like <data:post.dateHeader/>. You'll have to replace that line, and anything else within that <b:loop> tag, except the conditional statement (<b:if>) with this:

<div id='post-date'>
<script>date_replace('<data:post.dateHeader/>');</script>
</div>

That's all you have to do at the template hacking level. The next to do will be to define styles for your newly generated date. Your three parts of the date are held in three <span> elements as you can see from the function up there, with the class attribute set to 'theDate' (for the day), 'theMonth' and the 'theYear'. You can style all of them the way you like it by defining classes in your CSS named as div#post-date span.theDate and so on. You should set a display: block; to begin with so that they all come up in a seperate line. Other CSS style attributes can be applied as per required. The parent element will be styled with a div#post-date to hold the background. It can be a picture or a simple colour, it's up to you. Here's a sample CSS definition which you can use in case you're lazy:

div#post-date {
  display: block;
  float:left;        /* set this to right if you want it go to the right */
  padding: 1em;       /* to keep the text away from the edges */
  background-color: #555555;  /* you can change this to hold a picture, will make it look nicer */
  border: 3px double gray;   /* a border to make it look nice */
   }

div#post-date span.theDate {
  display: block;       /* to put this in a different line */
  font-size: 3em;       /* to make the date stand out */
  background-color: transparent; /* to let the background show through */
  color: white;
   }

div#post-date span.theMonth {
  display: block;
  font-size: 1em;       /* smaller compared to the date */
  background-color: transparent;
  color: white;
   }

div#post-date span.theYear {
  display: block;
  font-size: 1em;       /* smaller compared to the date */
  background-color: transparent;
  color: white;
   }

All that will go within your <b:skin> tags in case your wondering. If you know what you're doing, go around and play with the attributes to get what you'll actually looking for.

That's pretty much it! It'll be a little hard to use images with this for those who don't know Javascript, so if you want, I could modify the function for you to output the images. You'll need to give me the URL to your images though. Do 'not' use Blogger Image hosting to upload your pictures. The path is never constant, and this function requires that the path always be constant, with only the names of the images changing. The names themselves should be 1.png, 2.png and so on for the days, January.png and so on for the months and 2007.png for the years. All in the same format! You'll need to make 31+12+1 (atleast) = 44 images. I did it twice :P Once for my old blog, and then again for this new one. I'm beginning to not like this look too, so a third round might be imminent!

But now you know how to get it done! So go ahead, make your dates look great!


19 January 2007

State of broadband in India

Going through GigOm, I bumped into the article which states that BSNL will be launching a 2Mbps broadband connection in the country this year. If that claim itself isn't ridiculous, they say that that the price will be Rs. 250. That's roughly $5.62, which is dirt cheap even for a government funded company. What's going on here?

Well, the catch is that one has a (terrible, I must say) download limit of 1GB a month, and use above that limit will be chargeable at 90p ($0.02) per MB. As the article at Sify rightly states:

A K Sinha, Chairman and Managing Director, BSNL added that the limit for corporate customers would be enhanced to 4GB. In other words, you can check your emails at a blazing pace considering that’s what you can do to stay within the offered download limit of 1 GB – 4 GB.

Telecom's own boom

India saw a telecom boom in the past two years, with a meteoric rise of Bharti A private company which initially launched the landline service 'Touchtel', and later moved to acquire the mobile-phone solutions company 'Airtel'. It now offers both services under the brand name of 'Airtel'., and introduction of big time players such as Reliance and Tata into the info/telecom market. Offering competitive prices for quality service, these companies quickly ran over the existing estabilished company VSNL Virtually the sole Internet provider to the country for a long time. Even now, the major companies pay a share to VSNL to use their servers to gain access to the Internet, so technically, VSNL remains the biggest Internet provider in India. completely. Now, the preferred company is Airtel for residence as well as corporate Internet solutions. I use Airtel myself, and am very happy with them. The rates and speeds are very good, with speedy complaint clearance. I have never tried Reliance, but I haven't heard good things about them either, so can't say much there. Whoever the provider however, the speed fluctuations prevent any proper productive use of the Internet Things like gaming, video-conferencing, downloading genuinly huge files. My speed is 128 Kbps, and a 600 Mb movie takes a whole night. You can imagine the rest. I'd sure love to be able to connect to a gaming server in the US to kick some butt, (I'm a CounterStrike buff! :P) but that seems a far cry at the moment.

BSNL itself has had quite a bad run uptil now. People have rushed in to take their relatively cheap plans and have come out cursing the after sales service and server downtimes. It is pretty much expected from a government company, hence this move now seems extremely ambitious.

Predictions galore

Sify predicts the year 2007 as the year of the broadband in India. I'd love to agree with them. At the moment, broadband is classified by the TRAI as any 'always-on' connected above the speed of 128 Kbps. I believe the international definition starts at 512Kbps. The scene is pretty dismal, but our lack of infrastructure, and preference being given to spread technology first to the rural areas and then to the urban parts seems to slow down the progress that we could have made. But we're slowly getting there with attempts such as this.

If nothing, this will actually push the other players to improve their services to challenge BSNL's user base. This is ofcourse, only good news for everyone (including me)! :) I'd love to see my speeds hit 512+ Kbps :D The existing monopoly lies with Airtel, so the first change will definitely come from them. An upgrade in the connection speeds will see a lot of more participation in gaming, start-ups and other Internet related stuff that the international market has gotten used to, coming from India. We don't lack the ability, just the infrastructure. Maybe even an upgrade to our technology to go for WiMAX, and make it simpler to provide fast Internet connections to remote places? WiMAX has high initial costs, but in the long run it will benefit. It also seems to be the more practical thing to go for at the moment.

Good times? Let's wait and watch, 'the year of the broadband' just got started! ;)


17 January 2007

The almost perfect source

With the launch of Wikiseek, a formidable new player in the field of search engines has shown itself. Wikiseek is probably the best 'specific' information search engine we have today, or it atleast has the potential to be soon.

Though it is considered basically a replacement of the in-built search for Wikipedia, it is definitely much more than that. By offering on the fly suggestions via. tag clouds, top matches for your search from Wikipedia, and links to external pages linked in the article pages, Wikiseek presents itself as a great place to start your searches for information on specific topics.

It is not, however, a place to search for news or opinions or applications or just random things. That is Google's playground. Think of Wikiseek as your search through a library and all it's information, with handy links to external sources which people have found usefully related to the result articles. This works to remove spam and bogus SEO'ed links that plague our top search engines today. An all round win win solution for people :)

It will be formally announced today, but you can ofcourse go ahead and give it a trial run. There is an extension that enables a Wikiseek search inside the normal Wikipedia search toolbox. A visit to the Wikiseek page will put the blue glow in your Firefox search box, to which you can add Wikiseek by clicking on the down arrow and selecting the 'Add Wikiseek' option. It's creator 'Searchme' has said that they'll offer more search engines in the future. Now I don't know if they plan to make an integrated search environment, but they sure seem to be on the right track. Revenue from the searches will go to the Wikimedia foundation, which will really help their cause in keeping quality information free!

This will also help bring much wanted attention to a great repository of information, Wikipedia, in a big way. Wikiseek will ofcourse improve over time, but this sure does promise a lot for a brand new product. If you've always wanted proper and formal information and articles on topics the way encyclopedia's present them, or if you're just looking for content for a project or a research, this is a great place to start your search.


14 January 2007

A microscope on Microformats #

Reading through my feeds, an article about how Microformats might be integrated into the next release of Firefox caught my eye today. If you remember, Microformats is present in the current latest stable release of Firefox, as a means of getting 'dynamic' bookmark titles. But that is all there is to it as far as Firefox 2.0 is concerned. Reading a little deeper into this new concept, I discovered a whole new way of creating relational data content, by following simple and standard semantics. What's even better is how easy it is to start creating Microformat content. It takes nothing more than giving standard values to a few attributes in your HTML markup! But first, a little more about Microformats.

Microformats The term Microformat was given to semantic mark-up by Tantek Çelik and Kevin Marks during a presentation (or sometime after) on 'real world semantics' at EtCon 2004. It is just a standard format to present data so that services, applications, bots etc. can detect them, understand them, and do whatever they're programmed to do with the values they find. For example, the following is a sample block of code for an hCalendar microformat.

Going back home for vacations
13th January '07 (12:15 AM)
(January 13- February 10)
Gurgaon, Haryana
I'll be going back home after my end semester examinations. I've been missing home for quite some time, and want to get away from this hectic college schedule quickly.

And here is the code for it:

<div class='vevent'>
<span class='summary'>Going back home for vacations</span>
<span class='dtstamp' title='20070113T1215+0530'>13th January '07 (12:15 AM)</span>
(<span class='dtstart' title='2007-01-13'>January 13</span> -
<span class='dtend' title='2007-02-10'>February 10</span>)
<span class='location'>Gurgaon, Haryana</span>
<span class='description'>I'll be going back home after my end semester examinations. I've been missing home for quite some time, and want to get away from this hectic college schedule quickly.</span>
</div>

If you have any of the microformat recognition extensions installed (I've listed two that I know towards the end of the post), you'll see a calendar event popup listing out that event. If you use one which offers you actions to perform on the recognised content, you can do so, which in this case will be adding to 'your' calendar this event to be reminded of later. The same can be used for different types of data such as contact details (called hCard), or reviews (hReview), social network (XFN) and Lists/Outlines (XOXO). The complete list can be found here.

How microformat works

Ofcourse, any type of data can be turned into a microformat, as long as it is recognised as a standard, and everyone is not cooking up 'their' version of it. It is there to help us maintain a standard, so that building applications to work with the data held by these formats becomes simpler. It'd be as simple as finding a block of code with the specified attributes, and getting the values of the other attributes as well as the contained text. It can be seamlessly integrated to look like a part of your page, while the hidden microformat properties is only for those who want it. The information can be anything from stock prices to package tracking. The point is to allow easy access to content. As Alex Faaborg puts it:

The general model is the user travels to a particular site, and then proceeds to enter data (classified add, review, list of friends) for a particular purpose. Your information is scattered all over the Web, and you have to pick which sites you want to use.

The combination of blogging and microformats is now reversing this model. Now, your information remains in your blog, and the Web sites come to you. For instance, if you want to sell something, you can blog about it using an hListing, and a site like Edgeio will find it when it aggregates classified advertisements across the Web.

I've been looking at the prospect of having a microformat for blog posts over the internet. Stephen has already stated pretty strongly about how the XOXO format is great for creating templates, which can make working with them (and the data they hold) much simpler. I will top that and ask for a standard outline to hold all post data in. That way, whenever we look for post details, it will be the same for a Blogger blog or a Wordpress blog (and many other blogging platforms out there). The sharing of data becomes tons easier! I realised this while developing my way of loading creating expandable posts asynchronously. Default Blogger templates already follow a pseudo-microformat (I don't know if it was intentional or not), and hence, if you've not modified your template too much, or followed the standard naming of classes, your blog is already following a microformat for your posts. Any information now can be scraped right off the page as and when it might be required! There has been a proposal for any kind of listing to be presentated in a microformat called hListing however, so one's interested might have a look into that.

Currently, as I said earlier, Firefox is the only browser which handles microformats natively, and that too only for dynamic titles for bookmarks. However, a couple of extensions are there which detect and present actions based on microformats found on a page. The one I use and recommend is Operator by Michael Kaply. This is a very useful extension if you wish to completely integrate Firefox with the current known microformat standards. It detects the data, and then presents you with ways of using that data. For example, on this page, you should see two microformats. One is my label, and the other is the calendar event written above. Operator will give you options to search Flickr, Del.icio.us and Technorati for this tag, to find related content, or add the calendar event to Google Calendar. Makes my job that much easier! :) The second extension, called Tails Export by Robert De Bruin, does pretty much the same thing, without the integration with other applications. It works by 'exporting' your microformats to known file types which can be used in other applications.

The functions of these extensions will eventually be integrated into the browser natively, and hence make it something of an 'information broker' as some people out there are calling it. The web browser, in general will look do all the information collecting 'for' you, so that all you have to do is click and collect.

This graphic from Mozilla sums up their plan for integrating this new standard very well:

Firefox information broker

Since microformat are such an invisible, yet solid way of presenting little bits of shareable data, I think it has the potential to reach where feeds have today, since they technically present the same thing; a simple way of sharing data amongst applications. Practically any data can be turned into a microformat, as long as there is wide generation of it. With some touting the new year as one for Microformats, I am somewhat agreeing with them. It 'could' be the next big thing! I am going to begin to use it in places where I think they're necessary. My little contribution in building a smarter, more semantic web! Seems fun and useful! :P Install one of those extensions, and discover a new way to work with information for yourself!


11 January 2007

Connecting applications

Recently, working on my personal blog (I'll be releasing soon enough :) ), I had a little itch to make a automatically updating 'Now Playing' widget, which would automatically take the data from my Winamp, and via some fancy scripting, show it on the blog along with little additions like the album cover art. I did get it done, but it kind of opened my mind to the complicated nature of creating an interface which would allow an offline application to converse with an online one. I say complicated because I am not much into that side of programming yet. I will someday, but until then it will seem to be quite a daunting task.

Make it friendlier

There exists a standard for pretty much everything on the web today. Why not have standards for offline applications as well? It'll help in having a protocol which will be common amongst communications of a particular kind. For example, to transfer secure data, a different method of obtaining data securely could be developed which would be common to all applications, but when an insecure data needs to be transferred to a public social application on the web, a simple interface should allow that to happen without getting ones hands dirty too much.

I know that once I try and learn that side of programming, I won't find it so 'high up there'. After all, a certain amount of knowledge must be involved with getting anything on different platforms to connect. But still, I know it can be made easier if developers just reached some sort of an agreement. Something like a script.aculo.us for the offline applications. A library which helps you get your job done faster. Pre-existing templates, which can be easily integrated and used.

Make it fun

By taking out a majority of the coding, it'll allow people to think more, since the time required to code it out is cut down. This will see a rise in applications which are more usable and useful. At the moment, I am talking with little knowledge of this side of cross-platform (not in the literal sense) development, hence the predictions. But I have seen the use a platform like Ning has been put to. I also know it's potential. And here, the problem isn't lack of resources, but a lack of ideas.

I'd surely like to see more attention being paid to data transfers between such applications. If done correctly, we can actually have a proper online version of our own desktop (security and data intact), to control our computer remotely! Currently, companies like Google and Yahoo! offer APIs which let us use their services in (semi) offline applications. All that is good, but what if you could reverse the process? What if you could program your sticky notes to be auto-synced with your blog? Or maybe have an updated feed of the songs you play on your favourite media player? I'm not being creative enough, but think of the possibilities! :)

There are applications which are constantly in touch with online servers, which we use everyday. Our very own operating system is the perfect example. Those tiny little upgrades it keeps downloading from time to time? Yep! It has to send data for that, doesn't it? Why not use the sending mechanism, make it easier to implement in applications, and let the people's mind wander? Hehe!

What use can you think of having your applications talk to each other?


09 January 2007

Looking back at '06, on to '07

Looking ahead

It has surely been an amazing year for blogs, the Internet, The Last Word, and me. Looking back now, I'd really like to chronicle all the things that made a difference and I'd like to share with everyone.

What started off as a relaxing 'try-out slowly became a lovely and fulfilling hobby. Yes, The Last Word graduated from humble beginnings, as a way for me to share my thoughts with friends and people who bumped in, to a full and complete review and reflection (thank you Jen) blog through which I now share everything I think and know about the Internet world around me, programming and designing. I have introduced quite a few hacks and user-scripts [Pg 1 & 2] which have been implemented and used by many people. Just knowing that someone out there is benefitting from my work is enough to make me work for 'one' more hack :) Nothing like a little encouragement to keep you going!

Towards the middle of the year, when the old blog surfaced as a mainstream blog thanks to inputs and help from Avatar, I didn't expect to get so much viewer-ship and support from people. I guess I chose a more lucrative path of becoming a 'hacker' for Blogger, which made it easier to be spotted on the radar. I quickly took the opportunity to convert a generic blog to a theme related one. I had to give up the freedom of writing anything on my mind for that, but now on looking back from here, the change was nothing but a necessary growing step, which I'm glad to have taken at the correct time.

Through codes and scripts, I came to make friends in the community who are now my good friends over the Internet. They know who they are, and my sincere thanks to each and every one of them for making the year such a wonderful learning experience, and taking me from being just a kid with a penchant for codes to the status of 'Young gun' (thank you Phydeaux3!). I formed a satisfying partnership with Stephen and we created quite a few innovative hacks together. Now that we're both in college, we don't get to brainstorm like the good ol' days anymore. But I sure hope to reach the same peak of ultimate hackery with him in the future.

I learnt that certain methods work, and certain don't, when it comes to getting your point out to the world. But nothing works if you talk without any authority on your subject. I learnt how to write 'to' the people, something which I didn't know. I was too used to writing for myself. This was again explained to my by Avatar. Subtle changes brought more people to read my blog for articles, and not just a new hack. Even now as I check my statistics, my feed subscriber-ship shows a solid 140 subscribers. So close to new years, and many people out enjoying with family, it is a very encouraging number :)

My attempt at going commercial ended in quite a big thud! I wanted to take up designing for people as a small side-profession, but I guess I lack the creativity to generate a lot of innovative content quickly. I might try my hand at it again in the future, and hope to have more encouraging results then. But at the moment, there are no prospects of me taking up anything related to the Internet as a profession or a commercial hobby.

Together with Avatar, Bloggeratto came into existence. Although he gives me credit for the quick development of the blog, plus a permanent link to here, it has been completely his brainchild and hardwork which has put it where it is today. I did nothing more than place a few codes, and give him a few CSS tricks to put in! I wrote some codes specifically for Bloggeratto, which are now lying tattered and broken, begging for a rework. The task rests in my 'To-do' for the new year! More so now because Bloggeratto will be resurfacing soon in a new avatar! :P

The biggest turnaround was the onset of the new Blogger, and my hiatus from blogging. I entered college, and things became hectic. I left at a time when the magic was just beginning, and sadly missed the best part of it. But still, the moment I got a chance to make a return, I took the opportunity again. Trust me, there was a time where I had decided not to return to blogging, because I realised how much of my time it was eating up. Even now, as my examinations are going on, I take every break time I get to write out a little bit. But again, encouragement and questions with ideas from Avatar and many people out there who had implemented my hacks compelled me to make a fresh start. What better way than to switch to the new Blogger, and design a completely new blog?

The new year seems promising enough. Hopefully Blogger will keep things rolling at their end, and I will continue to share my thoughts and articles with you the way I have all of last year. And hacks! They will pop their heads every now and then to make your blogging experience simpler and more fun!

Hello 2007!


08 January 2007

Bloggeratto wanted to play world of warcraft all day!

Haha! Sorry about that Blogger! :P

You would have noticed Bloggeratto suffering some downtime recently. Speaking for Avatar here, I am to say that Bloggeratto is not dead! It's very much alive, and is just undergoing a little renovation work. All comments can be directed to this post, and Avatar will be more than happy to reply to them. Please don't bombard the poor guy with hundreds of e-mails!

So, stay tuned! It'll be back ;)

While you're waiting, why not look around here for a while? It's good, I 'promise'! :)


07 January 2007

Blogger Smilies!

Posts can become dull and boring when no emotion comes through words. After all, blogs are meant to be a 'personal' medium, which goes from people to people. What better way to portray emotions than use emoticons and smilies? Blogger itself doesn't give us a way of doing such trivial things, which is why this is another little script which I ported over from the old Blogger to the new one. It uses simple Regular Expressions to replace the text version of the emoticons to their pictured cousins!

There is nothing much for you to do here actually. You just need to include this one line in your <head> section:

<script src='http://aditya.vm.googlepages.com/addSmiley.js' type='text/javascript'></script>

And you're done! :) The script assumes the content of your post is housed in an element called 'post-body'. If it's different, then just add one more line under that line:

postBodyClass = '';

The script will be called once the page finishes loading, so that it doesn't hamper with the page load times! The emoticons are housed at my Google Pages account, which should be able to handle the load pretty well. They're tiny cute icons after all! So enjoy your emoticonified posts!


Major Update: Seeing as how people wanted adding in more classes (or classes that I wasn't offering by default), I have reworked the script (quite a bit) to fit in probably all kinds of situations. But, in doing so, it is a little more complicated to implement if you want to customise it 'beyond' my default settings.

Everything is handled within arrays now. I have pre-programmed the function to add smilies in classes of 'post-body', 'entry-content' (as asked by Stephen) and 'comment-body'. These three should suffice 'most' cases in Blogger. However, if you don't fall under any of these, you can make a manual function call at the end of the posts widget in your template. Yes, you 'will' have to get your hands dirty for this. So, supposed your template code for your posts look like this:

<b:section id='Blogposts'>
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Your function call for 'addSmiley()' will come after this. Now, within the '()', list out all the entry containers you want to add your emoticons to. So, if you want to add smilies to say 'post-author' and 'post-notes' as well, your code now becomes:

<b:section id='Blogposts'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

<script language="javascript">
addSmiley('post-author', 'post-notes');
</script>

And this comes 'after' the </b:section> line above. Followed? Good! I'll restate that this is 'only' if your emoticonizing content does not already fall under the classes of 'post-body','comment-body' and 'entry-content'.

Another update: Deepak, has come up with a userscript that makes adding emoticons and other basic rich editing features easier to add in your comments made in Blogger. Go catch it at Blogger Hacked

Update: Ramani has listed out the CSS required if you see borders around your emoticons or they appear to squashed up. Also, I had forgotten to list out which emoticons are supported. The general ones are as follows:


:) or :-)  
:( or :-(  
:P or :-P  
:D or :-D  
:$ or :-$  
;) or ;-)  

Hope this helps! :)


05 January 2007

Feature requests for the new Blogger

Blogger not in beta

Living with the new Blogger for about a month and a half now, I want to make my own 'Please include these Blogger' feature requests post to Blogger. As I noted here, I can't find the feature request page from Blogger, and hence am lead to believe that once again they have removed it to avoid tons of feature suggestions pouring in from people. Although when they 'did' launch the new Blogger, they said that labels was the 'most requested' feature. I wonder how those requests reached them :P So here is my list of requests from Blogger.

The more immediate concerns

  • Trackbacks: This is one thing that Blogger has lacked right since the beginning, many people complaining and trying to find a workaround. Stephen came up with the Blogger Trackback pinging userscript, but why not have it natively in the post editor? How hard would it be to take all details and send 'one' XMLHTTPRequest to a 'user' specified URL? Not very, especially since Blogger can provide all the data it needs to work with. We need to hack our way to get the data to make our workarounds. Do the math! Also, that is only outgoing. What about incoming trackbacks? I know Google is proud of their search (which is used to track the backlinks), but why not stick to the standard everyone else seems to follow?

  • Custom fields: This is my 'personal' request to Blogger, and something I will be genuinely very thankful for if they add it. It would be the ultimate addition to the post details, as it'll be a way to hold data 'associated' with the post, but doesn't have to be a part of the post. Maybe you'd like to share a little anecdote about the post you made? A summary? You can display these on the main page with a 'Read More' type link, and show the whole post without this part on the post page. Throw in a special keyword in there to distinguish for something. Ofcourse, I have much more powerful uses in mind, but this is one of the basic ones which could be used by everyone!

  • Documentation: I know Avatar will agree with me on this. The new Blogger though boasts a powerful new template language, it lacks the one thing that will allow us to effectively use it. We know what variables are there, but don't know the exact tree it is held in. Which is why I ran into trouble when I tried to recode the Archives widget to show it in a drop down box. I got it workingLook at the sidebar at my test blog. It works, but I still have to use Javascript to make every option work, don't know why standard HTML attribute doesn't work., but after some playing around with different possibilities. We can all avoid that if we just had the proper explicit documentations.

Not dire, but not unimportant

  • Comment Editing: How many times have you seen a comment which is perfectly fine except for that 'one' thing which you wish you could remove? Phydeaux3 had found a way of doing so for the old Blogger, but that is broken now, and no method seems to be that obvious at the moment. But again, why try to play cat and mouse, and not have it straight from Blogger itself? Giving the blog author complete control over all 'posts' on his blog (whether it be his posts, or others postsI don't know if the method has changed in the new Blogger, but Jasper's script in the old Blogger worked by loading up the comments ID with Blogger's native post editor.

    This showed that comments were also treated as a type of 'post' by Blogger. Probably they've changed this, which is why this method is broken now.
    ) is something Blogger does for team blogs, so why not add comments into the 'editable' list?

  • XHTML Strictness: Most of us don't adhere to XHTML 1.0 Strict standards (I have covered this topic in-depth this post), and code incoming from Blogger is not even close to adhering to HTML standards. Only they can fix that, but they aren't. It has remained straight through the old Blogger and the update. The first step would be to put rules in the template editor, which would cause atleast some retribution. Then extend that to the post editor. We can't follow strict XHTML in the post editor, because most of the time we end up adding elements with in-line styles, or scripts and codes. Whenever you upload an image to Blogger, the code inserted follows absolutely 'no' XHTML specification. Hence, the first move would be to convert everything to CSS classes, insert them by default in the template with all the other paraphernalia Blogger inserts automatically, and then use references to them in the codes they generate.

  • Search feed: We have most the feeds that almost every mainstream platform offers todayFeeded to the teeth. Ironically however, the one feed we don't have is the 'search' feed for the blog specific search. This might be a little server intensive, I don't know. But it sure is a requirement, since it can be used to keep track of keywords appearing in posts. It can also be used to power hacksI think Google might be trying to cut down these 'search' hacks, and want people to use their Google AJAX Search API more to get things done. The cause could be anything from not wanting to load up their servers, to unifying data generation for searches. Personally I think Google should give 'us' the choice of how we want our data.. But only if it exists in the first place.

I am not undermining the update! It has been some solid work from Blogger. But the release definitely seems hurried, especially now that it is out of Beta. That generally means all the nitty gritties should be fixed, and people should get all the stuff they want without too much trouble. I won't go to the extreme Avatar did, but I will say that Blogger has some loose ends to tie up before 'I' begin to call this version a truly 'power' platform.


Phydeaux3 has posted up a request for a way to get native stats from Blogger. Personally I had thought that the new Blogger would also mark the re-launch of one of Google's most highly awaited acquisitions, Measuremap. This didn't happen, but I believe that it will be integrated into Blogger, and it is meant for Blogger.

Let's hope it happens... We could surely do with the fantastic stats!

Also, Google has integrated Blogger with their Documents and spreadsheets (you can see the link on the page after you publish a post), so you can straightaway post from there! I don't know what's the use though. They could just improve the post editor now, couldn't they? :P


04 January 2007

Stars and arrows: A look into unicodes

I have recently been experimenting with unicode characters on this blog. You would have noticed them next to links, at the end of the footnotes and very recently, the bullet icon for the label under the title. I use three glyphs at the moment, the outbound arrow (↗) to symbolise external links that open in a new window/tab, the hooked left arrow (↩) for the link back to the text and the star (★) which just looks good next to the labels. If you can't see them and/or the characters in the brackets, you should get a browser that does. The perfect option is Firefox which has really good support for unicode characters.

I took some inspiration from John Gruber's Daring Fireball for my choice of characters (the hooked arrow and star), and realised that they actually work better than little icons which people go to the first chance they get. The main advantage is that modern browsers can render it choosing a font for unicode characters quite easily, which means you don't 'need' icons when a good looking character will do! There tons of glyphs to choose from. You could refer to the list at Wikibooks for a complete chart of the characters at your disposal (there are many, you'll need patience).

The occasional problem of cross browser rendering will surface. Every browser chooses different fonts to show their unicode characters. Which is why it is good to check how certain characters are rendered. One workaround for any problem could be to specify your own list of fonts to try and pick for a unicode character containing element. On this blog, I use Tahoma as the main font, with a font size of '7.5em' I've been told off for this many times! I just can't get myself to have a bigger font size! It just looks too ugly to me!, but when a unicode character is rendered at that size, it becomes too small. Hence, I've had to manually increase the font size for them to '8.5em'. 'Tahoma' is an almost complete typeset, and a modern browser is mostly able to 'fill-in' empty characters by finding a font which has the characters. You will have to do some testing to see which one works for you. You can do this by using 'class > element' selector. This will not work in Internet Explorer, but the same goes for the character itself. I doubt unicode characters show up at all in Internet Explorer. My solution for that is to get a 'real' browser! As simple as that!

As a designer, it helps me remove unwanted graphics from the page, and keep things simple. Especially if one uses a monochrome colour combination for the text (white and dark gray for this blog), it works best to keep it looking uniform and clean! Go ahead, give it a whirl!


03 January 2007

Get listed a little quicker

I wanted to quickly throw in a post about how to get your blog changes listed in Google's Blogsearch a little faster than normal. You can do this in a few ways. You might know all this, and might not. If you do, well, congratulations! If you don't, read on! :)

Google Blogsearch Ping Around the beginning of October I believe, Google released their blog pinging service to the public. It basically provides a little documentation about how to manually tell Google crawlers that your blog has been updated, and they should come running and scan. Google already monitors all top pinging services automatically, so chances are these methods won't help your cause too much. But, it's always a good idea to do it yourself, if not for the viewers, then for your peace of mind.

Ping Google through Feedburner

So, the first way and the easiest, is to hook up to Google Blogsearch using Feedburner. They have a service known as 'Pingshot' under their 'Publicize' tab. This lists out various services that Feedburner can automatically ping for you whenever it checks your feed and sees an update. This is the most powerful thing you can have, with having no work to do on your own, and from personal experience, I can tell you that this does increase your feed readership. Feedburner checks your feed every half an hour, which might be too long for some people. Hence, Feedburner also provides a manual way of pinging them, so that they ping all those services quicker.

The second and harder method is set up your own REST call to Google Blogsearch, or an XML-RPC ping call. These will immediately send off their crawlers to your page (or sooner than normal! :P ) These are slightly harder to get going, especially since Blogger lacks a native pinging mechanism. The documentation can be found here if you're interested!

I personally prefer using Feedburner, since it automates the task. I'd never want to manually go fill up a form after writing a long 'long' post. Too much of a brainwreck! And, tries to manually ping Google using the form they provide didn't yield any results You can see the list of latest crawled pages here. This is updated very quickly, so don't wait too long between reloads, or else you'll miss your site (if it gets there!), so best of luck with that!

Get pinging and get noticed! :)


Here's another reason to start using Feedburner for more than offering your feed in all the formats as requested per services. Feedburner now offers site statistics, for free! Yep! And it's quite good, and shows incoming as well as outgoing links. It shows how much traffic has come in from searches, and how much from other sites. All you have to do is add a small Feedflare code to your template to track the stats. The code they offer contains the post permalink tag from the old Blogger, so change it to data:post.url when you put it in. You can hide it later using CSS if you don't want people to see it. They update the stats every 30 minutes (like their feeds). However, there is no per page statistics in the free version. For that, they ask you to upgrade to their Total Stats Pro. But this is good enough for anyone not professionally into blogging, I think. Go ahead, try it out!


02 January 2007

Advertisements where you wouldn't expect them

The latest buzz doing the round of all the 'well-known' bloggers is how Google has begun pushing it's own services. Unfortunately or not, this is true. If you do a search for anything which has a remote connection with a service Google offers, you'll see an advertisement pop-up right at the top of your search results, offering you a link to that service.

Some look at this as Google going against it's own principle of 'Don't be evil' and that they are beginning to reach the fine line between breaking their own principles in favour of getting more people to use their services and up their ante in the stock market.Arrington sees this as the the beginning of the end to Google's goody-goody impression on people. Blake Ross looks at it as Google going completely against it's principles, and Om Malik is trying to find answers. My question is, 'Is it really that wrong?' Google like every other company deserves to promote their own products and services, even more so because their's are 'comparatively' better than the competitors. Why 'wouldn't' someone want to try out a Google product/service over others? Google is just trying to be more visible to people. With it's influence and reputation, this might be a threat to other companies wanting to foray into the fields Google already has a strong hold in, but it's not like Google is actually 'trying' to kill off the competition. True, Google's 'tips' (as they are called) appear above everything else (including results from your Desktop index file search) but they are only for a few noted products like Blogger, Picasa and Google Calendar. Advertisers ads are in their proper place on the right, and search results follow immediately below the tip.

As pointed out by CNN, Google's ads and tips are virtually invisible as compared to flashing banners and animated pictures used by companies like Microsoft and YahooBoth use 'huge' advertisements all over their pages, including something as simple as their mail services. They don't allow a POP access, which means you 'have' to see those ads if you want to see your mail. Google still allows you to kill out the invisible ads by using a mail client.

This also applies to search, with Google offering a cut down version of their search through their AJAX Search API which shows no ads (as of now). This doesn't seem like the tactics of a company really 'pushing' their advertisements.
, and they don't offer alternatives either to get a minimal version without the ads. I don't see what there is to complain really.

Advertisements have always been a part of media. Wherever people go, ads will follow. Wherever 'ads' can go, they will. It's as simple as that. Google's ads 'should' take precedence over others, especially because their services are reliable. Except for a few slips (Google Answers for example), no application has failed it's users. If you search for blogs, it's pretty understandable that you 'might' want to start blogging. A tip to help you get started with the best free blogging platform isn't that bad, is it? It 'might' be a little unethical to put their own products before 'everything' else, but that little detail can be ignored, because of the fact that we love Google! Even Facebook is doing it, the only social network to remain free of advertisements till now!

I guess all this is the reason of the tag line Google became famous with. They capitalised on the fact that bigger companies were 'using' their status and power to monopolise their content (even if they were bad) over others. Now that Google is trying to do the same, people are drawing comparisons between what happened then, and what is happening now (even if Google's products deserve a first look). It doesn't make so much a difference to the common person, I'm sure. They'd just ignore the tip, probably because each of those products has been covered and reported as front page news when they were released, so it's quite plausible that even my grandmother would have seen it. If it really bothers you, get Adblock and add the filter.

This is the simple point that I argue. Google offers us the choice, which others don't. Why do we then still tell them, 'Don't be evil'?


Google has now taken down (maybe temporarily) the tips. I noticed this when yesterday searching for ways of having an offline calendar sync with Google Calendar didn't show the tips to sign up for GCal. I say maybe temporarily because this might be a response to the negative feedback of many bloggers, including influential ones like Arrington (who discovered the take down as well) and Blake Ross. There has been no official announcement, let's wait and watch what Google has in store for us.

I thought they had removed their tips. What is this new thing now?

I've seen one of this, and an advertisement about blogging with Google Docs and Spreadsheets. Atleast, these are still unobtrusive, and not as much in the public eye as the previous 'tips' were.