Quality Reads

Wednesday, December 27, 2006

Add A Translation Tool To Your Blog

I added Google Analytics to my blog a couple weeks ago because I was interested to see where my web traffic was coming from. I was surprised at the percentage of views coming from non-English speaking countries (~33%). I started wondering if all these individuals were adept at reading English or were just muddling through my posts to get to the code (most of the views were for my code-related entries). After a minute or two of contemplation, it dawned on me I could make their life a whole lot easier by providing a translation tool. So, I jumped onto Google Translation and took a quick look at how they structure their URL variables. Here's the HTML/Javascript widget I came up with:

<form action="http://www.google.com/translate" onsubmit="this.u.value=window.location.href" method="GET">
<input value="en" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="u" type="hidden"/>
Select Language: <select name="langpair">
<option value="en|fr"/>French
<option value="en|de"/>German
<option value="en|it"/>Italian
<option value="en|pt"/>Portuguese
<option value="en|es"/>Spanish
<option value="en|ar"/>Arabic BETA
<option value="en|zh-CN"/>Chinese (Simplified) BETA
<option value="en|ja"/>Japanese BETA
<option value="en|ko"/>Korean BETA
<option value="en|ru"/>Russian BETA
</select><br/>
<input value="Translate" type="submit"/>
</form>

The form posts to Google's Translation Service and seems to do a good job of converting the page to the selected language. Please be aware of two things:

  1. The languages listed in Beta can mess with the page layout a little bit. Remove those from the select box option list if thats a major concern for you.

  2. The WHOLE page will be translated. If some of your posts deal with code examples, they will be turned into some bizarre/humorous pseudo-code.


To use the widget, just copy and paste the above code into the proper section of your blog Template. If you are using Blogger, paste the code into a "Third Party HTML/Javascript" module.
The widget works great and provides a nice way for people to read your posts in their native tongue. Please let me know if you run into any problems. I'll be more than happy to troubleshoot issues as they arise.

Enjoy!

Tuesday, December 26, 2006

Saturday, December 23, 2006

watch() :: One of Many Missing JS Functions in IE

I've been playing around with Adobe's Flex for a couple months now and one feature that keeps impressing me is the ease with which you can bind Actionscript variables to UI Elements. I started wondering if there was any way to attach an onchange event to a JavaScript variable so I could replicate the effect with HTML controls. After a little searching on Mozilla.org, I found the watch() function. You can check out the documentation here. Essentially, it will run a function that you define every time a JS variable is changed. Something very useful if you use data access objects to pass information back and forth in your AJAX applications. The problem is that IE doesn't support the method (surprise, surprise). So I set out to create a work around. Here's the resulting function:
 /* Cross Browser Watch Function */
Object.prototype.xwatch = function (prop,func){
if(!Object.watch){
new IEwatch(this,prop,func);
}
else{
this.watch(prop,func);
}
}
var IEwatch = Class.create();
IEwatch.prototype = {
initialize: function(obj,prop,func){
this.obj = obj;
this.prop = prop;
this.func = func;
this.oldvalue = this.obj[this.prop];
setInterval(this.check.bind(this),50);
},
check : function(){
if(this.obj[this.prop] != null && this.obj[this.prop] != this.oldvalue){
this.oldvalue=this.func(this.prop,this.oldvalue,this.obj[this.prop]);
}
}
}


First, I start off by extending the Object Class by adding a new method called xwatch (cross-browser watch). If the browser supports watch() then the native function is used otherwise my IEwatch method is used. IEwatch polls the variable specified looking for a change in the variable's value. Kinda crude but it works. I haven't run into any problems with race situations yet.

I also created the function below to bind a JS variable to another Object. You could use it to bind a variable to a text input or the innerHTML property of a div etc etc.

/* Data Bind Functions */
var dataBinding = Class.create();
dataBinding.prototype = {
initialize: function(sourceObj, sourceProp, destinationObj, destinationProp){
this.srcObj=sourceObj;
this.srcProp=sourceProp;
this.destObj=destinationObj;
this.destProp=destinationProp;
var temp = this.update(this.sourceProp, this.srcObj[this.srcProp],this.srcObj[this.srcProp]);
this.create();
},
create: function(){
this.srcObj.xwatch(this.srcProp,this.update.bind(this));
},
update: function(id, oldvalue, newvalue){
this.destObj[this.destProp] = newvalue;
return newvalue;
}
}

Note, these Classes required prototype.js to function.

Saturday, November 11, 2006

Optimizing Page Loading in ColdFusion

I was reading this posting by Aaron Hopkins (a Google Engineer) about optimizing page loading when I started to think about my experimentation with different AJAX implementations. Every time I tried a new implementation, I'd end up with a hodge podge of javascript files on my demo website (some from the previous framework, some from the new). After reading that post, I've come to realize that even though it may be nicer to link to each javascript file individually, this behavior can negatively affect load time. This is due in large part to modern browsers limitations to only allow two outstanding HTTP Requests at any time.
Personally, I still like keeping things organized but I don't want to sacrifice performance for it. So, I've started using the following approach for all my sites:
  • Create two ColdFusion pages (or PHP, Ruby, etc) that change the mime type to "text/js" and "text/css" respectively.

  • Then include all the appropriate js or css files using <cfinclude>.

/* js_compilation.cfm*/
<cfcontent type="text/js">
<cfinclude template="js/core.js">
<cfinclude template="js/prototype.js">
<cfinclude templat="js/rico.js">
  • Lastly, you should simply reference that file in the Head section of the calling page.

<script src="js_compilation.cfm" type="text/js">
Do the same thing for all your assorted CSS files and you're load time should be significantly improved without sacrificing organization. You can keep your file structure simple and efficient.
Cheers,
Todd

PS-I know everyone should be crunching their JS files into one library but we can't all afford to do that. This is a simple step that everyone can handle.

Tuesday, November 07, 2006

Stikkit! and my Vista Experience

I should probably start off where I left off. Vista. Once I got past all the flashy new UI components,I was left with a very sour taste in my mouth. Backward compatibility is a serious issue. I realize I'm using a pre-release version but more than half of the programs I became accustomed to using on XP crash on Vista. The most annoying of all is Eclipse which throws a JVM error (Java error) randomly when I'm doing any file folder manipulation. Since I use it all the time for programming, its particularly disruptive. Another killer is the pre-release for Fireworks 9 (Adobe's image editing suite geared towards web design), I haven't been able to get the thing to install yet. Tried everything under the sun, crashes right when I starts the main installation. You know when the little status bar comes up. I've come to hate that damn bar. I guess I shouldn't surprised. Microsoft's products, excluding SQL Server, tend to be skin deep apps. Real pretty when you first pull them up and you read about all the stuff they do but then you realize all the hoops you have to jump through to get there. I think thats the reason I've become so partial to programming all my work rather than using Excel et al. I can define the interface to support exactly what I'm doing. Nonetheless, lets move on to the new web 2.0 app. Stikkit. Its got a very sleek UI with some sweet features not overtly apparent. The sites general concept is a web-based stick-it note, hence stikkit. Type in something you want to remind yourself of with a date or perhaps a buddy you want to share the note with and the application figures it out on its own. I tested it out by typing "I have a presentation due on Monday". In response, it created a calendar event automatically. I wonder if they're using an AI friendly server-side language like python to get the job done. I'll poke around and see what I find out. Cheers,
Todd

Tuesday, October 24, 2006

Holy Crap! My two greatest passions combined.

The two things I do spend money on. Sunglasses and music have just been combined! Check it out: http://oakley.com/o/o2794d/p8743 . I'm not someone who jumps on trends just because but in this instance I'll make an exception.
I'm very excited for these + ski season.

Monday, October 23, 2006

Calling All Flex/ColdFusion Coders

So I finally got the go-ahead to build my own development team today. I'll be building the first ERP system designed specifically for the small business auto leasing company. I'm looking for ColdFusion/Flex expert plus an HTML/CSS Design Coder. The system will be sold on a subscription basis and will feature mass integration with banks, remarketing organizations, and auto manufacturers. In addition, you can expect all the traditional ERP systems such as Sales and Marketing tracking features and accounting/finance functionality.
Exciting times...

Wednesday, October 18, 2006

Trying New Things....(work in process)

I've decided to give a few new applications a look and I may as well share my experience with everyone in the process.
  • Windows Vista: I'm actually installing the OS right now on my other computer. I'll let you know how it goes once I get a little farther along.
  • FireFox v2: The full version is not ready for release yet but they are up to Release Candidate 3. So far so good. They've added a built in spell cheker (I only have IE on this machine). An excellent feature for web developers too lazy to connect their web apps to google's spell check web service. Also, there's greatly enhanced DOM/W3C compliance for all you AJAX developers out there. I don't even like to look at the websites I'm developing in version 2 (even though they look sweet) since so few other people are using it. It just pains me to switch back to IE.
  • ColdFusion version 8: No, I haven't actually had a chance to check it out but I've been given a few hints as to the bonus features we can all expect. For starters, PDF web documents/forms will be multi-functional. People will be able to input the information on the screen and submit the data like a regular HTML form OR print it out like a plain 'ol PDF. Sadly, I don't think there's been any advancement on including digital signatures. Spry (Adobe's AJAX framework) will have some hooks in dreamweaver making it very easy to pass information back and forth between the client and server-side CFC's. I'll continue to probe my source for more info but hopefully this will get you thinking.

Gotta focus on getting Vista up and running. I'll update this post when I found out more.

Monday, October 02, 2006

Developing Data Systems for the Small Business

Its an interesting situation being in a small company transitioning to medium/large volume of business. In general, employees are still performing a wide range of jobs (you wear many hats) and being stretched increasingly thin.
An up and coming small business rarely has a business application that meets their needs (if they are indeed up and coming). So, they need an app that encapsulates or replaces their existing technology and has the ability to scale with future percieved or unpercieved growth. I have a few suggestions for anyone starting a project to complete such an enterprise app:

1. Stay away from straight data entry applications. Yes, they're quick to create and effective for record keeping but they don't command a high usage rate. If your application produces something used in the day to day business operations, then the average employee will be compelled to use your application correctly and often (plus, they'll help you debug it).

2. Look for opportunistic data entry. There are many times when you can't get all the information you need in one format. Rather than default to a standard data entry app, get as much information as you can with every possible opportunity (w/in reason). For example, if you have to gather the colors for all the vehicles owned in a fleet, allow people to email vehicle information from within the application and just a add a color field.

3. Distribute the load of data entry to your suppliers and clients. Seems so simple but it gets overlooked time and time again. Allow your clients a standardize way to submit their orders to you, it will allow you to provide better turn around on their services while freeing up company man hours. Most of all, get your suppliers to provide you with all your invoices, supply information, etc. the way you need it. Most company still follow "the customer's always right" motto.

Above all else, cut out any monotonious/repeatitive tasks whenever possible.

Tuesday, September 26, 2006

Forcing some coherent thought...

This is my first post in my new blog. The first of many, hopefully...I've never been much of a blogger. For some reason, I've always found taking the time to put my thoughts on paper was just time that could have been better spent producing something. So, to meet myself in the middle, I've decided to compose my business thoughts and ambitions; plus, keep people posted on the sweetest corners of the web that the average person might not wander. Stay with me, you won't regret it.

Websites you need to see no matter who you are (Web 2.0 Apps):

  • EditGrid.com (google spreadsheets < editgrid)

  • ZoHo (replaces everything in the Microsoft Office package)

  • Gawker Stalker (been alive and kicking for a year now..scary use for 2.0 app)


Technology thats gonna kill in the next couple years:

  • Apollo (think web browser with all the capabilities/ resources of a desktop app)

  • Open Laszlo (creating an open source Flash/DHTML application dev. tool)

  • Google Web Toolkit (Knock out client-side code w/ Java...nice)


So much more to say but not today.

PS-I'm still learning the intracacies of Python but I'm encouraged to see blogger using some *.py CGI's.