Starting now, I will limit my rants and I’ll just share you directly the code instead. You guys are big boys and girls and I know that you already know what to do but if you have a question, you can always contact me or let me know in the comments. Ask nicely and you shall be answered when I am not busy.

There are many ways on how to do this but I am only going to give you some examples. I hope you find it useful on your WordPress projects.

Method 1: Using the loop

Yep, you can do this on your regular wordpress loop. Grab the code below and test it now.

<ol>
<?php
$args = array(
	'posts_per_page' => 10, // specify the number of posts you want to list
	'orderby' => 'comment_count', // this only works for Version 2.9 and above but the question is are you not going to upgrade to the latest and greatest?
	'order' => 'DESC'
);
?>
<?php query_posts($args); ?>
	<?php while (have_posts()) : the_post(); ?>
	<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php endwhile;?>
</ol>

Method 2: Using get_posts

I usually prefer this method since you can use this on multiple loops without having so much trouble. Read more about get_posts.

<ol>
<?php
$args = array(
	'posts_per_page' => 10, 
	'orderby' => 'comment_count', 
	'order' => 'DESC'
);
	$recentposts = get_posts($args);
		foreach ($recentposts as $post) :
		setup_postdata($post);
	?>
	<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php endforeach; ?>
</ol>

Method 3: Showing Most Commented Posts by Category

Sometimes, we just want to show the most commented posts on certain categories. So how do we do that? Simple, just add the category_name parameter and you are all set. See the example below.

$args = array(
	'posts_per_page' => 10, 
	'orderby' => 'comment_count',
	'order' => 'DESC',
	'category_name' => 'Category Name' //rename 'Category Name' with your Category. Include the Spaces
);

Important

This stuff only works on versions of WordPress 2.9 and greater. But the thing is, why use the old outdated version of WordPress when you can make it easy on the latest and greatest version?

You can learn more about query_posts on the WordPress Codex.

This is an update to my old post about a graphical or visual image preloader. I’m really surprised that there are a lot of people who needed this. My script was not perfect. In fact it had flaws. But I was not suggesting it for the whole world to use. I wrote it for myself and it was for my own use. I’m surprised that people would talk negative about it on forums. I’m looking at you SplitV. If you think my script was using bad javascript practices then why didn’t you tell me. If you really cared about good code then you should have at least told me. I did mention on my post that I was no hardcore coder. I was a noob back then. End of rant.

Here you go. This is the updated script. Of course you would also need to include the jQuery library. Many thanks to Sexytrends. You can use the code below instead of the old one.

$(function() {
     $('img').wrap('<span class="image-box"></span>').hide();
});

$(window).bind('load', function() {
     var i = 1;
     var imgs = $('img').length;
     var int = setInterval(function() {
     //console.log(i); check to make sure interval properly stops

     if(i >= imgs) clearInterval(int);
     $('img:hidden').eq(0).fadeIn(500);
     i++;
     }, 500);
});

Other Solutions

I also found another very good solution on the Themeforest forums, and it’s written by pogoking, so thank him and not me for the script.

I’ve copied the code from his post and here it is.

Script:

(function($){
    $.fn.preloadImages = function(options){

        var defaults = {
            showSpeed: 500,
            easing: 'easeOutQuad'
        };

        var options = $.extend(defaults, options);

        return this.each(function(){
            var container = $(this);
            var image = container.find('img');

            $(image).css({ "visibility": "hidden", "opacity": "0" });
            $(image).bind('load error', function(){
                $(this).css({ "visibility": "visible" }).animate({ opacity:"1" }, {duration:options.showSpeed, easing:options.easing}).parent(container).removeClass('preload');
            }).each(function(){
                if(this.complete || ($.browser.msie && parseInt($.browser.version) == 6)) { $(this).trigger('load'); }
            });
        });
    }
})(jQuery);

HTML

<a href="#">
    <img src="your/image.png" height="xx" alt="some text" width="xx" />
</a>

The CSS

.preload { display:block; background:transparent url(your/loading/icon.gif) no-repeat center center; }

To run the script

jQuery(document).ready(function(){
    jQuery('.preload').preloadImages({
        showSpeed: 500,   // length of fade-in animation, 500 is default
        easing: 'easeOutQuad'   // optional easing, if you don't have any easing scripts - delete this option
    });
});

The script works in every browser including IE6, and that is according to the author and I take his word for it.

Let me know what you guys think in the comments.

Twitter is a social networking giant and it has become a part of everyone who loves to interact on the web. I have seen Twitter feeds on every WordPress blog that I’ve visited and I think it’s a very good way to keep your visitors and followers updated. I’ve also seen Twitter being implemented in different ways.

The Problem

So how do they do put up their twitter stream on their blogs, you might wonder. There are tons of tutorials out there describing and showing us exactly how to do it.

I’ve used some of the tutorials on my past projects and sometimes I get problems when the twitter search query feed returns nothing. One example is Ryan Barr’s Twitter Script. Don’t get me wrong, I love his script, it works very well but it uses the twitter search query as the feed his parser uses which sometimes gives empty results.

Below is an example of a Twitter search result query feed. If you try to view it, it’s empty. But if you check his profile, he has 3 entries. (thebrowneez is one of my unupdated Twitter profiles by the way)

http://search.twitter.com/search.atom?q=from:thebrowneez&rpp=1

The Solution

The solution is very obvious. We should use the user’s direct RSS feed. Click the RSS link below. It gives you results, right? And it never comes empty as long as the Twitter account is active.

http://twitter.com/statuses/user_timeline/25106430.rss

If you are having trouble finding your twitter feed RSS, you can check out this article.

The only problem now is how do we parse and display the Twitter feed on our blog? I’ve got it covered so all you have to do is just copy and paste the code on your templates.

The Code

I added comments in between the lines of the codes so you have a better understanding on it. I used the fetch_feed() function which is a newer version of the deprecated wp_rss() function.

I’m no hardcore PHP programmer so if you ever find something that needs tweaking or optimization, please let me know. I hope this little bit of code will help you out on your next projects.

<?php
include_once(ABSPATH . WPINC . '/feed.php');

//configuration
$username = "wordpress";
$feed = "http://twitter.com/statuses/user_timeline/685513.rss";
$num = 5;

//this is a function which will convert text links to clickable links
function makeClickableLinks($text) {
$text = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?&//=]+)','<a href="\\1">\\1</a>', $text);
$text = eregi_replace('([[:space:]()[{}])(www.[-a-zA-Z0-9@:%_\+.~#?&//=]+)','\\1<a href="http://\\2">\\2</a>', $text);
return $text;
}

$rss = fetch_feed($feed);
if (!is_wp_error( $rss ) ) :
     $maxitems = $rss->get_item_quantity($num);
     $rss_items = $rss->get_items(0, $maxitems);
endif;
?>

<ul>
     <?php if ($maxitems == 0) echo '<li>No items.</li>';
     else
     foreach ( $rss_items as $item ) : ?>
     <li>
     <?php
          $tweet = str_replace($username.':','',$item->get_title()); //replaces the username which is displayed on the feed
          $tweet = makeClickableLinks($tweet); //converts text links to clickable links
          $tweet = preg_replace('#@([\\d\\w]+)#', '<a href="http://twitter.com/$1">$0</a>', $tweet);//converts hashtags to clickable links
          $tweet = preg_replace('/#([\\d\\w]+)/', '<a href="http://twitter.com/search?q=%23$1">$0</a>', $tweet);//converts @username to links
          echo $tweet . " <small><a href='".$item->get_permalink()."'>" . human_time_diff($item->get_date('U'), current_time('timestamp')) . " ago</a></small>";
     ?>
     </li>
     <?php endforeach; ?>
</ul>

Well that’s it! I hope it helped you one way or another. All you have to do now is to create your own CSS styling.

I have other tutorials and tricks for WordPress that I’d like to share so keep coming back for new stuff. I’ll try to update this blog as often as I could. I’m thinking of adding new content at least thrice a month.

Webkit is impressive. I’ve been tinkering with Google Chrome and Safari 4, the main browsers that use the Webkit rendering engine, and all I can say is they’re both fast and real good browsers. What I thought was only possible with a few Javascript snippets is now possible with webkit. In this post, I will show you demonstration and examples of what Webkit and CSS can do.

Image Shrink Effect

The image will shrink if you put your mouse pointer on top of it. It is achieved by using the -webkit-transform:scale(value) property.

The HTML

 <div id="demo-1" class="demobox">
	<img src="optimusprime.jpg"/>
</div>

The CSS

#demo-1 img {
	-webkit-transform: scale(1);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 500ms;
}
#demo-1 img:hover{
	-webkit-transform: scale(.5);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 500ms;
}

Notice how the HTML looks very simple. It’s just a simple <img/> tag but with webkit, you can achieve a very cool effect.

Fade Out Image Effect

On mouse hover, the image will fade out to 50% opacity smoothly.

The HTML

<div id="demo-2">
<img src="optimusprime.jpg"/>
</div>

The CSS

#demo-2 img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-2 img:hover{
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Fade in Description Box Effect

When you hover your mouse over the image, a box will fade in smoothly with its title and description.

The HTML

<div id="demo-3">
	<img src="optimusprime.jpg"/>
	<div>
		<h3>Transformers</h3>
		<p>More than meets the eye</p>
	</div>
</div>

The CSS

#demo-3{position:relative;}
#demo-3 img{
opacity:1
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

#demo-3 .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Image Slide Out Effect

The image is above the description box and when the mouse is hovered over the image, it will slide out revealing the description box.

The HTML

<div id="demo-4">
	<img src="optimusprime.jpg"/>
	<div>
		<h3>Transformers</h3>
		<p>More than meets the eye</p>
	</div>
</div>

The CSS

#demo-4{position:relative;}
#demo-4 img{
position:absolute;
top:0;
left:0;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-4:hover img{
margin-left:200px;
}
#demo-4 .details{
position:absolute;
top:0;
left:0;
z-index:-1;
}

Slide In Box Effect

The description box will slide in on top of the image on mouse hover.

The HTML

<div id="demo-5">
	<img src="optimusprime.jpg"/>
	<div>
		<h3>Transformers</h3>
		<p>More than meets the eye</p>
	</div>
</div>

The CSS

#demo-5{position:relative;}
#demo-5 .details{
opacity: .9;
position:absolute;
top:0;
left:0;
margin-left:-200px;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-5:hover .details{
margin-left:0;
}

Zoom in Box Effect

The description box will zoom out from the middle of the image when the image is triggered by mouse hover.

The HTML

<div id="demo-5">
	<img src="optimusprime.jpg"/>
	<div>
		<h3>Transformers</h3>
		<p>More than meets the eye</p>
	</div>
</div>

The CSS

#demo-6{
 position:relative;
 }
 #demo-6 img{
 position:absolute;
 top:0;
 left:0;
 z-index:0;
 }
 #demo-6 .details{
 opacity: .9;
 position:absolute;
 top:100;
 left:150;
 z-index:999;
 -webkit-transform: scale(0);
 -webkit-transition-timing-function: ease-out;
 -webkit-transition-duration: 250ms;
 }
 #demo-6:hover .details{
 -webkit-transform: scale(1);
 -webkit-transition-timing-function: ease-out;
 -webkit-transition-duration: 250ms;
 }

These examples are just a few things the Webkit engine can do. The question now is, can we use these on real world projects? Why, of course. We might just need a little work for browsers that doesn’t support these awesome transition effects.

Having good designs would help you better establish your own site. It also important that you choose a good host to run your website.

Here are some good resources and articles that you might want to check out:

• CSS Recipes for WebKit
• CSS Animation
• Transitions

Final Image

This is how the final image looks like. I’ve used gray color for the example but you can always choose your own settings once you mastered this very easy effect.

Step 1

Open up Adobe Fireworks and create a new document. Let’s start with a small canvas, 490px by 200px and a gray background (#AAAAAA).

Step 2

Use the Text tool (T) to type out some text in the center of the canvas. Choose a nice font and fill it with a darker gray color (#888888). I used Bello Pro for this tutorial.

Step 3

With the text still selected, apply an Inner Shadow filter from the live filters menu inside the Properties panel and adjust the settings^*:

1. Distance: 2
2. Softness: 4
3. Opacity: 45%
4. Angle: 315 degrees
5. Color: Black

Step 4

Select the text again and apply add another live filter. This time we’ll use Drop Shadow with these settings^*:

1. Distance: 2
2. Softness: 1
3. Opacity: 85%
4. Angle: 315 degrees
5. Color: White

It is important that the angles from both live filters are the same to provide consistency on the source of lighting applied.

Step 5

Actually that’s it. It seems real easy, huh? One more important thing, the text is still editable so if you want to change the text, you can do so without repeating the entire process again. To make it easier, you can save this as style and use it on your future designs.

Fireworks FTW!

While Photoshop is the tool for most web designers out there, I prefer Fireworks for my web design projects. It not only does the job but it does the job easy, simple and fast. Fact is, this website was designed using only Fireworks. Did you see how the inset text effect was achieved using only 5 super simple steps? I bet even your grandma can do it.

* – You may adjust your settings to your liking. Those settings I have should serve as a guide for you.

If you find this tutorial helpful, please show some love by clicking some of your favorite social bookmarking icons below.

Yesterday, I was one of the millions of people who witnessed the longest solar eclipse of the 21st century, a very rare phenomenon. The eclipse lasted for about 6 minutes and 39 seconds but the whole transition lasted for more than 2 hours, from 8:30 AM to 11AM (at my timezone) and I’m sure most of the people with special abilities lost their powers for that time period. Below are a few shots I’ve taken during the rare event. I’ve used a Canon EOS 450D with kit lens. I know I could’ve taken better pictures with a zoom lens but I don’t have one so I’ll stick to what I’ve got. I know it’s dangerous to focus your DSLR directly at the sun, especially this is only a partial eclipse, so I’ve used a welding glass as a filter. I hope you enjoy a few of my handpicked shots below. It was taken in front of the house.

Display Recent Posts

There are different methods I use for this kind of function and it depends on the need and how the template is laid out. You can check out the 3 methods that I use below. I hope you find it useful in your projects.

Method 1: This code displays the 10 latest posts. You can place this code anywhere on your template. For more info on wp_get_archives() you may want to check out the codex

<ul>
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>

Method 2: This is just basically the loop except that we defined a number of posts to be shown using the query_posts() function. You may want to read more on query_posts()

<?php query_posts('showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Method 3: This is I think the best way to display the recent posts since it’s very simple and you can customize the way the posts are displayed. You can use this code anywhere on your template. Read more about the get_posts() function.

<?php
$recentposts = get_posts('numberposts=12&category=4');
	foreach ($recentposts as $post) :
	setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

Display Recent Comments

I found this piece of code somewhere around the web but I don’t know who the original source is. So the credit goes to him or her. This piece of code will display the 7 most recent comments.

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 7";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.": " . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."&hellip;</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

Display Categories

There are different ways in displaying categories and most of the time I like the categories to be displayed in a simple list.

<h4>Categories</h4>

<ul>
<?php wp_list_categories('use_desc_for_title=0&title_li=&show_count=0'); ?>
</ul>

Display Archives as Simple List

Method 1: This will display the archives in a month list. I usually place this on the sidebar. Learn more about wp_get_archives.

<h4>Archives</h4>
<ul>
	<?php wp_get_archives('type=monthly'); ?>
</ul>

Method 2: This will display all the posts in a simple list. I usually use this on an archives page template.

<ul class="archives">
<?php
$myposts = get_posts('numberposts=-1&offset=0');
foreach($myposts as $post) :
?>
<li><small><?php the_time('d.m.y') ?></small> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endforeach; ?>
</ul>

Display Tagclouds

This will display the tags in a tagcloud. This is the simplest on how to use it. For more details you may check out wp_tag_cloud() from the WordPress codex.

<?php wp_tag_cloud('smallest=8&largest=22'); ?>

Display Blogroll

This will display the links in a simple plain list. More on wp_list_bookmarks.

<ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>

While I know that these are not all of the most commonly used WordPress snippets, I hope this post will still help out people who want to learn WordPress. I have written this post so it can serve as a reference for me and by all means you can make it your reference too. But if you want to learn more on WordPress functions you can always go to the Codex or you can get a copy of WordPress for Dummies.

Update

This script has been updated. Please go to the new post about the updated visual preloader script.

If you have been here in my site before, you may have noticed the images on this site have a visual preloading effect. It’s really a cool effect but it’s actually a fake preloader. It doesn’t preload the images individually but it considers all the images on the page before it starts showing each one. This method I’m about to share and explain works best on a page with not too many images. The script is purely based on jQuery with a little bit of CSS.

How it works

When the page is initialized, a script will hide all of the images. While all of the images on the page are loading, an animated preloader will take it’s place creating the “image loading” effect. After all the images on the page is loaded, a script will kick in and start fading in the images from the first instance to the last one. This method works with any image from any source or path. To achieve the whole preloader effect the image must be wrapped inside a div with a class. We need the extra markup for a placeholder for our animated preloader image.

• View the Demo
• Download the Source Files

Getting started

You need the jQuery library by John Resig. The older versions work but I suggest you always use the current release.

First, let’s create the HTML page. We need to include the jQuery library in the header of the page. And let’s wrap each image with a div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Visual Image Preloader using jQuery</title>
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3563/3381408848_9c746f35f6.jpg?v=0" alt="Image 1"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3657/3381403740_19457662b3.jpg?v=0" alt="Image 2"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3454/3381399248_82bf005381.jpg?v=0" alt="Image 3"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3586/3381393310_8f4b015827.jpg?v=0" alt="Image 4"/>
	</div>
</body>
</html>

Adding the script

Let’s create the fake preloader script and insert it on the header.

<script type="text/javascript">
	$(function () {
		$('img').hide();//hide all the images on the page
	});

	var i = 0;//initialize
	var int=0;//Internet Explorer Fix
	$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
		var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
	});

	function doThis() {
		var images = $('img').length;//count the number of images on the page
		if (i >= images) {// Loop the images
			clearInterval(int);//When it reaches the last image the loop ends
		}
		$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
		i++;//add 1 to the count
	}
</script>

Let’s test what we have so far. The images will only start to fade in once the entire document is loaded. That is how the event handler window.bind() works.

Adding the animated preloader

Now let’s add the animated preloader. You may generate your own loader image here. Let’s create a new CSS file in our favorite code editor.

.image-holder{
	float:left;
	width:500px;
	height:313px;
	padding:10px;
	margin:10px;
	border:1px solid #ddd;
	background:#eee url(loading.gif) 50% 50% no-repeat;
	display:inline;
}

Don’t forget to include the CSS file on your header.

<link rel="stylesheet" href="preloader.css" type="text/css" />

Summary and Conclusion

While I know that this is not a real solution for preloading images, it would still add a very cool effect to your website. This method will preload any image from any source or path. The only setback is you will not see the animated preloader on images not wrapped in a special div. But the good thing is it would still have that fade-in effect.

That’s it! I hope you enjoy the simple demo and tutorial. If you have any questions or suggestions, you may leave your comments below.

At long last, I have finally updated my website with the new design. I’m calling this new design “Stage 7” because there were 7 stages and it was the 7th stage that I finally stopped and finalized the design. If you are a new visitor to this site, you probably won’t even notice it at all. But to give you a brief history, this site used to wear the Una WordPress theme, my first free WordPress theme and it has served me well.

So what took me so long to build and launch this new design? It’s not really because of the lack of time or inspiration. In fact I do have a lot of free time for this project. But everytime I finish the design, I take a good look at it today and decide that it’s cool but the next day when I take a look at it again, I have changed my mind about it . I’ve learned the hard way that as a web designer, the hardest client to please is yourself. To prove it to you, I’ve gone through many design revisions before I finally came up with this and to be honest, I’m still not fully pleased with what I came up with. But I decided to stop tweaking the design and finally convert it to code, because if I continue on revising the design, I will not be able to finish anything at all.

Below you will see the evolution of the design in 7 stages:

Stage 1

Stage 1: It started out as a light colored theme. I kinda like this layout. In fact, I’m converting this to a WP theme sometime soon.

Stage 2

Stage 2: This one looks similar to the first one, except images are added on the blog section of the page. Another great WordPress theme idea, I guess.

Stage 3

Stage 3: I woke up one day and I told myself, I wanted that kind of look. Looks good to me but I got tired of looking at it.

Stage 4

Stage 4: This one looks grungy, the kind of look that I’m going for but I hated the colors.

Stage 5

Stage 5: I love this design. But before I can convert it to code, I kinda changed my mind again. I’m gonna inherit this look on some of my future projects so it won’t be wasted.

Stage 6

Stage 6: I’m almost there. I thought I was aiming for grunge but at this stage, I knew what I wanted. I wanted something that looks neat and textured so I got rid of the grunge parts and came up with this.

Stage 7

Stage 7: This is the final design and I think I’m really happy about it. I love how it eveolved from Stage 1 to this. I didn’t see that coming. At least this was a great learning experience for me.

Because I don’t want to go through piles of stages on my future projects again, I created guidelines for myself. If you find these guidelines useful, you may use it at your own risk. :)

Always ask other people’s opinion about the stuff you are working on

I guess this one is a very important thing to remember. If you can’t please yourself, the best way to move on with your design is ask other people’s opinion. Remember that you are not only pleasing yourself but other people too who will be viewing your design.

Do not overdo it

Sometimes when you are working on something interesting, like a personal blog or website, you tend to get addicted to it that you don’t want to stop working on it. You want to put everything into it but most of the times, that’s not really cool. Like for example, you are working a website and you have finished laying it out. You see an empty space on one of the columns and you decide to fill that up with some design or something to fill up the space. Sometimes, spaces are good. It gives the eye some area to rest. Sometimes, you need to pause for a while and take a walk to clear your mind.

Stay Organized

This one is very important for me because most of the times I get really disorganized. I start the project with a list of to-dos and I end up losing and not following what I wrote.

Keep it Simple

Simplicity is beauty. So don’t make it too complicated.

Well that’s it. This post has to end somewhere. Everytime I’ll be working on a new project I’ll be going back to these guidelines. This design has been tested to work great on all modern browsers except IE6. For all those folks who are still using Internet Explorer 6, please update your browser or just use a better browser.

So what’s the Chrome bug? It’s actually a PNG opacity issue. I discovered this bug when I came across taptaptap, a website for iPhone apps, using the Google Chrome browser. Below are screenshots of the taptaptap website on Google Chrome and Firefox, respectively.

Google Chrome PNG bug demonstration. Notice the white borders on the soft-rounded square icons.

Same website as seen on Firefox 2 browser. See the difference?

To see the actual bug, simply open taptaptap.com in Google Chrome and click one of those soft rounded square icons. You should be able to see white borders appear on inactive square icons.

Like I said, Google Chrome is still in beta, so it’s just normal to encounter a few bugs. Another demonstration of a CSS bug on Google Chrome is seen when you visit Avalonstar.

It appears that they’ve exchanged text-shadow for text-shitify.

But I must admit, I fell in love with Chrome the first time I saw it. It never fails to give me fast, reliable and organized browsing experience. Google Chrome is fast, just check out the benchmarks here, there and everywhere.

Update: Google Chrome 2 has been released and it fixes the PNG Opacity bug. Thanks to the Google Chrome developers for looking into this one major problem.