I will not be releasing a new version of Fhi-zin and the AJAX class due to a severe time shortage, sorry to keep you waiting ;-)

bbye

Some of its features are custom SQL parameters like LAST_INSERTED_ID or INSERT_ID_FROM(n), executing different queries in one line of code, quickly returning SELECT queries as arrays, returning the new ID as the query result for INSERT-statements and so on.

Executing several SQL-statements easily

Suppose we need several SELECT-queries to retrieve the data needed for our application to run. Many of you already have made query-functions to retrieve the database resultset in just one line of code, but this probably still creates a new connection for each query you execute. Instead of doing that, we can loop through an array of SQL-statements and execute them all in the same connection. You’ll get the same result, but only one connection to the database is created, which results in a better function performance.

Offcourse we still need to be able to fetch all result-sets returned by our queries. This is where the “$query_results”-array comes in handy. I’ve placed a small example below to clear things up.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// when executing multiple queries, the function will always
// return the result from the last executed SQL-statement
// you can execute one query by just passing the 
// SQL-statement as a string, or execute multiple by passing
// an array of SQL-statements.
$sessions = query( array( "SELECT * FROM db_accounts",
	"SELECT * FROM db_hits_np",
	"SELECT * FROM db_sessions_np") );
 
// we can get the other results through $query_results
// pass the index of the SQL-statement to get its result
// be carefull, the indexes start from 0 !		
$accounts = $query_results[1];
$hits_np = $query_results[2];

Getting the result as an associative array

This is basically the same functionality as the mysql_fetch_array() method, but it saves you a line of code. You can specify a second (optional ) parameter when calling the function to specify if you want the result of the query to be returned as a normal resultset or as an associative array.

Set this optional parameter to “true” if you’d like an associative array to be returned, false otherwise. The default value is false.

SQL INSERT-statement functions

There are many situations where we need to insert a new record to the database, and right after use the newly inserted ID in our code. We can retrieve the new ID through the SQL “@@IDENTITY” command or PHP’s mysql_insert_id() function, but wouldn’t it be a nice feature to get the ID as a result of every INSERT-statement ?  This function does it all for you.

Custom SQL syntax for easier coding with INSERT-statements

It happens quite a lot when we insert several new records in a database, and we need the newly added ID in other SQL statements. Instead of using our query result in our next SQL-statement, we can add a bunch of statements and define in our SQL which ID should come instead of the given parameter. There are 2 custom SQL variables available:

LAST_INSERTED_ID

This parameter returns the last inserted ID, as you could probably guess. Here’s an example:

1
2
3
4
5
6
7

// we're using the LAST_INSERTED_ID here to 
// use the newly returned ID of the last
// INSERT-statement in this connection. 
// Don't use this if the last query was not 
// an INSERT-statement
query( array( "INSERT INTO db_first_table(name, value, something) VALUES('name', 'value', 'something')",
	"INSERT INTO db_second_table(first_id, value) VALUES(LAST_INSERTED_ID, 'value')" ) );

INSERT_ID_FROM(number)

Less obvious to use is the INSERT_ID_FROM variable. Before executing your query, this variable is replaced by the ID returned from one of the previous SQL INSERT-statements executed in the same database connection. We can define the SQL-statements index in the parameter. Another example:

1
2
3
4
5
6
7
8

// we're using the INSERT_ID_FROM here to
// the newly added ID of one of the previous
// INSERT-statements of this connection.
// pass the index of the INSERT-statement
// to the parameter
query( array( "INSERT INTO db_first_table(name, value, something) VALUES('name', 'value', 'something')",
	"INSERT INTO db_second_table(first_id, value) VALUES(LAST_INSERTED_ID, 'value')",
	"INSERT INTO db_third_table(first_id, value) VALUES(INSERT_ID_FROM(0), 'value')" ) );

The Query-function

So here it is, the function I’ve spent 902 words on in this post:
( You can easily download the function in the zip-file attached below )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

$c_host = 'localhost';
$c_database = 'database_name';
$c_username = 'username';
$c_password = 'password';
 
function query($sql, $arr=false){
	// Advanced PHP Query function by Nick Van der Vreken
	// more information about this function on
	// http://www.bydust.com/advanced-php-query-functionadvanced-php-query-function/
	// please leave this comment intact if you're using my function :-)
 
	global $c_host, $c_database, $c_username, $c_password, $query_inserted_id, $query_results;
 
	$query_inserted_id = array();
	$query_results = array();
	$queries = is_array($sql)?$sql:array($sql);
	$conn = mysql_connect( $c_host, $c_username, ($c_password != '')?$c_password:NULL );
	mysql_select_db( $c_database, $conn );
	foreach($queries as $i => $query){
		if( eregi('LAST_INSERTED_ID', $query) ){ // LAST_INSERTED_ID parameter
			if( count($query_inserted_id) ) 
				$query = str_replace( 'LAST_INSERTED_ID', $query_inserted_id[count($query_inserted_id) -1], $query );
			else die('Error on LAST_INSERTED_ID, there were no insert-statements executed in the current connection');
		}
		if( eregi('INSERT_ID_FROM', $query) ){ // INSERT_ID_FROM parameter
			$s = strpos( $query, 'INSERT_ID_FROM(');
			$n = substr( $query, $s + 15, 1);
			$id = ( $n < count($query_inserted_id) ) ? $query_inserted_id[$n] : die('Error on INSERT_ID_FROM, wrong index');
			$query = substr( $query, 0, $s ) . $id . substr( $query, strpos( $query, ')', $s) + 1 );
		}
		//echo "<br/><b>Query $i: </b> $query";
		$result = mysql_query(  $query , $conn );
		array_push( $query_results, $result); 
		array_push( $query_inserted_id, mysql_insert_id($conn) );
		if( ( $i == count($queries) -1 ) && ( strpos( $query, 'INSERT') === 0 || strpos( $query, 'insert') === 0 ) ) $result = $query_inserted_id[count($query_inserted_id) -1];
	}
	mysql_close($conn);
	if($arr) $result = ( $result && mysql_num_rows($result) ) ? mysql_fetch_array($result) : NULL;
	return $result;
}

Don’t forget to set the database information in the variables mentioned, otherwise this won’t work !

If you have any fixes or additions, feel free to share with us ;-)

WordPress has introduced Custom Fields for some time now, but not many people seem to know how to use them. Today I’ll try to give you some enlightenment about this, and explain how they work or what they can be used for.

I’ve been using Custom Fields in my themes too, and have created a function which enables an unlimited amount of images, files, links, flying cows or *whatever* to be attached to your posts and pages.  There are probably alot more people that can benefit from this method, so feel free to use it. I’ll explain how to do this in this post.

What are these mistery fields?

Well, Custom Fields are variables which you can attach to posts or pages. These variables can hold whatever you want, for example a demo version of something you’ve blogged about or a picture of the candybar you just ate.

How do I use them?

Custom Fields can be added through the “Custom Fields” panel in the WordPress editor, as shown in the image below. All a field requires is a key and a value. The key will be used to identify the variable in your theme, the value itself will be used where you want it. In this example we’ll add a Custom Field called “link1″, which will hold the URL of the WordPress Codex documentation about Custom Fields.
Fill in your key/value set and press “Add Custom Field”.

In this form we'll add the Custom Field. Our key will be "link1" and it'll hold the value "http://codex.wordpress.org/Using_Custom_Fields".

Ok, thats that. If you did everything right you should get something like this:

If you see this you did a good job.

You’ll see that WordPress makes it easy for us, and will display all keys you’ve used before in a selection box. Next time you want to insert a Custom Field with this key, you can easily select it.

Our keys have not been saved however, to save them permanently we’ll need to save the current post or page first. You can do this using the button in the top right corner. In the next step I’ll explain how to use the inserted variables in your theme.

Retrieving the posts Custom Fields in your theme.

A WordPress theme cycles through its posts in something what we call “The Loop“. This is the preferred way of fetching your content from the WordPress database. In order to understand what happens next, you should have basic knowledge of what this thing really does ( click here to be enlightened ).

Every time “The Loop” runs over one of our posts, we can ask WordPress if it has one of our Custom Fields on that particular post. The function we’ll use to do that is called “get_post_meta“. If WordPress holds a key named “link1″ for that post, it’ll put its value (the URL we entered) in the variable we define for it. In this example the variable “$our_custom_field_variable” will be the lucky one. When WordPress doesn’t find the key we asked for however, the variable will have a “null”-value.

You can see a basic implementation of how to get our key below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

 
 <!-- Start the Loop. -->
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); 
// here we get the Custom Field with key "link1". 
// the PHP variable "$our_custom_field_variable" will hold the link 
// to the WordPress Codex documentation. 
$our_custom_field_variable = get_post_meta($post->ID, 'link1', true);?>
 
 <!-- Display the Post's Content in a div box. -->
 <div class="entry">
   <?php the_content(); ?>
 </div>
 
 
<!-- Display our Custom Field -->
<div class="link">
   link1: "<?php echo $our_custom_field_variable; ?>"
 </div>
 
 <!-- Stop The Loop (but note the "else:" - see next line). -->
 <?php endwhile; else: ?>
 
 <!-- The very first "if" tested to see if there were any Posts to -->
 <!-- display.  This "else" part tells what do if there weren't any. -->
 <p>Sorry, no posts matched your criteria.</p>
 
 <!-- REALLY stop The Loop. -->
 <?php endif; ?>

There you go, thats all !
From now on you can use Custom Fields in all your WordPress themes.
If you’re still interested in my own method, keep reading for a few more minutes.

Automatically fetching all Custom Fields

What’s the point?

If you have alot of Custom Fields defined, it may be a good idea to automate the fetching part.
I wrote a small PHP function to do this for me, and to create an array of attached images/links/files along with their labels.

Here’s an example of its use: suppose I need to attach 5 images to a post, each with their own label.
I could place them in the editor yourself, but using Custom Fields I could also create a nice slideshow.
To accomplish this I need to create several Custom Fields. First we have the “image1″, “image2″, “image*” to “image5″ keys, these will hold the image URL. This would be enough to create an array of images, but I’d like some of them to have a label too. Lets say the image with key “image2″ needs the label “Second Image”, I could accomplish that by adding a field called “image2_label” with the value “Second Image”.

In this example the function would create two PHP arrays, one called “$post_images” which contains the images, and another one “$post_images_label” which contains the labels for these images. I’ll show you how to loop through these arrays later on, but you should get the point of doing this now. If not, look at the bottom of this post. The list of links and files and the image slideshow is created using Custom Fields.

The function also simplifies fetching other (non-list keys) too, by putting all of them in the “$post_var”-object. If I created a Custom Field called “myField”, I could easily reach its value through $post_var["myField"]. This is shorter than the “get_post_meta()”-method mentioned above.

The magic function

Here’s the function that does the trick, copy/paste this in your functions.php file so you can access it from your theme. I’d appreciate it if you would keep the author notice at the top intact ;-)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function bd_parse_post_variables(){
// bd_parse_post_variables function for WordPress themes by Nick Van der Vreken.
// please refer to bydust.com/using-custom-fields-in-wordpress-to-attach-images-or-files-to-your-posts/
// for further information or questions.
global $post, $post_var;
 
// fill in all types you'd like to list in an array, and
// the label they should get if no label is defined.
// example: each file should get label "Download" if no
// label is set for that particular file.
$types = array('image' => 'no info available',
'file' => 'Download',
'link' => 'Read more...');
 
// this variable will contain all custom fields
$post_var = array();
foreach(get_post_custom($post->ID) as $k => $v) $post_var[$k] = array_shift($v);
 
// creating the arrays
foreach($types as $type => $message){
global ${'post_'.$type.'s'}, ${'post_'.$type.'s_label'};
$i = 1;
${'post_'.$type.'s'} = array();
${'post_'.$type.'s_label'} = array();
while($post_var[$type.$i]){
array_push(${'post_'.$type.'s'}, $post_var[$type.$i]);
array_push(${'post_'.$type.'s_label'},  $post_var[$type.$i.'_label']?htmlspecialchars($post_var[$type.$i.'_label']):$message);
$i++;
}
}
}

Customizing the script to your needs

You may need to edit this function to suit your needs. It currently creates a list for files, links and images in these variables:

• $post_images (hold the values given to “image1″, “image2″, “image*”)
• $post_images_label (holds the values given to “image1_label”, “image2_label”, “image*_label”. If no label is specified but an image*-key is, the label for that image will be the default label specified in the script. This goes for all _label arrays.
• $post_files (holds the values given to “file1″, “file2″, “file*”)
• $post_files_label (holds the values given to “file1_label”, “file2_label”, “file*_label”)
• $post_links (holds the values given to “link1″, “link2″, “link*”)
• $post_links_label (holds the values given to “link1_label”, “link2_label”, “link*_label”)

All information for these arrays is included in the $types-variable. The only thing you need to do to add a type is adding that type to the array. For example if you want to output a list of your cats names and pictures, you’d need this:

1
2
3
4
5
6
7
8

// fill in all types you'd like to list in an array, and
// the label they should get if no label is defined.
// example: each file should get label "Download" if no
// label is set for that particular file.
$types = array('image' => 'no info available',
'file' => 'Download',
'link' => 'Read more...',
'cat' => 'This cat has no name');

With this example you could add Custom Keys named “cat1″, “cat1_label”, “cat2″, “cat2_label”, “cat*”, “cat*_label” where the “cat*”-key would hold the cats picture, and the “cat*_label”-key would be the cats name.
This function would create the arrays “$post_cats” and “$post_cats_label”, containing each cats picture and name.

Using the parsed Custom Fields in your theme

We now have our arrays which contain the values of the Custom Fields we’ve set up. You can use these as regular PHP arrays, here’s how I did it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

 
 <!-- Start the Loop. -->
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); 
// call the function in our functions.php file
bd_parse_post_variables(); 
// these variables are now available:
// $post_var
// $post_images and $post_images_label
// $post_links and $post_links_label
// $post_files and $post_files_label
?>
 
 <!-- Display the Post's Content in a div box. -->
 <div class="entry">
   <?php the_content(); ?>
 </div>
 
 
<!-- Display our Custom Field -->
<div class="link">
   link1: "<?php echo $post_var['myField']; ?>"
 </div>
 
<!-- Display the list of links -->
<ul>
<?php while(count($post_files) > 0): ?>
 <li class="file">
<a href="<?php echo array_shift($post_files); ?>" title="Click to download this file">
<?php echo array_shift($post_files_label); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
 
 <!-- Stop The Loop (but note the "else:" - see next line). -->
 <?php endwhile; else: ?>
 
 <!-- The very first "if" tested to see if there were any Posts to -->
 <!-- display.  This "else" part tells what do if there weren't any. -->
 <p>Sorry, no posts matched your criteria.</p>
 
 <!-- REALLY stop The Loop. -->
 <?php endif; ?>

This example will output something like my list of links and files below. The image slideshow is created in the same way, but it uses the lightbox script.

I hope you’ve found this explenation usefull. If you used my code or made changes to it to increase its function, please let me know ;-)

If you need a music player in your site, this is what you need. Playr makes it incredible easy to implement any kind of music player in your flash website. And the best part of it, you only need two (2!) lines of actionscript to get it working.
For all you hard asses that don’t believe me, here’s an example:

1
2

import com.nocreativity.playr.Playr;
var playr:Playr= new Playr("/assets/playlist.xml","/assets/music/",true);

Or a bit more advanced:

1
2
3
4
5
6
7
8
9
10
11

import com.nocreativity.playr.*;
var playr:Playr= new Playr("/assets/playlist.xml","/assets/music/",true);
playr.registerPlayButton(btnPlay);
playr.registerPauseButton(btnPause);
playr.registerNextButton(btnNext);
playr.registerPreviousButton(btnPrevious);
playr.registerStopButton(btnStop);
playr.addEventListener(PlayrErrorEvent.PLAYLIST_STREAM_ERROR, playlistStreamErrorHandler);
playr.addEventListener(PlayrErrorEvent.SOUND_STREAM_ERROR, soundStreamErrorHandler);
playr.addEventListener(PlayrErrorEvent.PLAYLIST_INVALID_XML, playlistInvalidXMLErrorHandler);
playr.addEventListener(PlayrErrorEvent.TRACK_NOT_ADDED_TO_PLAYLIST, trackNotAddedToPlaylistErrorHandler);

You can download Playr and see more information and examples at playr.nocreativity.com.
The Playr documentation is available at playr.nocreativity.com/docs/

Playr has been developed by the local Flashguru, Ronny Welter .
No animals were hurt or killed during the development of Playr. Ronny had a headache tho.

Like I said before, Fhi-zin is completely AJAX-driven. It’s powered by my com.bydust.ajax class, which automatically converts a static website into an AJAX-driven website. The theme runs smoothly on computers with javascript disabled, for example older browsers and search engines. Whenever a javascript error occurs - which should be never, but you never know - the ajax class should commit suicide and your theme will run without the ajax-functions. Offcourse that never happens, its just in case ;-)

Fhi-zin will most likely be used for portfolio sites and photography galleries which will use Wordpress as a CMS-system. The possibility of attaching an unlimited amount of high-resolution images to each post can be used to create a separate gallery from each post in your Wordpress site, which you can group in the standard Wordpress categories. There is no maximum dimension size for these images, but if you pick large dimensions some users may have problems viewing the images since they dont fit on their screen. If you keep the dimensions smaller than 1000×700 things should be fine :)

Apart from the unlimited images, you can define external links and downloadable files for each post too. There is a live demo available for you, and the theme is up for download on Wordpress.org.

When the theme is activated, there will be an information page available in your Wordpress administration. This can be very usefull for adding images and links. If you still have some questions or remarks, please post them here.

For all users who want scrollbars in the post/page content text, I’ve made a modified theme which includes scrollbars. You can download it here. If you already uploaded the Fhi-zin theme, you just need to replace the files “style.css”, “single.php” and “js/main.js”.

I’ve found already quite a few websites who use Fhi-zin, here are a few nice examples:

• Namouda
  
• Pencil to Paper
  

You can download the script and view the howto at http://www.bydust.com/examples/com.bydust.ajax/

Basic implementation

The implementation of the javascript class is really easy, you just need to add a few lines of code into your pages. These will load and launch the script, and mark the area’s you want to refresh on each page. Look at the implementation page on the manual for more information.

Customizable animations

Yes, animations. Its only eye-candy, but it improves the style of your website alot, and the users impression of your website.
There are two types of animations available in the script, we have the tweens who smoothly fit your content into your page, and the alpha transitions which display your content with a nice fade in. As if that isn’t enough yet, these animations are customizable !
There are 13 types of tweens available, from normal easeIn or easeOut tweens to elastic and bouncy. There’s also an option to disable the tweens and alpha transitions, this might be good for large pages since they demand some CPU usage from the visitors computer. Don’t think you’ll need to disable tho :)

You can add more eye-candy in the customizable loading-messages, for example a nice loading image in gif-format or even little flash-movies. By adding CSS-styles in the loading-messages this can be very easy.

Functionalities

Its a bit more than your average “Hey-I-can-do-ajax”-script. With this script you can add event listeners, set up custom rules and custom animations, manage the filetypes handled by the script, and so on.

Attaching event listeners to certain events launched by the script allows you to execute certain pieces of code whenever an event happens, for example on errors ( but offcourse these never occur :) ) or page loads. Attaching an event listener is very easy, you can attach an event with one line of code. Just like in actionscript, we can use the “addEventListener”-function with the same two parameters, the event and the function to execute.

Custom rules allow us to tell the script to discard certain links or forms, or even to only notify the server when a user has clicked a certain link or posted a form. These rules can come in handy when you don’t want certain links to be parsed in ajax, for example feeds or trackbacks. When implemented in a Wordpress theme, you’ll need to add these rules for the wp-admin folder, feed and trackback links.

Error handling is often overlooked, but not here. The class is able to discover whenever an error occured, and will fix it when possible. If it notices that there is no way to fix the error, for example if one of the requested pages doesn’t have the information it needs, it will shut down itself and serve the page as a normal browser request, without any ajax. The ajax-class will then load again when the new page is fully loaded. If the script is able to fix the error, an error-event containing all information will be raised and an appropriate message will be shown. These messages are also customizable offcourse :)

Webpages often contain images, thats why I’ve built in some image preloading functions. When the ajax-class receives the new page from the server, it starts looking for images in the content areas that need to be refreshed. As long as its preloading, a ( customizable ! ) message will be shown to the user. When the images are fully loaded or the maximum load time has been reached the script will display the page. And, as you can guess, the maximum load time can also be specified by the user.

Since this is a pretty big project I’ve set up a small howto-website with loads of information about the script, and an example for you to download. You’ll find a detailed manual for the basic implementation there, along with the more advanced stuff.

The script is completely free for non-commercial use, but I’d like you to leave the credits in the classfiles and maybe a small link back to this page - if its not too much trouble. I’ll link back to your website if you’re using the script, so others have some more working examples. Contact me for commercial use :)

Com.bydust.ajax has been featured on several websites and communities:

• webresourcesdepot.com
• hotajax.org
• hotscripts.com
• coliss.com
• e-siber.com
• qvado.ru
• noCreativity.com (Dutch article)

Lets start with the good things, because there are quite a few. The Chrome browser is designed to give the user as much space as possible to display web content. There is no statusbar, no menubar and no titlebar. Ok, maybe this looks a bit different from what we’re all used to, but in my opinion its a pretty good improvement. For us who use the statusbar ( including me ), don’t panic. Whenever you hover over a link, a small statusbar pops up at the bottom of the browserscreen. This goes for some other actions too, so its not that different from your average browser.

The Chrome layout is fresh, simple and it makes the browser easy to use. There isn’t a flood of information available at first sight, we just focus on the webpage here. History, downloads and favorites are only one click away, there is a possibility to display a favorites-bar too.  The options-window is pretty small, it only contains what we really need. Take a look at picture 3 for the layout and favorites.

Its not the lightest browser however, when we look at the stats Google Chrome created for us ( and we can see those in picture 2 ), we see that Opera still has the crown there. Chrome has its own task manager, and statistics page for each tab. It also displays other browsers, if they are running on the host computer. To clearify the statistics on picture 2, I opened the bydust.com mainpage in 5 different browsers, just to see the differences between browsers there.

Pages load faster too, the Google guys didn’t lie about that. Whenever you open a large page, you get the idea that its loaded faster than on whatever browser you’ve used before. Same goes for executing javascript, thats one point more for Google Chrome.

On Chrome’s default start page you can see your most visited websites, including thumbnails. Pretty nice Google, but it would be nicer if we could set our own websites on the quickdial function. Lets hope this will be one of the first plugins released for Google Chrome.

According to Google Chrome shouldn’t freeze or lock up whenever something bad happens in one of its tabs, the problem should be kept in that particular tab. Well, thats a pretty nice idea and it works most of the time, but I’ve had a few freezes already. Mostly its nothing, I close a tab or make a request and the browser freezes for a second, but right before I started writing this review I had to kill the process because it was taking all available CPU recources. I was browsing for an image file, maybe it had a little problem with explorer - I don’t know.

Another “bad” thing about Chrome are the resizable textarea’s. Thats pretty usefull indeed, but whatever you type in those things isn’t shown as it should be. Sometimes parts of words are dissapearing, or a whole sentence vanishes. Its still there, we just don’t see it.

Ok, this must be the longest blogpost ever (from me, that is). Hope this was interesting for you :)

Small edit: after reading Robert Accettura’s blogposts about Google Chrome I thought you guys might find this interesting.
Here are his initial thoughts on Chrome, and the easter egg he discovered.

You might want to check out my Fhi-zin theme, its a flashy AJAX theme which is perfect for a portfolio or photography website.

Enough said, start looking!

Aalglatt
	View demo Download
Aspire
	Download
Autumn Concept
	Download
deLight
	View demo Download
dfMarine
	View demo Download
dilectio
	View demo Download
Dreamplace
	View demo Download
Elegance
	View demo Download
Fauna
	View demo Download
Fluid Solution
	View demo Download
Freshy
	Download
Glossy blue
	Download
Gossip City
	View demo Download
Gridline lite
	View demo Download
Hello Wiki
	Download
I3 theme brothers, Left and Right!
	View demo Download
I feel dirty
	View demo Download
Illacrimo
	View demo Download
Intrablog
	Download
Jello Wala Mello
	Download
JSTheme V1.1
	View demo Download
JSTheme
	View demo Download
Light
	View demo Download
Metamorph tropicforest
	View demo Download
Modern
	View demo Download
Modicus Remix
	Download
New order
	View demo Download
Nishita
	View demo Download
Not so fresh
	Download
Peacefull rush
	Download
PocketT
	View demo Download
Resurrection
	Download
Rugged
	View demo Download
Sakena
	View demo Download
School’s in session
	Download
Several
	View demo Download
Sharpfolio
	Download
Simplicity
	Download
SimPress
	View demo Download
Smashing theme
	View demo Download
So Suechtig
	Download
Supermini
	Download
The morning after
	Download
Trendy cork
	View demo Download
Vector Plain
	View demo Download
Winter stream
	View demo Download
WP Premium
	View demo Download
xPlosive reloaded
	View demo Download
Yoghourt
	Download

This is a must-have tool for any developer who’s frequently coding in javascript, CSS and HTML. The Firebug webpage offers you alot of info and help on almost anything you need.

If you’re interested in this, you might want to read my post about another Firefox add-on, the Webdeveloper toolbar.