Introducing Wufoo forms

Posted Fri, 10/16/2009 - 11:04 by jayzeng

Everyone is being hit by the poor economy and everyone is looking for new ways to increase revenue. Recently, I have received a number of requests with almost the same requirements:

Hey, I see an opportunity to do xyz, and all I need is something simple on the web to establish a trustworthy online identity. The site only needs to be simple, easy to use and has something like a contact form so my clients can get in touch with me, I don't need a database or something sophisticated because I understand it will be expensive.

Okay, so what are the underlying messages here and what are the business requirements? Essentially, the client is looking for:

  • A clean, simple design. Keep it straight, only a few things are needed: about us, contact me, introduction. It is up to the client's desire to request the site to be one page design or a few pages view, their call.
  • A contact form, the core part. On the hand, the form needs to be easy to use, while it looks cool with some fancy web 2.0 UI elements like date picker, error indication etc. On the other hand, the client needs to have a complete view of what exactly the users have entered through the form, in another word, a full-fledged report.

As you can guess, client just wants something quick and dirty so they can do their businesses in few days, and they probably don't care whether it has a slick UI with the latest,cool features like Ajax, auto-complete etc. I first start with building everything from scratch, build a html form with all kinds of cool stuff by leveraging jQuery UI, store all the form inputs and pass into a PHP script then mail to the user. I soon realized this is not the best way to approach this kind of problem as clients constantly want to change this and that: UI changes, adding/removing/modifying form fields, any minor changes will require according changes in the back end. You feel my pain?

I soon discovered Wufoo, a form builder site that "making forms easy + fast + fun". Wufoo indeed makes form building a piece of cake, after you register for an account, you will be given three free forms (which should be enough for most people). While building a form is a no brainer, I will show you the form I built in 5 minutes.

Clicking on any field will give you more options to customize.
wufoo options

Each field is customizable, the cool part is you can define a customized message, and you can even let wufoo to send you the entire report to your personal email box, or view the report over wufoo. wufoo report management

Best of all, wufoo takes care all the business for you no matter what minor modifications you make over your form.

Once you have your form built, you can load up the form with as simple as iframing it. You may view the live demo by going to my contact page
Wufoo - wow, really cool!

How to:print output with desired formats in awk

Posted Thu, 10/15/2009 - 00:07 by jayzeng

I was leveraging the jQuery auto-complete plugin today and my client asked me if I can store all the major cities in the United States. I managed to find a list through wiki, however, it is a HTML table with 273 rows surrounded with HTML tags, my goal here is to get entire city columns, join with single quotes and a comma, then apply them to the auto-complete plugin.

Input:

Rank City State Population
1 New York New York 8,363,710
2 Los Angeles California 3,833,995

Desire Output:
'New York',
'Los Angeles'

Here is my approach:

wget en.wikipedia.org/wiki/List_of_United_States_cities_by_population
awk -v s="'" -v e="'," '{print s $2 e}' filename

The v argument gives you the ability to define simple variable and creates flexibility for automation.

Want to learn more about awk, read this awesome tutorial.

I later discovered an even better approach by relying on Jquery. I first include jquery by using an user script by joanpiedra

Refresh the wiki page to get Jquery included in this page, then I use the following JavaScript in Firebug to populate the data:

$("#sortable_table_id_0 tr td:nth-$("table tr td:nth-child(2)").each(function(){
   var t = $(this).text();
   console.log(t); 
});

Wow, all data gets populated in the firebug console. The rest will be simple copy and paste.

Update:

If you are a mootools fan, you can achieve the same goal with the same code, as long as you have injected mootools into the page, as introduced below:

$('#sortable_table_id_0 td:nth-child(2)').each(function(){
   var t = $(this).text();
   console.log(t); 
});

You will also need to inject mootools into this page, the following script, a slight modification base upon joanpiedra's user script:

// ==UserScript==
// @name          Mootools
// @namespace     http://www.joanpiedra.com/jquery/greasemonkey
// @description	  Play nicely with Mootools and Greasemonkey
// @author        Joan Piedra
// @homepage      http://www.joanpiedra.com/jquery/greasemonkey
// @include       *
// ==/UserScript==


// Add mootools
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://www.mootools.net/download/get/mootools-1.2.3-core-nc.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

How to: Set Up Google App mail for your site (on linode)

Posted Tue, 10/13/2009 - 21:56 by jayzeng

Problem: You are a linode user, or your host provider does not ship with a mail server, and you don't want to or don't know how to set up a mail server. Google app mail is will be a good, free and quick way.

How?
Considering you can easily find lots of step by step guides, I am posting my dns settings for you as reference:


Google App mail DNS settings

Essentially, you will be going through these steps:

  • Open/activate an Google app account, provide necessary personal and domain information.
  • Go to the DNS manager inside Linode, or make according changes (adding CNAME, MX records) on your own DNS settings. You don't have to add a new CNAME, it can be accessed with https://mail.google.com/a/your-domain-name.com
  • It may take a few hours to get your DNS records updated, depends on your settings. You will then need to verify your domain ownership by either modifying the dns record or creating a new html page.

Sounds simple? It is that simple.

Automatically refresh file changes in Visual Studio 2008

Posted Mon, 10/12/2009 - 21:29 by jayzeng

Here is the scenario I ran into: I am working on a framework that does xml processing and generates various language outputs by applying appropriate transforms. I wrote a small class that reads an input xml and xslt, then generates output file. 

builder.exe input.xml input.xsl output.ext

I put the following in the post-build event:

$(TargetDir)builder.exe $(ProjectDir)input.xml $(ProjectDir)input.xsl $(ProjectDir)output.html

What annoys me is every time the project is built and output file gets generated, visual studio asks you the same retarded question: "Do you want to reload the files?" You need to press "Yes" a few times.

The trick is: 

Tools -> Options -> Documents -> Detect when files is changed outside the environment -> Check Auto-load changes, if saved. Big timer saver :)

^ Top of Page