Orite Blog

FREE Instant Email Standard Test Tool

Frank Liu — Wed, 08 Jul 2009 12:46:57 +0000

Orite has created an online tool to emulate HTML/CSS rendering capacity of various Email clients. It references the Email CSS support Guide from Campaign Monitor, and utilizing the email-standards.org Email ACID test page as the example. You may paste in your own email template to test in.

Please note, this tool only provides a brief demonstration, by no means to be the exact reflection of how email clients show emails. Please remember this tool highly relies on the browsers capability as well, so be sure to use a standard compliant browsers. For more solid tests please try Litmus Email Testing or the Campaign Monitor Email Testing tool. If you want to convert any external CSS to inline style, Inline Styler and Emogrifier may come to help. Here goes the FREE tool, post your comments.

Email Client:

Images:

Show Hide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">
	
	/* common
	--------------------------------------------------*/
	
	body {
		margin: 0px;
		padding: 0px;
		color: #fff;
		background: #930;
	}
	#BodyImposter {
		color: #fff;
		background: #930 url("http://www.email-standards.org/acid/img/bgBody.gif") repeat-x;
		background-color: #930;
		font-family: Arial, Helvetica, sans-serif;
		width: 100%;
		margin: 0px;
		padding: 0px;
		text-align: center;
	}
	#BodyImposter dt {
		font-size: 14px;
		line-height: 1.5em;
		font-weight: bold;
	}
	#BodyImposter dd,
	#BodyImposter li,
	#BodyImposter p,
	#WidthHeight span {
		font-size: 12px;
		line-height: 1.5em;
	}
	#BodyImposter dd,
	#BodyImposter dt {
		margin: 0px;
		padding: 0px;
	}
	#BodyImposter dl,
	#BodyImposter ol,
	#BodyImposter p,
	#BodyImposter ul {
		margin: 0px 0px 4px 0px;
		padding: 10px;
		color: #fff;
		background: #ad5c33;
	}
	#BodyImposter small {
		font-size: 11px;
		font-style: italic;
	}
	#BodyImposter ol li {
		margin: 0px 0px 0px 20px;
		padding: 0px;
	}
	#BodyImposter ul#BulletBg li {
		background: url("http://www.email-standards.org/acid/img/bullet.gif") no-repeat 0em 0.2em;
		padding: 0px 0px 0px 20px;
		margin: 0px;
		list-style: none;
	}
	#BodyImposter ul#BulletListStyle li {
		margin: 0px 0px 0px 22px;
		padding: 0px;
		list-style: url("http://www.email-standards.org/acid/img/bullet.gif");
	}
	
	/* links
	--------------------------------------------------*/
	
	#BodyImposter a {
		text-decoration: underline;
	}
	#BodyImposter a:link,
	#BodyImposter a:visited {
		color: #dfb8a4;
		background: #ad5c33;
	}
	#ButtonBorders a:link,
	#ButtonBorders a:visited {
		color: #fff;
		background: #892e00;
	}
	#BodyImposter a:hover {
		text-decoration: none;
	}
	#BodyImposter a:active {
		color: #000;
		background: #ad5c33;
		text-decoration: none;
	}
	
	/* heads
	--------------------------------------------------*/
	
	#BodyImposter h1,
	#BodyImposter h2,
	#BodyImposter h3 {
		color: #fff;
		background: #ad5c33;
		font-weight: bold;
		line-height: 1em;
		margin: 0px 0px 4px 0px;
		padding: 10px;
	}
	#BodyImposter h1 {
		font-size: 34px;
	}
	#BodyImposter h2 {
		font-size: 22px;
	}
	#BodyImposter h3 {
		font-size: 16px;
	}
	#BodyImposter h1:hover,
	#BodyImposter h2:hover,
	#BodyImposter h3:hover,
	#BodyImposter dl:hover,
	#BodyImposter ol:hover,
	#BodyImposter p:hover,
	#BodyImposter ul:hover {
		color: #fff;
		background: #892e00;
	}
	
	/* boxes
	--------------------------------------------------*/
	
	#Box {
		width: 470px;
		margin: 0px auto;
		padding: 40px 20px;
		text-align: left;
	}
	p#ButtonBorders {
		clear: both;
		color: #fff;
		background: #892e00;
		border-top: 10px solid #ad5c33;
		border-right: 1px dotted #ad5c33;
		border-bottom: 1px dashed #ad5c33;
		border-left: 1px dotted #ad5c33;
	}
	p#ButtonBorders a#Arrow {
		padding-right: 20px;
		background: url("http://www.email-standards.org/acid/img/arrow.gif") no-repeat right 2px;
	}
	p#ButtonBorders a {
		color: #fff;
		background-color: #892e00;
	}
	p#ButtonBorders a#Arrow:hover {
		background-position: right -38px;
	}
	#Floater {
		width: 470px;
	}
	#Floater #Left {
		float: left;
		width: 279px;
		height: 280px;
		color: #fff;
		background: #892e00;
		margin-bottom: 4px;
	}
	#Floater #Right {
		float: right;
		width: 187px;
		height: 280px;
		color: #fff;
		background: #892e00 url("http://www.email-standards.org/acid/img/ornament.gif") no-repeat right bottom;
		margin-bottom: 4px;
	}
	#Floater #Right p {
		color: #fff;
		background: transparent;
	}
	#FontInheritance {
		font-family: Georgia, Times, serif;
	}
	#MarginPaddingOut {
		padding: 20px;
	}
	#MarginPaddingOut #MarginPaddingIn {
		padding: 15px;
		color: #fff;
		background: #ad5c33;
	}
	#MarginPaddingOut #MarginPaddingIn img {
		background: url("http://www.email-standards.org/acid/img/bgPhoto.gif") no-repeat;
		padding: 15px;
	}
	span#SerifFont {
		font-family: Georgia, Times, serif;
	}
	p#QuotedFontFamily {
		font-family: "Trebuchet MS", serif;
	}
	#WidthHeight {
		width: 470px;
		height: 200px;
		color: #fff;
		background: #892e00;
	}
	#WidthHeight span {
		display: block;
		padding: 10px;
	}
	
</style>
</head>

<body>
<div id="BodyImposter">
	<div id="Box">
		<div id="FontInheritance">
			<h1>H1 headline (34px/1em)</h1>
			<h2>H2 headline (22px/1em)</h2>
			<h3>H3 headline (16px/1em)</h3>
		</div>
		<p>Paragraph (12px/1.5em) Lorem ipsum dolor sit amet, <a href="http://www.email-standards.org/" target="_blank">consectetuer adipiscing</a> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <span id="SerifFont">(This is a serif font inside of a paragraph styled with a sans-serif font.)</span> <small>(This is <code>small</code> text.)</small></p>
		<p id="QuotedFontFamily">This is a font (Trebuchet MS) which needs quotes because its label comprises two words.</p>
		<ul id="BulletBg">
			<li>background bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ul id="BulletListStyle">
			<li>list-style bullet eum iriure dolor in hendrerit in</li>
			<li>vulputate velit esse molestie consequat, vel illum dolore eu</li>
			<li>feugiat nulla facilisis at vero eros et accumsan et iusto odio</li>
		</ul>
		<ol>
			<li>ordered list sit amet, consectetuer adipiscing elit</li>
			<li>sed diam nonummy nibh euismod tincidunt ut laoreet</li>

<li>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</li>
		</ol>
		<dl>
			<dt>Definition list</dt>
			<dd>lorem ipsum dolor sit amet, consectetuer adipiscing elit</dd>
			<dd>sed diam nonummy nibh euismod tincidunt ut laoreet</dd>
			<dd>dolore magna aliquam erat volutpat. Ut wisi enim ad minim</dd>
		</dl>
		<div id="Floater">
			<div id="Left">
				<div id="MarginPaddingOut">
					<div id="MarginPaddingIn">
						
					</div>
				</div>
			</div>
			<div id="Right">
				<p>Right float with a positioned background</p>
			</div>
		</div>
		<p id="ButtonBorders"><a href="http://www.email-standards.org/" target="_blank" id="Arrow">Borders and an a:hover background image</a></p>
		<div id="WidthHeight">
			<span>Width = 470, height = 200</span>
		</div>
	</div>
</div>
</body>
</html>

Currently tested under FF3/3.5, Safari4, Chrome2/3, IE7/8, Opera9.6

jQuery IE detection issue workaround

Frank Liu — Tue, 30 Jun 2009 02:00:34 +0000

We recently discovered an issue with jQuery.browser.version detection, it reports wrong Internet Explorer versions on some corrupted IE userAgent strings. A corrupted IE8 userAgent string may look like,

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30618; .NET CLR 1.1.4322; InfoPath.2)

In this case jQuery.browser.version will report browser version 6.0 instead of 8.0, this will result some jQuery plugins to show a 'not implemented' error in IE8. So far we know jqModal and FancyBox are affected. Because they rely on jQuery.browser.version to detect IE6, and run some IE6 specific codes, which caused IE8 to fail, another sad story from MS.

Although we believe it's not the problem with jQuery or IE (Microsoft) alone, the best fix will be patching the plugins to detect IE6. i.e. to detect IE6 properly with jQuery, you will need the following code, which has an extra check by using window.XMLHttpRequest.

View Code JS

ie6=$.browser.msie&&($.browser.version == "6.0")&&!window.XMLHttpRequest;

If you curious about how userAgnet string got corrupted, we don't have much clue about it, some say it's due to an earlier release of IE8 (however as we aware, some IE7 has got the same issue), but in our office 3 out of 10 PCs has got the corrupted string. To fix it, you need to look for the following registry keys,

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent\Post Platform
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\User Agent\Post Platform

Or if you want to do more then just differentiate IEs, you may find a good browser detection Javascript here.

Some side note, you might notice jQuery has marked jQuery.browser deprecated since 1.3 in the favour of jQuery.support. We understand why jQuery would want to take this approach, and it's a good step forward. However jQuery.support would only be good if it tells all the feature differences among browsers, rendering engines, and standard modes. As web develops we don't learn the differences first then start developing a site, we only come across the differences and try to figure out what feature difference cause the different final result will be really time consuming. Until the time all the browsers come to the same standard and feature set, patching and hacking may be the only way for web developers, no one-stop solution would be available at any moment before that epoch. May God blessing all the web developers please.

Yii Framework controller and view path convention

Frank Liu — Wed, 13 May 2009 11:06:56 +0000

Yii Framework has just upgraded to 1.0.5, really glad that Qiang could keep up the momentum to release an update every month. We strongly believe with this level of activity, this open source project will soon becoming the most popular and comprehensive PHP framework. However the only problem this brings is the question "To upgrade or NOT to upgrade?". For a real life project, it's bit hard to keep up with the monthly upgrade, especially when things are constantly changing and improving. Some upgrade really brings the benefit of stability and versatility to the framework, but there are bad times...

Yesterday as usual, we have upgraded our Yii version to 1.0.5, and one of the project we are working on suddenly stopped working almost completely. That was because of a little change in the view path naming convention. To read more about the issue please refer to Issue 307.

To avoid this, please keep this naming convention in mind:

Name controller ID in lowercase only with the very first letter/word capitalized.
If a controller ID has multiple words try to separate them using underscore '_' or hyphen '-' to concatenate them, NOT capitalize any following words
All view path/directory should be all in lowercase and with underscore '_' or hyphen '-' for concatenation.

This directory naming convention should prevent any problem on both Windows or *nix platform.

The only last thing we didn't really agree with Qiang is that a controller would only be accessible by only one URL, not both capitalized or lowercased word(s), simply because an URL should be unified and universal. We would like to leave this discussion to all the Yii enthusiast.

CSS Implementation Chart for IE6,IE7 and IE8

Frank Liu — Thu, 09 Apr 2009 09:00:31 +0000

Since Internet Explorer8 has just joined the infamous IE family, which added bit of work (chaos) in the compatibility war. We have designed the following tool to show the difference between the "recent" IE versions, namely 6,7 and 8. Hope this would help web developers who care about browser compatibility.

Referenced from MSDN: CSS Compatibility and IE

Show CSS3 Implementations
Show Difference Only
Show All IE versionsHide IE6Hide IE7Hide IE8

@ Rules

	IE6	IE7	IE8
@charset
@import
@media
@page
@font-face
@namespace

Selectors

	Note	IE6	IE7	IE8
.value { sRules }	Class
#value { sRules }	ID
E { sRules }	Type
* { sRules }	Universal
ns\|E { sRules }	Namespaced
[att=val] { sRules }	Equality [=]
[att] { sRules }	Existence []
[att\|=val] { sRules }	Hyphen [\|=]
[att~=val] { sRules }	Whitespace [~=]
[ns\|attr] { sRules }	Namespaced
[att^=val] { sRules }	Prefix [^=]
[att*=val] { sRules }	Substring [*=]
[att$=val] { sRules }	Suffix [$=]
E + F { sRules }	Adjacent Sibling (+)
E > F { sRules }	Child (>)
E F { sRules }	Descendant
E ~ F { sRules }	General Sibling (~)
:active { sRules }	:active
:first-child { sRules }	:first-child
:focus { sRules }	:focus
:hover { sRules }	:hover
:lang(C) { sRules }	:lang()
:link { sRules }	:link
:visited { sRules }	:visited
@page :first { sRules }	@page :first
@page :left { sRules }	@page :left
@page :right { sRules }	@page :right
:root { sRules }	:root
:nth-child() { sRules }	:nth-child()
:nth-last-child() { sRules }	:nth-last-child()
:nth-of-type() { sRules }	:nth-of-type()
:nth-last-of-type() { sRules }	:nth-last-of-type()
:last-child { sRules }	:last-child
:first-of-type { sRules }	:first-of-type
:last-of-type { sRules }	:last-of-type
nly-child { sRules }	nly-child
nly-of-type { sRules }	nly-of-type
:empty { sRules }	:empty
:target { sRules }	:target
:not(X) { sRules }	:not()
:enabled { sRules }	:enabled
:disabled { sRules }	:disabled
:checked { sRules }	:checked
:indeterminate { sRules }	:indeterminate
:default { sRules }	:default
:valid { sRules }	:valid
:invalid { sRules }	:invalid
:in-range { sRules }	:in-range
ut-of-range { sRules }	ut-of-range
:required { sRules }	:required
ptional { sRules }	ptional
:read-only { sRules }	:read-only
:read-write { sRules }	:read-write
:after { sRules }	:after
:before { sRules }	:before
:first-letter { sRules }	:first-letter
:first-line { sRules }	:first-line
::before { sRules }	::before
::after { sRules }	::after
::first-letter { sRules }	::first-letter
::first-line { sRules }	::first-line
::selection { sRules }	::selection
::value { sRules }	::value
::choices { sRules }	::choices
::repeat-item { sRules }	::repeat-item
::repeat-index { sRules }	::repeat-index
{ sRule!important? }	!important Declaration
{ list-style : sStyle }	list-style
{ list-style-image : sStyle }	list-style-image
{ list-style-position : sStyle }	list-style-position
{ list-style-type : sStyle }	list-style-type
{ color : sColor }	color
{ background : sBackground }	background
{ background-attachment : sAttachment }	background-attachment
{ background-color : sColor }	background-color
{ background-image : sLocation }	background-image
{ background-position : sPosition }	background-position
{ background-repeat : sRepeat }	background-repeat
{ color-profile : sProfile }	color-profile
{ rendering-intent : sIntent }	rendering-intent
{ background : sBackground1,sBackground2, etc. }	background (multiple)
{ background-clip : sClip }	background-clip
{ background-origin : sOrigin }	background-origin
{ background-break : sBreak }	background-break
{ background-size : sSize }	background-size
{ direction : sDirection }	direction
{ font : sFont }	font
{ font-family : sFamily }	font-family
{ font-size : sSize }	font-size
{ font-style : sStyle }	font-style
{ font-variant : sVariant }	font-variant
{ font-weight : sWeight }	font-weight
{ letter-spacing : sSpacing }	letter-spacing
{ line-height : sHeight }	line-height
{ text-align : sAlign }	text-align
{ text-decoration : sDecoration }	text-decoration
{ text-indent : sIndent }	text-indent
{ text-transform : sTransform }	text-transform
{ unicode-bidi : sAlign }	unicode-bidi
{ vertical-align : sAlign }	vertical-align
{ white-space : sWrap }	white-space
{ word-spacing : sSpacing }	word-spacing
{ font-effect : sEffect }	font-effect
{ font-emphasize : sEmphasize }	font-emphasize
{ font-size-adjust : sSizeAdjust }	font-size-adjust
{ font-smooth : sSmooth }	font-smooth
{ font-stretch : sStretch }	font-stretch
{ hanging-punctuation : sHangingPunctuation }	hanging-punctuation
{ punctuation-trim : sTrim }	punctuation-trim
{ ruby-align : sRubyAlign }	ruby-align
{ ruby-overhang : sRubyOverhang }	ruby-overhang
{ ruby-position : sRubyPlacement }	ruby-position
{ ruby-span : sRubySpan }	ruby-span
{ text-align-last : sAlignLast }	text-align-last
{ text-emphasis : sEmphasis }	text-emphasis
{ text-justify : sJustify }	text-justify
{ text-outline : sOutline }	text-outline
{ text-overflow : sOverflow}	text-overflow
{ text-shadow : sShadow }	text-shadow
{ text-wrap : sWrap }	text-wrap
{ word-break : sBreak }	word-break
{ word-wrap : sWrap }	word-wrap
{ writing-mode : sFlow }	writing-mode
{ content : sContent }	content
{ counter-increment : sCounter }	counter-increment
{ counter-reset : sCounter }	counter-reset
{ quotes : sQuotes }	quotes
{ border : sBorder }	border
{ border-bottom : sBottom }	border-bottom
{ border-bottom-color : sColor }	border-bottom-color
{ border-bottom-style : sStyle }	border-bottom-style
{ border-bottom-width : sWidth }	border-bottom-width
{ border-collapse : sCollapse }	border-collapse
{ border-color : sColor }	border-color
{ border-left : sLeft }	border-left
{ border-left-color : sColor }	border-left-color
{ border-left-style : sStyle }	border-left-style
{ border-left-width : sWidth }	border-left-width
{ border-right : sRight}	border-right
{ border-right-color : sColor }	border-right-color
{ border-right-style : sStyle }	border-right-style
{ border-right-width : sWidth }	border-right-width
{ border-spacing : sSpacing }	border-spacing
{ border-style : sStyle }	border-style
{ border-top : sTop }	border-top
{ border-top-color : sColor }	border-top-color
{ border-top-style : sStyle }	border-top-style
{ border-top-width : sWidth }	border-top-width
{ border-width : sWidth }	border-width
{ caption-side : sLocation }	caption-side
{ clear : sClear }	clear
{ empty-cells : sEmptyCells }	empty-cells
{ float : sFloat }	float
{ margin : sMargin }	margin
{ margin-bottom : sHeight }	margin-bottom
{ margin-left : sWidth }	margin-left
{ margin-right : sWidth }	margin-right
{ margin-top : sHeight }	margin-top
{ padding : sPadding }	padding
{ padding-bottom : sPadding }	padding-bottom
{ padding-left : sPadding }	padding-left
{ padding-right : sPadding }	padding-right
{ padding-top : sPadding }	padding-top
{ table-layout : sLayout }	table-layout
{ border-break : sBreak }	border-break
{ border-image : sImage }	border-image
{ border-radius : sRadius }	border-radius
{ box-shadow : sShadow }	box-shadow
{ bottom : sBottom }	bottom
{ clip : sClip }	clip
{ display : sDisplay }	display
{ height : sHeight }	height
{ left : sPosition }	left
{ max-height : sMaxHeight }	max-height
{ max-width : sWidth }	max-width
{ min-height : sMinHeight }	min-height
{ min-width : sMinWidth }	min-width
{ overflow : sOverflow }	overflow
{ position : sPosition }	position
{ right : sPosition }	right
{ top : sTop }	top
{ visibility : sVisibility }	visibility
{ width : sWidth }	width
{ z-index : vOrder }	z-index
{ overflow-x : sOverflow }	overflow-x
{ overflow-y : sOverflow }	overflow-y
{ orphans : nLines }	orphans
{ page-break-after : sBreak }	page-break-after
{ page-break-before : sBreak }	page-break-before
{ page-break-inside : sBreak }	page-break-inside
{ widows : nLines }	widows
{ fit : sFit }	fit
{ fit-position : sPosition }	fit-position
{ image-orientation : sOrientation }	image-orientation
{ page : sPage }	page
{ size : sSize }	size
{ cursor : sCursor }	cursor
{ outline : sOutline }	outline
{ outline-color : sColor }	outline-color
{ outline-style : sStyle }	outline-style
{ outline-width : sWidth }	outline-width
{ appearance : sAppearance }	appearance
{ box-sizing : sSizing }	box-sizing
{ icon : sIcon }	icon
{ nav-down : sNavDown }	nav-down
{ nav-index : sIndex }	nav-index
{ nav-left : sNavLeft }	nav-left
{ nav-right : sNavRight }	nav-right
{ nav-up : sNavUp }	nav-up
{ outline-offset : sOffset }	outline-offset
{ outline-radius : sRadius }	outline-radius
{ resize : sResize }	resize
{ column-break-after : sSize }	column-break-after
{ column-break-before : sSize }	column-break-before
{ column-break-inside : sSize }	column-break-inside
{ column-count : sCount }	column-count
{ column-gap : sSize }	column-gap
{ column-rule : sRule }	column-rule
{ columns : sColumns }	columns

Values

	IE6	IE7	IE8








\code
rect()
url()
counter()
attr()
calc()
(names)
(#rrggbb or #rgb Notation)
(rgb(r,g,b) Notation)
(system colors)
transparent
(rgba(r,g,b,a) Notation)
(hsl(h,s,l) Notation)
(hsla(h,s,l,a) Notation)
auto
inherit
initial

Good news or Bad news, IE8 is here

Frank Liu — Fri, 20 Mar 2009 00:36:32 +0000

To those who worked hard on getting IE8 released on schedule, congratulations! In the same time we feel sorry to those who care about website compatibility, this means you have one more IE to hack on. Maybe this is the way how Microsoft helps to create jobs in the crisis, thanks! Anyway here's some critics from my own opinion. Firstly it took over 15 minutes to upgrade my IE8 RC1 to IE8 with two restarts. If you haven't noticed IE8 by default is not backward compatible to its predecessors. A good example is the 'opacity' in css, to get your page displayed correctly in IE8 you need to. Either in the tag put,

View Code HTML

or write something like this in the CSS,

View Code CSS

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

However this may break PNG images with alpha channel from displaying properly. Yes, another PNG issue, :-< Read more on Bb RealTech If you want find out more about difference IE8 has to offer, please check out CSS3.info Enjoy hacking another IE!

mwbModelCommand, Yii Framework and MySQL Workbench

Frank Liu — Thu, 05 Feb 2009 13:26:32 +0000

In the past few weeks we have been exploring with Yii Framework, and two of us have started porting some of our project to Yii Framework. One of the first few things that caught our attention is the CActiveRecord model classes, which require relational rules to describe relationships among database tables. We are glad that Yiic can help to create project scaffolds and create controller, model and CRUD, however it's not very practical to manually add all the relationship if your project has over 10 tables.

Our normal practice prefers to design database with relational diagram, so it not only sets out the table schemas but also visually demonstrates the relationship of database tables. However in this fast changing world, without the right tool most the relational diagram tends to out of sync with real production database. For most the of our project, we create ERD and generate database from the diagram in the design phase and later on in the development phase, most the developer choose to update the schema on the table directly, since that's quick, and most of them don't have the habit to update the ERD with relavant changes. You will feel lucky if your database design tool comes with reverse engineering, which can help you syn with your database at a later point still, otherwise you'll be purely rely on your bare eye and hand to syn among database table your model classes and the ERD.

So I believe when it comes to database design it should always be diagram driven, therefore if there's any changes need to be made, always update the digram first and carry on to your physical table and model class. Although we are still looking for good database migration tools to manage schema diffs. We have written a little script to help Yii Framework to work with MySQL Workbench (which we use to model MySQL databases), the purpose of the script is to batch create model classes for Yii Framework (although Yiic can generate models one by one, we want it happen at once and for all), and with the help of mwb file it can create the relational rules for the models, so there's no manual translation needed while you creating the models. Since it's a Yii shell command, we have named it 'mwbModelCommand'.

It's available for download at this Yii Extensions page, or Yii Framework mwbModelCommand (direct link)

Hope this script will save your time on relational model creation, if anyone have issues or suggestions mwbModelCommand please feel free to post back.

Wish List (Todo),
A tool (set) to stream line the database migration, so it would not only creates the models, but may also update (revert) models as well as database table schema at once, and data safe if possible. Please advice if you know something good out there.

Useful PHP Tools

Frank Liu — Thu, 22 Jan 2009 01:29:40 +0000

Smashing Magazine did it again, a good collection of php tools, 50 Extremely Useful PHP Tools Please comment on your faviourate ones.

Setting up wildcard virtual hosts for web development environment

Frank Liu — Thu, 22 Jan 2009 01:04:21 +0000

We used to have dev site hosted under sub directories of localhost, e.g. http://localhost/project/abc/. When it comes to development and testing, we really want to keep the environment as close as possible to the production environment, so it would lot easier to deploy and maintain. Imagine you have to refer to /images/logo.png from a page like /we/have/got/a/test/page/index.html, you really want absolute path in this senario, however in order to work with sub folder based dev environment you either having awful relative links (which would be easily break down when you relate files), or different absolute path as if you would deploy that on the production server. Which is not very practical at all. To solve the problem, we thought about having separate virtual hosts for each project, ie. abc.localhost for abc project and so forth. There are several ways you could achieve this in apache configuration.

With vhost_alias_module enabled
```
    VirtualDocumentRoot c:/projects/%1/
```
take abc.localhost for example, where %1 represents abc, and %2 would represent lcoalhost

With mod_rewrite enabled


    ServerAdmin root@localhost
    DocumentRoot "c:/projects/"
    ServerName localhost
    ServerAlias *.localhost
    RewriteEngine on
    RewriteCond %{HTTP_HOST} ^([^.]+)\.localhost$ [NC]
    RewriteRule  ^/(.*)$ /%1/$1

With mod_rewrite and rewritemap


    ServerAdmin root@localhost
    DocumentRoot "c:/projects/"
    ServerName localhost
    ServerAlias *.localhost
    RewriteEngine on
    RewriteMap   lowercase  int:tolower
    # define the map file
    RewriteMap   vhost      txt:vhosts.map
    # deal with aliases as above
    RewriteCond  ${lowercase:%{SERVER_NAME}}  ^(.+)$
    # this does the file-based remap
    RewriteCond  ${vhost:%1}                  ^(/.*)$
    RewriteRule  ^/(.*)$                      %1/$1

Then create the vhosts.map file to contain the hosts to documentroot map, e.g. abc.localhost c:/project_08/abc bcd.localhost c:/project_09/bcd

Both method 1 and 2 would wildcard map *.localhost to c:/projects/*, and method 3 will allow you to specify documentroot of each domain in the vhosts.map file. With extra virtualhost you don't need to alter httpd.conf any more, all you need to do is create the subdomain and create the project folder in appropirate location. Since the hosts file doesn't support wildcard entry, for each of the subdomain of localhost you may need to create a separate entry, however it should only take few seconds, and nothing needs to be restart to take effect, which is easy and good enough. Alternatively if you have access to your DNS server, you may setup wildcard on the localhost zone, so everyone in the dev team will have access to *.localhost without alter anything in the local hosts file. Hope whis will in a way help web developers to deliver project faster.

45 Useful and Fancy jQuery Techniques

Frank Liu — Tue, 20 Jan 2009 11:58:05 +0000

Please check out this post on Smashing Magazine, 45+ New jQuery Techniques For Good User Experience really good collection of jQuery tricks for web development.

Install Ruby on Rails (RoR) on Windows (zlib.dll error)

Frank Liu — Tue, 20 Jan 2009 11:14:44 +0000

Although Orite has been focusing on PHP development for quite few years now, we are open to new web technologies and always exploring new tools and learning new skills. I still remember when we first heard Ruby on Rails few years back, we were quite amazed about the raid development framework, and the simplicity of the Ruby syntax (which is really OO and human readable). After the recent PHP framework research, we still not 100% happy with any framework in the PHP world. So we decide to take a look at RoR again and try to get some inspiration, and if someday when RoR rules the world we would not be too far behind hopefully. After digging the net, there's no one RoR package that's up to date and easy to install for windows, I guess that's because most the developers are on Macs and Linux. Although we have Linux as testing servers and Mac as graphic stations, all our web developer are happy windows users. We were trying to follow the instructions on RoR wiki, however the One-Click Installer is bit out dated (since official RoR website recommends Ruby 1.8.7). So here's our own instruction of getting RoR on Windows,

Download the binary package from official Ruby download page
Unzip and put in to a folder, say c:\ruby
Add c:\ruby\bin into the environment path (if you don't know how, here's the official Microsoft How To Manage Environment Variables help)
Get the latest RubyGems from RubyForge, and unzip it into a folder
Now launch CMD and goto the RubyGems folder, then type >ruby setup.rb to setup RubyGems
Here comes the problem, when we try to install rails by issuing the command >gem install rails Window alerts an error about missing zlib.dll, and ruby only comes with the zlib.so file under the lib\i386-mswin32 directory. To fix it you need the zlib.dll file under ruby\bin\ folder, if you have apache for windows installed, simply grab the zlib.dll from apache\bin folder, which should work. Otherwise you need to download zlib.dll from any of the dll hosts by search on Google.
The the >gem install rails command should work
And you may install mongrel, the http server for RoR application by >gem install mongrel

Then the RoR is ready to go, you may follow instructions on http://rubyonrails.org to start coding in Ruby for web development. If we don't get too busy with PHP dev work or too bored with RoR, we will post back any interesting findings in RoR from the perspective of PHP developers.