Winston{yw}

For any Dreamhost questions, I always refer to the Wiki which is excellently compiled. However, I realised that the Wiki has either an outdated answer or simply failed to answer the question of “How to set up a Git Repository on your Dreamhost account”. Thus you can sort of ignore this page on the Wiki.

My goal is to set up a private repository for my own WordPress theme, so that I’ll have version control and a complete change log for all developmental work on the theme. Another benefit in this is that I can sync the theme easily with my WordPress install, without having to do any FTP uploads (while figuring out which files were changed).

To set up Git repositories on Dream is actually quite easy, and I’ll recount how I did it. In the shell code examples below, USER refers to your user name on Dreamhost, while EXAMPLE.COM refers to your domain.

Step 1: Create A Dreamhost Repository

Firstly, I created a sub-domain to store my repositories, and I used .htaccess to protect it from the general public.

Both of these can be done from the Dreamhost Panel by following these two wikis:

1. Adding A Subdomain To Your Dreamhost Account
2. Configuring .htaccess

Then I entered shell, browsed to the sub-domain which I created in the step above, and created an empty repository with these commands:

$ mkdir my_wp_theme.git
$ cd my_wp_theme.git
$ git --bare init
$ git --bare update-server-info

Step 2: Create A Local Repository

Next, I created a local repository on my development machine, which will be later published to the Dreamhost repository.

$ mkdir my_wp_theme
$ cd my_wp_theme
$ git init

Configure the local repository with the Dreamhost repository details.

$ git config push.default matching
$ git remote add origin ssh://USER@EXAMPLE.COM/home/USER/SUB.EXAMPLE.COM/my_wp_theme.git
$ git config branch.master.remote origin
$ git config branch.master.merge refs/heads/master

Step 3: Push The Contents

Following which, I copied over my WordPress theme files into this local repository. Then I added, committed and pushed my changes.

$ git add .
$ git commit -m "Initialization."
$ git push --all
$ git pull

Step 4: Sync With WordPress Install

To sync with my WordPress install, I browsed to <wordpress>/wp-content/themes and cloned the repository.

git clone ssh://USER@EXAMPLE.COM/home/USER/SUB.EXAMPLE.COM/my_wp_theme.git

Then I went into the WordPress Admin and activated this gitorised theme. Done!

In the future, when I am finished with any changes to my theme, all I have to do is: Push my changes, then pull the changes on the server.

This is a Google Notebook dump of how to compile and install Git on Ubuntu (or Linux), as my Google Notebook is cluttered with random knowledge that I picked up in my work and is in need of some organization.

Step 1: Download Dependencies

There are dependencies that’s required for the install of Git. Let’s get them via apt-get.

sudo apt-get build-dep git-core

Note: If apt-get fails at some point to install the dependencies, update it and retry.

sudo apt-get update

Step 2: Download Git

Download the latest version of Git. I use wget, but it’s really up to personal preference.

wget http://kernel.org/pub/software/scm/git/git-1.6.0.4.tar.gz

Step 3: Make and Install Git

Simply execute the following commands to unpack, compile and install Git.

gunzip git-1.6.0.4.tar.gz
tar -xvf git-1.6.0.4.tar
cd git-1.6.0.4
./configure
make && sudo make install

That’s all to get started with Git on your Ubuntu (or Linux) servers. Enjoy!

Google Ajax Libraries API which hosts a few of the common open source frameworks like jQuery (and UI), Prototype, MooTools and others was launched earlier this year, and I was excited about the performance boost which it promised.

Basically, the libraries are hosted on the Google infrastructure and common obstacles such as caching and gzipping of these Ajax libraries are handled by the Google engineers. The API is also kept up-to-date with the latest stable release of each Ajax library, and by default, serves the minified version. Of course, there’s also an option to use an uncompressed version for development purposes.

As my WordPress is on shared hosting, I don’t have the luxury of setting up a cache or gzipping my files, and so there’s always been a performance issue with my blog. Therefore, any form of optimization could go a long way in making my blog’s loading experience more pleasant, and so I figured that the Google Ajax Libraries API should be able to help in some way; moreover, Google has a wide CDN and their servers are fast.

To use Google’s Ajax Libraries API is simple, as illustrated on Google’s Ajax Search API blog and Ajaxian, and I made the switch in just 5 minutes for the jQuery framework which I am using on this blog.

Previously, I was including the jQuery packed script which was hosted on my domain, but now I am including the Google’s Ajax Libraries API:

<!-- Previously -->
<!-- <script type="text/javascript" src="js/jquery-1.2.6.pack.js"> -->

<!-- Google's Ajax API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Why was I using the packed version? Because, I cannot do gzip on my shared hosting and without that, the packed version is smaller in size as compared to the minified version.

In my other external javascript file that contains my jQuery codes, this was how it looked like:

$(function(){
  //Line 1
  //Line 2
  //...
})

Now, I need to first load jQuery using the API which has smart versioning feature, then replace jQuery’s DOM ready function with Google’s on page load function. The internals, or codes, remain the same.

google.load("jquery", "1");
google.setOnLoadCallback(function(){
  //Line 1
  //Line 2
  //...
});

That’s it! I am done! Testing the response time via YSLOW with Firebug:

• jQuery on www.winstonyw.com: Average of 700ms, 31K (No gzip)
• jQuery on Google: Average of 150ms, 16.7K (With gzip)

Are you going to make the switch and improve your users’ experience?

Feed Era

We now live in the era of feeds, where most web applications you use can produce some kind of RSS/Atom feed. In turn, these feeds can be inputs to other web applications of varied uses, such as Google Reader or FriendFeed.

Blog Feed

The first application that comes to mind when we talk about feeds would be blogs. Taking WordPress as an example, WordPress blogs produce RSS and Atom feeds. These feeds are then usually included in the HTML Head element of the blog as follows:

<head>
  <!-- Meta Tags -->
  <link rel="alternate" type="application/rss+xml"  title="RSS 2.0"   href="<?php bloginfo('rss2_url'); ?>" />
  <link rel="alternate" type="text/xml"             title="RSS .92"   href="<?php bloginfo('rss_url'); ?>" />
  <link rel="alternate" type="application/atom+xml" title="Atom 0.3"  href="<?php bloginfo('atom_url'); ?>" />
</head>

Note the definition of the Link element and its significance:

Link elements with a rel value of “alternate” are used to describe an alternate representation of the content of the current web page, and these defined relationships and help your site attract and retain visitors.

Burning Your Blog Feed

However, we all know of a great service at FeedBurner that can provide you with amazing control over your vanilla feeds, and so, most of the blogs I know ADVERTISE a FeedBurner feed rather than (or alongside) the prepackaged feeds.

Feed Discovery

What do I mean by “ADVERTISE”? Usually, a prominent subscribe link to a FeedBurner feed can be found on blogs, but the FeedBurner feed is NOT exposed in the HTML Head element. This impedes accurate feed discovery, and readers of these blogs, if using some feed discovery application, may subscribe to one of the exposed vanilla feeds instead of the “hidden” FeedBurner feed. To the content-producer, this implies a lost of feed-viewership analytics and possibly even revenue.

Experiment 1

To illustrate, I use this Greasemonkey script: Smart Google Reader Subscribe Button by Mihai which places an unobtrusive RSS icon in the upper-right corner of the browser, allowing easy subscription to RSS feeds that are discovered on any site.

Suppose I include my FeedBurner feed in the HTML Head element, the script would be able to discover two feeds. However, when I exclude my FeedBurner feed from the HTML Head element, the script would only be able to discover one feed.

Experiment 2

For a more conclusive example, let’s try using FireFox to subscribe to a blog feed. Again, we first test with the FeedBurner feed included, then excluded from the HTML Head element.

As you can see, in the first setting, the FeedBurner feed was discovered and marked to be subscribed (via Google). However, in the second setting, the vanilla RSS feed was discovered, and this is definitely not what content-producers would like to see happening.

Do Your Own Experiments

Still skeptical? Test this out in Google Reader or even the Google Ajax Feed API to see which feed is discovered from your blog. There are also other feed discovery services out there which you can use to test my hypothesis, but the result would probably be the same, and the reasoning similar: Only feeds that are linked, or exposed in the HTML Head element can be easily discovered.

Conclusion

In conclusion, we should realise the importance of facilitating feed discovery and its implications to content-indexing and traffic analytics. Remember to expose your FeedBurner feed in your WordPress blog today, like so:

<head>
  <!-- Meta Tags -->
  <link rel="alternate"  href="http://feeds.feedburner.com/winstonyw" type="application/rss+xml" title="FeedBurner RSS Feed"/>
</head>

Ruby comes with an implementation of SOAP (SOAP4R), a protocol for exchanging XML-based messages, and recently, I had a chance to use this library. Having no knowledge of the SOAP4R library, I conveniently consulted the Pickaxe book which was on my table, and it presented me with an excellent overview of the library.

Now, I’m going to document the two different approaches of connecting to a SOAP API which I have learned from the book, so that I don’t forget them easily. I recommend the Pickaxe book if you are interested in more detailed explanations.

Xurrency is an online currency conversion service which I am using in one of my projects and Xurrency’s API is based in SOAP. The API has several methods exposed and I’ll only be using one of them in my examples, but the principle is the same for other method invocations.

The method that I’ll be using is: float getValue(float $amount, string $base, string target) which returns a float value for a currency conversion.

First Example

#Require The Library
require 'soap/rpc/driver'

#Connections
endpoint = 'http://www.xurrency.com/servidor_soap.php'
proxy    = SOAP::RPC::Driver.new(endpoint)

#Add Method
proxy.add_method('getValue', 'amount', 'base', 'target')

#Call API Method and Get Exchange Rate
rate = proxy.getValue('1','usd','eur')
puts 'Rate: #{rate}'

The output:

sh> ruby currency.rb
Rate: 0.6787

Second Example

#Require The Library
require 'soap/wsdlDriver'

#Connections
wsdl_url = 'http://xurrency.com/api.wsdl'
proxy    = SOAP::WSDLDriverFactory.new(wsdl_url).create_rpc_driver

#Call API Method and Get Exchange Rate
rate = proxy.getValue(1,'usd','eur')
puts 'Rate: #{rate}'

The output:

sh> ruby currency.rb
Rate: 0.6787

In the first example, I created a local proxy for the Xurrency API, adds the method which I want to use, and then invokes it.

In the second example, I made use of a WSDL (Web Services Description Language) document available at http://xurrency.com/api.wsdl. This WSDL document describes the Xurrency API, and so SOAP can read this WSDL and perform dynamic discovery of the API interfaces which removes the need to add the getValue method explicitly.

To quote from the Pickaxe book, a WSDL document is:

..an XML document that describes the types, methods, and access mechanisms for a Web services interface. SOAP clients can read WSDL file to create the interfaces to a server automatically..

Despite the differences when connecting to the SOAP API, the underlying concept is similar for both the examples. The SOAP library creates local proxies that SOAP uses to connect to the remote server API (which is published by a SOAP server). When a method is invoked on the local proxy, the invocation is passed to the corresponding API interface on the server via XML. The server then processes the method invocation, and the returned values are passed back to the client through the proxy.

What I have written are just some basic concepts of using SOAP with Ruby. But it’s really simple right? For further reading, please refer to the RubyDoc, or the Trac (which has some great examples too).

For a rubygem that wraps Xurrency’s API, there’s one on GitHub, authored by Keita. Alternatively, my colleague Douglas has also created a simple currency converter which uses the data from Yahoo Finance.

Background

During the conceptualization stages of Winston{YW}, I was inspired by Antonio and so, I wanted my WordPress blog to have a Delicious Count Button on each post too. Ideally, this Delicious Count Button could be used to bookmark the post in Delicious, and at the same time, display the number of times the post has been bookmarked on Delicious.

By referring to the new Delicious API, I managed to build this Delicious Count Button with JQuery, and I even styled it to match the looks of the Digg button. Now, I shall go through the process of building this Delicious Count Button for your WordPress blog. See a DEMO here.

Step 1: The Button Image

Browse to the image on Digg’s website. “Right Click” the image, and “Save Image As”. Place the image in your theme’s IMAGES directory.

Step 2: The HTML

You should be familiar with The Loop in WordPress. Copy this snippet of HTML into The Loop; place it where you would like to have this Delicious Count Button.

<div class='post_delicious'>
  <span class='md5hash'><?php echo md5(get_permalink()); ?></span>
  <a href='http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','',FALSE)) ?>' target='_blank'>Del.icio.us</a>
</div>

This snippet of code sets up a DIV that contains a SPAN and an ANCHOR. The SPAN is where the magic occurs as the content would be replaced by a count of the number of times your post has been bookmarked on Delicious through the use of JQuery. The content in the SPAN tag is actually a MD5 hash of the permalink of the post, which is used as an unique key to query the Delicious API for details of this post. The ANCHOR is a link which contains the necessary parameters, populated by the details of each post, to submit the post to Delicious.

Step 3: The CSS

Copy this snippet of CSS into the CSS file, which should be styles.css for most WordPress themes. This would style the DIV which you copied in Step 2, and make it look like the Digg button.

.post_delicious {
  display: block;
  background: url('images/tiny-submit.gif') no-repeat top right;
  height: 20px;
  width: 85px;
  padding: 2px 45px 0px 0;
  font-family: arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.md5hash {
  display: none;
}

.post_delicious a, .post_delicious a:visited {
  float: right;
  color: #444444;
  text-decoration: none;
}

.post_delicious a:hover {
  color: #0000000;
  text-decoration: underline;
}

Step 4: The JQuery Package

Proceed to download the latest version of JQuery, or use a Google-hosted version of JQuery by reading more about it on the Google AJAX Libraries API. Insert the link to the JQuery package in the HEAD tags of your HTML.

<head>
  <!-- Misc Stuff -->
  <script type='text/javascript' src='<directory_to>/jquery-1.2.6.pack.js'></script>
</head>

Step 5: The JQuery Code

Copy this snippet of JQuery code. Place it either in the HEAD tags of your HTML, or at the bottom of your HTML, just before the closing HTML tag.

<script type='text/javascript'>
  $(function() {

    $.each($('span.md5hash'), function () {
      var elem = $(this);
      $.ajax({ type:      'GET',
               dataType:  'jsonp',
               url:       'http://feeds.delicious.com/v2/json/urlinfo/'+$(this).html(),
               success:   function(data){
                            if (data.length > 0) {
                              elem.next().prepend(data[0].total_posts + ' ');
                            }
                          }
            });
    });

  })
</script>
</script>

This is the MAGIC! Once your blog is loaded in a browser, this snippet of code scans for all the SPAN tags that has the class “md5hash”, and for each SPAN tag found (which should be one per post), it issues an AJAX request to the new Delicious API to obtain details of the post.

On the return of the AJAX request, the content in the SPAN tag (which is the MD5 hash of the permalink) is then replaced with a count of the number of times the post has been bookmarked on Delicious.

Conclusion

Finally, upload your changes and with that, you have successfully placed a Delicious Count Button on each of your posts! I hope you find this post useful, and do let me know in the comments if you have any questions or encounter any problems.

In my previous post, I described how to get PHP working with LightTPD on a Windows machine. But that’s not the end of the story, since what I really wanted was to get my local WordPress installation working, and the missing piece to the puzzle is to make sure that PHP is enabled for MySQL use.

To do that, simply edit the following in the php.ini file:

• Load MySQL extensions from the correct directory: extension_dir = “c:\php\ext”
• Remove the comment tag for: extension=php_mysql.dl”

A simple post that’s really supposed to be appended to the previous post, but I had some problems trying to get the get the code tag working, so I prefer not to touch that post again.

Anyway, my WordPress is in the htdocs directory right now, waiting for me to start some serious templating.

This blog is in need of a makeover, and so I am trying to keep the procrastination habit at bay, practice some GTD and get started on creating a new template for it. First of all, I need a local development environment for PHP on Windows, since I am a Windows user. Previously, I would have installed IIS on Windows and used it as the server for PHP, but it’s always a chore trying to find my Windows CD.

Fortunately, I learnt about LightTPD recently in my work at Wego and how I can use it to replace IIS as the server for PHP. It’s easy installation and setup within minutes. Great! Let’s get started!

1. Download and Install PHP

Download PHP from PHP website. I chose the zip package and simply unzipped it into my directory of choice: Almighty C drive! So now, it’s residing at “C:\php”.

2. Download and Install LightTPD

Download a Win32 version of LightTPD from the WLMP Project; I chose the Setup Wizard (.exe) version.

Double-click on the downloaded executable to start the short installation process, during which you would specify the destination of the install. I installed mine at “C:\Program Files\LightTPD”.

3. Start and Test LightTPD

To start LightTPD, go to the LightTPD directory (i.e. “C:\Program Files\LightTPD”), find the file “TestMode.bat” and double-click on it. A console window would open and indicate that the server has been started.

To test that LightTPD is working at this moment, point your browser to http://localhost. You should see a “LightTPD Test Page”.

That was easy right? Now we just need to edit some configurations to make PHP work with LightTPD.

4. Editing LightTPD Configurations

Edit the file lighttpd-inc.conf (i.e. “C:\Program Files\LightTPD\conf\lighttpd-inc.conf”) with the following:

• Remove the comment tag for “mod-cgi” (Line 20)
• Add this line (assuming that PHP was installed on C drive):
  • cgi.assign = ( “.php” => “C:/php/php-cgi.exe” )

5. Editing PHP Configurations

In your PHP directory, rename the file php.ini-recommended to php.ini and edit php.ini with the following:

• short_open_tag = On
• display_errors = On
• doc_root = “C:\Progra~1\LightTPD\htdocs”

6. Test PHP with LightTPD

To test that LightTPD now works with PHP, create a file with the following contents:

<?php phpinfo(); ?>

Place the file in your htdocs directory (i.e. “C:\Program Files\LightTPD\htdocs”), open up your browser and browse to the page. Walaa! You should be able to see the standard phpinfo() messages.

There you have it! A development environment for PHP on Windows in 6 simple steps. Now, to get started on the new template..

Are you having problems upgrading your WordPress to version 2.3.3?

After following through the extended steps of upgrading WordPress, I encountered the following error on trying to access /wp-admin/upgrade.php:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, webmaster@winstonyw.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

Searching Google and the WordPress forums gave me an answer. Simply add the following two lines to the .htaccess file which should be residing in the blog’s root directory:

php_value memory_limit 32M
php_flag zend.ze1_compatibility_mode Off

Then, I was able to execute /wp-admin/upgrade.php successfully.However, for some reason, WordPress would overwrite .htaccess during the upgrade procedure, and so the two lines would be missing again. I had to add the two lines back to the .htaccess file before my blog is able to work.

Now I am back in business, after forsaking this blog for more than a year!