Tips for Twits

We’ve been working on web development for awhile now, i’ve really only seen a handful of pretty forms. The interfaces seen at Uni-Form, mooflex and even to a certain extent linuxjournal are all intuitive and well thought out.

So in the good ol WITS culture, we’ve tried our hand at building our own version of a universal form interface. Alot of features were borrowed off work already done at Uni-Form. We just made it jQueried, lighter and more readable. Like all other jQuery plugins, insert jquery.js, insert the jquery.witsform.js script, insert the css, use the right html code, and you’re done! I’m pretty sure as time goes by i’ll keep improving it. So here’s version 1.0 meanwhile. We bothered so that you shouldnt have to.

download the jQuery WITSForm here: jQuery WITSForm
or view the demo here

Lets cut through the chase, theres no way to install IE6 on vista but you can boot it off an image (which seems to be the most popular choice anyway), even if other sites teaches you registry hacks and etc, there are still differences between the real IE6 rendering versus the emulated/hacked version. But, what you can do is to install the Virtual PC with IE6 + XP SP3 Virtual Hard Disk.

Once you’ve downloaded both and installed the Virtual PC, run it. Then:
File > New Virtual Machine Wizard

1. Create a virtual machine
2. Choose some location of your preference
3. Choose Windows XP for your operating system
4. Use the recommended RAM (of if you can spare it, adjust it more or less to your preference)
5. Use an existing Virtual Hard Disk
6. Choose the downloaded IE6 + XPSP3 .vhd image
7. Finish

When ready, click Start on the virtual image and viola!

Note:

• The .vhd image always expires 3 months as of download, this is to prevent ppl from just living off an image (since i gather the image can be run off other operating systems too)
• Go to Settings > Networking and choose the active network controller to give the IE6 image networking capabilities
• If you’ve been developing your website on localhost, then you cannot access http://localhost/project on your IE6 anymore as thats is resolved internally. Instead use your main computer’s IP. In my case, http://192.168.1.1/project

Sorry for not posting in such a long time folks, i just came back from the Pegasus galaxy. While working on a Joomla! 1.5 project, we had to develop a function to crop and resize images for obvious content management and aesthetic reasons. So i gathered around some good sources on PHP.net and wrote the following class:

class ImageHelper {
 
	static function treatFilename($filename) {
		$newfilename = strtolower($filename);
		$newfilename = str_replace(" ","_",$newfilename);
		return $newfilename;
	}
 
	static function isPotrait($srcimage) {
		if (!file_exists(realpath($srcimage)))
			return;
 
		return !ImageHelper::isLandscape($srcimage);
	}
 
	static function isLandscape($srcimage) {
		if (!file_exists(realpath($srcimage)))
			return;
 
		$size	= getimagesize( $srcimage );
		return ($size[0] > $size[1]);
	}
 
	static function resizeImage($srcimage, $destimage, $width, $height) {
		if (!file_exists(realpath($srcimage)))
			return;
 
		$srcpathinfo 	= pathinfo($srcimage);
		$srcext 		= strtolower($srcpathinfo['extension']);
		$destpathinfo 	= pathinfo($destimage);
		$destext 		= strtolower($destpathinfo['extension']);
		$size 			= getimagesize( $srcimage );				// Get the size of the original image into an array [0]=> width, [1]=> height
		$image			= null;
		$canvas 		= imagecreatetruecolor( $width, $height );	// Prepare canvas
 
		// Create a new image in the memory from the file 
		switch ($srcext) { 
			case 'wbmp':
			case 'bmp':
				$image = imagecreatefromwbmp($srcimage);
				break;
			case 'jpg':
			case 'jpeg':
				$image = imagecreatefromjpeg($srcimage);
				break;
			case 'png':
				$image = imagecreatefrompng($srcimage);
				break;
			case 'gif':
				$image = imagecreatefromgif($srcimage);
				break;
			case 'xpm':
				$image = imagecreatefromxpm($srcimage);
				break;
			default:
				return;
		}
 
		// Calculate dimensions
		$widthratio		= $size[0]/$width;
		$heightratio	= $size[1]/$height;
		$dimensions 	= array(
						'ratio' 			=> $widthratio,
						'source_cropwidth' 	=> 0,
						'source_cropheight' => 0,
						'source_offsetx' 	=> 0,
						'source_offsety' 	=> 0
						);
 
		if ($heightratio < $widthratio)
			$dimensions['ratio'] 			= $heightratio;
 
		// let say image is 1200*800, then:
		// widthratio = 1200/400 = 3
		// heightratio = 800/300 = 2.66
		// since there is less height than width, the max scale we can do is 2.66, then
		// the targetwidth to crop = 400 * 2.66
		// the targetheight to crop = 300 * 2.66
		// the offset width = (1200 - (2.66 * 400))/2 = 68
		// the offset height = (800 - (2.66 * 300))/2 = 1
 
		$dimensions['source_width'] 		= $size[0];
		$dimensions['source_height'] 		= $size[1];
		$dimensions['source_cropwidth'] 	= $width * $dimensions['ratio'];
		$dimensions['source_cropheight'] 	= $height * $dimensions['ratio'];
		$dimensions['source_offsetx'] 		= ($size[0] - $dimensions['source_cropwidth']) / 2;
		$dimensions['source_offsety'] 		= ($size[1] - $dimensions['source_cropheight']) / 2;
 
		imagecopyresampled($canvas, $image, 0, 0, $dimensions['source_offsetx'], $dimensions['source_offsety'], $width, $height, $dimensions['source_cropwidth'], $dimensions['source_cropheight']);
 
		switch ($destext) {
			case 'jpg':
			case 'jpeg':
				imagejpeg( $canvas, $destimage );
				break;
			case 'png':
				imagepng( $canvas, $destimage );
				break;
			case 'gif':
				imagegif( $canvas, $destimage );
				break;
			case 'wbmp':
			case 'bmp':
				imagewbmp( $canvas, $destimage );
				break;
		}
 
		imagedestroy( $canvas );
		imagedestroy( $image );
 
		return true;
	}
}

	$width 		= 150;
	$height 		= 150;
	if (is_uploaded_file(@$_FILES['ulimage']['tmp_name'])){
		$targetfilename	= ImageHelper::treatFilename(uniqid() . "_" . $_FILES['ulimage']['name']);
		move_uploaded_file($_FILES['ulimage']['tmp_name'], dirname(__FILE__) . "/tmp/" . $_FILES['ulimage']['name']);
		ImageHelper::resizeImage(dirname(__FILE__) . "/tmp/" . @$_FILES['ulimage']['name'], dirname(__FILE__) . "/tmp/" . $targetfilename, $width, $height);
	}

With the controllable jQuery Progress Bar, writing a form upload progress bar seems like a piece of cake now. Hypothetically, all we need is to create the bar, poll for the progress of the file upload, derive the new progress bar value (in percentage) and set it.

To do that you need to prepare the php script to do it. By default PHP cant report the progress of upload progress. However people smarter than me have already solved that problem. In 5 mins i’ve found 2 solutions: the Alternative PHP Cache (APC) method as well as the UploadProgress method. Both of them are PECL packages. Because i couldnt get APC to work on my server properly, i’ll document the UploadProgress more in detail here…

pecl install uploadprogress

extension=uploadprogress.so

<form id="uploadform" enctype="multipart/form-data" method="post">
<input id="progress_key" name="UPLOAD_IDENTIFIER" type="hidden" value="&lt;?= $uuid ?&gt;" />
<input id="ulfile" name="ulfile" type="file" />
<input type="submit" value="Upload" />
	<span id="uploadprogressbar" class="progressbar">0%</span>
</form>

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 
if (@$_GET['id']) {
	echo json_encode(uploadprogress_get_info($_GET['id']));
	exit();
}

{"time_start":"1214384364","time_last":"1214384366","speed_average":"25889","speed_last":"40952","bytes_uploaded" :"51778","bytes_total":"8125518","files_uploaded":"0","est_sec":"311"}

var progress_key = '';
 
// this sets up the progress bar
$(document).ready(function() {
	$("#uploadprogressbar").progressBar();
});
 
// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
	$("#uploadprogressbar").fadeIn();
	setTimeout("showUpload()", 1500);
}
 
// uses ajax to poll the uploadprogress.php page with the id
// deserializes the json string, and computes the percentage (integer)
// update the jQuery progress bar
// sets a timer for the next poll in 750ms
function showUpload() {
	$.get("uploadprogress.php?id=" + progress_key, function(data) {
		if (!data)
			return;
 
		var response;
		eval ("response = " + data);
 
		if (!response)
			return;
 
		var percentage = Math.floor(100 * parseInt(response['bytes_uploaded']) / parseInt(response['bytes_total']));
		$("#uploadprogressbar").progressBar(percentage);
 
	});
	setTimeout("showUpload()", 750);
}

i18n in struts is really flexible if set up correctly. Unfortunately searching for a document to learn the ‘hidden’ tricks of it is really frustrating… So in revenge, i’m writing my own! I hope someone out there finds this useful…

struts.custom.i18n.resources=languages_actions,languages_views

user.submit.image=/images/en_US/submit.gif
user.welcome=Welcome, {0}
user.link=<a href="somelink.action?id={1}&amp;token={2}">{0}</a>' document
user.validation.token.invalid={0} does not exists in the system

user.submit.image=/images/zh_CN/submit.gif
user.welcome={0}, 你好
user.link=<a href="somelink.action?id={1}&amp;token={2}">{0}</a> 的文件
user.validation.token.invalid={0} 不纯在于系统

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<h1><s:text name="user.welcome">
	<s:param value="user.name" />
</s:text></h1>
<s:text name="user.link">
	<s:param value="document.name" />
	<s:param value="document.id" />
	<s:param value="document.token" />
</s:text>
<form input="">
	<s:submit type="image" src="%{getText('user.submit.image')}" cssClass="submit" />
</form>

public class SomeActions extends ActionSupport {
	public String someMethod() throws Exception {
		if (!token.equalsIgnoreCase("abcdefghi")) {
			String [] messageargs = { token };
			addActionError(getText("user.validation.token.invlaid", messageargs));
		}
	}
 
	private String token;
	public String getToken() 	{ return  token; }
	public void setToken(String s) 	{ token = s; }
}

If you have more access to more than 1 server, a good idea would be to schedule remote backups using a small script and crontab. This way, if 1 server goes down at least SOME data still resides on another. (a friend’s hosting service got prematurely terminted recently because someone else sharing a hosting plan was serving illegal content and the whole system was confiscated by the police in that country!)

of course backing up mysql is the only thing you can do, unless you’ve way too much disk space and way too much bandwidth… in that case please consult a professional on the actual 1001 ways to throw money at redundancy.

The script will first run remote commands on the target server over ssh to dump and gzip the database into a file. The file is then downloaded to the backup server. A final ssh command removes the dump file from the target server. Viola! And here is the shell script…

ssh root@wits.sg 'mysqldump -uroot twits> /tmp/twits.backup.sql && bzip2 -9 /tmp/twits.backup.sql'
scp root@wits.sg:/tmp/twits.backup.sql.bz2 /var/backups/twits/`date "+%Y%m%d-%H%M"`.sql.bz2
ssh root@wits.sg 'rm /tmp/twits.backup.sql.bz2'

Save this few lines to a file on the backup server and give it execute permissions! (I saved it at /root/twits_backup.sh)
Note: Passwordless logins between the 2 servers must have been setup prior to running this script. Otherwise scp and ssh commands will both be prompted for a password.

Next set up the cron job on the backup server to run the script

30 05 * * * /root/twits_backup.sh

This sets the script to run at 5:30am everyday.
Here is a good place to read up more on cron jobs.

I always thought it was really cool to have those “Did you mean <some other spelling corrected word>”? Took me long enough to finally chance upon how it works! Basically it uses sound functions: soundex, metaphone or levenshtein distance to match words.

Different database supports different possible implementations of the functions. A sample mySQL query would look like:

SELECT `name` FROM `organizations` WHERE SOUNDEX(`name`) = SOUNDEX('dog');

I’ve also seen some mysql stored procs that hack in a levenshtein distance calculation algorithm. This allows a even more dynamic and accurate match. Unfortunately, i’ve never gotten it to work. Do let me know if anyone has succeeded.

I encountered a interesting display bug when working with EXTJS recently. The following code renders well in FF 2 and above but not in IE6.

var form = new Ext.form.FormPanel({
	baseCls: 'x-plain',
	labelWidth: 140,
	url: 'abc/def.php',
	defaultType: 'textfield',
	items: [{
		fieldLabel: 'Name',
		name: 'name',
		anchor:'100%'  // anchor width by percentage
	}, {
		xtype: 'textarea',
		fieldLabel: 'Description',
		name: 'description',
		anchor: '100% -30'  // bug in IE6
	}]
});
 
var window = new Ext.Window({
	title: 'Some Window',
	width: 500, height: 300, 
	layout: 'fit',
	plain: true,
	buttonAlign: 'center',
	items: form
});
 
window.show();

brian.moeskau from the EXTJS forums was kind enough to answer this problem. The fix is a piece of code that primes the width of the controls to prevent it from overflowing out of the window/panels. The code is as follows

Ext.override(Ext.form.Field, {
    adjustWidth : function(tag, w){
        tag = tag.toLowerCase();
        if(typeof w == 'number' && !Ext.isSafari){
            if(Ext.isIE && (tag == 'input' || tag == 'textarea')){
                if(!Ext.isStrict){
                    return this.inEditor ? w : w - 3;
                }
                if(tag == 'input' && Ext.isStrict){
                    return w - (Ext.isIE6 ? 4 : 1);
                }
                if(tag == 'textarea' && Ext.isStrict){
                    return w-4;
                }
            }else if(Ext.isOpera && Ext.isStrict){
                if(tag == 'input'){
                    return w + 2;
                }
                if(tag == 'textarea'){
                    return w-2;
                }
            }
        }
        return w;
    }
});

I hope this will solve other people’s problems too!

Pretty URLs on IIS is possible. Not so much to make it pretty but to make it convenient when testing your system. Its really simple too!

RewriteRule ^/firingrange/(images|css|files|js)(.*)$ /firingrange/webroot/$1$2 [L]
RewriteRule ^/firingrange/$ /firingrange/index.php [L]
RewriteRule ^/firingrange/index.php$ /firingrange/index.php [L]
RewriteRule ^/firingrange/index.php?(.*)$ /firingrange/index.php?$1 [L]
RewriteRule ^/firingrange/(\w+).php$ /firingrange/webroot/($1).php [L]
RewriteRule ^/firingrange/(.+)\?(.*)$ /firingrange/index.php?$1&$2 [L]
RewriteRule ^/firingrange/(.*)$ /firingrange/index.php?$1 [L]