Winston{YW}

HOWTO Compile And Install Git On Ubuntu

Winston — Wed, 19 Nov 2008 15:40:23 +0000

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!

jQuery Hosting With Google Ajax Libraries API

Winston — Sat, 27 Sep 2008 15:09:18 +0000

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:

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?

Exposing Your FeedBurner Feed In HTML Head Element

Winston — Tue, 23 Sep 2008 15:54:09 +0000

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:

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:

My Favicon

Winston — Sun, 07 Sep 2008 15:15:52 +0000

Today, I spent about an hour or so creating a (very simple) site favicon for Winston{YW}. There are a number of tutorials out there that provide easy-to-understand instructions on how to create your own site favicon, but I found the one by Jennifer most detailed.

Ideally, you should be able to see this on your URL bar and (Firefox) tab:

I know this cannot be compared to those featured by SmashingMagazine, but at least it’s my own unique creation.

Gmail Account Activity

Winston — Fri, 05 Sep 2008 15:23:15 +0000

Today, while I was fiddling around in Gmail, I noticed something peculiar with the footer. There’s an extra line which I don’t ever remember seeing it, or hearing about it. Basically, it’s my Gmail account activity status, and there’s even a link to more details.

Clicking on the link brought me to an “Account Activity” page that provides information about my current open sessions and recent activities on my Gmail account. This allows me to audit for any unauthorized access to my Gmail account, and verify that all Gmail activities (by access type and IP) belong to me. Suppose I discover suspicious activity, I can also sign out of all other current open sessions.

Initially, I thought I had stumbled upon a piece of breaking news. But after doing a search on Google for this feature, I found that Gmail Blog and Blogoscoped have already blogged about it in July 2008. Gmail’s FAQ also contains information about it.

Still, how many are as blind as me, and have only seen it now?

Focus First Form Input Element with JQuery

Winston — Thu, 04 Sep 2008 17:22:59 +0000

A few days ago, I found a JQuery selector that can be used to select the first visible form input element on a page:

$(':input:visible:enabled:first')

This selector can further be used to focus on the first form input element on page load, as seen in the following code snippet:

$(function () {
  $(window).load(function () {
    $(':input:visible:enabled:first').focus();
  });
})

In the code snippet above, I placed the focus event call inside the load function (bounded to the window element) so that the focus event fires when the browser finishes loading all content within a document, including window, objects and images. Initially though, I had excluded the load function and had placed the focus event call within only the DOM ready function, but it failed to work.

This simple trick is great for usability, as the user can start filling up a form right away without any additional mouse clicks or key strokes, since the cursor would appear in the first form input element once the page has finished loading.

Google and Yahoo, for example, focus the user’s cursor in their search box on page load so that the user can start a search conveniently. In their industry where every search counts towards achieving their business goals, such usability enhancement, though small and subtle, can make a difference.

However, do note that this may only be good for pages that need to focus the user’s attention on a form’s input field, or for pages whose primary content is a form. Else, it becomes more of an annoyance to find the cursor focused on some obscure form input field on every page load.

HOWTO Use Ruby SOAP4R

Winston — Mon, 01 Sep 2008 16:52:52 +0000

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.

DOCTYPE.. (X)HTML, Strict or Transitional?

Winston — Thu, 28 Aug 2008 15:22:30 +0000

Lately, I have been reading up on DOCTYPE and (X)HTML as I felt that my knowledge of them was limited. This post is a summary and brain-dump of my readings and is not to be taken as an exhaustive documentation on the subject of DOCTYPE and (X)HTML. Do correct me if I err in any of the stuff mentioned below.

DOCTYPE

A DOCTYPE, or Document Type Declaration, defines the legal structure, elements and attributes of a web page. It is declared at the very top of every web page, and is required for browsers and validators to parse and render the document consistently and correctly.

HTML vs. XHTML

In the process of creating a web page, we have the choice of declaring our markup to be either HTML or XHTML. However, based on my observations, web pages nowadays are mostly declared as XHTML because XHTML, being known as a reformulation of HTML in XML, is an extension and improvement over HTML.

To quote the current XHTML 1.0 Recommendation:

The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.

As XHTML conforms to the syntax of XML, XHTML pages are required to be well-formed. By enforcing well-formed rules in our markup, XHTML is more consistent to code and easier to maintain. The following are some of the more important rules of being well-formed:

elements must be properly nested
elements and attributes must be written in lowercase
non-empty elements must be closed
empty elements are minimized as a single element and closed with a space before the trailing slash
images must contain alternative text
markup characters: <, >, & and " are escaped

Being well-formed also means that XHTML is backward-compatible and can be served as HTML, using the media type: text/html. In fact, web servers and server-side scripting environments (PHP, Ruby etc) use this media type for content delivery, and so by default, XHTML pages are served as HTML.

In addition, XHTML inherits a useful feature from XML in XML namespaces. Because of this, XHTML markup can include other markup languages like MathML, SMIL, or SVG, and thus extend the basic functionality of a web document. This is semantic flexibility that isn’t available in HTML.

Deciding between HTML and XHTML is the easy part, but for each declaration, there are also different flavours to choose from, such as the Strict and Transitional DOCTYPE (and Frameset DOCTYPE).

Strict DOCTYPE

A Strict DOCTYPE enforces the separation of structure and presentation, requiring that presentational elements are shifted from markup to CSS. Using a Strict DOCTYPE also ensures that all markup are fully standards-compliant, and would only be processed by browsers in their strictest, standards-compliant mode. Ultimately, this results in the most consistent and forward compatible interpretation of the markup.

Transitional DOCTYPE

A Transitional DOCTYPE is used when transiting from legacy markup to modern standards, permitting the use of some deprecated elements or attributes that were common in legacy markup. This DOCTYPE is not meant to be used permanently and all markup should aim towards implementing the Strict DOCTYPE.

Differences between Strict and Transitional DOCTYPE

In general, most of the differences between a Strict and Transitional DOCTYPE are related to presentational elements. Listed below are some of the differences that are more likely to cause problems when migrating from Transitional to Strict DOCTYPE.

Elements not allowed with Strict DOCTYPEs:

center
font
iframe
strike
u

Attributes not allowed with Strict DOCTYPEs:

align (allowed on table elements: col, colgroup, tbody, td, tfoot, th, thead, and tr)
language
background
bgcolor
border (allowed on table)
height (allowed on img and object)
hspace
noshade
nowrap
target
text
link
vlink
alink
vspace
width (allowed on img, object, table, col, and colgroup)

Conclusion

As most of the readings point out, we should strive to use a Strict DOCTYPE for our web quality’s sake. This is because a Strict DOCTYPE promotes the separation of presentation and structure, and results in code consistency and ease of maintenance of any website. HTML 4.01 Strict or XHTML 1.0 Strict? That would depends on our requirements and application architecture. But from a Web Standardista’s point of view, making sure that a Strict DOCTYPE is in use is more important than anything else.

Note to self: I should start to transit this blog into a Strict DOCTYPE.

Resources:

Create a Digg-Like Delicious Count Button With JQuery

Winston — Sat, 23 Aug 2008 15:57:22 +0000

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.


  
  ' target='_blank'>Del.icio.us

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.

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.

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.

A New Simple Design

Winston — Sun, 10 Aug 2008 17:50:55 +0000

After a hiatus of nearly two years, I want to start blogging actively again. This new design is created for that purpose, as a celebration of my return to blogging.

I have it made to be just a plain and simple blog design that’s absent of many colours or other funky design elements, as I hope that the content would eventually be the main draw. But, I also have it optimized in several aspects to make it look aesthetically pleasing (at least to me).

Firstly, the main fonts are 13px at least, and there’s a line height of 1.5em between the lines to make sure that paragraphs are easily readable. Secondly, for every paragraph, the number of words per line is in the range of 12-18 words which is what I understand as the optimum number of words per line. Thirdly, I am using a grid layout that further enhances readability. Last but not least, I am using dark coloured wordings on a white background which is the safest colour combination for any blog design. You may disagree with me on all the aspects I listed above, but well, those are what I believe in.

Anyway, I don’t call myself a designer and this blog is a culmination of inspirations I got from a number of blogs. This list is not exhaustive, but the following are the ones that I felt had the strongest influence in my new blog design:

As of this writing, this blog design is almost complete. But I am still looking to integrate my FriendFeed into the blog. I had a look at the FriendFeed plugin, but am not extremely fond of it. So, for now I would sit on it while I brainstorm for fresh ideas on how to do the integration.

That’s all I have to say about my new blog design. I hope you like it as much as I do, and I welcome feedback or suggestions!