Favourite Firefox extensions

These are my favourite Firefox extensions in Firefox 3.0.

1. Adblock Plus. I certainly recommend my reader to install this popular Firefox add-on. It blocks 95% of website advertisement and this also includes flash ads. It certainly helps me on having faster loading of any websites and have better internet surfing experience.
2. DownThemAll. A useful download manager. It contains download accelerator and help me to organize all my downloads.
3. IE Tab. I used this for any websites that stubbornly have to be displayed using Internet Explorer. This add-on is also useful if you are a web designer.
4. Web Developer. It helps me whenever I'm designing this blog layout. It also help me to gain further understanding on how each website works.
5. Greasemonkey. This allows me to customize the way a webpage displays using small bits of JavaScript.There are various JavaScript available to be used with Greasemonkey. It certainly useful if you would like to try various JavaScript available on Greasemonkey
   

Related: My favourite Firefox extensions [2007]

Style Switcher

This entry is related to web-design. It may contain technical terms that might confuse you.

What is style switcher?

• It is a technique where the web visitors are given several options to change the website accordingly. They may be able to change the colour, font size, theme or general layout of the website.
  

Is it useful?

• One of the objectives of this technique is to be user-friendly to web visitors. Anyone will be able to change the website according to their own preference. Hence, everyone will be happy and no more angry web visitors.
• It can be helpful to disabled people. For example, you can provide the options of changing font size or change the colour to more suitable colour range.
• However, some people say by giving too many choices, it will spoil the visitors. Too many versions of the website may not be useful in the long-term. A web designer is supposed to be able to predict the best option for any web visitors.
• Personally, I don't mind of implementing style switcher provided that it won't interfere with the content of this blog. Inappropriate usage of style switcher can cause significant increase in loading time of the website or the changes degrade the usefulness of the content.
  

Related links:

• Style switcher are back: Ideas, Examples and a contest - Smashing Magazine. There are lots of examples in this link. Check it out.
• How to create a CSS style switcher.

Google Reader shared items hack

Google Reader allows you to show your shared items by placing the code in the blog or adding it as a blogger widget. Although there are several options available on how you can customize the shared items, basically it is not that great. You are only given the option of changing the colour of the scheme and edit the number of links shown in the blog.

I found the tips to customize the Google Reader shared items written by Andrew Grant. It was published October last year. So, I guess I'm pretty late to notice

this :). The hack is based on feedburner.

The gist of the methods are as follows:

1. Put your Google Reader shared item feed as a new feed in the FeedBurner account.
2. Then, click publicize tab and later click BuzzBoost.
3. Choose any options that suits you and activate it. You can add it as a blogger widget or put the code at your blog.
   
4. I prefer to put the code at the blog since I have two sidebars and several blog widgets. If I added the feed as a blog widget, it will choose the first blog widget found on the sidebar. I put Google Shared items below shoutbox.
5. After this, check the page source generated by this feed and you can customise it by CSS. Further explanation is given here.
   

I will show you how do I customize my Google Reader shared items for reference. This requires basic CSS knowledge. My writing beyond this point is intended for anyone who will like to know more about hacking/customizing Google Reader shared items.

First, we need to know the generated page source. Here is a brief look at the top of shared item.

I created a new div tag with id feedburner to put the whole shared item in one place. By doing this, it will be easier to edit CSS for this shared items. Here is what I put in div.feedburner in the stylesheet.

#feedburner {
margin-top: 10px;
}
The generated page source begins with a div tag
div class="feedburnerFeedBlock"
and you can edit this div in the stylesheet :). I have adjusted the padding.
div.feedburnerFeedBlock {padding: 10px 2px 0 10px;}

Next is a p class labelled as feedTitle. This basically refers to your Feed title if you enable it in the first place. I want the title to be in black including when the mouse is hovering above the link. Here is what I've done.

div.feedburnerFeedBlock p.feedTitle {
padding: 0;
margin: 5px 0 0 0;
font-style:normal;
font-size: 13px;
font-family: Verdana, Arial, sans-serif;
text-align: left;
}

div.feedburnerFeedBlock p.feedTitle a {
text-decoration: none;
color: #000000;
font-weight: bold;
}
A shorther way of putting this is to use only B-).
p.feedTitle

Next comes the ul tag. This begin the list of your shared items. Here is what I've done.

div.feedburnerFeedBlock ul {
list-style-position: outside;
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
font-size: 11px;
text-align: justify;
}

div.feedburnerFeedBlock ul a {
text-decoration: none;
color: #000000;
}

Next, I adjust the padding in the li tag by removing the list marker.

div.feedburnerFeedBlock li {background-image: none;}

After this, comes the span class labelled as headline. The name says it all. It refers to the headline of each item you shared on your Google Reader.

div.feedburnerFeedBlock li span.headline {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0;
padding: 0 0 2px 0;
line-height: 98%;
}

div.feedburnerFeedBlock li span.headline a {
text-decoration: none;
color: #2100AF;
}

What I've done is first to make the font smaller and adjust the line-spacing. I also adjusted the padding of the headline. Thus, the headline move slightly to the left compared to the feed title eg Shared items. The font colour is also changed. A shorter way instead of writing the whole div li span tag is to use only span.headline only.

Next, I edited p class for Item author and the date of the shared item.
p.feedItemAuthor {
margin: 0;
padding: 2px 0 1px 0;
}

p.date {
margin: 0;
padding: 0;
}

The actual content of the shared item is put in a div tag. Now, that div does not have any id or class associated with it. The way to edit this is to use descendant selectors in CSS. That's mean you have to locate the div tag contained in this code.

div.feedburnerFeedBlock ul li div {
color: #000000;
line-height: 110%;
padding: 0 0 0 10px;
font-family: Verdana;
font-size: 11px;
}

First, I put the name of the div which is feedburnerFeedBlock, then ul tag; followed by li and finally the actual div that we will like to customize. Pretty long isn't it ;).

Last but not least is to edit the footer. The one that shows the image from FeedBurner.
#creditfooter {
text-align: right;
color: #000000;
font-weight: normal:
font-size: 10px;
}

#creditfooter a:hover {
background-color: transparent;
}

That's the end of this long post :D. Just before you ask me anything about CSS, please note that I only know a few bit about CSS. I learned CSS whenever I have free time. Thanks.

validity

I'm not sure whether you have noticed it or not, but I have changed the layout of this template few days ago. The links used to be in the form of drop-down menu which is based on javascript and I changed it to the standard bullet list. The list certainly used up a lot more spaces than the previous one though.

The main reason I choose the bullet list is to get this blog validated :). Somehow if I used javascript, this blog fails the validation. Now, this blog is a valid XHTML 1.0 Transitional blogspot B). You can check the yellow icon at the footer below.

For those unfamiliar with the term, this is actually referring to how do you write up the language behind the layout and how much do you write it according to the standard set up by The World Wide Web Consortium (W3C). To check whether any web is valid or not, go here. There is another part of the validation service which involve CSS and for the moment, the CSS script written by Blogger caused my failure as you can see below.
Is it important to get the validation? Personally, I don't think it is not that important to get the validation but by doing this, at least you know what mistakes occur while coding the layout. The best reason not to get the validation is many major websites do not follow the standard by W3C. Even google, yahoo and microsoft failed the validation :). The second reason would be that the main internet browser, Internet Explorer, does not follow the web standard too as you can see below. This is tested against Acid 2 Test.
Compare this with Firefox 2.0
If the browser followed the web standard rigorously such as Opera 9, the picture should look something like this
p/s: Right now, I am waiting for the match between Fernando Gonzalez and Rafael Nadal. This match will be quite interesting to see :)