I have always been skeptical about using Adobe Flash on web browsers, because of its high CPU usage, requirement to install plugin or sometimes just refuse to work well. However, for now with the introduction of HTML 5 Video in 3 major browsers, Google Chrome, Apple Safari  and IE with Chrome Frame installed (Get Chrome Frame), I believe very soon if not now, there are already many sites using videos as their core service, have already started migrating over to HTML 5, one recent good example is YouTube, they are already testing out their videos in HTML 5 Beta. Although some of the features such as Fullscreen or video ads are not supported, but I think its not going to affect much about its functionality. HTML 5 certainly has its own potential to provide more complete features in the near future, one thing I especially like about it, is that no plugin is required, its basically powered by Javascript in the backend, hopefully we will see more sites implementing HTML 5, showcasing the various possibilities of this next upcoming hit.

As we know, currently there are lots of companies or groups seeking out ways to improve the Online Search function, trying to make it as relevant as possible for the users, and for some trying to make it as visual as possible. Including Google itself (the current biggest Search Engine), is probably working on their next generation Search Engine. But, who is going to make it right, we have yet to see. It’s not going to be easy to read the users mind, as we know different people have different habit of entering their search queries. Just to analyze the patterns alone, can be overkill. I’m currently working on this Search project, hoping to enhance the current Search Engines, although its not going to be easy, but I believe its still worth trying out, and see how the users will response to it. Who knows, it might turn out to be great. Just look out for it!

Are you looking for an Ajax contact form, which can validate using jQuery, and uses anti-bot service from reCaptcha to prevent spamming. This is probably the right post for you. This script was originally created for tysoh.com (take a look at the demo). I have attached the full source code for your own testing too. However, there are 3 steps you will need to change before the form can work for you. Please see below:

1) Open up the file index.php, go to line 65, and change to your own reCaptcha public key. (You will need to sign up at recaptcha.net to get one)

2) Open the file ajax.recaptcha.php, go to line 8 and 9, and change to your own reCaptcha public and private key.

3) Open the file sendemail.php, go to line 7, and change to the desired email you want the form to forward to.

Further Modifications:
If you are slightly more ambitious, all the error and thank you messages can be configured under the file – submitform.js. And the theme for reCaptcha can be configure under the file – index.php.

Other Useful Resources:
jQuery Documentation
reCaptcha Documentation

Scripts Updates:
17/Jan/2010 – Version 1.2 released with bugs fixed

In case you have not heard about one of the latest products by Google, its called Google Wave. Google Wave is a product that helps users communicate and collaborate on the web. A “wave” is equal parts conversation and document, where users can almost instantly communicate and work together with richly formatted text, photos, videos, maps, and more. Google Wave is also a platform with a rich set of open APIs that allow developers to embed waves in other web services and to build extensions that work inside waves.

Today, I have just received the requested developer account from Google, in order to gain access to the Sandbox. The moment I signed in to the account, I realised that the interface looks quite similar, if not exactly the same in design as the Google Wave Preview Version, just that there is an extra ‘Debug‘ menu on top, which allow developer to test out their robots or gadgets.

The first thing I decided to try out, is the Embedded Waves, first of all, I went to create a new wave, and then go to the ‘Debug’ menu to get the current Wave ID. With this Wave ID, I will then embed it into the API code provided by Google, and paste them into the webpage. To my surprise, yes the same wave that I have created earlier on, do appear in my local webpage, and I can interact or post reply to the wave, and on the original end of the wave, my reply appears concurrently, it works like live chatting. Kind of interesting to see how it works, and pretty easy to embed. Furthermore, the wave can be configured in the webpage (e.g font, background colour), by using other API available.

Getting a little bit excited, I decided to move on to try out the extensions called Robots, its a little challenging for this one. I tried to follow their tutorial as closely as possible, by installing Eclipse, did all the necessary configuration, paste in their given testing codes, compile and upload to Google App Engine, but in the end its still not working, given a few more tries, but my robot parrot just refuse to give any response, when I try to add it to my contact. I have tested it on both the PC and Mac platforms, but the same errors in the coding still occurs. As for the next extension called Gadgets, its far more straight forward, the codes are based on Javascript, and later on parse to XML for processing.

It’s still very early to see anything now, but there is surely some potential in Google Wave for online communication. The development process now is still very troublesome, as there is no way you can test the robots or gadgets locally, as they are required to upload to the Wave server for live testing. Hopefully, some workaround will be available soon.

References:
Google Wave API
Google Wave Blog

I have finally abandone Google Ajax Feed completely for tysoh.com, as the functions inside cannot meet my requirement anymore. For example, I am only restricted to display no more than 120 characters for the snippets for each post, have tried the Google Forums and etc., but with no help. I did a bit of research online, and found a brand new script from Dynamic Drive, which allow a similar function as Google Ajax Feed, that is to read in and display the RSS feed content on a separate webpage, but with much more control (e.g Pagination to separate displayed content into pages). It’s basically quite a good script, but with one very important feature missing, I cannot control the amount of texts displayed for the description part! No worry, luckily there is a manual Excerpt feature available in WordPress, just read on…

By default if you are using Wordpress RSS to display the content on your webpage too, you should realised that the automatic excerpt will cause the description to cut off after 55 words. Furthermore, these 55 words are abstracted off from your original post first 55 words, and therefore its known as introduction, rather than summary. In other words, it is not a part taken from a post but an extra piece of information added to a post, in the same way that tags are added. And, like tags, it is optional. To add an manual excerpt, you simply write one in the Excerpt box, right under the post editor:

So, what how do I configure the RSS feed?
After you have typed in your manual Excerpt (known as Summary), it can be reflected in your RSS feed, you need to configure the RSS feed under Dashboard > Settings > Reading to display each article in RSS, either in full text or Summary (As shown below). Overhere, we choose Summary. Now go to your RSS feed url in the browser, you should see the manual Excerpt reflected.

Other Useful Resources:
Google Ajax Feed API
Wordpress manual Excerpt
Dynamic Drive RSS Display Boxes

It’s getting a little busy now for the site, in terms of the back-end coding. Almost everything right from the thumbnail boxes with slide-up texts, tabbed pages with sliding transition, to the Contact page with errors validation, its all integrated with jQuery, CSS and HTML. However, its certainly going to be more interactive, consistent and sleeker than before.

Two greatest challenges I have faced this time round, is firstly trying to get the site to look consistent across all major browsers, such as IE7-8, Firefox, Safari and Opera. The main issue actually lies with the tabbed pages, z-index property has to be added to the CSS tabs, in order for the tabs to look exactly what I want under IE7.

Another problem I have faced, is when integrating reCaptcha with jQuery. Although, I have done it with PHP before, but its a little more complicated when working with Javascript. I will be posting a separate tutorial soon, stating the exact problem and solution.

After working with jQuery for the past 2 days, I realised that its not too difficult to implement, as long as the online tutorials are available. However in terms of browsers compatibility, more time is required to test out the site. And for any future modification required for the site, its definitely going to take more time to adapt. Nevertheless, its still fun trying out new things, you should try it out too!

What is jQuery?
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. – abstracted from jQuery.com

What is reCaptcha?
reCAPTCHA is a free CAPTCHA service that helps to digitize books, newspapers and old time radio shows. A CAPTCHA is a program that can tell whether its user is a human or a computer. You’ve probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from “bots,” or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs. – abstracted from reCaptcha.net

Updated on 5th of Dec 2009:
Now even the portion for displaying the RSS feed is based on Ajax. To learn how is that possible, just read here.